Header Footer Builder for Eelementor for WordPress & WooCommerce. Beginner-friendly, eCommerce-ready, optimized and fully compatible Plugin.

Md. Abu Bakkar Siddik

Md Rashedul islam Siraji

Md Shariful Islam

Md Rabiul Alam

Turbo Addons

<p>Looking for the easiest way to <strong>create custom header and footer in Elementor</strong>?<br />
Turbo Header Footer Builder for Elementor is the ultimate free solution to design, customize, and control your website’s header and footer without touching a single line of code.</p>
<p>Whether you’re building a business site, eCommerce store, or personal blog, this plugin gives you <strong>complete control</strong> over your header and footer designs — directly inside Elementor’s drag-and-drop editor.</p>
<p><iframe loading="lazy" title="how to use elementor header & footer builder plugin - 2026 | Full Guide by wp-turbo" width="750" height="422" src="https://www.youtube.com/embed/4psOlhRV78E?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>Why Choose Turbo Header Footer Builder For Elementor?</h3>
<ul>
<li><strong>User-Friendly</strong>: Designed for beginners and advanced users alike</li>
<li><strong>No coding required</strong> — design entirely in Elementor  </li>
<li>Works with both <strong>Elementor Free and Elementor Pro</strong>  </li>
<li>Advanced <strong>conditional display rules</strong> for different pages. </li>
<li>Lightweight, <strong>SEO-friendly</strong>, and performance optimized</li>
</ul>
<h3>Key Features</h3>
<h3><strong>Essential Elementor Widgets for Header and Footer Builder</strong></h3>
<ul>
<li><strong>Navigation Menu Widget</strong> – Build fully customizable menus with dropdowns, hover effects, and responsive controls.</li>
<li><strong>Site Logo Widget</strong> – Display dynamic site logo with custom link, width controls, and responsive options.</li>
<li><strong>Icon Button Widget</strong> – Create modern icon-based buttons with full styling controls.</li>
<li><strong>Top Bar Widget</strong> – Add contact info, social icons, announcements, or custom text in a stylish top bar.</li>
<li><strong>Copyright Widget</strong> – Add footer copyright text with dynamic year, company name, and full typography & styling options.</li>
</ul>
<h3><strong>Header Builder</strong></h3>
<ul>
<li><strong>Customizable Header Templates</strong>: Design fully customizable headers using Elementor’s drag-and-drop interface.</li>
<li><strong>Display Conditions</strong>: Define when and where your header should appear on different pages, posts, or custom post types.</li>
<li><strong>Global or Page-Specific Headers</strong>: Set headers globally across the site or assign them to specific pages.</li>
<li><strong>Header Style Options</strong>: Customize the header style, including background color, fonts, spacing, and more.</li>
<li><strong>Live Editing and Preview</strong>: Use Elementor’s live preview to make real-time changes to your header.</li>
<li><strong>Exclude Header from Specific Pages</strong>: Choose pages where the header should not appear, giving you granular control over your site’s design.</li>
<li><strong>Sticky Header</strong>: Make your header sticky to remain at the top of the page when scrolling.</li>
<li><strong>Scroll Animation</strong>: Add animation effects to headers that stay at the top while scrolling.</li>
<li><strong>Edit Display Conditions</strong>: After creating the header template, you can easily edit the display conditions from the template list by clicking the <strong>Edit Condition</strong> button.</li>
</ul>
<h3><strong>Footer Builder</strong></h3>
<ul>
<li><strong>Customizable Footer Templates</strong>: Create fully customizable footer layouts using Elementor’s drag-and-drop interface.</li>
<li><strong>Conditional Display Rules</strong>: Define when and where your footer should appear, including options to target specific pages, posts, or user roles.</li>
<li><strong>Multiple Footer Layouts</strong>: Choose from various footer layouts to quickly set up your footer or create one from scratch.</li>
<li><strong>Global and Page-Specific Footers</strong>: Easily set footers globally or assign them to specific pages, post types, or custom post types.</li>
<li><strong>Preview and Live Editing</strong>: Use Elementor’s live preview feature to make adjustments and see changes in real-time.<br />
The <strong>Footer Builder</strong> gives you complete control over your footer’s design, layout, and visibility, all from within the intuitive Elementor interface.</li>
</ul>
<h3>Visual Dashboard Features (Based on Plugin UI)</h3>
<p>Your header footer builder managed in a <strong>simple modal-based interface</strong> directly inside WordPress:</p>
<ul>
<li><strong>Quick Create Modals</strong> — Create headers or footers without leaving the template list screen.</li>
<li><strong>Include Pages Selector</strong> — Choose individual pages or “Select All” for global use.</li>
<li><strong>Display Conditions Dropdown</strong> — Choose where the header/footer appears:
<ul>
<li>Entire Site</li>
<li>All Blog Posts</li>
<li>All Archive Pages</li>
<li>All WooCommerce Products (only appear when woocommerce installed)</li>
<li>All WooCommerce Pages (only appear when woocommerce installed)</li>
</ul>
</li>
<li><strong>Exclude Pages Selector</strong> — Exclude specific pages where the design shouldn’t appear.</li>
<li><strong>Header Style Options</strong>:
<ul>
<li>Make Header Sticky</li>
<li>Enable Scroll Animation</li>
</ul>
</li>
<li><strong>Inline Editing</strong> — Update conditions instantly from the “Edit Conditions” modal without rebuilding templates.</li>
</ul>
<p>This visual system ensures <strong>fast setup</strong> and <strong>easy customization</strong> for all WordPress users — even beginners.</p>
<h3>Benefits of Using Turbo Header Footer Builder</h3>
<ul>
<li><strong>Completly Free</strong>: Unlocked all advance features completly free</li>
<li><strong>Save Time</strong>: Quickly create custom header and footer in Elementor without coding.</li>
<li><strong>Boost Performance</strong>: Optimized for speed and minimal resource usage</li>
<li><strong>SEO Friendly</strong>: Clean, semantic HTML output for better search rankings</li>
<li><strong>Responsive Design</strong>: Looks great on all devices</li>
<li><strong>Regular Updates</strong>: Continuous improvements and new features</li>
<li><strong>Active Support</strong>: Get help from our dedicated support team</li>
<li><strong>Extensive Documentation</strong>: Comprehensive guides and tutorials available</li>
</ul>
<h3>Installation Steps</h3>
<ol>
<li>Log into your <strong>WordPress admin dashboard</strong></li>
<li>Navigate to <strong>Plugins > Add New</strong></li>
<li>In the search bar, type <strong>“Header Footer Builder for Elementor”</strong></li>
<li>Click <strong>Install Now</strong> next to the plugin</li>
<li>After installation, click <strong>Activate</strong> to enable the plugin</li>
</ol>
<h3>How to Create Custom Header and Footer in Elementor</h3>
<h3>Creating a Custom Header</h3>
<ul>
<li>Go to <strong>Turbo H&F Builder > Header Templates</strong>  </li>
<li>Click <strong>Add New Header Template</strong>  </li>
<li>Enter a name for your header template.  </li>
<li>Select the page if the header is for a specific page, or leave it if it applies globally.  </li>
<li>Set <strong>display conditions</strong> for pages or post types.  </li>
<li>Select pages to <strong>Exclude</strong> the header from if needed, or leave it blank to apply globally.  </li>
<li>Mark the checkbox to <strong>Set the Header Style</strong> for Sticky or Scroll Animation you can select both</li>
<li>Click the <strong>Create</strong> button; you will be redirected to the Elementor editor</li>
<li>Use Elementor’s drag-and-drop interface to <strong>create your header template</strong></li>
</ul>
<h3>Creating a Custom Footer</h3>
<p>Go to <strong>Turbo H&F Builder > Footer Templates</strong><br />
– Click <strong>Add New Footer Template</strong><br />
– Enter a name for your Footer template.<br />
– Select the page if the header is for a specific page, or leave it if it applies globally.<br />
– Set <strong>display conditions</strong> for pages or post types.<br />
– Select pages to <strong>Exclude</strong> the header from if needed, or leave it blank to apply globally.<br />
– Click the <strong>Create</strong> button; you will be redirected to the Elementor editor<br />
– Use Elementor’s drag-and-drop interface to <strong>create your footer template</strong></p>
<h3>Conditional Display Rules</h3>
<p>Set up smart display rules for your headers and footers:</p>
<ul>
<li><strong>Page Types</strong>: Home, Blog, Single Post, Archive, etc.</li>
<li><strong>Custom Post Types</strong>: Specific headers for products, services, etc.</li>
<li><strong>Device Types</strong>: Mobile-specific or desktop-specific designs</li>
<li><strong>Date/Time</strong>: Seasonal or time-based header changes</li>
</ul>
<h3>Performance & Compatibility</h3>
<ul>
<li><strong>Optimized for Speed:</strong> Minimal CSS/JS, clean HTML output  </li>
<li><strong>Compatible With:</strong>
<ul>
<li>Elementor (Free & Pro)</li>
<li>WooCommerce</li>
<li>All major WordPress themes</li>
<li>WPML & Polylang  </li>
</ul>
</li>
</ul>
<p></p>
<h3>Getting Help:</h3>
<ul>
<li><strong>Documentation</strong>: Visit our comprehensive documentation</li>
<li><strong>Support Forum</strong>: Get help from our community</li>
<li><strong>Email Support</strong>: Contact our support team directly</li>
<li><strong>Video Tutorials</strong>: Step-by-step video guides</li>
</ul>
<h3>Frequently Asked Questions (FAQ)</h3>
<h3>Q: Do I need Elementor Pro to use this plugin?</h3>
<p><strong>A:</strong> No, this plugin works with both the free and Pro versions of Elementor.</p>
<h3>Q: Can I use different headers for different pages?</h3>
<p><strong>A:</strong> Yes, you can create multiple header templates and set conditional display rules for different pages or page types.</p>
<h3>Q: Does the plugin affect my website’s performance?</h3>
<p><strong>A:</strong> No, the plugin is optimized for performance and includes caching features to ensure fast loading times.</p>
<h3>Q: Can I create a sticky header using this plugin?</h3>
<p><strong>A:</strong> Yes, you can enable the <strong>sticky header</strong> feature to keep the header fixed at the top as users scroll down the page.</p>
<h3>Q: Can I add animations to my header?</h3>
<p><strong>A:</strong> Yes, the plugin supports <strong>scroll animations</strong> for headers, adding dynamic effects when users scroll down the page.</p>
<h3>Q: How can I edit the display conditions of my header/footer?</h3>
<p><strong>A:</strong> After creating your header or footer template, you can edit the display conditions by clicking the <strong>Edit</strong> button from the template list.</p>
<h3>License</h3>
<p>Turbo Header Footer Builder for Elementor is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.html" rel="nofollow ugc">GNU General Public License v3 or later</a>.</p>
<h3>Credits</h3>
<p>Developed by TurboAddons team with contributions from the WordPress community.</p>
<p><strong>Transform your website’s header and footer with Turbo Header Footer Builder for Elementor – the ultimate solution for custom header and footer design!</strong></p>

Alternatives to Header Footer Builder for Elementor

Top alternatives