Pitabas

<p>The Header & Footer with Elementor plugin allows you to create custom Header and Footer with Elementor for your website.</p>
<h3>Features</h3>
<ul>
<li>Easily create a custom header/footer layout using Eelementor.</li>
<li>Users can easily assign the layout to the corresponding header and footer.</li>
<li>Currently this plugin only compatible with <a href="https://wordpress.org/themes/ascent/" rel="ugc">Ascent</a> theme.</li>
<li>Many more to come…</li>
</ul>


Header & Footer with Elementor

Customize Header & Footer using the Elementor page builder.

Md. Abu Bakkar Siddik

Md Rabiul Alam

Md Shariful Islam

Turbo Addons

Md Rashedul islam Siraji

<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>
<h3>Get Advanced Features for Modern Website Design — Explore <a href="https://turbo-addons.com/" rel="nofollow ugc">Turbo Addons For Elementor</a></h3>
<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><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/4psOlhRV78E?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></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>1.1.4</h3>
<ul>
<li>Update the loading time</li>
<li>Performance Improved</li>
</ul>
<h3>1.1.3</h3>
<ul>
<li>Enhanced: Added “Select All” checkbox functionality for Include Pages and Exclude Pages in header creation modal</li>
<li>Improved: Better page selection UX with individual checkboxes for all available pages (About, Contact, HOME, Portfolio, Portfolio Details, Shop)</li>
<li>Feature: Complete page targeting control with both include and exclude options for precise header display management</li>
</ul>
<h3>1.1.2</h3>
<ul>
<li>Performance: Instant modal loading with pre-cached data (no AJAX delay)</li>
<li>Performance: No page reload after saving – instant updates</li>
<li>UX: Real-time save feedback with “Saving…” and “✓ Saved” states</li>
<li>Fix: Mobile menu z-index – dropdown now appears above content</li>
<li>Fix: Header z-index when sticky/animation disabled</li>
<li>Fix: Elementor preview mode rendering for templates</li>
<li>Security: Enhanced nonce verification</li>
</ul>
<h3>1.1.1</h3>
<ul>
<li>Fix: Solved error with header/footer templates not rendering in Elementor preview mode—no more blank headers/footers when editing templates.</li>
<li>Bug: Fixed Elementor preview mode rendering issue for header/footer templates in this version.</li>
</ul>
<h3>1.1.0</h3>
<ul>
<li>Fix: Ensure selected pages in the Header “Include/Exclude” modal are visibly highlighted in the Select2 dropdown inside admin modals.</li>
<li>Fix: Keep Select2 multi-selects open after selecting items (<code>closeOnSelect: false</code>) so users can pick multiple pages without the dropdown closing.</li>
<li>Fix: Append Select2 dropdowns to the modal using <code>dropdownParent</code> to avoid styling/position conflicts when the dropdown is rendered outside the modal.</li>
<li>Fix: Add CSS fallback to force a clear highlight and checkmark for selected options in the Select2 dropdown.</li>
<li>Docs: Updated changelog to reflect UI and UX fixes for header condition modals.</li>
</ul>
<h3>1.0.9</h3>
<ul>
<li>Fix: Allow plugin header/footer to render inside Elementor editor for normal pages so editor shows correct header/footer.</li>
<li>Fix: Skip plugin header/footer rendering on pages using the Elementor Canvas layout (prevents plugin injection on Canvas pages).</li>
<li>Maintenance: Minor code improvements and safety checks for Elementor preview handling.</li>
</ul>
<h4>1.0.8</h4>
<ul>
<li>Fixed — Duplicate Header Issue – Resolved conflict causing duplicate header output and blank space on some themes.</li>
<li>Improved — Hook Conflict Prevention – Removed redundant wp_body_open hook to prevent header rendering conflicts.</li>
<li>Optimized — Cleaner Code Execution – Reduced duplicate function calls for better performance.</li>
</ul>
<h4>1.0.7</h4>
<ul>
<li>Improved — Faster Header Display – The header now loads earlier on the page, reducing flicker and layout shifts.</li>
<li>Improved — Smoother Elementor Loading – Elementor styles and scripts are loaded sooner to ensure the header appears correctly without delay.</li>
</ul>
<h4>1.0.6</h4>
<ul>
<li>Simplify: Simplified the duplication code for make the plugin more compitable</li>
</ul>
<h4>1.0.5</h4>
<ul>
<li>Added: Promotional notice encouraging users to try Turbo Addons for Elementor</li>
<li>Improved: Header/Footer condition logic for more accurate template assignment</li>
<li>Fixed: Compatibility warnings with the latest versions of Elementor and WordPress</li>
</ul>
<h4>1.0.4</h4>
<ul>
<li>Added: Navigation Menu widget</li>
<li>Added: Button widget</li>
<li>Added: Top Bar widget</li>
<li>Added: Copy Right widget</li>
<li>Added: Site Logo widget</li>
<li>Improved: Asset loading system for better performance</li>
<li>Fixed: Minor PHP warnings and improved escaping</li>
</ul>
<h4>1.0.3</h4>
<ul>
<li>Added: Recommendation notice suggesting installation of the <a href="https://wordpress.org/plugins/turbo-addons-elementor/" rel="ugc">Turbo Addons for Elementor</a> plugin to access the WordPress Nav Menu widget for creating headers and footers.</li>
</ul>
<h4>1.0.2</h4>
<ul>
<li>Added: Video tutorial for how to create header and footer in Elementor using the Header Footer Builder for Elementor plugin.</li>
</ul>
<h4>1.0.1</h4>
<ul>
<li>Fixed: Icons (Font Awesome / Elementor icons) not displaying on frontend.</li>
<li>Improved: Rendering logic for Elementor templates to ensure icons display correctly.</li>
</ul>
<h4>1.0.0</h4>
<ul>
<li>Initial release with header and footer builder functionality.</li>
<li>Integration with Elementor drag-and-drop interface.</li>
<li>Conditional display rules system.</li>
<li>Responsive design support.</li>
</ul>
<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>

Header Footer Builder for Elementor

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

Header & Footer with Elementor vs Header Footer Builder for Elementor