How to Create Header Footer on Elementor

beginner 8 min read Updated 2026-03-24

Quick Answer

Use Elementor Pro's Theme Builder to create custom headers and footers via Templates > Theme Builder. Design with drag-and-drop widgets like Site Logo and Nav Menu, set Display Conditions to Entire Site, and publish. Common issues like missing elements on frontend resolve by verifying conditions, layout, and clearing cache.

Get Elementor Deal → Partner

Try Elementor Full Elementor Review

Prerequisites

Elementor Pro installed and activated
WordPress admin access
Compatible active theme
Site backup recommended

Step-by-Step Instructions

Access Theme Builder

Log in to your WordPress Dashboard and navigate to Templates > Theme Builder. This central hub manages all site parts like headers and footers without any terminal commands.

Create New Header

Click the + Add New button under the Header tab. Enter a name like Main Site Header and click Create Header to open the Elementor Editor.

Optionally import a premade template from the library for faster setup.

Set Header Layout

In the editor, add a Section widget and set structure to 3-column (e.g., logo-menu-CTA) via the structure icon. Choose Elementor Full Width or Default page layout for proper display.

Add Header Widgets

Drag Site Logo widget (Style: width 150px, left align), Nav Menu widget (Content: select menu from Appearance > Menus; Layout: Horizontal, Pointer: Underline), and optional Search Form or Button. Enable sticky via Advanced > Motion Effects > Sticky: Top.

Use dynamic content for menus to auto-update site-wide.

Configure Header Settings

Click the Header Settings icon (tag icon) on the top bar. Set HTML Tag to header for better accessibility.

Publish Header with Conditions

Click Publish. In Display Conditions modal, set to Entire Site (or customize: Include Front Page, Exclude Archives). Set User Roles to All and click Save & Close.

Preview live to confirm it overrides theme defaults.

Create New Footer

Back in Theme Builder, click + Add New under Footer tab. Name it Global Footer and click Create Footer.

Design Footer Layout

Add a Section with 4-column structure for columns, copyright, and social links. Use Style tab for padding/margins (default 20px).

Ensure responsive design checks on mobile preview.

Add Footer Widgets

Publish Footer

Click Footer Settings icon and set HTML Tag to footer. Publish and set Display Conditions to Entire Site, then Save & Close.

Edit existing templates anytime via Theme Builder cards.

Common Issues & Troubleshooting

Missing header/footer on live site (shows in editor only)

Edit template in Elementor > Theme Builder, click Edit Conditions > set to Entire Site, republish, and clear Elementor cache.

Header/footer hidden on specific pages (e.g., homepage)

Check and adjust Display Conditions to include those pages; ensure page layout is not Elementor Canvas; switch to Default or Elementor Full Width.

Theme's default header/footer overriding custom one

Verify template is published with conditions set correctly; update Elementor/WordPress/theme; test with compatible theme and clear all caches.

Edit Header/Footer button absent

Access via Templates > Theme Builder directly; ensure Elementor Pro is active and no plugin conflicts.

Sticky header not working

In Advanced > Motion Effects, set Sticky to Top; check z-index in Advanced > Positioning.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.

Visit Elementor View Elementor Pricing