If you’re thinking of modifying the header provided by your theme or simply creating one according to your preference, then quit that kind of thinking! With the Elementor page builder, creating custom headers has never been easier! No more bloated CSS or other unnecessary custom methods just to achieve as simple as this. In this Elementor Tutorial creating this is as simple as dragging and pasting!
Follow the steps below to get started:
Go to the dashboard of your website. Proceed to “Elementor” and click “My Templates”.
Click ‘Add New’. A panel will open afterwards wherein you will able to select the template type you want create. In this case, choose ‘Header’ in the dropdown and name it ‘Custom Header’ (for the sake of this tutorial) or any name of your choice.
Upon creation, another panel will appear showing different pre-templates already made for you to edit. For now, just close this panel as we will create our own. Similar to creating pages with Elementor, we will build the header using Elementor Builder.
It would be up to you if you want to show the header in a box container or full. For this example, I’ve set up the header to be in ‘Full’ content width. Fill up the content you want for the header after doing so.
Assuming you already made the header, the next step is to set the background of the section to transparent. (NOTE: You may need to change the background to black if the texts are white when you want to edit the contents of the header. You would just need to make it transparent right after )
Add a class to the header and add the following CSS. This is so that the header would overlap with your page content and not leave a space behind it. (NOTE: that you may need to adjust the padding of the first section of the page to give way to the transparent header.)
The header will now be positioned at the top of the page and is transparent! Please note that the padding I’ve used here could be changed to your preference- this is just to make sure the content would have ample spacing from the transparent header.
Thanks for making this far! 🙂
We hope we’re able to help you through this article. You can check out our 1350 Elementor website examples to get inspirations for your website, or browse our 2067 Elementor layout templates instead to download free and premium ready-made website templates. We also have a tutorial on how to save, import and export templates in Elementor. If you have any other questions, please let us know in the comments sections.