✏️ The Point And Click Editor: Changing Headlines, Buttons And Colours

The point and click editor loads your live page inside the test builder. You click the part you want to change, type the new version and press Apply change. No code, and nothing on the real page changes until the test starts.

Where to find it:

AiX Optimize, Tests, Edit on an Element test, or a new test with Element test picked. The editor appears under section 2, The versions, once the page is chosen and the test has been saved once. It is titled Point and click editor.

Picking a version and an element:

1. In Editing version, choose the version you want to change. The Original is never in this list: it is the page as it is today.
2. Move your mouse over the page. Each part you hover gets a dashed outline and a small label.
3. Click the part you want to change. The left side shows its selector, how many elements it matches, and its current text.

Links and forms on the page do nothing while you edit, so a click never takes you away.

Changing an element:

• Text: the element's words. Type the new version.
• Link (href): shown for links and buttons. Paste a new address to send this version's clicks somewhere else.
• Image: shown when you click a picture. Paste the address of another image, or press Media library and pick one.
• Text colour: a colour such as #111111.
• Background: a colour such as #f59e0b.
• Font size: a size such as 42px.
• Extra CSS for this element: any CSS, for example font-weight:900; letter-spacing:-.02em.

Then:

1. Press Apply change. The page shows the change at once, and it is listed under Changes in this version.
2. Or press Hide element to remove that block from this version.
3. Press Save in the sidebar to keep your changes.

The same element can be changed several times. A new change of the same type replaces the earlier one.

Changes in this version:

Every change is listed with what it does and its selector. The arrow button scrolls the page to that element. The cross removes the change.

The selector line:

The selector is how the change finds its element on every page load. matches 1 element is what you usually want. When it matches more, the change applies to all of them, which is handy for every Join button on a page at once.

Desktop, Mobile and Open in a tab:

• Desktop shows your page at full desktop width, scaled to fit the panel, and Mobile at a phone width of 390 pixels, so you can check the change on both.
• Open in a tab opens the same editor in its own browser tab. Every click there is sent straight back to the builder. Keep the builder tab open while you work.
• Preview a version in the sidebar opens the live page as one version. Previews are never counted.

AI help:

With an AI key connected on the AI tab, a Write 5 alternatives with AI button appears under the Text box, with a box for an optional direction such as more urgent or speak to beginners. Click any suggestion to use it. See AI Features: Challenger Copy, Report Explanations And Test Ideas With Your Own Key.

A real example:

For the Masterclass headline test, the owner of Yoursite Bakery School picked First loaf headline in Editing version, clicked the headline, typed Your First Open, Crackly Sourdough Loaf in 6 Weekends and pressed Apply change. Then she clicked the top button, typed Start Baking This Weekend and pressed Apply change again. Changes in this version listed both, and she pressed Save.

How the changes reach visitors:

• Text and image changes are swapped on your server before the page is sent.
• Colour, size, extra CSS and hidden blocks are CSS in the page head.
• So visitors never see the original first. If a page builder draws the text with JavaScript, the change is applied in the browser instead, behind a short veil of up to 400 milliseconds.

Colour, size, extra CSS, hide and link changes find their element by its selector, and text and image changes are matched by their content, so every kind of change works on every page layout. An element with its own id, such as #masterclass-headline, gives the shortest selector. In the block editor you can give a heading or paragraph an id under Advanced, HTML anchor.

Pages on other sites:

The editor opens a page on another of your sites the same way, through the one line of code in that page's head, and every click there comes back to the builder. When the line is not on the page yet, the editor shows a box titled This page does not have Optimize's line yet, with the line, a Copy button and I added it: check again. Paste the line once in the head of that site, press the button, and the page loads in the editor. See Using Optimize On Any Page Of Any Site (The One Line Of Code).

Tips:

• Change one idea per version, such as a new headline, so the report tells you clearly what worked.
• Test the headline and the main button first. They are seen by almost every visitor.
• Elementor, Divi, Beaver Builder, Bricks, the block editor and classic themes all work, because the editor only needs the finished page.