Building a Custom Header & Footer

Templates, Global Styles & Theme Builder Preview

Hands-on theme parts

Header: logo + menu + button

Theme Builder → Header → New\n1. Add a section (full width, boxed content)\n2. Left column: Logo widget\n3. Centre column: Nav Menu widget (pick your menu)\n4. Right column: Button widget ("Contact")\n5. Style the background and spacing\n6. Set condition: Entire Site → Save

Make it sticky

In the header section's Advanced tab, set Position → Sticky → Top, so the header stays visible when scrolling.

Footer

Theme Builder → Footer → New\nThree columns:\n- Column 1: site title + description\n- Column 2: short nav menu\n- Column 3: contact details\nCondition: Entire Site → Save

Practical exercise

Replace your site's default header with your custom one, add a sticky effect, and verify it on mobile.

This is a free preview lesson

Enroll in the Elementor Page Builder to unlock every lesson, lesson PDF guides, quizzes and your certificate - and start creating your own pieces today.

Enroll now — see more

Discussion

Theme Builder Basics

Free preview lesson

Forms, Popups & Pro Features