Learn how to edit your WordPress header & footer using Elementor's Theme Builder! Check out the amazing header and footer templates listed below.
The header and footer areas are the backbones of every website. In the past, tasks like removing the space between header and body in WordPress required going into the PHP files of the theme.
Today, we take a deeper look into how Elementor Theme Builder gives you a powerful new way to edit your site’s header and footer, visually designing it however you like. Build powerful headers and footers on any WordPress theme in minutes.
We are also introducing 25+ new pre-designed header & footer templates that will help you get started easily, as well as a one-click Sticky Header feature. If you are looking for more inspiration, take a look at these inspiring examples of headers and footers, created using Elementor.
How to Edit Your WordPress Header, the New Way
From now on, you are no longer limited by your theme’s restrictions.
Follow these steps to get it done easily:
- Go to WordPress Dashboard > Templates > Theme Builder
- Click ‘Add New Template’ and choose ‘Header’.
- Name your header template and click ‘Create Header’
- Now you’ll be able to either choose a pre-made header template, or create one from scratch.
- Once you have made the needed changes to the header design, click ‘publish’, and choose where to publish the header. The default is ‘entire site’.
- That’s it! You can now see your hand crafted header live on your site.
By bringing the power of the Elementor editor to the header and footer areas, you can design them you way you like, and be able to complete projects faster than ever. You can also save header and footer templates, and reuse them on any other project.
If you are beating yourself up right now for all the hours you lost in the past over your header design, we share your feelings. From now on, using Theme Builder, things are going to be much faster
Website Header Examples
Choose a header from a huge array of designer-made blocks, readily available in the Template Library. Customize it any way you like, and give it your own touch.
WordPress sticky header plugins are quite common. Now, you get the advantage of uncluttering yet another plugin, using Elementor’s built-in sticky header feature. Setting sticky headers using Elementor is easy, and believe it or not – it takes just one-click.
Why make it sticky? Sticky headers are great for bringing more focus to navigational links in menus, and helping visitors more easily navigate through the main pages of your website, regardless how far they scrolled through the page. It’s not only for navigational purposes though – They can also considerably increase conversion rates, simply by adding the right call-to-action to either the fixed top of the page.
Build Custom Header Templates for Different Pages
Want to designate different headers and footers to different pages of your WordPress site?
You can accomplish this goal in no time. All it takes is creating different header and footer templates, and assigning the proper conditions for each template, attributing the headers and footers to the relevant pages of your site.
Have a special sale? Create a header for that occasion.
Have different blog categories? Attribute a header design custom made for each one, and possibly change the header color for each category.
Want to add social media icons to the WordPress header? Just drag and drop, no other plugin required.
Want to add a header image? Same procedure – drag and drop. You’ll have complete control over the image size from the Elementor panel.
It’s just as easy to create a video header using the corresponding widget. In fact, any widget can be added visually to your header using the header template. You can also incorporate dynamic elements like site logo and customize them in the same template.
Once you are no longer restricted by code, you can easily create as many headers and footers as you like, and spread them across the relevant categories, pages and taxonomies with a single click. The same process can be used to hide header on certain pages, and have them appear on selected others.
Customize Your Footer Design
Eye-Catching Footer Templates
Check out the wide range of footer template blocks: some are simple and minimalistic, others are extensive and full of detail. Pick your favorite and add them to your WordPress site!
100% Responsive Headers & Footers
Design your responsive header and footer by previewing them in Elementor’s mobile view. You can differentiate between different column structures and widths for different devices, and create headers and footers that look perfect on every device.
Header and Footer control makes Elementor’s mobile menu builder more relevant than ever. The menu automatically turns into a mobile hamburger menu, so you don’t have to do any customizations on your own.
While you can customize any header and footer for mobile devices, sometimes designers prefer to design two separate sections, showing one on desktops and the other on mobile. This can be easily done with a simple hide/show click, available under the advanced tab of the section.
Header & Footer Builder - Unleashed!
With Elementor Theme Builder, we solved a huge problem known by every WordPress user.
Never again will you have to wait for the developer to change your header.php file, switch to another theme just to move a header logo, or work hard to customize the CSS header and footer elements of your site. Elementor Pro 2.0 makes header and footer design quick and super-simple.
Finally, your website vision can truly come to life. Join Pro today, and gain complete control over your entire website design.