Help4 Builder Sales Homepage Tutorial
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
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 2
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.
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
SEO Control
Review metadata, social sharing, schema, readability, indexing, and site-level discovery signals.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 6
SEO score playbook
Understand search, readability, analytics-readiness, content-quality, and business-intent scores, then act on page-specific checks.
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 37
Build a Sales Homepage from a Blank Canvas
Turn one clear offer into a complete responsive homepage with proof, services, process, pricing, FAQ, and a final action.
Read the complete transcript
- Choose the Page Job
Begin with the visitor, the problem, and one primary action. A useful sales homepage normally needs an offer, proof, service or product choices, a simple process, pricing guidance, common questions, and a final contact action. Use a reviewed landing-page starter when it matches that job, or build the same open-band structure from a blank page.
- Build the Structure First
Create full-width sections for each part of the story, then add constrained containers and only the columns the content needs. Set desktop, tablet, and mobile gaps and padding at the parent level. Finish the reading order before styling individual headings or buttons, because a clear structure is easier to edit and less likely to collapse on a phone.
- Add Real Content and Proof
Replace every sample with the real offer, audience, evidence, service facts, links, images, and limitations. Keep one page heading, use meaningful section headings, and connect each action to a real next step. Do not publish invented testimonials, rankings, customer counts, guarantees, or visually similar replacement brand assets.
- Verify the Whole Journey
Read the page from the first promise through the final action at desktop, tablet, three hundred ninety pixels, and three hundred sixty pixels. Test every button, menu, form, media item, FAQ, and pricing choice. Then review title, description, social image, schema, performance, accessibility, and the public page before calling the homepage complete.
Lesson 7
Sections, Containers, and Columns
Understand the layout hierarchy, choose grid or flex behavior, and set responsive gaps, widths, and stacking.
Read the complete transcript
- Read the Hierarchy
Navigator shows the page hierarchy. A section contains columns or inner containers, and those containers hold headings, images, buttons, and other content elements.
- Choose the Layout
Select the parent section and open Design. Choose grid or flex behavior, then set column structure, alignment, wrapping, content width, and overflow intentionally.
- Control Space
Use gap for space between children and padding for space inside the parent. Avoid stacking large margins and padding until the layout becomes unpredictable.
- Set Responsive Structure
On tablet and mobile, change columns, stacking, gap, width, and alignment as needed. The mobile layout should read in a logical order without custom CSS.
Homepage workflow
Give every section one job.
Use full-width open bands with a constrained inner container. Reserve cards for repeated items such as plans, testimonials, services, or case studies.
No nested cards
Keep page sections open and use cards only for repeated comparable items.
No mystery action
Buttons should say what happens next and point to a real route.
No mobile shove
Long words, tables, media, and buttons must not create horizontal overflow.
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.
-
Define the offer
Write the literal service or product, starting price when useful, target customer, primary outcome, and one clear call to action.
Why nowStarting from a confirmed target prevents a correct edit from being applied to the wrong page, template, product, or responsive view.
Done whenThe define the offer result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Build the first viewport
Place the exact brand, concise headline, supporting copy, primary action, and real product or work proof above the fold while leaving the next section visible.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe build the first viewport result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Add proof
Use recognizable outcomes, recent work, reviews, credentials, response expectations, or supported customer types instead of vague claims.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe add proof result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Explain services
Group services by the customer problem they solve and link each important topic to a focused page.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe explain services result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Compare packages
Show meaningful differences, recurring versus one-time cost, limitations, support level, and the next action without hiding required facts.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe compare packages result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Answer objections
Use a visible FAQ section for setup, ownership, billing, support, migration, cancellation, and what the customer must provide.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe answer objections result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Finish the path
Repeat the primary action, add contact and support routes, verify metadata/social preview, and test desktop through 360px.
Why nowThe final verification separates an editor preview from a result that is actually saved, responsive, interactive, and ready for visitors.
Done whenThe finish the path 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.