How to Create Custom WordPress Headers Without Elementor Pro (2026 Complete Guide)

You don’t need Elementor Pro to create stunning custom headers. Here’s how to do it for free.

If you’ve ever tried to customize your WordPress header using Elementor, you’ve probably hit a frustrating wall: Elementor Free doesn’t let you edit headers and footers.

You’re stuck with your theme’s default header, and the only way to unlock custom header designs is to buy Elementor Pro for $59/year.

But what if I told you there’s a 100% free alternative that gives you the same power as Elementor Pro’s Theme Builder?

In this guide, I’ll show you exactly how to create professional custom headers and footers in WordPress — completely free.

The Problem: Elementor Pro’s Paywall

Elementor is hands-down the most popular page builder for WordPress. It’s powerful, intuitive, and has a massive community.

But there’s one major limitation: the free version doesn’t include a theme builder.

Want to create a custom header? You need Elementor Pro ($59/year).

Want to design a custom footer? Elementor Pro.

Want different headers for different pages? You guessed it — Elementor Pro.

For freelancers, small business owners, and beginners, that $59/year adds up. Especially when you’re managing multiple client websites.

I faced this exact problem.

As a WordPress developer, I was building sites for clients and needed custom headers for each one. Buying Elementor Pro for every project wasn’t sustainable.

So I did what any developer would do: I built my own solution.

Introducing BeePixel: A Free Elementor Header Builder

After months of development, testing, and refinement, I created BeePixel Header Footer Builder for Elementor — a completely free plugin that gives you the same header/footer customization power as Elementor Pro.

No premium version. No hidden costs. No upsells.

Just pure, free functionality.

What Can You Do with BeePixel?

✅ Create custom headers using Elementor’s drag-and-drop builder ✅ Design custom footers with unlimited creativity ✅ Add announcement bars above your header ✅ Add extra content below your footer ✅ Set display conditions (show different headers on different pages) ✅ Target specific users (logged-in vs. logged-out, user roles) ✅ Exclude specific pages from showing a template ✅ Use shortcodes to embed templates anywhere ✅ Full WooCommerce support (custom headers for shop, cart, checkout)

And the best part? It works with Elementor Free.

Step-by-Step: Create Your First Custom Header

Let me walk you through creating a custom header from scratch. This takes about 5–10 minutes.

Step 1: Install the Plugin

1. Go to your WordPress dashboard
2. Navigate to Plugins → Add New
3. Search for “BeePixel Header Footer Builder”
4. Click Install Now, then Activate

Prerequisite: Make sure Elementor is installed and activated.

Step 2: Create a New Template

1. In your WordPress dashboard, go to BeePixel HFE → Add New
2. Enter a template name (e.g., “Main Header”)
3. Click Add New

You’ll be taken to the template editor.

Step 3: Design with Elementor

Click the “Edit with Elementor” button.

Now you’re in the Elementor editor. You can:

• Add your logo (Image widget)
• Create a navigation menu (Nav Menu widget)
• Add a search bar (Search widget)
• Include social icons (Social Icons widget)
• Add a cart icon (WooCommerce widget)
• Include a CTA button (Button widget)

Pro Tip: Use Elementor’s Section and Column structure to create a responsive layout. Set different widths for desktop, tablet, and mobile.

Step 4: Set Display Conditions

Once you’re happy with your design, scroll down to the Template Settings meta box (below the Elementor editor).

Here you can set:

Template Type:

• Header
• Footer
• Before Header (for announcement bars)
• After Footer

Display Conditions:

• Entire Website
• Front Page / Homepage
• All Posts
• All Pages
• WooCommerce Pages
• And more…

User Role Targeting:

• All Users
• Logged In Only
• Logged Out Only
• Specific Roles (Admin, Editor, Subscriber, etc.)

Exclude Specific Pages: Enter page/post IDs to prevent the template from showing on certain pages.

Step 5: Publish

Click the Publish button.

That’s it! Your custom header is now live on your website.

Advanced Features You’ll Love

