HFE – Documentation

Header Footer Builder for Elementor is a free WordPress plugin that lets you design fully custom headers and footers using the Elementor page builder — no coding required.

• Create unlimited header and footer templates in Elementor.
• Control exactly where each template appears using smart display conditions.
• Build sticky headers and scroll animations.
• Add a transparent-to-solid header effect on scroll.
• Create mega menus from Elementor templates.
• Target mobile, tablet, and desktop devices separately.
• Integrate with WooCommerce for product and shop pages.

The plugin works with both Elementor Free and Elementor Pro, and with all major WordPress themes.

• WordPress 4.7 or higher
• PHP 7.4 or higher
• Elementor (Free or Pro) 3.5.0 or higher
• WooCommerce (optional — enables WooCommerce display conditions)

To install from the WordPress admin:

1. Log in to your WordPress admin dashboard.
2. Go to Plugins > Add New.
3. Search for “Header Footer Builder for Elementor”.
4. Click “Install Now”, then click “Activate”.

After activation, a new menu item “Turbo H&F Builder” appears in the WordPress admin sidebar.

Open the plugin dashboard by clicking “Turbo H&F Builder” in the admin menu.

The dashboard contains two main panels:

• HEADER — lists all header templates, with a “Create New Header” button.
• FOOTER — lists all footer templates, with a “Create New Footer” button.

Each template row shows:

• Name — the template title, plus Sticky and/or Animated badges when enabled.
• Status — Active or Draft. Click the badge to toggle instantly.
• Display Conditions — the rules currently applied.
• Actions — Edit With Elementor, Edit Conditions, and Delete.

The right sidebar includes a “How It Works” guide, a tutorial video button, and a feedback button.

1. Go to Turbo H&F Builder.
2. In the Header panel, click “Create New Header”.
3. In the modal:
   • Header Name — enter a title (required), e.g. “Main Header”.
   • Display Conditions — choose where this header appears (see Section 7).
   • Include Specific Pages — optionally pick individual pages.
   • Exclude Specific Pages — optionally hide on selected pages.
   • Header Style:
     • Sticky Header — keep the header fixed at the top while scrolling.
     • Scroll Animation — add animation effects on scroll.
4. Click “Create & Edit with Elementor”.
5. Design your header using widgets (Navigation Menu, Site Logo, Icon Button, Top Bar, etc.).
6. Click “Publish” (or Update) in Elementor.

1. Go to Turbo H&F Builder.
2. In the Footer panel, click “Create New Footer”.
3. Enter Footer Name, choose Display Conditions, Include/Exclude pages.
4. Click “Create & Edit with Elementor”.
5. Design using widgets such as Copyright, Icon Button, Navigation Menu, or any Elementor widget.
6. Click “Publish” (or Update).

Display conditions decide when and where a header or footer is shown. You can select multiple conditions.

• Entire Site — fallback; more specific templates take priority.
• Front Page — only on the site front page.
• All Pages — only on regular WordPress pages.
• All Blog Posts — only on single blog posts.
• All Archive Pages — archives (categories, tags, etc.).
• 404 Error Page — only when a 404 page is shown.
• Search Results — only on search results pages.
• Date Archives — date-based archives.
• Logged-in Users / Logged-out Users
• Desktop / Tablet / Mobile Devices
• All WooCommerce Products (WooCommerce only)
• All WooCommerce Pages (WooCommerce only)
• Archive: [Taxonomy] > [Term] — specific category, tag, or custom taxonomy.
• Author: [Name] — specific author archive.
• Role: [Role] — specific user role.

Use these to fine-tune visibility on top of display conditions.

• Include Specific Pages — restrict the template to only the pages you select. Click “Select All” to include every page. Leave empty to apply globally.
• Exclude Specific Pages — hide the template on selected pages. Use this to skip a header or footer on a landing page or checkout page.

If a page is both included and excluded, the exclusion wins.

These options are available in the Header create/edit modal.

• Sticky Header — keeps the header fixed at the top while scrolling.
• Scroll Animation — adds a smooth animated effect to the header as the page scrolls.

