The page editor is the way you can modify the content of a page without learning code or hire expensive programmers.
You can access the page editor after loading a webpage in the A/B test editor.
If you don’t know how to do that, please click here.
After loading the URL of the webpage in the platform, create a “+ New variation” and every time you hover your mouse on a page element (image, link, piece of text, etc.) inside the variation, you will be able to select it.
Click left or right on it and a menu with all the available options for that element will appear.
Here you can edit the HTML code, content and/or CSS style of the element.
- HTML code: selecting this you can make changes inside the HTML code of the element.
- Change text: you can make changes or replace the text inside a paragraph.
- CSS style: you can change the style of the element, details related to: text, color, background, dimensions, borders, layout or even add custom CSS attributes.
- Change image: an option available only for images, which lets you change or upload another image.
- Edit image: also an option available only for images, you can edit the image by adding effects, frames, stickers text, etc.
- Change link: an option available only for links which lets you add a new URL for the element.
- Before selected: you can add content before the selected element.
- After selected: adds content after the selected element.
- Track clicks: sets an on-click trigger goal, which tracks how many clicks were made on that certain element.
This trigger goal is created individually from inside each A/B test. It will not be available in the Goal section from the left side menu.
- Display overlay: you can choose a variation from an active web personalization experiment to be displayed on click on that element.
- Display survey: you can choose one survey from the active ones to be displayed upon clicking on the selected element.
This lets you set another position for the selected element from a CSS perspective (the position attribute).
You can rearrange the element from an HTML perspective (it changes the hierarchy of the HTML elements that are included in the list).
You can resize the element directly from the editor.
This hides the element from the page using the CSS style attribute “visibility: hidden”.
This removes the element from the page and all its attributes and values.
This selects the parent tag of the element.
Undo last edit
This is an option which is visible only after one change has been made in the editor and it undoes the last change made in the editor.
We recommend you to make small to medium changes in terms of complexity, on a webpage in order to avoid design malfunctions. Also, keep in mind that you should test one or maximum two changes in a variation so you could see the precise value your idea brought.