Tutorial

Elementor Image transition to header

Video

Description

This tutorial was inspired by a pot in the Global Elementor Community https://www.facebook.com/groups/Elementors/posts/4879264128866001/

The author was looking for ideas to transition an image from a page into the header.

This demonstrates one way, using Elementor Sticky Effects and custom CSS.

Steps

Create a new Elementor Page with an "Elementor Canvas" template
Add a dummy header and make it Sticky
Add a Content Section

Create a new Elementor Page with an "Elementor Canvas" template

Typically you would apply the custom CSS to an actual Header section for a page.

For demonstration purposes, I will create a blank page with a top section behaving like a header.

Create a new Elementor Page
Set the Page Layout to "Elementor Canvas"
Change the page Title

Add a dummy header and make it Sticky

Add a new section with one column
Set the Column Vertical Align to "middle", Horizontal Align to "Space Between"
Set the background colour to contrast with the site logo you will use
Drag a Site Logo to the Column
Set the Advanced->Width to "Inline(auto)" - You May need to use a custom width depending on your logo.
Set the Style->Width to 100%
Drag a "Nav Menu" to the Column
Set Advanced -> Width to Inline(auto)"
Style the Nav as needed
Select the Section -> Advanced -> Custom CSS
Copy the Custom CSS below and paste it into Custom CSS
Select Advanced -> Motion Effects, Set to Sticky "Top"
Set the "Effects Offset" to 300 for now.. we will adjust this later

Add a Content Section

Add another Section
Set the background colour to contrast with your logo
Set the top and bottom padding
Add a logo image, we will just use the site logo. You could use a different logo version here.
Add a Text Editor Widget and fill it with dummy text, so we have something to scroll

Code (click to copy)

CSS for Header Section (css)

selector .elementor-widget-theme-site-logo {
    opacity:0;
    transition: opacity 0.5s;
}
selector.elementor-sticky--effects .elementor-widget-theme-site-logo {
    opacity:1;
    transition: opacity 0.5s;
}