Knowing how to edit header and footer in WordPress Elementor is key to building a consistent and professional website. Elementor makes it simple to modify these global sections using its visual editor and theme builder. This tutorial walks you through the process step by step, including layout changes, menu configuration, responsive design tips, and best practices for site-wide consistency.
Accessing the Header and Footer Editor
To begin customizing, you need to open Elementor's Theme Builder, which controls the global layout of your WordPress website. This feature allows you to create custom headers and footers that override your theme’s default design.
- In your WordPress dashboard, go to Templates > Theme Builder.
- Select Header or Footer depending on what you want to edit or create a new template.
- Click Edit with Elementor to launch the visual editor interface.
- If no template exists, you can click Add New and select Header or Footer from the dropdown menu.
Design Header Using Elementor
Once inside the editor, you can design your header using Elementor’s widgets and style settings. The header is typically where you place your logo, primary navigation menu, and possibly call-to-action buttons like “Contact” or “Book Now.”
Navigate the menu
- Use the Nav Menu widget to insert a navigation bar linked to your WordPress menu.
- Choose the correct menu under the Content tab in widget settings.
- Style the text, hover effects, and spacing under the Style tab.
- Configure layout settings, alignment, and breakpoint behavior for different screen sizes.
Responsive header design Elementor
- Click the Responsive Mode icon in the bottom panel to preview across devices.
- Customize the design independently for desktop, tablet, and mobile views.
- Enable or disable header elements using visibility settings for each device type.
- Consider using a hamburger menu for better mobile navigation experience.
Customize Footer in Elementor
Editing the footer works similarly to the header, but includes elements like widgets, copyright notices, legal links, and branding. Your footer can include multiple columns of content depending on your needs.
Footer widgets in Elementor
- Drag in Text Editor, Icon List, Social Icons, or Button widgets.
- Use the Inner Section widget to divide the footer into two, three, or four columns.
- Add elements like email subscription forms, quick links, or opening hours.
- Customize backgrounds, padding, and borders under the Advanced tab for a cleaner look.
Edit Global Header and Footer Visibility
Elementor allows you to control where your custom headers and footers appear using display conditions. These rules ensure the correct template loads on relevant pages.
| Setting | Purpose |
|---|---|
| Include on | Apply to entire site, specific pages, posts, categories, or custom post types. |
| Exclude | Prevent the template from showing on certain URLs, tags, or page templates. |
Set these conditions when clicking Publish in the Elementor editor. You can stack multiple conditions to fine-tune visibility.
Advanced Tips and Troubleshooting
Sometimes things may not work as expected. Here’s how to handle common issues and improve header/footer design further:
- Header not visible: Check if your active theme overrides Elementor settings or if another header is active.
- Changes not saving: Clear both the Elementor and browser cache, and ensure you have the latest plugin version.
- Wrong menu showing: Go to Appearance > Menus and verify the correct one is assigned and saved.
- Design overlaps content: Adjust z-index and section height in the Advanced tab.
- Slow loading header/footer: Optimize image sizes and avoid excessive animations or widgets.
Useful Links
Using the Theme Builder – Learn how to access and utilize Elementor's Theme Builder to create and manage global site parts like headers and footers.
Create or Edit Your Header – Step-by-step guide on creating or editing headers using Elementor's Theme Builder.
Create or Modify Your Footer – Instructions on how to create or modify footers within Elementor's Theme Builder.
Set Display Conditions for Templates – Understand how to set conditions to control where your templates appear across your site.
Responsive Editing for Mobile and Tablets – Learn how to make your designs responsive across different devices using Elementor's responsive editing tools.
Your Elementor Website Can Do Even Better!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
With Elementor’s Theme Builder, it’s easy to manage global elements like headers and footers without coding. Whether you want to design a sleek navigation bar, edit global header in Elementor, or modify footer across all pages, this tool makes it visual and intuitive. Remember to use responsive settings, customize visibility rules, and test across devices. Now that you know how to edit header and footer in Elementor, your website can truly reflect your brand style and offer a seamless user experience.
