How can I have overlay header only for home page?
The general approach here is that first, we set our global header in the Customizer panel. This is the header that will be the default header for all of the pages.
Let say a simple header layout, with a simple blue background and the Overlay Header options turned OFF:
Now let assume that we have a big top section on our home page with a background image and we like to have the overlay header on top of that. Currently, with the normal settings that we set in the Customizer, it looks something like this:
To make this possible, you need to create a duplicate of your header. We are going to set the
background color of the new header to
transparent and set it as the header for the homepage only.
The quickest way to create a duplicate of your header is to save it as a template and then create a new empty header and import the template and adjust it with new styles. For more information on how to work with templates in Elementor, please check out the following link:
After you created your
new header, you need to set the background color to transparent:
When this is done, next you need to set the new header to your homepage. This is done in the
Page Options section.
To access the Page Options section, open your page in the WordPress default editions and scroll to the bottom. There you can see the Page Options section.
First, set the header:
Then enable the
Overlay header option:
The final result will look something like this:
Next, you can change the logo too. Let say a white logo for the home page, because it has an image on the background and then a normal black logo for other pages. You can do that using the Custom Logo option:
