How to Create Transparent Header using Elementor Template - WpBuilt 1350476922971634823
How to Create Transparent Header using Elementor Template

How to Create Transparent Header using Elementor Template

Want Elementor Addons for your Website? Click here!

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:
Step 1
Go to the dashboard of your website. Proceed to “Elementor” and click “My Templates”.

Transparent Header - Steps

Step 2
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.

Step 3
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.

Step 4
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.

Create transparent header - Steps

Step 5
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 🙂)

Create transparent header - Steps

Step 6
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.)

Create transparent header - Steps

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.

Create transparent header - Steps

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 4769 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.

This Post Has 10 Comments

  1. Edgar

    Hmm, not working for me. Anyone here have other solution?

  2. Nigger bitch

    why would you put the CSS code in a screenshot? Now I can’t copy it… you fucking idiot nigger

  3. Markus

    Finally found what I was looking for for more than 1 month! Thanks a lot!

  4. Resolute

    How do you add a class to the header, as mentioned in the guide?

  5. Tadas

    Great tutorial!
    Helped me!

  6. Relax

    Thanks for this write up! I have created a header but it’s only showing on pages after the home page. Do you have any ideas how to change this to ensure that it comes up on all pages?

  7. Brad

    Thanks!

    Great tutorial!

    One problem I’m having is that the header then covers up the sections when editing in elementor and you cant get to things to edit them!

    1. Toby

      Use the navigator then you can just click on the section you want to edit.

  8. brochure printing

    Simply want to say your article is as amazing.
    The clarity on your put up is just spectacular and that i can think you are knowledgeable in this
    subject. Well along with your permission allow me to seize
    your RSS feed to keep up to date with coming near near post.
    Thank you 1,000,000 and please carry on the enjoyable
    work.

    1. Elementor Resources

      Sure thing mate 🙂 I’m glad you like our tutorial article. Let me know what you need.

Leave a Reply

×

Cart