BeePixel isn’t just a basic header builder. It’s packed with advanced features that rival Elementor Pro.

Smart Display Conditions

Want a different header for your homepage vs. blog posts? No problem.

Create multiple templates and set different display conditions for each:

• Template 1: “Homepage Header” → Display on Front Page
• Template 2: “Blog Header” → Display on All Posts
• Template 3: “Shop Header” → Display on WooCommerce Pages

BeePixel automatically loads the correct template based on your conditions.

User Role Targeting

Want to show a special header to logged-in users? Or hide the navigation menu from subscribers?

Use the User Role Targeting feature:

• Show a “Welcome Back, [Username]!” header to logged-in users
• Display a “Sign Up Now!” banner to guests
• Hide admin-only navigation from subscribers

This is perfect for membership sites, LMS platforms, and e-commerce stores.

Exclude Specific Pages

Sometimes you want a template to show everywhere except certain pages.

For example:

• Show your main header everywhere except the landing page
• Hide the navigation on your “Thank You” page
• Exclude the checkout page from your standard header

Just enter the page/post IDs in the Exclude Specific Pages field.

Canvas Template Mode

Want to create a full-width landing page without your theme’s header and footer?

Enable Canvas Template mode. This removes the theme wrapper entirely, giving you a blank canvas to design with Elementor.

Perfect for:

• Landing pages
• Sales pages
• Coming soon pages
• Maintenance mode pages

Shortcode Support

Want to embed a template in a specific post or page? Use the shortcode:

