Help4 Builder Editor Controls Explained
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
Open the correct page in Studio
Confirm the page title and public route, then keep the center Live Preview and right inspector visible.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 2
Click the visible image
Select the image itself, use Replace Image, add useful alternative text, and leave the neighboring text and button intact.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 3
Edit the selected words
Type in Selected heading text and confirm the same unsaved words remain visible in Live Preview before publishing.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 4
Verify the public page
Open the real page after Save Element and Publish, then confirm the edited words and every untouched sibling remain present.
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 49
Click to Edit Your First Builder Change
Open the correct page, click visible text or an image, preview the unsaved result, publish, and verify without deleting neighboring content.
Read the complete transcript
- Open the Correct Page
From WordPress, open Help4 Builder, choose Builder Pages, and open the page you mean to change. Check the page title at the upper left. The page is now in Studio: tools on the left, Live Preview in the center, and the inspector on the right.
- Click and Replace an Image
To change a photo, click the photo itself in Live Preview. The inspector says Selected image. Choose Replace Image, pick the approved file, add a useful description, and change its link only when needed. On migrated pages, this quick editor protects the rest of the HTML block.
- Click and Edit the Words
To change words, click the visible heading or paragraph. Type only the new words in Selected heading text. Watch the same unsaved result stay visible in Live Preview, then check tablet and mobile. If the old value returns, stop and do not publish.
- Publish and Verify
When the preview is correct, choose Save Element and Publish. Open the public page in another tab and confirm the new words or image, every link, and the neighboring content. Use Navigator only when overlapping layers make the exact item difficult to click.
Lesson 3
Replace an Image Safely
Replace image media, write useful alternative text, and verify responsive fit without deleting the surrounding layout.
Read the complete transcript
- Select Only the Image
Use Navigator to select the image element itself. Do not remove the parent section or an HTML block when your goal is only to replace one picture.
- Choose the New Media
In Content, choose the media item or enter the approved image URL. Keep the existing element ID so surrounding styles, links, and responsive rules remain attached.
- Describe the Image
Add concise alternative text that explains the image's purpose. Decorative images can use empty alt text, but informative images need a useful description for visitors using assistive technology.
- Check Every View
Switch through desktop, tablet, and mobile. Confirm the image does not crop important content, stretch, disappear, or force the page wider than the screen before saving.
Your first complete edit
Change the intended item without deleting the page around it.
Click the visible target first. The inspector must name that target, Live Preview must show the unsaved result, and Save Element and Publish must preserve every sibling you did not edit.
What to click
Click the visible content itself. Use Navigator only for overlap or when you need the parent container rather than the words or image.
Image preparation
Match the target block aspect ratio, use WebP for most photographic or illustrated graphics, and use PNG when real transparency is required. Confirm the target contract before choosing fixed pixel dimensions.
Migrated-page protection
Quick edit changes only the mapped text, image source, alternative text, or link. It refuses nested markup that could lose formatting.
No collateral changes
The selected value persists after save while unrelated markup, fonts, colors, spacing, links, and sibling content remain unchanged.
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.
-
Open the correct page
In WordPress, choose Help4 Builder and Builder Pages, find the page title, and open Studio. Confirm the title under Help4 Builder before editing.
Why nowStarting from a confirmed target prevents a correct edit from being applied to the wrong page, template, product, or responsive view.
Done whenThe open the correct page result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Click the visible item
Click the exact image, heading, paragraph, button, or link in the center Live Preview. The right inspector should identify the selected item.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe click the visible item result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Use Navigator only when needed
Open Navigator when overlapping layers make the intended section, container, column, or widget difficult to click. Select the smallest child that owns the content.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe use navigator only when needed result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Replace an image safely
Choose Replace Image, select the approved file, write useful alternative text, and update the link only when the image should lead somewhere. Do not remove the parent row.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe replace an image safely result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Edit only the words
Type in the Selected heading text or Selected text field. If the item contains nested formatting, Studio leaves it untouched and directs an experienced editor to the advanced source instead of flattening it.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe edit only the words result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Recognize a migrated one-element page
Navigator may show one HTML Block even though the page contains many visible items. Click a supported inner item and use Quick edit what you clicked; the rest of the HTML block stays unchanged.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe recognize a migrated one-element page result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Watch the unsaved result
The new image or words must remain visible in Live Preview, including after switching desktop, tablet, or mobile views. If the old value returns, do not publish and report the page and selected item.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe watch the unsaved result result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Save Element and Publish
Use the blue button only after the intended result is visible. Then open the public page and verify the saved item, links, typography, image, and neighboring content.
Why nowThe final verification separates an editor preview from a result that is actually saved, responsive, interactive, and ready for visitors.
Done whenThe save element and publish 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.