Building a header and footer with Elementor Theme Builder

The header and footer appear on every page of your site. If they're built separately on each page, every change becomes a chore and pages slowly drift apart. Elementor Pro's Theme Builder solves this: build them once, and they apply everywhere.

Start with a lightweight theme

Theme Builder replaces your theme's header and footer, so the theme underneath matters less than you'd think. I use Hello Elementor, a minimal theme made for exactly this. It adds almost no styling or code of its own, which means fewer conflicts and a faster site.

Create the header

Go to Templates → Theme Builder and add a new Header. A typical structure:

• A container set to full width, with the logo on the left
• The Nav Menu widget in the middle or on the right, connected to a WordPress menu
• A call-to-action button, such as "Book a call" or "Get a quote"

Build it with containers using flexbox, so the logo, menu and button align and space themselves automatically.

Set the display conditions

When you publish, Elementor asks where the template should appear. For most sites the answer is simply Entire Site.

Conditions become useful when pages need something different. For example:

• A transparent header that overlays the hero, only on the homepage
• A simplified header without navigation on landing pages
• A different header for the shop or the blog

Add these as separate templates with Include and Exclude rules, rather than hiding and showing elements inside one header.

Make it sticky

For a header that stays at the top while scrolling, select the header container, then go to Advanced → Motion Effects → Sticky and choose Top. You can apply a different style once the visitor scrolls, such as a smaller logo or a solid background, using the Effects Offset setting together with a sticky-state style.

Keep sticky headers slim on mobile. A header taking up a quarter of a phone screen is the fastest way to annoy visitors.

Build the mobile menu properly

The Nav Menu widget switches to a dropdown or toggle menu below a breakpoint you choose. Check:

• The toggle button is large enough to tap (at least 44px)
• Sub-menus are reachable on touch devices
• The open menu doesn't push the page content sideways

Test on a real phone, not just the editor's mobile preview.

The footer

Create a Footer template the same way. A good footer has:

• Contact details people actually look for: phone, email, address and opening hours
• Links to key services and legal pages (privacy policy, imprint)
• Social links and, if relevant, a newsletter sign-up

Footers are a great place for trust signals too, such as certifications, reviews or partner logos.

Common mistakes

• Building the header inside each page, which defeats the purpose
• Forgetting the theme's own header, leaving two headers on some pages
• Hard-coding colours and fonts instead of using global styles
• Not testing logged out, where admin bars and caching behave differently

On the Datenschutz St.Gallen and PCFlow projects, both header and footer are single Theme Builder templates shared across every page, including a sticky header and mobile menu on PCFlow's 68 pages.

Need a header and footer that work on every device? Get in touch.