The editor appears in an Element test once you have chosen the page and saved once. Your live page loads inside the builder with a bar across the top that says links and forms are disabled on this preview, so you can click freely.
Making a change:
- Choose the version in "Editing version". The Original is the control and is never edited.
- Hover over the page. Elements are outlined as you move. Click one to select it. A click on a word inside a headline selects the whole headline.
- Use the boxes on the left: "Text" replaces the wording, "Link (href)" appears for buttons and links, "Image" appears when you click a picture, and "Text colour", "Background" and "Font size" restyle the element. "Extra CSS for this element" accepts any CSS declarations.
- Press "Apply change", or press "Hide element" to remove the block for that version.
You will see "Change applied to Version B. Save to keep it." Nothing is stored until you press Save.
The selector line:
Under the box you will see how the change finds its element, followed by "matches 1 element". One is what you usually want. If it matches more, the change applies to all of them, which is sometimes right, for example every buy button on the page.
Changes in this version:
Every change is listed on the left. The arrow scrolls the page to it and the cross removes it. Applying the same kind of change to the same element again replaces the earlier one.
Replacing an image:
Click a picture on the page and the "Image" box shows its current address. Paste the address of another image, or press "Media library" to pick one from your WordPress media library, then press "Apply change". That version shows the new picture in place of the original. The change is listed as "Image" with the file name.
Desktop, Mobile and Open in a tab:
The Desktop and Mobile buttons resize the preview so you can check both widths. "Open in a tab" opens the same editor view of the page in its own browser tab, and every element you click there is sent straight back to this builder, exactly as if you had clicked inside the frame. Keep the builder tab open while you work, and open the editor from that button rather than by typing its address, so the two tabs stay connected. Use it when the framed page is blank or too narrow.
How each change is delivered to visitors:
A text change is swapped inside the page on the server when the original wording is found in the page source. An image change is swapped the same way, on the server, when the original picture address is found in the page source. If a builder draws that text or image with JavaScript, the change is made in the browser instead. Colours, sizes, extra CSS and hidden blocks are CSS in the page head. A link change is made in the browser behind a veil that lasts at most 400 milliseconds.
One tip: a text change looks for the original wording. If you later reword the original on the page itself, select the element again so the change matches the new text.
With an AI key connected, "Write 5 alternatives with AI" sits under the Text box. Add an optional direction, then click any suggestion to use it.