You can enable both. When enabled, badges (Sticky / Animated) appear next to the template name in the dashboard.

1. Go to Turbo H&F Builder.
2. Find the template in the Header or Footer panel.
3. Click “Edit With Elementor”.
4. Make changes in the Elementor editor.
5. Click “Update” to save.

You can add any Elementor widget to a template, not only the plugin’s own widgets. The plugin’s dedicated widgets are described in Section 14.

• Toggle Active / Draft — click the status badge (Active or Draft) to show or hide it without deleting. Draft templates are not rendered on the front end.
• Edit Conditions — click “Edit Conditions” to change display conditions, include/exclude pages at any time.
• Delete — click “Delete” to permanently remove the template. This cannot be undone.

This feature makes a header start transparent and smoothly transition to a solid background as the visitor scrolls.

1. Open a header template in the Elementor editor.
2. Select any Section or Container inside the header.
3. Go to the Advanced tab.
4. Open the “Header Effects” panel.
5. Configure:
   • Transparent Header — enable the transparent start state.
   • Scroll Distance — the scroll position (px) that triggers the transition to solid.
   • Solid Background Color — the color shown after scrolling.
   • Bottom Shadow — add a subtle shadow for a polished look.

These settings are editor-only and only apply inside header templates.

The plugin supports mega menus in two ways.

1. Open any template or page in Elementor.
2. Drag the “Mega Menu” widget onto the canvas.
3. In the widget settings, assign Elementor templates to menu items and configure trigger, width, alignment, and styling.

1. Go to Appearance > Menus in the WordPress admin.
2. Choose the menu you want to edit.
3. On a top-level menu item, assign an Elementor template as its mega menu panel.

Mega Menu options include:

• Hover or Click trigger
• Full-width, Custom & Default widths
• Panel Width & Alignment (px, %, vw)
• Responsive Mobile Menu (hamburger toggle, accordion-style)
• Complete Styling (typography, color, background, border, shadow, divider, hover/active)
• AJAX Loading for performance

The plugin registers its widgets under the Elementor category “Turbo H&F Builder”.

When WooCommerce is active, two extra display conditions appear:

• All WooCommerce Products — target single product pages.
• All WooCommerce Pages — target shop, cart, checkout, my-account pages.

Use these to create a different header or footer for your store pages, e.g. a simplified checkout header with no navigation.

A: No. The plugin works with both Elementor Free and Elementor Pro.

A: Yes. Create multiple header templates and assign different display conditions to each.

A: Yes. Enable “Sticky Header” in the header create/edit modal.

A: Yes. Enable “Scroll Animation” in the header modal.

A: Yes. Use the “Header Effects” panel in the Elementor editor (Advanced tab of any Section or Container inside a header template).

A: From the dashboard, click “Edit Conditions” on the template row.

A: The plugin loads assets only on pages where a template actually renders, keeping performance impact minimal.

A: Yes. Toggle its status badge from Active to Draft.

• “Turbo H&F Builder” menu is missing — Make sure Elementor is installed and active, and that you are logged in as an administrator.
• Header/footer does not appear on the front end — Check the template status (must be “Active”), and review the display conditions and exclude-pages settings.
• Header appears on a page where it should not — Add that page to the template’s “Exclude Specific Pages” list.
• Header is hidden or invisible — This can happen when JavaScript is disabled. The plugin includes a fallback so the header stays visible without JavaScript. If the issue persists, clear any page/cache plugin caches.
• Changes not showing after editing in Elementor — Regenerate Elementor CSS from Elementor > Tools > Regenerate CSS, and clear any caching plugin.
• WooCommerce conditions are not visible — Install and activate WooCommerce, then reopen the dashboard.

From the plugin dashboard you can:

• Watch the tutorial video (right sidebar).
• Send soft feedback (button at the bottom of the header/footer panel) to report issues, broken features, or feature requests.
• Rate the plugin on WordPress.org to help us improve.

For documentation, video tutorials, and support, visit our website.