Tutorial

Elementor Image transition to header

Uses Plugins

Elementor PRO

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.

1

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.

  1. Create a new Elementor Page
  2. Set the Page Layout to "Elementor Canvas"
  3. Change the page Title
2

Add a dummy header and make it Sticky

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

Add a Content Section

  1. Add another Section
  2. Set the  background colour to contrast with your logo
  3. Set the top and bottom padding
  4. Add a logo image, we will just use the site logo. You could use a different logo version here.
  5. 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;
}