Elementor Theme Builder: Build a Custom Header and Footer

Build a custom header and footer with Elementor Pro Theme Builder: logo, nav menu, mobile layout, footer columns and display conditions.

Card: Elementor Theme Builder header and footer tutorial

Table of Contents

To build a custom header and footer with Elementor Pro, go to Templates, Theme Builder, add a Header, design it with your logo (Site Logo widget), navigation (Nav Menu widget) and a button, then publish and set the display condition to Entire Site. Repeat for the Footer. The templates replace the theme’s header and footer everywhere, and you can create different versions for specific pages using conditions.

Key takeaways
  • Theme Builder is an Elementor Pro feature.
  • Use dynamic widgets: Site Logo, Nav Menu, Copyright year.
  • Display conditions decide where each template appears.
  • Design the mobile header separately.
  • Hello Elementor theme pairs best with Theme Builder.

How do you build the header?

  1. Templates, Theme Builder, Header, Add New.
  2. Add a container (row): Site Logo left, Nav Menu center, Button right.
  3. Set the Nav Menu to your main menu; choose a mobile toggle (hamburger).
  4. Mobile: hide the button or move it into the menu.
  5. Publish, condition: Entire Site.
ColumnContent
1Logo, short description, social icons
2Service links
3Company links: about, blog, contact
4Address, phone, hours
Bottom barCopyright with dynamic year, privacy, terms
1-to-1 tutoringLearn WordPress faster with a mentor

Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.

See lessons and prices

Can you have different headers on different pages?

Yes. Picture a landing page for ads where you want only the logo and a phone button, no menu. Create a second header template and set its condition to that page only; it overrides the main header there. Next, make the header stick: Elementor sticky header.

Want to learn Elementor Theme Builder faster with a tutor?

I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.

Frequently asked questions

How do I create a header in Elementor?

In Elementor Pro, go to Templates, Theme Builder, add a Header, design it and set the display condition to Entire Site.

Do I need Elementor Pro for a custom header?

Yes, Theme Builder is a Pro feature.

Can I use different headers on different pages?

Yes, create multiple header templates with different display conditions.

Which theme works best with Elementor Theme Builder?

Hello Elementor, a lightweight theme designed for it.

Sources

1-to-1 tutoringLearn WordPress faster with a mentor

Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.

See lessons and prices
Written by Tanvir H

WordPress and Elementor web designer at Tanvir WebXprt, Bangladesh, with 7+ years of experience and 650+ projects for clients worldwide. Tanvir builds, fixes and speeds up WordPress sites every week and writes these guides from that hands-on work.

Keep learning

More WordPress guides

Done for you

Rather have an expert run your WordPress site?

Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.

Website developmentWordPress, Elementor & WooCommerce sitesfrom $899
Fixes & speedErrors, hacks, Core Web Vitals, upgradesFree quote
SEO & paid adsRank on Google, run Meta & Google Adsfrom $300
Creative designWeb, graphic & brand identityfrom $220

Contents

Was this helpful? Spread the word and share with your network!
Facebook
Pinterest
LinkedIn
Reddit
VK
X
Telegram
Threads
Tumblr
Email
WhatsApp
Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Article