Bored of Simple WordPress Website Header?
Every once in a while when we have used a certain theme for quite some time, we tend to get tired of the monotonous and outdated header on the WordPress website’s homepage and other pages. The good news is that you can customize and create the header on your WordPress website in a way you like. You can do this by using the Elementor page builder that can help you create custom header — and that too in a few steps.
In this blog, we will look into creating transparent header where we’ll make it as easy for you as dragging and dropping to save time and achieve more results in a limited time. So, are you ready? Let’s get started….!
Creating a Transparent Header with Elementor Template in Few Steps
There are altogether 6 steps that you can use in order to create a transparent header with Elementor template. These are as follows:
Step# 1:
Step# 2:
Step# 3:
Step# 4:
Step# 5:
Step# 6:
You will have to position the header at the top of the page and make sure it is transparent. We used this padding to allocate appropriate spacing to content from the transparent header. But, you can change this padding as per your preferences.
Once you are done, just press next and your transparent header with Elementor Template will be created for your WordPress website. Wasn’t that simple!!
So, on a job well done, we are adding a little bonus technique as well to make your WordPress website more attractive.
Read on!!
Bonus Technique: Change the Header Color while Scrolling
Now, we’re going to look into how to change the header color when you scroll downward/upward. This will help you enhance the look-and-feel of your WordPress website to keep your site’s visitors hooked up. Let’s begin:
Step #1:
Continuing from the Step # 6 mentioned above in the section of ‘creating a transparent header’, go to the advanced section. Here you will be able to set Effects Offset value as per your preference (you can increase/decrease the value as per your preference).
For the purpose of understanding, we’ll select the offset value to 300. The notable thing is that the longer the number is, the longer it will take to change color when you will scroll it.
Step 2:
.elementor-sticky--effects{ background-color: #000; }
Now, your transparent header will change color at the time of scrolling. See the image below to learn how to fill out your Advanced tab for getting desired the effects:
We are not done yet!!!
What if we add more things to give your transparent header more professional look-and-feel? Won’t that be impressive?
P.S. You shouldn’t be worried about loading speed because it won’t harm your website in any way.
Here are the two things that you can add to your WordPress website in the header to give it an enhanced look:
- Reduced header height when scrolling down
- Use snap-free images for professional-look
1. Reduced Header Height while Scrolling Down
To start off with, you’ll have to customize CSS again. Go the advanced tab of the image for the header, add a CSS class and give it a name:
This sets the limits for the size changes. Now, set the limits for size changes such as:
.elementor-sticky--effects .logo img {
width: 50% !important;
}
Well, you’re free to tweak these values as per your preferences. And, therefore, your header should change size accordingly.
2. Use snap-free images for professional-look
Now, you can mix animation and art together here. You can add animation to the header while changing size. We have provided code below. Well, this code works to set the transition rate and we’ve chosen 0.5 seconds as the transition rate but you should choose the transition value which best suits you.
.elementor-sticky--effects{
background-color: #000 !important;
transition: background-color 0.5s ease !important
}
.elementor-sticky--effects .logo img {
width: 50% !important;
transition: width 0.5s ease !important
}
Now, this transparent and professional-looking header will change color when it is scrolled down.
Wrapping Up - Create Transparent Header With Elementor Template
In this blog, we learned about how to create transparent header with Elementor template. Not only this, but also we went through styling and animation of the transparent header when it’s scrolled downward. Rest assured: this add-on animation and styling in a transparent header will make your homepage and rest of the pages more visitor-friendly and attention-grabbing.
Well, If you’re not tech-savvy and creating transparent with Elementor seems like a hard-nut-to-crack, you can contact us for making your WordPress websites and custom websites visually appealing.