How to Edit Headers and Footers with Elementor in WordPress

Elementor is a visual page builder for WordPress that lets you design, replace, and manage custom headers and footers through a drag-and-drop interface — no PHP template editing or child theme required. The two primary paths are Elementor Pro's Theme Builder, which handles header and footer templates natively, and the free Elementor Header & Footer Builder plugin, which replicates that functionality for users on the free tier.

Both methods inject your custom template into WordPress's template hierarchy by overriding the theme's default header.php and footer.php output. Understanding this distinction matters when debugging conflicts with your active theme or caching layer.

Prerequisites Before You Start

Before touching any template, confirm the following:

• Your WordPress installation is running version 6.0 or higher (Elementor's minimum requirement as of current stable releases).
• You have a child theme active if your parent theme ships with its own header/footer logic. Editing a parent theme directly will lose changes on the next theme update.
• PHP memory limit is set to at least 256 MB. Elementor's editor is memory-intensive, and a low limit causes silent save failures. Check wp-config.php or your server's php.ini.
• You have cleared any full-page caching before testing changes. Cached HTML will serve the old header/footer regardless of what you saved in Elementor.

If your WordPress site runs on a VPS Hosting environment, you have direct access to php.ini and can set memory_limit = 256M without relying on a hosting control panel.

Method 1: Elementor Pro Theme Builder

Elementor Pro's Theme Builder is the canonical, fully supported solution. It gives you granular display conditions, dynamic content tags, and direct integration with WooCommerce elements.

Step 1: Install and Activate Elementor Pro

Purchase Elementor Pro from the official Elementor website. You will receive a ZIP file and a license key.

In your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin. Select the ZIP file, click Install Now, then Activate. After activation, go to Elementor > License and connect your license key. Both the free Elementor core plugin and Elementor Pro must be active simultaneously — Pro is an add-on, not a standalone plugin.

Step 2: Open the Theme Builder

Navigate to Templates > Theme Builder. The interface is divided into sections: Header, Footer, Single, Archive, Search Results, and Error 404. Each section can hold multiple templates with different display conditions, which allows you to serve a different header on landing pages versus blog posts.

Step 3: Create or Edit the Header Template

Click the Header tab, then Add New. A modal prompts you to name the template (for example, Main Header) and optionally choose a pre-built block from Elementor's template library.

Inside the Elementor canvas, the most commonly used widgets for a header are:

• Site Logo — pulls the logo set under Appearance > Customize > Site Identity, keeping it in sync with WordPress core.
• Nav Menu — references any menu registered under Appearance > Menus. You can style hover states, dropdowns, and mobile hamburger behavior directly in the widget settings.
• Search Form — adds a live search input. For Pro users, this can be wired to custom post types.
• Button — useful for CTA elements like "Get a Quote" or login links.
• Cart (WooCommerce) — displays a dynamic cart icon with item count if WooCommerce is active.

Critical pitfall: If you drag a Section (or Container in Flexbox mode) and set its width to Full Width, the header background will span the viewport correctly. If you leave it at Boxed, the background color will stop at the content width, leaving raw page background on the sides — a common visual bug that trips up new users.

Step 4: Configure the Sticky Header

To make the header stick to the top of the viewport on scroll:

1. Click the section/container that wraps your entire header layout.
2. Open the Advanced tab in the left panel.
3. Under Motion Effects, enable Sticky and set it to Top.
4. Optionally set a Sticky On breakpoint to disable stickiness on mobile, where it consumes too much vertical screen space.

Edge case: Sticky headers interact poorly with the WordPress Admin Bar when a user is logged in. The admin bar adds 32px of offset at the top. Elementor handles this automatically in most cases, but if you use a custom z-index on the sticky section, verify that it does not overlap the admin bar by testing while logged in.

Step 5: Set Display Conditions for the Header

After clicking Publish, Elementor immediately prompts you to define Display Conditions. This is one of the most powerful and most misunderstood features.

You can stack multiple conditions using Include and Exclude rules. For example: include the entire site, but exclude the checkout page — a common pattern for WooCommerce stores that want a distraction-free checkout header.

Click Save & Close when done.

Step 6: Create or Edit the Footer Template

The footer workflow mirrors the header exactly. Click the Footer tab in the Theme Builder, then Add New.

Common footer widgets and layout patterns:

• Text Editor or Heading widget for copyright notices. Use the dynamic tag [current_year] via Elementor's dynamic content system to avoid manually updating the year.
• Icon List or Social Icons widget for social media links.
• Nav Menu widget for a secondary footer navigation (privacy policy, terms of service, sitemap links).
• Image widget for payment badges or trust seals.
• Shortcode widget to embed output from third-party plugins (e.g., a cookie consent shortcode).

Set display conditions following the same logic as the header, then click Save & Close.

Method 2: Elementor Header & Footer Builder (Free)

If you are on the free Elementor tier, the Elementor Header & Footer Builder plugin by Brainstorm Force provides nearly identical functionality without requiring a Pro license.

Step 1: Install the Plugin

Go to Plugins > Add New, search for Elementor Header & Footer Builder, and install the plugin by Brainstorm Force (verify the author — there are similarly named plugins). Click Activate.

Compatibility note: This plugin works with most major themes, but it requires your active theme to support header.php and footer.php hooks. Themes built entirely on block-based Full Site Editing (FSE) — such as Twenty Twenty-Three and Twenty Twenty-Four — use a different template system and may not respond to this plugin's injection method. In that case, either switch to a classic theme like Astra, GeneratePress, or Hello Elementor, or upgrade to Elementor Pro.

Step 2: Create a Header Template

Navigate to Appearance > Elementor Header & Footer Builder, then click Add New.

In the template creation modal:

• Set Type to Header.
• Give it a descriptive name.
• Click Create Template.

You will be redirected into the standard Elementor editor. The design process is identical to Elementor Pro — use the same widgets (Site Logo, Nav Menu, Button, etc.).

Step 3: Assign Display Rules

After publishing, scroll down in the template's WordPress edit screen (not the Elementor canvas) to find the Display Rules meta box. This is separate from Elementor Pro's display conditions modal and works through standard WordPress post meta.

Options include:

• Entire Site
• Specific pages (selected individually)
• All Singular Pages
• All Archive Pages

The free plugin's display rule system is less granular than Elementor Pro's — you cannot target by user login state, custom post type archives, or use exclusion rules. For most small sites, this is sufficient.

Step 4: Create a Footer Template

Return to Appearance > Elementor Header & Footer Builder, click Add New, and set the type to Footer. The design and display rule assignment process is identical to the header workflow above.

Comparison: Elementor Pro Theme Builder vs. Free Plugin

Advanced Customization Techniques

Responsive Header and Footer Design

Elementor's editor has three viewport modes accessible via icons at the bottom of the canvas: Desktop, Tablet, and Mobile. Every spacing, font size, and visibility setting can be overridden per breakpoint.

Practical workflow:

1. Design the desktop layout first.
2. Switch to Tablet view and adjust column stacking, font sizes, and padding.
3. Switch to Mobile view. Hide secondary nav items using Advanced > Responsive > Hide On Mobile. Replace the full nav menu with a hamburger toggle by setting the Nav Menu widget's Breakpoint to Mobile.

Never use the same padding values across all breakpoints. A 40px top/bottom padding on desktop becomes claustrophobic on a 375px-wide phone screen. Set mobile padding to 15px or 20px.

Adding a Transparent or Scroll-Triggered Header

A common design pattern is a transparent header over a hero image that becomes solid on scroll. Elementor Pro handles this through the Sticky settings combined with a Scroll Effect:

1. Set the header section's background to None (transparent).
2. Enable Sticky under Motion Effects.
3. Under the sticky settings, enable Transparency Effects and set the scrolled state background color.

For the free plugin, you need custom CSS. Add the following to Appearance > Customize > Additional CSS:

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Then add a small JavaScript snippet via a plugin like Code Snippets:

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Using Dynamic Tags in the Footer (Pro)

Elementor Pro's dynamic tags let you insert live data into footer text without hardcoding values. The most practical use case is the copyright year:

1. Add a Text Editor widget to your footer.
2. Click the dynamic tag icon (the database icon) next to the text field.
3. Select Site > Current Year.

The output renders as the current four-digit year and updates automatically on January 1st — no manual edits required. You can combine static text and dynamic tags in the same widget: © [dynamic: Current Year] Your Company Name. All rights reserved.

Performance Considerations

Custom Elementor headers and footers load additional CSS and JavaScript on every page. Audit the impact:

• Use Query Monitor plugin to check how many database queries your header template adds per page load.
• Run a Lighthouse audit before and after enabling the custom header. A poorly structured header with unoptimized images can add 200–400ms to Largest Contentful Paint (LCP) if the logo image is not properly sized or served in WebP format.
• If you use a CDN, purge the CDN cache after every header/footer update. Stale CDN nodes will continue serving the old template HTML.

On a VPS with cPanel environment, you can configure object caching with Redis or Memcached to reduce the database query overhead that Elementor's template resolution adds on each request.

Troubleshooting Common Issues

Header not displaying after publishing:

The most frequent cause is a missing or conflicting display condition. Go to Templates > Theme Builder > Header, open the template, click Publish, and verify the display conditions include the page you are testing. Also check that your active theme is not hardcoding a get_header() call that bypasses Elementor's hook.

Footer overlapping page content:

This usually means the footer template's section has a negative top margin or the theme's main content wrapper has no bottom padding. Inspect the element in browser DevTools and identify which CSS rule is causing the overlap.

Elementor editor not loading (white screen or spinner):

Increase PHP memory limit to 512 MB temporarily to diagnose. Also disable all plugins except Elementor core and Pro, then re-enable them one by one to identify a conflict.

Sticky header jumps on mobile:

iOS Safari has known issues with position: sticky and dynamic viewport height changes caused by the browser chrome appearing/disappearing on scroll. Use position: fixed with a compensating padding-top on the page body as a workaround, or set the sticky option to desktop-only.

Custom header not appearing on WooCommerce pages:

WooCommerce registers its own page types (Shop, Cart, Checkout, My Account). In Elementor Pro's display conditions, you must explicitly include WooCommerce > Shop Page or WooCommerce > All WooCommerce Pages — they are not covered by the generic "Entire Site" condition in some theme configurations.

Hosting Environment and Performance

The performance of your Elementor-built header and footer is directly tied to your server's response time. Elementor stores template data as post meta in the WordPress database and generates CSS files on the server. On shared hosting with limited I/O, CSS regeneration after a template update can time out silently, leaving your site with outdated styles.

For production WordPress sites using Elementor, a VPS Hosting environment with at least 2 CPU cores and 4 GB RAM provides the headroom needed for smooth editor performance and fast CSS generation. If you are running a WooCommerce store with a custom header and footer, Dedicated Servers eliminate the resource contention entirely.

Regardless of your hosting tier, always pair your WordPress installation with a valid SSL Certificate. Mixed content warnings — triggered when HTTP assets are loaded inside an HTTPS page — will break Elementor's editor interface and cause assets in your header (logos, icons) to fail loading in some browsers.

Decision Matrix: Which Method Should You Use?

Practical Checklist Before Going Live

• Verify display conditions cover all intended page types, including 404 and search results pages.
• Test the header and footer on a real mobile device, not just browser DevTools emulation.
• Confirm the logo uses a WebP image and has explicit width and height attributes set in the Image widget to prevent layout shift (CLS).
• Check that all navigation menu links resolve correctly after the template is published.
• Purge all caching layers: server-side cache, CDN cache, and browser cache.
• Run Lighthouse on both desktop and mobile to confirm no LCP or CLS regressions.
• If using Elementor Pro dynamic tags, verify they render correct output when viewed as a logged-out user.
• Confirm the footer copyright year dynamic tag is active and not hardcoded.
• Test the sticky header behavior with the WordPress Admin Bar visible (logged-in state).
• Validate that WooCommerce pages (if applicable) are covered by the correct display condition.

FAQ

Can I use Elementor to edit headers and footers without Elementor Pro?

Yes. Install the free Elementor Header & Footer Builder plugin by Brainstorm Force. It integrates with the free Elementor editor and lets you design custom headers and footers with display rules, though with fewer targeting options than Elementor Pro's Theme Builder.

Why is my Elementor header not showing on my WordPress site after I publish it?

The most common cause is an unconfigured or incorrect display condition. Open the template in the Theme Builder, click Publish, and ensure the display condition is set to at least Entire Site or the specific page type you are targeting. Also verify there is no theme-level header hardcoded in a parent theme's template files.

Does Elementor's custom header replace the theme's default header?

Yes. When a display condition is matched, Elementor hooks into elementor/theme/before_do_header and replaces the theme's get_header() output entirely. The theme's original header.php is bypassed for those pages.

Will a custom Elementor header slow down my site?

It can, if not optimized. Elementor loads its own CSS file per template. Ensure the logo is a compressed WebP image, avoid loading unnecessary widgets, and enable Elementor's Improved Asset Loading option under Elementor > Settings > Advanced to load only the CSS for widgets actually used on each page.

Can I have different headers for different pages in WordPress with Elementor?

Yes, with Elementor Pro. Create multiple header templates and assign each a specific display condition — for example, one header for the homepage, another for blog posts, and a minimal header for the checkout page. The Pro Theme Builder evaluates conditions in priority order, so more specific conditions override broader ones.