[WordPress] 外掛分享： Header Footer Builder for Elementor

WordPress 外掛 Header Footer Builder for Elementor 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Header Footer Builder for Elementor」是 2025-09-26 上架。
  • 目前有 8000 個安裝啟用數。
  • 上一次更新是 2026-02-16，距離現在已有 10 天。
  • 外掛最低要求 WordPress 3.0 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 有 2 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

wpanik | sharifok | siraji2017 | turboaddons | rabiulalam01833 |

外掛標籤

Elementor footer | Elementor header | elementor templates | header footer builder | create custom header and footer in elementor |

內容簡介

**總結：** Turbo Header Footer Builder for Elementor 是在 Elementor 中創建自定義頁首和頁尾的最簡單方式，不需編碼就可以完全控制設計和自定義。

**問題與答案：**
1. 這個外掛適合哪些使用者？
- 答：這個外掛設計給初學者和進階用戶使用。

2. 是否需要編碼來設計頁首和頁尾？
- 答：不需要編碼，完全在 Elementor 中進行設計。

3. 這個外掛與哪些 Elementor 版本兼容？
- 答：這個外掛適用於 Elementor 免費版和 Elementor Pro。

4. 外掛有什麼高級條件顯示規則？
- 答：可以根據不同頁面定義高級條件顯示規則。

5. 外掛具有哪些關鍵功能？
- 答：包括可自定義的頁首和頁尾模板、頁首樣式選項、即時編輯預覽、粘式頁首、滾動動畫等。

6. 如何自定義頁尾模板？
- 答：使用 Elementor 的拖放介面創建全面可自定義的頁尾版面。

7. 可否根據不同條件顯示某些頁尾？
- 答：是的，可以設定條件以在不同頁面上顯示不同的頁尾。

原文外掛簡介

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 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 header sticky 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.

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.

Visual Dashboard Features (Based on Plugin UI)
Your header footer builder managed in a simple modal-based interface directly inside WordPress:

Quick Create Modals — Create headers or footers without leaving the template list screen.
Include Pages Selector — Choose individual pages or “Select All” for global use.
Display Conditions Dropdown — Choose where the header/footer appears:

Entire Site
All Blog Posts
All Archive Pages
All WooCommerce Products (only appear when woocommerce installed)
All WooCommerce Pages (only appear when woocommerce installed)

Exclude Pages Selector — Exclude specific pages where the design shouldn’t appear.
Header Style Options:

Make Header Sticky
Enable Scroll Animation

Inline Editing — Update conditions instantly from the “Edit Conditions” modal without rebuilding templates.

This visual system ensures fast setup and easy customization for all WordPress users — even beginners.
Benefits of Using Turbo Header Footer Builder

Completly Free: Unlocked all advance features completly free
Save Time: Quickly create custom header and footer in Elementor without coding.
Boost Performance: Optimized for speed and minimal resource usage
SEO Friendly: Clean, semantic HTML output for better search rankings
Responsive Design: Looks great on all devices
Regular Updates: Continuous improvements and new features
Active Support: Get help from our dedicated support team
Extensive Documentation: Comprehensive guides and tutorials available

Installation Steps

Log into your WordPress admin dashboard
Navigate to Plugins > Add New
In the search bar, type “Header Footer Builder for Elementor”
Click Install Now next to the plugin
After installation, click Activate to enable the plugin

How to Create Custom Header and Footer in Elementor
Creating a Custom Header

Go to Turbo H&F Builder > Header Templates
Click Add New Header Template
Enter a name for your header template.
Select the page if the header is for a specific page, or leave it if it applies globally.
Set display conditions for pages or post types.
Select pages to Exclude the header from if needed, or leave it blank to apply globally.
Mark the checkbox to Set the Header Style for Sticky or Scroll Animation you can select both
Click the Create button; you will be redirected to the Elementor editor
Use Elementor’s drag-and-drop interface to create your header template

Creating a Custom Footer
Go to Turbo H&F Builder > Footer Templates
– Click Add New Footer Template
– Enter a name for your Footer template.
– Select the page if the header is for a specific page, or leave it if it applies globally.
– Set display conditions for pages or post types.
– Select pages to Exclude the header from if needed, or leave it blank to apply globally.
– Click the Create button; you will be redirected to the Elementor editor
– Use Elementor’s drag-and-drop interface to create your footer template
Conditional Display Rules
Set up smart display rules for your headers and footers:

Page Types: Home, Blog, Single Post, Archive, etc.
Custom Post Types: Specific headers for products, services, etc.
Device Types: Mobile-specific or desktop-specific designs
Date/Time: Seasonal or time-based header changes

