Visual Scene Builder
Free-position layers, drag/resize, rulers, guides, snapping, zoom, live preview, layer order, locking and per-device geometry.
Something big is brewing! Our store is in the works and will be launching soon!
Ironlock HFS is a complete visual construction system for WordPress. Design layered headers and footers, build eight styles of mega menus, create dedicated hamburger experiences, control responsive behavior down to individual widths, hide conflicting theme components safely, and connect real WordPress/WooCommerce data — without turning your site into a stack of unrelated add-ons.
Native WordPress system • WooCommerce-aware • Elementor connectors • RTL/LTR • multilingual design variants
HFS combines visual layout, responsive intelligence, navigation, theme-output control and dynamic site components in one coordinated architecture.
Free-position layers, drag/resize, rulers, guides, snapping, zoom, live preview, layer order, locking and per-device geometry.
Desktop, Tablet, Mobile and Custom profiles plus width keyframes, fluid scaling, collision checks and overflow diagnostics.
WordPress menus, manual menus, 8 mega-menu models and a dedicated hamburger builder with panel, overlay and accessibility controls.
WooCommerce cart/account, language and currency controls, WordPress data, Settings Widget bindings and smart theme visibility rules.
Modern sites need responsive states, mobile navigation, account/cart triggers, mega menus, sticky behavior, multilingual layouts, dynamic WooCommerce data and a safe way to prevent the theme’s own header or drawer from appearing at the same time. Building each part separately usually creates mismatched CSS, duplicate behavior and fragile responsive fixes.
Each major capability has its own builder, but all of them share the same design logic, responsive profiles and frontend output.
Build Header and Footer scenes on a visual canvas.
Turn saved designs into stable responsive intervals.
Create visual, multi-level navigation without being locked to one layout.
Design a complete menu experience instead of a generic mobile drawer.
Find and control conflicting theme/plugin components safely.
Change layout as well as text when the site language changes.
The canvas is not a simplified row/column header editor. Every widget is a layer with independent geometry, device visibility and design controls.
Transparent, solid and gradient modes; two colors; gradient model and angle; border/outline; backdrop blur; hover scale/lift; transition; overflow and standard radius controls.
System, Google, Elementor and Custom font sources with family, size, weight, style, alignment, line-height, letter-spacing, transform and decoration.
Rename, duplicate, delete, lock, hide, reorder and control Z-index without losing widget-specific data.
Overflow and stacking controls are available for menus, account, cart and mega-menu flyouts that must escape the layer frame.
HFS can preserve authored structure while calculating the geometry between saved widths. This is especially useful around laptop widths where headers often start wrapping or colliding.
Test common widths such as 1024, 1280, 1366, 1440, 1600, 1920 and 2560, or move the slider to any width in between.
Edit the current width and save a complete geometry snapshot. HFS interpolates numeric geometry only between keyframes of the same responsive profile.
Detect layer collisions and overflow after final layout. Decorative layers can be marked separately so intentional overlap is not treated as an error.
Keyframe inheritance, fluid values and diagnostics without automatically collapsing or hiding content.
When explicitly allowed, it can collapse Account/Cart text, convert a menu to a prepared hamburger, or hide low-priority layers.
Direction, wrap, grid columns and white-space can remain stable inside an interval so the design does not jump unpredictably.
Essential/Important/Normal/Low/Decorative priority, minimum font/icon/gap/width, maximum width and per-layer scaling/hiding permissions.
Each model changes the information architecture and interaction pattern, while still giving you control over roots, children, nested levels, panels, typography, media, promos and mobile behavior.
Import large hierarchies with Unicode column detection, field mapping and a tree validation preview before the menu is created.
Build nested structures from spreadsheet paths instead of creating hundreds of menu rows manually.
Create or synchronize a native WordPress menu from the same import and optionally remove previously synced items missing from the new file.
Preferred alignment, boundary padding and auto direction help keep panels and flyouts inside the visible page.
The hamburger experience can be designed independently from the desktop menu, including button states, icon geometry, panel layout, overlay and accessibility behavior.
Width, height, background states, border, radius, shadow, opacity, X/Y offsets, side/vertical anchor and multiple icon models.
Width/height, min/max dimensions, background, text, border, radius, padding, shadow, blur, overflow and content alignment.
Left, right, up, down or center opening with Fade, Slide, Scale, Drawer and Reveal transitions plus duration/easing.
Overlay close, Escape close, page scroll lock, auto-close links and focus trapping for keyboard accessibility.
When you publish an HFS header/footer, the original theme may still output its own header, footer, mobile drawer, bar or sidebar. The Visibility Manager gives you a guided, preview-first method to identify and control those elements.
Analyze the real page using semantic HTML, ARIA roles, loaded CSS, computed styles, sticky/fixed behavior and responsive visibility. Hidden mobile menus can be included in the scan.
A detected component is a candidate, not an automatic deletion. Preview the selector, choose the operation and scope, then save only the rule you actually need.
A Persian header and an English header often need different direction, spacing, font, menu, image and geometry. HFS can maintain language-specific Scene variants instead of forcing every locale into one layout.
Create a language variant from the base Scene, copy another language or start independently. Override content and design only where needed.
Use automatic direction by locale, then independently tune X/Y/W/H, typography, menu direction, images and layer visibility for that language.
The documented package includes a free Ironlock translation add-on workflow for sites that do not already use a multilingual plugin, while HFS can also work with established multilingual setups.
Use simple visual elements, dynamic site information, commerce controls and advanced design widgets in the same Scene Builder.
Open a group below to see the practical purpose of every widget included in the current HFS documentation.
HFS goes beyond putting a color picker around basic content. Several widgets have their own internal responsive and inheritance architecture.
Draggable items, instant horizontal/vertical responsive layout, independent row/column gaps, global design and size/layout groups, plus per-item inheritance or override. Includes 40 local SVG icons, Font Awesome and custom SVG support.
31 native shapes with fill, opacity, blur, border, shadow, transform, 16 blend modes and animations. Add an independent icon overlay with its own source, responsive position, gradient, border and shadow.
Style the outer Frame, Icon Box and Text Box separately, including solid/gradient/transparent-center surfaces, borders, blur, shadows, spacing and hover behavior.
The systems around the visual builder matter just as much as the canvas itself.
Enable sticky output per device, control offset and Z-index, apply effects and optionally hide/reveal the header based on scroll direction.
Bind to real Header components such as Logo, Menu, CTA, User Panel, Search, Account, Cart and Phone, or Footer components such as columns, socials, newsletter, trust, payments, language and copyright.
The current build includes a full-width responsive control dock below the Builder for Scene viewport ranges, Auto Responsive controls, device visibility and selected-layer safety constraints.
Fresh installations do not automatically publish a Header/Footer. The setup flow asks before public output, reducing the chance of replacing a live header before the new Scene is ready.
HFS is designed as a general construction engine rather than a single “header template” plugin.
Brand header, sticky navigation, CTA, contact rail, multilingual switcher, announcement bar and structured footer columns.
Department mega menu, search, cart, account, wishlist, trust/payment items, product-category navigation and responsive hamburger conversion.
Login/account state, logout, dynamic menus, notice areas, breadcrumb, language variants and page-specific visibility conditions.
Layered backgrounds, images, 31 shapes, custom HTML, Elementor templates, icon/text systems, gradients, blur and responsive decorative composition.
HFS includes the maintenance and operational controls needed after the design is finished.
Start from bundled Corporate, Glass, Neon and Store designs, continue editing every layer, and export/import Scenes for backup or site migration.
Five focused Elementor connector widgets plus Ironlock Full Canvas for isolated header/footer design when Elementor is part of your workflow.
The current package documents authenticated license-bound updates, package SHA-256 verification, Stable/Beta channels and rollback support.
Practical answers about how HFS fits into an existing WordPress stack.
One visual construction environment for responsive Scenes, mega menus, hamburger navigation, WooCommerce tools, multilingual layouts and controlled theme replacement.
Designed for WordPress professionals, agencies, store owners and site builders who want deep control without rebuilding the same infrastructure from scratch.