Dylan Ngo - Woostify

ptp96

<blockquote>
<p>Create Header and Footer for your site using Elementor Page Builder for Free.</p>
</blockquote>
<p>Boostify Header Footer Builder for Elementor is a powerful plugin that allows you to create<br />
– Header<br />
– Footer</p>
<h3>Pick Display Locations</h3>
<p>A custom header & footer can be displayed on a specific page or all the pages from the custom field.</p>
<h4>Built-in widgets</h4>
<p>Not like other plugins, the plugin gives the built-in widgets for the header so You don’t need to install any 3rd party plugin for the add-on widget</p>
<ul>
<li><strong>Logo</strong> – Automatically get a logo from the customizer. You can even set a custom image as a logo with a custom link and caption.</li>
<li><strong>Nav Menu</strong> – Offers you list of already created menus on your website. You just need to choose the required one. </li>
<li><strong>Nav Mega Menu</strong> – Support to build Mega menu. </li>
<li><strong>Site Search</strong> – Create a search widget, it support 2 layouts: icon search and form search </li>
<li><strong>Retina Logo</strong> – Add Retina image for retina display </li>
<li><strong>Copyright</strong> – Support copyright shortcode for the footer [btf_year] [btf_site_tile][btf_site_tile] </li>
<li><strong>Menu Cart</strong> – Support cart icon when using WooCommerce </li>
</ul>
<h3>Sticky Header</h3>
<p>Build a sticky header is easily with the plugin. It offers enabling the sticky in mobile, tablet or desktop.<br />
Uploading custom logo for sticky menu, change the background menu, all can be done via Elementor.<br />
<a href="https://www.loom.com/share/c069549ad20a41729cb43da1e3ab5e0a" rel="nofollow ugc">View Tutorial</a><br />
<a href="https://filmic.boostifythemes.com/" rel="nofollow ugc">View Demo</a></p>
<h3>Mega Menu</h3>
<p>Build a mega menu is easily with Elementor. Go to Boostify Header Footer builder -> Add new, in Type, select ‘sub mega menu’ option.<br />
Then build this sub mega menu.<br />
To add it to the header layout, in the header builder, select Nav mega menu, in this widget, select sub mega menu that’s in step one.<br />
<a href="https://www.loom.com/share/ff726f36bec64d67adcd78d63b8243c4" rel="nofollow ugc">View Tutorial</a><br />
<a href="https://boostifythemes.com/demo/wp/apar/" rel="nofollow ugc">View Demo</a></p>
<h3>Verticle Menu button (support mega menu)</h3>
<p>This widget helps create a button that click to show a vertical menu layout.<br />
To add it to the header layout, in Elementor, select Vertical menu button<br />
<a href="https://boostifythemes.com/demo/wp/apar/" rel="nofollow ugc">View Demo</a></p>
<h3>Work With All Themes</h3>
<p>Boostify Header Footer Builder for Elementor works with all themes. For some themes, that use action/filter in the header.php, you can intergrade it with a hook.</p>
<h3>Support WooCommerce</h3>
<p>Create a cart icon is supported on the header. It offers 2 layout for the cart content such as mini cart and sidebar cart.<br />
It also supports Ajax add to cart feature</p>
<h3>Getting Started:</h3>
<p>Let’s get you started</p>
<ul>
<li>Step #1: <span aria-hidden="true" class="wp-exclude-emoji">→</span> Visit Dashboard > Boostify Header Footer Builder and click on the ‘Add New’.</li>
<li>Step #2: <span aria-hidden="true" class="wp-exclude-emoji">→</span> Select ‘Type of Template’ (header/footer). Choose the Display On (Page, custom post type, archive)</li>
<li>Step #3: <span aria-hidden="true" class="wp-exclude-emoji">→</span> Publish it.</li>
<li>Step #4: <span aria-hidden="true" class="wp-exclude-emoji">→</span> Edit & design it with Elementor</li>
<li>Step #5: <span aria-hidden="true" class="wp-exclude-emoji">→</span> Save it!</li>
</ul>
<h3>Privacy Policy</h3>
<p>Boostify Header Footer Builder for Elementor uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements.</p>
<p>Appsero SDK <strong>does not gather any data by default.</strong> The SDK only starts gathering basic telemetry data <strong>when a user allows it via the admin notice</strong>. We collect the data to ensure a great user experience for all our users.</p>
<p>Integrating Appsero SDK <strong>DOES NOT IMMEDIATELY</strong> start gathering data, <strong>without confirmation from users in any case.</strong></p>
<p>Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.</p>
<h3>License</h3>
<p>GNU GPL v2.0.</p>


Boostify Header Footer Builder for Elementor

The $control_id argument is deprecated since version 3.5.0

Create Header, Footer and Mega menu for your WordPress website using Elementor Page Builder for free.

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>

Header Footer Builder for Elementor

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

Boostify Header Footer Builder for Elementor vs Header Footer Builder for Elementor