Header Footer Builder for Elementor

Looking for the easiest way to create custom header and footer in Elementor?
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.

Get Advanced Features for Modern Website Design — Explore Turbo Addons For Elementor

Whether you’re building a business site, eCommerce store, or personal blog, this plugin gives you complete control over your header and footer designs — directly inside Elementor’s drag-and-drop editor.

Why Choose Turbo Header Footer Builder For Elementor?

• User-Friendly: Designed for beginners and advanced users alike
• No coding required — design entirely in Elementor
• Works with both Elementor Free and Elementor Pro
• Advanced conditional display rules for different pages.
• Lightweight, SEO-friendly, and performance optimized

Key Features

Essential Elementor Widgets for Header and Elementor Footer Builder

• Navigation Menu Widget – Build fully customizable menus with dropdowns, hover effects, and responsive controls.
• Site Logo Widget – Display dynamic site logo with custom link, width controls, and responsive options.
• Icon Button Widget – Create modern icon-based buttons with full styling controls.
• Top Bar Widget – Add contact info, social icons, announcements, or custom text in a stylish top bar.
• Copyright Widget – Add footer copyright text with dynamic year, company name, and full typography & styling options.

Header Builder

• Customizable Header Templates: Design fully customizable headers using Elementor’s drag-and-drop interface.
• Display Conditions: Define when and where your header should appear on different pages, posts, or custom post types.
• Global or Page-Specific Headers: Set headers globally across the site or assign them to specific pages.
• Header Style Options: Customize the header style, including background color, fonts, spacing, and more.
• Live Editing and Preview: Use Elementor’s live preview to make real-time changes to your header.
• Exclude Header from Specific Pages: Choose pages where the header should not appear, giving you granular control over your site’s design.
• Sticky Header: Make your elementor sticky header to remain at the top of the page when scrolling.
• Scroll Animation: Add animation effects to headers that stay at the top while scrolling.
• Edit Display Conditions: After creating the header template, you can easily edit the display conditions from the template list by clicking the Edit Condition button.

Header Effects

• Transparent to Solid on Scroll: Start with a transparent header that smoothly transitions into a solid background as visitors scroll down the page.
• Configurable Scroll Distance: Set exactly when the effect kicks in with a custom scroll distance.
• Custom Solid Background Color: Choose the solid background color your header changes to after scrolling.
• Bottom Shadow: Add a subtle bottom shadow for a polished, sticky look.
• Editor-Integrated Panel: Configure everything right inside the Elementor editor — no code needed. Open any Section or Container in a header template, go to the Advanced tab, and find the Header Effects panel.

Mega Menu

• Assign Elementor Templates: Turn any top-level menu item into a elementor mega menu by assigning an Elementor template to it — right from Appearance → Menus.
• Hover or Click Trigger: Open the mega panel on hover or on click, and close it by clicking outside.
• Full-Width, Custom & Default Widths: Give each menu item a full-width (100vw), custom-width, or default-width panel.
• Panel Width & Alignment Controls: Responsive panel width (px, %, vw) plus left / center / right alignment relative to the screen.
• Responsive Mobile Menu: A hamburger toggle with a scrollable, accordion-style mobile menu and full-width dropdown.
• Complete Styling: Typography, color, background, border, shadow, divider, and hover/active styling for menu items, dropdowns, and the panel.
• AJAX Loading: Load large elementor mega menu content on demand for better performance.

Footer Builder

• Customizable Footer Templates: Create fully customizable footer layouts using Elementor’s drag-and-drop interface.
• Conditional Display Rules: Define when and where your footer should appear, including options to target specific pages, posts, or user roles.
• Multiple Footer Layouts: Choose from various footer layouts to quickly set up your footer or create one from scratch.
• Global and Page-Specific Footers: Easily set footers globally or assign them to specific pages, post types, or custom post types.
• Preview and Live Editing: Use Elementor’s live preview feature to make adjustments and see changes in real-time.
  The Footer Builder gives you complete control over your footer’s design, layout, and visibility, all from within the intuitive Elementor interface.

Read the full description on the official page →