Elementor has a really cool feature that allows us to create templates and insert in most parts of our website, which is awesome! Before now, we would have had to get our hands dirty with code from the base theme that we use, often times modifying code through hooks and spending time on stack overflow trying to figure out why it’s not working. The feature has been in Elementor for a while but I honestly only just started using (was I under a rock!). Anyway lets jump into it!
I am going to assume that like me you have not been using Elementor templates in your header so I will show you that process. If you have not been living under a rock like me, then skip to the part where we make our header transparent and magic happens here
Step 1
Go to your WordPress dashboard and look for “Templates” in the sidebar. It’s usually just below “Elementor” and click “Add New”
Step 2
Once you select “Add New” a new screen will appear with a popup. This allows you to select the template type that you want to create and give it a name. In this scenario since we are working on the header, we will select “Header” from the first drop down and Give our template a name in the second drop down. In this case we will call our heading “Custom Header”; you can give yours a different name if you’d like. Then click the “Create Template” button
Step 3
A screen will now appear that allows you to choose some pre-built Elementor templates. Since we are making our own transparent header we will disregard that (click outside the box or close button) and start building. The interface will look just like the one we use to build our regular pages and it will allow you to use all the same widgets. For this tutorial we will use the nav menu widget. You will need to create a WordPress menu in the dashboard (Appearance > Menus). You can adjust the width of the section to be full width, regular or a custom width.
If the section looks really tall then go to the section settings > advanced and set padding to “0”. You can adjust this to better suit your needs.
Step 4
This is an important step. We will now set the header background to transparent. Sometime you may need to edit text in this section, but if that text is white you may not be able to see it. To help with this, you can use a solid color background while working and then change it back to transparent when you are done.
Step 5
Almost done! Now, add a class to the Elementor section from the “Advanced” tab in the section settings. We will add class “transp-header”. After adding the class, we will add the CSS below to the website. If you don’t know how to add CSS, here is a really short video that will help you.
.transp-header{
position:absolute!important;
width:100%;
left:0;
z-index:999;
}The header will now be at the top of your page and it will be transparent. Now you can add background images to your following page section and it will show right through. Simple right!
If you do not have Elementor pro, then go get it here (affiliate link). There are many useful features in the pro version that could help you give your visitor a better website experience.
Thank you for reading our tutorial. Comment below and let us know if you need us to provide any specific tutorials to help you on your website journey. And remember, if you are a website owner that needs help with long term maintenance, then Sitepact is the place to be. Check out our maintenance pricing and head on over to our blog for more great articles and tutorials.