[bphfe_template id=”123"]

Replace “123” with your template’s post ID (you can find this in the URL when editing the template).

This is useful for:

• Adding a custom header in the middle of a blog post
• Embedding a footer in a specific page
• Creating reusable template blocks

BeePixel vs. Elementor Pro: Which Should You Choose?

Let’s be honest: Elementor Pro is an amazing product. It has features that BeePixel doesn’t (yet).

But for header and footer customization, BeePixel does the job just as well — and it’s free.

Feature Comparison

BeePixel (Free): ✅ Custom Headers ✅ Custom Footers ✅ Before Header (Announcement Bar) ✅ After Footer ✅ Display Conditions ✅ User Role Targeting ✅ WooCommerce Support ✅ Shortcode Embed ✅ Canvas Template ❌ Theme Builder (All templates) ❌ Popup Builder ❌ Form Builder ❌ WooCommerce Builder

Elementor Pro ($59/year): ✅ Custom Headers ✅ Custom Footers ✅ Before Header (Announcement Bar) ✅ After Footer ✅ Display Conditions ✅ User Role Targeting ✅ WooCommerce Support ✅ Shortcode Embed ✅ Canvas Template ✅ Theme Builder (All templates) ✅ Popup Builder ✅ Form Builder ✅ WooCommerce Builder

The verdict:

• If you only need custom headers/footers, BeePixel is all you need. Save your $59/year.
• If you need advanced features like popups, forms, and dynamic content, Elementor Pro is worth the investment.

My recommendation: Start with BeePixel. If you later need more advanced features, you can always upgrade to Elementor Pro.

Real-World Use Cases

Let me show you some practical examples of how you can use BeePixel.

Use Case 1: E-commerce Store

Scenario: You run a WooCommerce store and want different headers for different pages.

Solution:

1. Create a “Shop Header” template with a prominent search bar and cart icon
2. Set display condition: WooCommerce Shop Page + Product Pages
3. Create a “Checkout Header” template with minimal navigation
4. Set display condition: WooCommerce Cart + Checkout pages
5. Create a “Main Header” template for all other pages

Result: A professional, context-aware navigation experience.

Use Case 2: Membership Site

Scenario: You have a membership site and want to show different content to logged-in vs. logged-out users.

Solution:

1. Create a “Guest Header” template with “Sign Up” and “Login” buttons
2. Set user role targeting: Logged Out Users
3. Create a “Member Header” template with “My Account” and “Logout” links
4. Set user role targeting: Logged In Users

Result: A personalized experience that drives conversions.

Use Case 3: Announcement Bar

Scenario: You want to promote a limited-time offer at the top of your site.

Solution:

1. Create a “Before Header” template
2. Design an announcement bar with countdown timer and CTA
3. Set display condition: Entire Website
4. Publish

Result: Increased visibility for your promotions without disrupting your main header.

Performance & Compatibility

Performance

One of the biggest concerns with adding plugins is site speed.

BeePixel is built with performance in mind:

• Lightweight code — No bloat
• Conditional loading — Templates only load when needed
• Optimized queries — Minimal database calls
• Cache-friendly — Works seamlessly with caching plugins

In my testing, BeePixel adds less than 50ms to page load time.

Theme Compatibility

BeePixel works with all WordPress themes, including:

• Astra
• GeneratePress
• OceanWP
• Hello Elementor
• Neve
• Kadence
• Blocksy
• Storefront
• Divi
• Avada

If your theme supports WordPress standards, BeePixel will work with it.

Plugin Compatibility

BeePixel is compatible with:

• Caching plugins: WP Rocket, W3 Total Cache, WP Super Cache
• SEO plugins: Yoast SEO, Rank Math, All in One SEO
• Security plugins: Wordfence, Sucuri
• Performance plugins: Autoptimize, Asset CleanUp

Frequently Asked Questions

Q: Does BeePixel work with Elementor Free?

A: Yes! BeePixel works perfectly with the free version of Elementor. You don’t need Elementor Pro.

Q: Can I create multiple headers for different pages?

A: Absolutely. Create unlimited templates and set different display conditions for each. BeePixel will automatically load the correct template.

Q: Will it slow down my website?

A: No. BeePixel is lightweight and optimized for performance. It adds minimal overhead to your site.

Q: Does it work with WooCommerce?

A: Yes! BeePixel has full WooCommerce support. You can create custom headers for shop pages, product pages, cart, and checkout.

Q: Can I show different headers to logged-in and logged-out users?

A: Yes! Use the User Role Targeting feature to show different content based on user status.

Q: Is there a premium version?

A: No. BeePixel is 100% free with no premium version. All features are included.

Q: Do you offer support?

A: Yes! We provide free support through the WordPress.org support forum. We typically respond within 24 hours.

How to Get Started

Ready to create your first custom header? Here’s what to do next:

1. Install BeePixel

Go to your WordPress dashboard → Plugins → Add New → Search for “BeePixel Header Footer Builder” → Install → Activate.

Or download directly from WordPress.org: https://wordpress.org/plugins/beepixel-header-footer-elementor/

2. Create Your First Template

Go to BeePixel HFE → Add New → Design with Elementor → Set display conditions → Publish.

3. Leave a Review

If you find BeePixel helpful, please leave a 5-star review on WordPress.org. It helps other users discover the plugin.

Leave a Review: https://wordpress.org/support/plugin/beepixel-header-footer-elementor/reviews/#new-post

Final Thoughts

You don’t need to pay $59/year for Elementor Pro just to create custom headers.

With BeePixel Header Footer Builder, you get the same power and flexibility — completely free.

Whether you’re a freelancer managing client sites, a small business owner on a budget, or a beginner just starting with WordPress, BeePixel gives you the tools you need to create professional, custom headers and footers.

No coding. No premium upgrades. No hidden costs.

Just pure, free functionality.

Resources

Download BeePixel: https://wordpress.org/plugins/beepixel-header-footer-elementor/

Documentation: https://wordpress.org/plugins/beepixel-header-footer-elementor/

Support Forum: https://wordpress.org/support/plugin/beepixel-header-footer-elementor/

Facebook Community: https://facebook.com/beepixelofficial

If you found this guide helpful, please clap and share it with others who might benefit. Follow me for more WordPress tutorials and tips.

Tags: WordPress, #Elementor, #Web Design, WordPress Plugin, Free Plugin, Header Builder, Footer Builder, WordPress Tutorial, Web Development, Elementor Tutorial