Performance & Compatibility

Optimized for Speed: Minimal CSS/JS, clean HTML output
Compatible With:

Elementor (Free & Pro)
WooCommerce
All major WordPress themes
WPML & Polylang

Getting Help:

Documentation: Visit our comprehensive documentation
Support Forum: Get help from our community
Email Support: Contact our support team directly
Video Tutorials: Step-by-step video guides

Frequently Asked Questions (FAQ)
Q: Do I need Elementor Pro to use this plugin?
A: No, this plugin works with both the free and Pro versions of Elementor.
Q: Can I use different headers for different pages?
A: Yes, you can create multiple header templates and set conditional display rules for different pages or page types.
Q: Does the plugin affect my website’s performance?
A: No, the plugin is optimized for performance and includes caching features to ensure fast loading times.
Q: Can I create a sticky header using this plugin?
A: Yes, you can enable the sticky header feature to keep the header fixed at the top as users scroll down the page.
Q: Can I add animations to my header?
A: Yes, the plugin supports scroll animations for headers, adding dynamic effects when users scroll down the page.
Q: How can I edit the display conditions of my header/footer?
A: After creating your header or footer template, you can edit the display conditions by clicking the Edit button from the template list.
1.1.1

Fix: Solved error with header/footer templates not rendering in Elementor preview mode—no more blank headers/footers when editing templates.
Bug: Fixed Elementor preview mode rendering issue for header/footer templates in this version.

1.1.0

Fix: Ensure selected pages in the Header “Include/Exclude” modal are visibly highlighted in the Select2 dropdown inside admin modals.
Fix: Keep Select2 multi-selects open after selecting items (closeOnSelect: false) so users can pick multiple pages without the dropdown closing.
Fix: Append Select2 dropdowns to the modal using dropdownParent to avoid styling/position conflicts when the dropdown is rendered outside the modal.
Fix: Add CSS fallback to force a clear highlight and checkmark for selected options in the Select2 dropdown.
Docs: Updated changelog to reflect UI and UX fixes for header condition modals.

1.0.9

Fix: Allow plugin header/footer to render inside Elementor editor for normal pages so editor shows correct header/footer.
Fix: Skip plugin header/footer rendering on pages using the Elementor Canvas layout (prevents plugin injection on Canvas pages).
Maintenance: Minor code improvements and safety checks for Elementor preview handling.

1.0.8

Fixed — Duplicate Header Issue – Resolved conflict causing duplicate header output and blank space on some themes.
Improved — Hook Conflict Prevention – Removed redundant wp_body_open hook to prevent header rendering conflicts.
Optimized — Cleaner Code Execution – Reduced duplicate function calls for better performance.

1.0.7

Improved — Faster Header Display – The header now loads earlier on the page, reducing flicker and layout shifts.
Improved — Smoother Elementor Loading – Elementor styles and scripts are loaded sooner to ensure the header appears correctly without delay.

1.0.6

Simplify: Simplified the duplication code for make the plugin more compitable

1.0.5

Added: Promotional notice encouraging users to try Turbo Addons for Elementor
Improved: Header/Footer condition logic for more accurate template assignment
Fixed: Compatibility warnings with the latest versions of Elementor and WordPress

1.0.4

Added: Navigation Menu widget
Added: Button widget
Added: Top Bar widget
Added: Copy Right widget
Added: Site Logo widget
Improved: Asset loading system for better performance
Fixed: Minor PHP warnings and improved escaping

1.0.3

Added: Recommendation notice suggesting installation of the Turbo Addons for Elementor plugin to access the WordPress Nav Menu widget for creating headers and footers.

1.0.2

Added: Video tutorial for how to create header and footer in Elementor using the Header Footer Builder for Elementor plugin.

1.0.1

Fixed: Icons (Font Awesome / Elementor icons) not displaying on frontend.
Improved: Rendering logic for Elementor templates to ensure icons display correctly.

1.0.0

Initial release with header and footer builder functionality.
Integration with Elementor drag-and-drop interface.
Conditional display rules system.
Responsive design support.

License
Turbo Header Footer Builder for Elementor is licensed under the GNU General Public License v3 or later.
Credits
Developed by TurboAddons team with contributions from the WordPress community.
Transform your website’s header and footer with Turbo Header Footer Builder for Elementor – the ultimate solution for custom header and footer design!

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Header Footer Builder for Elementor」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.0.8 | 1.0.9 | 1.1.0 | 1.1.1 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Apply Filters
Close
Mastodon