Help4 Builder Menus, Headers and Footers
Before the first click
Confirm what you are editing and where each kind of change belongs.
Read the page or template title first, select the exact element in the canvas or Navigator, then use the inspector tab that matches the job. This prevents a content change from becoming an accidental layout change.
Content
Change words, links, images, icons, data sources, shortcodes, and element-specific information.
Design
Change colors, typography, spacing, borders, radius, alignment, states, and desktop, tablet, or mobile values.
Advanced
Change labels, anchors, classes, attributes, visibility rules, motion, and other expert controls.
Page Settings
Use page-wide history, globals, publishing, template assignment, and recovery controls instead of editing one element.
Visual orientation
Match the screen before following the steps.
Open each image at full size. The numbered notes explain what the screen controls and what to confirm before changing customer content.
Screen 1
Theme Builder assignments
Review reusable headers, footers, content shells, archive templates, 404 output, conditions, and priorities.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 2
Theme Builder
Create global headers, footers, 404s, page shells, canvas landing pages, popups, and display conditions.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 3
Current Studio workspace
See the element library, device controls, live page frame, inspector, performance guidance, and save state together.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 4
Builder Studio
Use the live page frame, element library, template library, inspector, responsive controls, performance guidance, and save state in one workspace.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 5
Templates in Studio
Browse reusable structures and choose an insertion or replacement path intentionally.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 6
Template Library
Search page-purpose starters, insert a section, or deliberately replace a page instead of beginning from an empty screen.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Watch the real workflow
Watch the clicks before making the change.
Use the narrated walkthrough first, then follow the written steps and verification checks on this page.
Lesson 30
Mega Menus and Complex Navigation
Read the complete transcript
- Build Native Hierarchy
Begin in WordPress Menus and arrange parent and child destinations in a logical hierarchy. Enable the Help4 mega-menu container only on the parent that needs grouped content, then choose an appropriate column count and optional badge. The underlying links should remain understandable even without the expanded visual treatment.
- Place the Menu in a Header
Edit the global header template and insert the native menu component. Select the saved menu, set desktop alignment, dropdown placement, spacing, and the responsive breakpoint. Keep the logo, primary actions, and menu inside a structure that can shrink without clipping the last item.
- Test Pointer and Keyboard
On a desktop or tablet-width layout, move from the parent trigger into the submenu and confirm it remains open across the pointer path. Then use Tab, Enter, Space, and Escape. Every submenu link must be reachable, focus must remain visible, and leaving the menu should close it predictably.
- Test the Mobile Trigger
At the mobile breakpoint, verify one clearly named menu button opens and closes the complete hierarchy. The control should be large enough to tap, report its expanded state, trap no keyboard focus, and restore the page when closed. Long labels and nested items must wrap inside the viewport.
Lesson 14
Theme Builder Conditions and Reuse
Create reusable site templates and assign them to the correct content without duplicate headers, footers, or archive output.
Read the complete transcript
- Choose the Template Role
Open Theme Builder and choose the job first: header, footer, page shell, post, archive, search, 404, popup, or canvas page. Giving the template one clear role keeps the same layout from appearing twice or being inserted once for every archive result.
- Build Reusable Structure
Open the template in Studio and insert only the reusable structure that belongs to its role. Keep page-specific copy in the page layout or dynamic fields. A global header or footer should not quietly contain content meant for one campaign or one customer.
- Set Narrow Conditions
Set scope, content type, includes, excludes, and priority as narrowly as the job requires. Start with a draft assignment, confirm a representative route, and avoid competing templates with the same priority. Specific exclusions should win when a checkout or canvas page needs a different shell.
- Test Assigned Routes
Check Studio and public output on a normal page, a matching singular item, an archive, search, 404, and mobile navigation where relevant. Confirm exactly one assigned template renders, required assets load, interactive controls work, and an unrelated route remains unchanged.
Navigation acceptance
A menu is finished only when visitors can reach every item.
Dropdowns must remain open while the pointer moves into the submenu, keyboard focus must be visible, and mobile controls must open and close without clipping.
Representative routes
Check home, normal page, long page, archive, single, checkout, search, and 404.
No duplicate shell
Only one matching header/footer/template should render per request.
No mobile overflow
Menu panels and long labels must remain within the viewport.
Guided walkthrough
Make one verified change at a time.
Each step includes the action, why it belongs in this order, and the checkpoint to verify before moving forward.
-
Create the menu hierarchy
Build parent and child links in WordPress so desktop and mobile navigation use one source.
Why nowStarting from a confirmed target prevents a correct edit from being applied to the wrong page, template, product, or responsive view.
Done whenThe create the menu hierarchy result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Build the global header
Add logo, menu, contact path, and primary action, then assign it to the intended site scope.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe build the global header result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Test dropdown movement
Move from the parent label into every submenu item without the submenu disappearing across the pointer gap.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe test dropdown movement result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Test keyboard access
Tab through triggers and links, open submenus, and confirm visible focus and Escape behavior.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe test keyboard access result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Test the mobile menu
Verify the hamburger is visible, touch targets work, nested items expand, the panel closes, and body scrolling recovers.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe test the mobile menu result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Assign footer and exceptions
Use include/exclude conditions and priorities for canvas pages, checkout, archives, singles, search, and 404 routes.
Why nowThe final verification separates an editor preview from a result that is actually saved, responsive, interactive, and ready for visitors.
Done whenThe assign footer and exceptions result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
How to know it worked
Verify the edit in Studio and on the real page.
A successful edit stays visible when the element is reselected, matches the intended responsive view, survives publish, and appears on the public URL without clipping or lost styling.
Studio preview
Reselect the element and confirm the saved value and visual result are still present.
Responsive preview
Check desktop, tablet, 390px, and 360px widths for overflow, squeezed controls, and inherited values.
Public page
Open the public route in a new tab after publishing and confirm content, interactions, assets, and spacing.
Recovery
If the result is wrong, stop editing and use History or a known-good revision instead of rebuilding the page.
Avoid the expensive mistakes
Stop when the page stops behaving predictably.
More edits do not repair a bad state. Preserve the evidence, return to a known revision, and reproduce the smallest failing action.
Changing several controls at once
Change one content, design, or responsive value, then confirm it in the preview. A small edit is easier to understand and recover.
Editing the wrong layer
Use Navigator and read the inspector heading. Deleting a parent section can remove every child even when the selected text or image looked harmless.
Checking only desktop
Review tablet, 390px, and 360px before publish. Width, gap, padding, type, alignment, controls, and menus can inherit differently.
Publishing before values persist
Reselect the element and reopen the responsive view. If the value disappears or another tab has a newer revision, reconcile it before publishing.
Continue learning
Use the next guide that matches the work in front of you.
The full tutorial hub remains available without repeating dozens of unrelated cards on this page.
Start here
Install and setup
Download the ZIP, activate Builder Suite, understand the blank-theme path, and run the first clean check.
First page
Build a page safely
Open Builder Pages, launch Studio, build structure first, check mobile, then publish or hand it to Help4.
Editor controls
Know which tab changes what
Use Content for information, Design for appearance and responsive values, and Advanced for identity, attributes, visibility, and motion.
Recovery
Edit without losing work
Replace media safely, recognize stale drafts, and restore a known-good page snapshot from Page Settings History.
Responsive
Control every viewport
Set spacing, widths, columns, alignment, and typography independently for desktop, tablet, and mobile.
Templates
Choose a starter
Pick a starter spec by page job: service, product, support, recent work, local SEO, launch, or checkout recovery.
Need help with this step?
Send Help4 the page, screenshot, or site goal.
Include the URL, what you are trying to build, what looks wrong, and whether this is a draft, staging site, or live customer page.