Elementor headers can easily be made using the header’s and footer’s theme builder feature of the plugin.
- Elementor Header Templates Free
- Elementor Header Footer
- Elementor Edit Header
- Free Elementor Header Templates
Create Headers Using Elementor’s Theme Builder Last updated on November 13, 2020 The Header Template lets you easily design and edit custom WordPress headers. Under Templates Theme Builder Header Add New, from the dropdown select Header and click Create Template.
In a previous article, I showed you how to create a sticky header with Elementor. This time, you’ll learn how to make a transparent header with Elementor.
- First, open your WordPress Dashboard and navigate to ElementorTemplates. Click on the Green Add New Header button. From the new pop-up select Header as the type of Template and Give it a name. As soon as you hit the Create Template button it will open up the Template Library Pop-Up.
- All UX templates are complete with all the modules needed for that particular section. This way you save time and easily build a page with different premade sections. Start by selecting a Header, then maybe a Hero section followed by Feauture and different Layout sections and then finish with a Footer section.
Combining both methods together enables us to create any header’s design we can dream of.
What is a Transparent Header
The transparent header is the section at the top of the page and has a very light or no background color.
The transparent header is on top of the other sections and showing the content of the section behind it. It’s a relatively new style that can be seen on many websites.
How to Make a Transparent Header with Elementor
Creating the transparent header is an easy steps process that can be done by changing the section’s settings combine with some simple CSS rules.
Step #1 – remove the header’s background
In the first step of the process, we need to remove any background color that the header may have.
Click on the header’s section, switch to the Style tab, and remove the header’s background color.
Step #2 – change the Z-index
While still editing the header, move over to the advanced tab and increase the z-index property to 10. The z-index is a way to rank layers and a large number is necessary to make sure the header will be the front one.
Step #3 – add custom CSS
In this last step, we will add the custom CSS rules to make the header float on top of the other sections.
Basically, we’re asking the browser’s engine to position the content at the top of the page behind the header.
Under the advanced tab, expand the custom CSS option and paste this code:
After pasting the code, publish the template and revisit one of your website’s pages to view the changes.
Elementor Header Templates Free
Another option is to paint the header with a light opacity background to match your brand’s colors.
Instead of removing the background (step #1), choose the desired color but lower the opacity.
The section behind the header will be visible thanks to the low transparency number.
Step #4 – Add top padding (optional)
Sometimes, the elements of the header will hide important parts of the section behind it. We can fix it by increasing the padding number of the back section.
Open Elementor for the page that holding the hidden section and click on the top section.
Navigate to the advanced tab and increase the top padding to match your style needs. Adding padding will keep the section at the top of the page but will push the content downward from the inside.
Save the changes and revisit the page to view it live.
Sticky, Resize, and Special Effects
Making a transparent header is definitely a design upgrade. In this section, I would like to show you how to take it further and make it even better.
A sticky header will always be displayed at the top even while scrolling up or down the page. This is an extremely useful feature because it will keep the site’s links accessible at any time.
Adding sticky effects to the header can improve your website visitors user’s experience.
First, expand the motion effects tab and change the sticky option to the top.
It’s best practice to give the header a background color when scrolling to make the links visible on white background sections as well.
Set the effects offset number to define after how many pixels to add the background color. I entered 100 meaning that the new background color will be added after scrolling 100px from the top.
A CSS class
elementor-sticky--effects will be added to the header section when reaching the effects offset number above. Add the CSS rules below to apply to the new class.
Expend the custom CSS tab and enter these rules:
A light blue background will be added to the sticky header when reaching the set scrolling point.
If you would like to change the color to a different one, replace
#66c0ff82 with your desired color’s code.
You can read our how-to change link’s color in WordPress article to learn how to get the color code.
Another cool trick that often can be seen with many websites is the shrinking header when scrolling down.
The height of the header is usually been determine by the tallest element inside of it.
Many times, the logo’s height is the one that sets the header’s height while in other times, it’s the padding of the menu’s links.
The CSS below will tackle both options.
Resize the logo
Paste the code below inside the custom CSS tab of the header’s section to reduce the logo size to 50%:
Save the changes and test your website. If the logo size sets the section’s height, that should address it. If the height is set by the paddings of the links, delete it, and keep on reading.
Remove menu’s links padding
If the header’s height is affected by the menus’ links padding, decreasing or removing the paddings should resize the header.
The CSS below will do the trick:
If non of the codes worked for you and the header’s height stayed the same, switch back to the content tab and change the height to default.
Finally, save all changes and test your website once again.
In this article, you’ve learned the importance of a transparent header and how to achieve it with Elementor.
Leave us a comment below and let us know if you need further help on the subject.
Also, make sure to subscribe to our YouTube channel and like our page on Facebook.
Have you ever imagined you could create your website header and footer with Elementor for FREE?
Elementor – Header, Footer & Blocks Template is a simple yet powerful WordPress plugin that allows you to create a layout with Elementor and set it as
– Block (anywhere on the website)
Create Attractive Designs
Elementor editor gives you the flexibility to design beautiful sections. Using it you can create out of the box header and footer designs.
Pick Display Locations
Want to display a custom header template only on the homepage or on the blog archive page or on the entire website? Well, this plugin allows choosing a specific target location to display header and footer on.
Add Elementor Blocks Anywhere
Apart from header and footer, you can design custom templates with Elementor and set it at any place on the website with a shortcode.
‘Before Footer’ Template
Along with the main footer, the plugin gives the additional area – above the footer – where you can append your custom template. This gives great flexibility in footer design.
Available With Elementor Canvas Template
Your custom header/footer layout can be easily displayed on the pages where Elementor Canvas Template is enabled.
Comes With Inbuilt Widgets
The plugin offers inbuilt widgets that help to create header/footer layouts. These widgets offer basic required features so you don’t have to look for extra plugins.
- Site Logo – Automatically inherits a logo from the customizer. You can even set a custom image as a logo with a custom link and caption.
- Site Title – Site name will be automatically inherited from the customizer. You can add prefix, suffix, icon, and link with it.
- Site Tagline – It will display a tagline from the customizer. You get an option for prefix, suffix, icon, and link with it.
- Navigation Menu – Offers you list of already created menus on your website. You just need to choose the required one. If offers 4 layouts for the menu – horizontal, vertical, expanded and flyout. With many other options, you can even set custom icons to open and close the menu.
- Page Title – Displays your current post/page title and offers additional options for prefix, suffix, icon, link, and alignment.
- Retina Image – You can upload the retina image for high definition screens.
- WooCommerce Menu Cart – You can display current number of products in the cart along with the total price.
- Copyright – It offers constants to display copyright notice – [hfe_current_year] and [hfe_site_title].
- Search – Add a search form to your with different layout and styling options.
WORKS WITH ALL THEMES
Elementor – Header, Footer & Blocks plugin works with all WordPress themes. Few of the themes have direct support while for few you can choose a method to add theme support.
In case you face any difficulty displaying header/footer, manually choose the theme support method. Visit Appearance > Header Footer & Blocks > Theme Support. Select a method to suit your current theme and you are good to go!
STEPS TO USE THE PLUGIN
Step 1 – Visit Appearance > Header Footer & Blocks and click on the ‘Add New’.
Step 2 – Select ‘Type of Template’ (header/footer/block). Set its display location and user roles.
Step 3 – Publish it.
Step 4 – Edit it with Elementor and design a section.
Step 5 – Save it and you are done!
You can refer to our step-by-step article that will help you set Elementor headers and footers quickly.
LOOKING FOR PREMIUM ELEMENTOR ADDONS AND WIDGETS?
Check Ultimate Addons for Elementor. It is a library of creative and unique Elementor widgets that add more functionality and flexibility to your favorite page builder.
HAVE YOU TRIED ASTRA WITH ELEMENTOR?
Elementor Header Footer
Powering over 1M+ WordPress websites, Astra is loved for the performance and ease-of-use it offers.
People love Astra for –
Better Performance – Optimized code and modular architecture make Astra the most lightweight theme for a faster loading website!
Page Builder’s Best Friend – Astra works great with all page builders. Its support for custom layouts, Elementor templates, and ready-made starter sites makes it the best theme for Elementor.
Ready-to-use complete website templates – Astra offers free ready-made website demos built with Elementor. You can choose any of the Elementor Templates, tweak them as you want and go live in minutes!
SUPPORTED & ACTIVELY DEVELOPED
Need help with something? Have an issue to report? Visit Plugin’s Forum.
Get in touch with us on GitHub.
Elementor Edit Header
Made with love at Brainstorm Force!
- Go to
Plugins -> Add Newand search for Elementor – Header, Footer & Blocks Template.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- Go to
Appearance -> Header Footer & Blocksto build a header or footer layout using Elementor.
- After the layout is ready assign it as header or footer using the option
Select the type of template this is(screenshot)
How Does This Plugin Work?
- Go to Appearance -> Header Footer & Blocks to build a header or footer layout using Elementor.
- Click on “Add New” and design a template with Elementor.
- Once the template is ready, set is as a header/footer/block using options “Type of Template” (screenshot).
a) For Header/Footer – Select the target location with the option “Display On”. With this Header/Footer will be visible only on selected locations for selected “User Roles”.
b) For Custom Block – Just copy the shortcode and add it anywhere on the website. Your designed template will display automatically. Display conditions or user roles will not be effective with shortcodes.
Can You Create a Mobile Responsive Header/Footer Using This Plugin?
Yes, You can create the mobile responsive layout of your header using the plugin.
The Elementor – Header, Footer & Blocks Template plugin just gives you a container where you can completely design the header using Elementor Page Builder, So the process of creating the mobile responsive layout is exactly the same as you would create a responsive layout of your other Elementor page.
Here is a documentation by Elementor Page builder which explains how you can create mobile responsive layouts using Elementor – https://elementor.com/introducing-mobile-editing/
This same applies when you are creating your Header/Footer using this plugin.