3.1Theme Builder: header & footer
The essentials in 30 seconds
- The Theme Builder (Pro) designs the site's global parts visually: header, footer, templates.
- Display conditions decide where a template applies (the whole site, certain pages…).
- The header can be sticky and must be responsive (hamburger menu on mobile).
Through-line — Nadia moves to Pro
The joiner wants an identical header everywhere (logo + menu + "Quote" button) and a footer with address and hours. Until now, Nadia recopied these blocks on every page. With Elementor Pro and the Theme Builder, she creates a global header and footer, displayed across the whole site, editable in a single place.
Start of level 3 — Nadia switches to Elementor Pro.
1. Global header and footer
The Theme Builder is Elementor Pro's flagship feature: it lets you visually design the site's global parts. The header is the top bar present everywhere (logo, menu, action button); the footer is the bottom bar (address, hours, socials, legal notices). You create them once, and they appear across the whole site.
No more copy-paste: Nadia designs the joiner's header (logo left, menu, "Quote" button right) and footer (Oran address, hours, phone) in the Theme Builder.
2. Conditions, sticky, responsive
Display conditions decide where a template applies: the whole site, only certain pages, etc. So you can have a different header on the home page if needed.
The header can be sticky: it stays visible at the top as you scroll — handy to keep the menu and the "Quote" button accessible. And it must be responsive: on mobile, the menu folds up (hamburger), to test.
🔎 Concrete example — The joiner's header and footer (Nadia's case)
Theme Builder → Header: logo · menu · "Quote" button → condition: whole site, sticky enabled.
Theme Builder → Footer: Oran address · hours · phone · legal → condition: whole site.
Mobile: menu as hamburger, tested with a finger.
→ A menu change = a single place.Result: total consistency, maintenance in one point.
Lesson: design the global parts in the Theme Builder.
Section vocabulary
- Theme Builder (Pro)
- Elementor Pro's feature for visually designing the site's global parts.
Simple example: Nadia creates the joiner's header and footer there.
What it is not: recopying the header on each page by hand.
Reflex: part present everywhere → Theme Builder.
- Header
- The top bar present on the whole site (logo, menu, action button).
Simple example: logo + menu + "Quote" button.
What it is not: a different, inconsistent header per page.
Reflex: global, clear header, with an action.
- Footer
- The bottom bar present everywhere (address, hours, socials, legal notices).
Simple example: Oran address, hours, phone, legal notices.
What it is not: forgetting the contact info and legal notices.
Reflex: footer = useful info + legal notices.
- Display conditions
- Where a template (header, footer…) applies: the whole site, certain pages…
Simple example: header on the whole site, another on the home page.
What it is not: setting no condition (the template doesn't show).
Reflex: create a template = give it a condition.
- Sticky & responsive header
- The header stays visible on scroll (sticky) and adapts to mobile (hamburger).
Simple example: menu and "Quote" button always accessible; hamburger on mobile.
What it is not: a header that disappears or breaks on mobile.
Reflex: sticky when useful + always test mobile.
In practice — Creating a global header and footer
- In the Theme Builder, create a header (logo, menu, action button).
- Give it the "whole site" condition and enable sticky if relevant.
- Create a footer (address, hours, legal notices) with the same condition.
- Test on mobile: hamburger menu, readable header, complete footer.
Ready-to-say script — valuing the global header (20 s)
"I created your header and footer just once: logo, menu and quote button at the top, address and hours at the bottom, identical on every page. If you want to change the menu or add an opening hour, I do it in one place, and it applies everywhere."
Sell the consistency and single-point maintenance.
Copy-paste template — Theme Builder check
HEADER: logo ___ menu ___ action button ___
CONDITION: whole site / pages: ___ STICKY: yes / no
FOOTER: address ___ hours ___ phone ___ legal ___
CONDITION: whole site / pages: ___
RESPONSIVE (hamburger) TESTED: yes / noTradesperson showcase
Simple header (logo + menu + call button), footer with address and hours.
Specific home page
Particular condition: a transparent header on the home page, classic elsewhere.
Sticky
Keep the "Quote" button accessible on scroll on long pages.
Mobile
Clear hamburger menu; call button visible in the mobile header.
✓ Best practices
- Design header/footer in the Theme Builder (once).
- Give a display condition to each template.
- Test the sticky header and the mobile menu.
✗ Common pitfalls
- Recopying the header on each page.
- Forgetting the condition (template not displayed).
- Not testing the mobile menu.
Key takeaways
- Theme Builder (Pro) = the site's global parts.
- Header (top) and footer (bottom) designed once.
- Display conditions = where it applies.
- Sticky + responsive header (hamburger).
48h challenge — apply tomorrow
With Elementor Pro, create a global header (logo, menu, button) and a footer (address, hours), applied to the whole site. Enable sticky and test the hamburger menu on mobile. 30 minutes.
- I create a global header and footer.
- I set the display conditions.
- I test sticky and the mobile menu.
Frequently asked questions
Is the Theme Builder free?
No: it's an Elementor Pro feature. In Free, you can't design a global header/footer or content templates with Elementor.
What are display conditions for?
To decide where a template applies: the whole site, only certain pages, a content type, etc. Without a condition, the template shows nowhere.
What is a 'sticky' header?
A header that stays stuck at the top of the screen as you scroll the page — handy to keep the menu and an action button always accessible.
The joiner wants the same header (logo, menu, Quote button) on all his pages, easily editable. What does Nadia do?