內容簡介
HiBuilder 是一款視覺化的拖放式外掛，讓使用者能輕鬆設計 WordPress 的頁面、標頭和頁尾，適用於登陸頁面、商業網站、部落格佈局及 WooCommerce 內容。透過即時畫布添加小工具，並調整設計以適應各種設備。
【主要功能】
• 拖放編輯：直接在畫布上添加、移動和刪除小工具
• 響應式設計：預覽四種設備尺寸並調整樣式
• 標頭和頁尾建構器：創建可重用的模板
• WooCommerce 小工具：添加產品列表和購物車內容
• 自訂樣式：在頁面設定中添加全域 CSS
• SEO 設定：設置元標題、描述和結構化數據
外掛標籤
開發者團隊
原文外掛簡介
Design WordPress Pages, Headers, and Footers with HiBuilder
HiBuilder gives you a visual drag-and-drop workspace for creating landing pages, business websites, blog layouts, and WooCommerce content. Add widgets to a live canvas, arrange your columns, and fine-tune your design for desktop, laptop, tablet, and mobile devices.
Build with the included widgets and visual styling controls, then extend your design with custom CSS, HTML, and WordPress shortcodes when needed. HiBuilder includes its own editor, so no separate page-builder plugin is required.
Create Your Layout Visually
Drag-and-drop editing: Add, move, duplicate, and remove widgets and columns directly on the canvas.
Flexible columns: Build layouts with 1-12 columns, custom widths, and nested content.
Responsive design: Preview four device sizes and adjust device-specific styles and visibility.
Design controls: Customize typography, colors, backgrounds, borders, spacing, sizing, alignment, and entrance animations.
Editing tools: Use undo, redo, and keyboard shortcuts while refining your layout.
Page layouts: Choose full-width, boxed, or custom-width content and control page title visibility.
Key Features
Header and Footer Builder: Create reusable templates and select where they appear across your website.
Global Template Builder: Create a design under HiBuilder > Global Template, below Insert Code. Choose Single Post or Single Product in Template Settings, enable it, and publish your layout to apply it automatically to all posts or all individual products. Use dynamic Heading, Text, Image, and Add to Cart widgets to display the current item’s data. Disabled or empty templates leave the normal layout in place. If multiple templates match, the most recently modified nonempty template wins. Templates can also be embedded using [hibuilder_template id=”123″].
WooCommerce widgets: Add product listings, an individual product, a shop, cart, checkout, and customer account content.
Forms: Configure fields, email delivery, success messages, redirects, optional reCAPTCHA, and submission rate limits.
Custom styling: Add sanitized Global CSS in Page Settings and widget-specific Custom CSS in the Advanced tab.
Custom code: Add header, body, and footer code through HiBuilder settings.
Page SEO settings: Set meta titles, descriptions, canonical URLs, noindex preferences, and schema markup.
HiCanvas templates: Choose HiCanvas Full Width or HiCanvas with Sidebar as a starting layout for your page.
Font choices: Use optional Google Fonts support to expand the available typography.
Content and Design Widgets
Heading and Text Editor: Add headings and formatted text.
Button: Create styled links and calls to action.
Image: Display images with sizing, Default, Absolute, and Fixed positioning, and Z-Index controls.
Image Plus: Add images with hover content and styling.
Banner: Combine images, headings, and text in a featured section.
Gallery: Arrange images in grid, masonry, or slider layouts.
Slider and Carousel: Present visual content in sliding layouts.
Columns: Organize widgets into flexible layouts.
Accordions: Build expandable content with nested widgets, heading HTML tags, and heading border styles. Choose Accordion or Plain Title when adding an item.
List: Present structured content with customizable headings and link options. Item links apply to the heading.
Video: Embed supported video services or use self-hosted videos.
HTML and Shortcode: Add custom markup or supported WordPress shortcode output.
Website and Navigation Widgets
Site Logo: Add your site’s branding to a layout.
Menu: Display WordPress navigation menus with styling and mobile menu controls.
Search: Add a search form for your website’s content.
Posts: Display WordPress posts with grid, slider, and pagination options.
Form: Build forms with configurable fields and submission settings.
Map: Embed a Google Map for a selected location.
Social Media: Add links to your social profiles.
Reviews: Display reviews, with optional Google Places review retrieval.
WooCommerce Widgets
Connect HiBuilder layouts to your WooCommerce store with dedicated widgets:
WooCommerce Products: Display a collection of products.
WooCommerce Shop: Add shop content to a page.
Cart Icon: Add a cart shortcut to your navigation or layout.
WooCommerce Cart: Display the shopping cart.
WooCommerce Checkout: Add the checkout experience.
WooCommerce My Account: Display customer account content.
WooCommerce must be active to display live store content. Cart, Checkout, and My Account use sample content in editor previews.
Build Headers and Footers for Your Site
Create templates under HiBuilder > Header & Footer and design them with the visual builder. Combine your logo, navigation, search, cart icon, and other widgets to create a consistent site layout.
Choose a display condition for each template:
Entire website.
Homepage.
All posts and pages.
Archives and search results.
Selected post or page IDs.
Enable or disable templates individually as your site changes.
Responsive Columns
Regular Columns separates Total Columns (shared content structure) from Columns Per Row (the arrangement for the selected device). Change Total Columns explicitly to add or remove containers; reducing it moves their widgets into the remaining columns. Changing device previews or Columns Per Row never removes or merges content.
Each device stores its column count, direction, distribution, alignment, equal-height preference, and gaps together. Existing settings are imported when a Columns widget is opened in the builder and stored in the new format on the next save. Loop Grid retains its separate repeating-card behavior.
Custom Post Cards for Category Archives
Choose Post Category Archive under Global Template, then add Loop Grid from Category Archive Widgets. Drag Advance Heading, Advance Text Editor, and Advance Image inside its column to design one post card. Use the Post query for these widgets; Category queries describe the archive itself.
The public archive repeats the card for posts in the visited category, with pagination using WordPress’s posts-per-page setting. The editor shows one editable card with sample content. The grid follows the saved column count on desktop, uses at most two columns on tablet, and one on mobile. Selecting one column keeps one column on every screen size. Widgets outside Loop Grid appear once. Existing widgets must be moved inside Loop Grid to repeat.
More Control over Your Design
HiBuilder 2.0.48 adds image positioning and Z-Index controls, expands Accordion heading and item options, reorganizes List settings. These tools give you more control over layered images, structured content.
HiBuilder is independently developed by Hi Classic. It is not affiliated with, endorsed by, or sponsored by any third-party brands or services mentioned in this readme.
External Services
HiBuilder can connect to the following optional external services when their features are configured. Each provider handles data under its terms and privacy policy.
Administrator-configured SMTP service
SMTP delivery is disabled by default. When a site administrator enables it under HiBuilder > Settings, HiBuilder connects to the SMTP server entered by the administrator. Email contents, sender and recipient addresses, authentication credentials, and standard connection metadata are sent to that configured provider for email delivery. The provider and its applicable terms and privacy policy depend on the service selected by the site administrator. SMTP credentials are stored in the WordPress database; using a dedicated credential or app password is recommended.
Google Fonts
Google Fonts is disabled by default. When a site administrator enables it under HiBuilder > Settings, HiBuilder requests the Google Fonts metadata endpoint while an authorized user opens the builder so that the font selector can list available families. The response is cached for one week. When a Google Font is selected in published HiBuilder content, a stylesheet is loaded from Google Fonts in visitors’ browsers; this sends the visitor’s IP address and standard browser request information to Google.
Service information: https://developers.google.com/fonts/faq/privacy
Google Terms of Service: https://policies.google.com/terms
Google Privacy Policy: https://policies.google.com/privacy
Google Places API
The Reviews widget connects to the Google Places API only when an authorized editor supplies an API key and requests reviews for a business. HiBuilder sends the entered business name, location, or Place ID to Google and stores the returned review content in the page layout. Use of this feature requires a Google API key.
Google Maps Platform Terms: https://cloud.google.com/maps-platform/terms
Google Privacy Policy: https://policies.google.com/privacy
Google reCAPTCHA
When a site administrator saves reCAPTCHA keys under HiBuilder > Settings, HiBuilder loads Google reCAPTCHA on pages containing HiBuilder forms. Form submissions send the reCAPTCHA token and visitor IP address to Google for spam verification.
Google Terms of Service: https://policies.google.com/terms
Google Privacy Policy: https://policies.google.com/privacy
Google Maps embeds
Adding a Map widget embeds Google Maps for the selected location. The editor and visitors viewing that widget connect to Google, sending the location query, IP address, and standard browser request information. Google may use cookies according to its privacy policy.
Terms: https://cloud.google.com/maps-platform/terms
Privacy: https://policies.google.com/privacy
Video embeds
The Video widget supports YouTube, Vimeo, and Dailymotion. Adding or configuring an external video embeds the selected provider’s player. The editor and visitors viewing the widget send the video identifier, IP address, and standard browser request information to that provider, which may use cookies. YouTube privacy mode uses youtube-nocookie.com but still connects to YouTube. Self-hosted videos do not require these providers.
YouTube Terms: https://www.youtube.com/t/terms
YouTube Privacy: https://policies.google.com/privacy
Vimeo Terms: https://vimeo.com/terms
Vimeo Privacy: https://vimeo.com/privacy
Dailymotion Terms: https://legal.dailymotion.com/en/terms-of-use/
Dailymotion Privacy: https://legal.dailymotion.com/en/privacy-policy/
Source Code
All plugin source is included in this package. The readable files in assets/js/ and assets/css/ are used directly by WordPress. There are no compiled bundles, minified JavaScript assets, or required build steps. Edit these source files directly; no npm, webpack, or other build tool is needed.
Shortcode output is filtered to the HTML supported by HiBuilder. Shortcodes that return inline scripts or styles must enqueue their assets through WordPress instead.
Third-party Credits
Inline icons include Lucide (ISC license) and Feather (MIT license). Copyright and full license notices are included in licenses/lucide-feather-LICENSE.txt.
Lucide source: https://github.com/lucide-icons/lucide
Feather source: https://github.com/feathericons/feather
Usage
WooCommerce Setup
Install and activate WooCommerce, then configure your store and add products.
Use Products or Shop widgets to add store content to a HiBuilder layout.
Add one Cart, Checkout, or My Account widget to its respective page.
Assign those pages under WooCommerce > Settings > Advanced.
Save your layouts and check the published pages with live store content.
Cart and Checkout use WooCommerce blocks and require a WooCommerce version that provides those blocks. Editor previews use sample cart, checkout, and account content.
Responsive Carousel Behavior
Carousel responsive behavior
Slides to show and slides to scroll inherit from desktop through laptop, tablet and mobile unless overridden. Slide content and inner column structure are shared. Changing preview devices does not change slide structure. Multi-slide views temporarily use a sliding transition when Fade is selected; single-slide views retain Fade. Builder and live output use the same responsive resolver (1200px, 1024px and 767px boundaries).
