How to Create a Custom Header & Footer With Elementor
WordPress Tutorials & How-To (Advanced)
How to Create a Custom Header & Footer With Elementor
Elementor gives you complete design control over your WordPress header and footer. Instead of relying on your theme’s default layout, you can create your own modern, professional header & footer using Elementor Theme Builder. This step-by-step advanced tutorial teaches you how to design global templates that work across your entire website.
1
What You Need Before Starting
Elementor Pro is required for header & footer builder.
To create a fully custom header and footer, you need:
- Elementor Pro (required for Theme Builder)
- A compatible theme (Astra, Hello Elementor, GeneratePress)
- Your logo in PNG/SVG format
- Your menu already created in WordPress
Once you have these ready, you can begin designing.
2
How to Create a Custom Header (Step-by-Step)
Use Elementor Theme Builder for complete control.
Step 1 — Open Theme Builder
- Go to WordPress Dashboard
- Navigate to Templates → Theme Builder
- Select Header
- Click Add New Header
Step 2 — Choose a Ready Template (Optional)
Elementor provides premade headers. You can select one or build from scratch.
Step 3 — Designing Your Header
Use Elementor widgets such as:
- Site Logo widget
- Nav Menu widget
- Button (CTA button)
- Icon widget
- Search Form
Step 4 — Add a Layout Structure
Common professional header layout:
- Left column → Logo
- Center column → Menu
- Right column → CTA Button / Icons
Step 5 — Make It Sticky (Optional)
For sticky header:
- Edit Section → Advanced
- Click Motion Effects
- Enable Sticky: Top
Step 6 — Set Display Conditions
This decides where the header appears.
- Click Publish
- Select Add Condition
- Choose Entire Site
Your custom header is now live!
3
How to Create a Custom Footer (Step-by-Step)
Build a professional footer with global settings.
Step 1 — Open Footer Builder
- Go to Templates → Theme Builder
- Select Footer
- Click Add New Footer
Step 2 — Add Useful Footer Elements
Common footer elements include:
- Logo
- About text
- Contact information
- Quick links
- Social icons
- Newsletter sign-up
- Copyright text
Step 3 — Create a Modern Layout
Recommended structure:
- Column 1 → Logo + About
- Column 2 → Important links
- Column 3 → Services
- Column 4 → Contact details + Social icons
Step 4 — Add a Sub-Footer
Use a separate section for copyright text:
Example: © 2025 YourCompany — All Rights Reserved.
Step 5 — Publish the Footer
- Click Publish
- Set condition → Entire Site
Your footer is now styled and global across your site.
4
Advanced Header Features You Can Add
Take your design to the next level.
- Transparent Header (for hero banners)
- Sticky On Scroll Up header
- Mobile-specific menu design
- Mega menu with Elementor addons
- Cart & account icons for WooCommerce
- Header CTA with animated button
These features improve UX and increase conversions.
5
Advanced Footer Features You Can Add
Modern footers are more than just copyright bars.
- Newsletter form (Mailchimp / FluentCRM)
- Instagram feed integration
- Payment method badges
- Multiple footer layouts based on page type
- Sticky footer for landing pages
- Dark mode footer styling
A well-designed footer increases credibility and engagement.
6
Common Issues & Fixes
Troubleshooting for Elementor users.
1. Header Not Showing?
- Check display conditions
- Disable conflicting theme header
- Clear cache
2. Footer Overlapping Content?
Check section padding and minimum height.
3. Mobile Menu Not Working?
- Check Elementor Nav Menu settings
- Disable conflicting JS plugins
4. Sticky Header Jumps?
Add offset or disable sticky on mobile.
Want Ready-Made Headers & Footers?
All SiteCrafted ready-made websites come with premium Elementor headers & footers professionally designed for conversions, branding, and mobile experience.
