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.

a. Edit element: 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.

html-code

  • Content: you can make changes on the content of an element such as replacing 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.

css-style-text

css-style-color

css-style-dimensions

css-style-borders

css-style-layout

css-style-others

  • Change image: an option available only for images which lets you change or upload another image.

change-image

  • Edit image: also an option available only for images, you can edit the image by adding effects, frames, stickers text etc.

edit-image

  • Change link: an option available only for links which lets you add a new URL for the element.

edit-link

  • Edit link anchor: allows you to change the link anchor without losing the javascript events; this option is also available just for link-type elements.

edit-link-anchor

b. Insert content:

  • Before selected: you can add content before the selected element.

insert-contant-before

  • After selected: adds content after the selected element.

insert-content-after

c. On click:

  • 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.

track-clicks

  • Display interaction: you can choose a variation from an active web personalization experiment to be displayed on click on that element.

display-interaction

  • Display survey: you can choose one survey from the active ones to be displayed upon clicking on the selected element.

display-survey

d. Move element: lets you set another position for the selected element from a CSS perspective (the position attribute).

move-element

e. Rearrange element: you can rearrange the element from a HTML perspective (it changes the hierarchy of the HTML elements that are included in list).

rearrange-element

f. Resize element: you can resize the element directly from the editor.

resize-element

g. Hide element: hides the element from the page using the CSS style attribute “visibility: hidden”.

hide-element-before

hide-element-after

h. Remove element: removes the element from the page and all its attributes and values.

hide-element-before

remove-element-after

i. Select parent: selects the parent tag of the element.

select-parent-1

select-parent-2

j. Undo last edit: it’s 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.