Elementor header templates, a clear way in.
40 headers captured from real Elementor templates: logo on the left with the menu beside it, a centred logo between split links, headers with a contact bar above, a quote button, a search or a log-in. Every one in light and dark, so you can judge the entrance before the brand arrives.
A header is the door: people should know where it leads before they read anything else.
How to choose headers
The header is seen on every page and read on almost none. It works when a visitor can find the one link they came for without thinking, and fails when it tries to hold the whole sitemap.
Logo left, menu right — for most service and business sites. Four or five links and one button on the far end: the pattern people already know how to use.
A centred logo — for brands, studios and restaurants, where the name is the point. Split the links either side, or stack them under the logo.
A header with a top bar — when phone, hours or address decide whether someone calls. A thin bar above the menu keeps that detail visible without crowding the links.
What is inside the block
A Madkhal block is one full-width container: a site-logo or heading for the brand, Elementor’s nav menu widget for the links, and a button, search or icon list at the end. It imports as a normal section; in Elementor Pro you can save it as a Theme Builder header and apply it site-wide.
Import into Elementor
- Download the block (or your whole stacked page) from the Studio as a
.jsonfile. - In WordPress go to Templates → Saved Templates and click Import Templates.
- Choose the file. It appears under Saved Templates with its ASAS name.
- Open any page in Elementor, click the folder icon, choose My Templates, and insert it.
Related rooms
Pair a header with a footer in the same voice so the site opens and closes as one, and put a hero directly under it — the two are read together.
Headers, answered.
Can I use these as a site-wide header?
With Elementor Pro, import the block, then save it through Theme Builder as a Header template. On the free version, insert it on each page or use a header/footer plugin.
Does the menu collapse on phones?
Yes. The links use Elementor’s nav menu widget, which turns into a toggle button at the tablet breakpoint you choose. Point it at your WordPress menu after import.
Are these templates free?
Yes. Browsing, stacking and colouring need no account. Downloading the Elementor JSON needs a free account — a name, an email and a password, no card.
Do I need Elementor Pro?
Most blocks use core Elementor widgets only. Where a block uses a Pro widget, the Studio names it before you download, because Elementor silently drops widgets it doesn’t have on import.
How do I import a block into Elementor?
Download the .json file, open Templates → Saved Templates in WordPress, click Import Templates, choose the file, then insert it on any page from the editor’s template library.
New blocks land monthly.
One email when a room grows or a behaviour is added. No digest, no tips, nothing weekly.