The content area of a page is quickly designed with Elementor. The header, on the other hand — logo, menu, phone number, perhaps a button — belongs to the theme at first. You can only adjust it as far as the theme allows. The Theme Builder removes that limit.
What the Theme Builder takes over
With it you design the areas that lie outside the actual page content: header, footer, the layout of individual posts, the blog overview, archive pages, the 404 page and, for shops, the product pages.
The principle is always the same: you build a template, and you define where it should apply. The second part is where things go wrong in practice.
The Theme Builder is a feature of the Pro version.
Elementor Pro: Being able to design the header, footer and post layouts freely is the most common reason for moving to Pro — more so than forms or popups. View Elementor Pro
Preparation: the right theme
If Elementor builds the header, the theme should not supply a second one. Otherwise you end up with two headers stacked on top of each other.
The most straightforward option is a deliberately minimal theme such as Hello, which is designed for exactly this: it brings almost no styling of its own and leaves the field to Elementor. With more extensive themes, look in the theme settings for an option to disable their own header. If there is none, that is a sign that theme and Theme Builder are going to get in each other's way.
Creating a header
In the WordPress menu under Templates → Theme Builder you choose Header and create a new template. Elementor offers ready-made blocks; I usually build from scratch, because the ready-made variants rarely match the rest.
A structure that holds up looks like this: one container, set as a flex row, with the logo on the left and the menu on the right. Vertical alignment set to “centre”, horizontal justification to “space between”. That is the structure that does not fall apart on narrow screens either.
For the menu, use the Nav Menu widget. It draws on the menus you have created in WordPress under Appearance → Menus — so create the menu first, otherwise the widget sits there empty.
The step many people forget: the display conditions
Before you publish, Elementor asks where the template should apply. This prompt is not a formality.
For a header that applies everywhere, set the condition to Entire Site. If instead you want a different header for the home page only, create a second template and set the more specific condition there. The more specific rule wins over the general one.
The most common mistake I see: template built, published, condition skipped — and then bafflement as to why nothing on the website looks any different. You can set the conditions after the fact at any time, via the preview menu in the editor or the template overview.
A sticky header, done cleanly
A header that stays at the top while scrolling is one of the most common requirements. You solve that in the container under Advanced → Motion Effects → Sticky: Top.
Two points that typically cause trouble:
The header disappears behind the content. Under Advanced, set a sufficient z-index, 999 for instance.
The content jumps while scrolling. This happens when the sticky header changes its height. If you want a smaller logo to appear while scrolling, work with the effect settings and check the result on a phone — that is where jumping is most noticeable.
And a recommendation from practice: on a phone, a sticky header takes away valuable screen height. I often switch it off there. The visibility options for that also sit under Advanced; my general approach to mobile is in optimising Elementor for mobile.
The footer
The footer works to the same pattern but is less critical — no sticky behaviour, no menu logic. Watch two things: the legal notice and privacy policy have to be reachable from every page, and the columns should stack cleanly on a phone rather than being squeezed side by side.
When something does not appear
Three causes cover most cases: the display condition is missing. The theme is still supplying its own header. Or a caching plugin is holding on to the old version — clear the cache before you look any further.
Further typical stumbling blocks and their causes are collected in fixing common Elementor errors.
If you would rather set the Theme Builder up once with guidance than feel your way through display conditions: that is exactly what we do in my Elementor training.
Tags