Page editor [A/B testing]

Back

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 b test element editor

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.
a b test html code element
  • Content: you can make changes on the content of an element such as replacing the text inside a paragraph.
a b test content element
  • 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.
a b test css style text element
a b test css style color element
a b test css style dimensions element
a b test css style borders element
a b test css style layout element
a b test css style others element
  • Change image: an option available only for images which lets you change or upload another image.
a b test change image
  • Edit image: also an option available only for images, you can edit the image by adding effects, frames, stickers text, etc.
a b test edit image
  • Change link: an option available only for links which lets you add a new URL for the element.
a b test 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.
a b test edit link anchor

b. Insert content:

  • Before selected: you can add content before the selected element.
a b test insert content before
  • After selected: adds content after the selected element.
a b test 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.
a b test track clicks
  • Display interaction: you can choose a variation from an active web personalization experiment to be displayed on click on that element.
a b test display interaction
  • Display survey: you can choose one survey from the active ones to be displayed upon clicking on the selected element.
a b test display survey

d. Move element:

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

a b test move element

e. Rearrange element:

You can rearrange the element from an HTML perspective (it changes the hierarchy of the HTML elements that are included in the list).

a b test rearrange element

f. Resize element: 

You can resize the element directly from the editor.

a b test resize element

g. Hide element:

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

a b test hide element before

a b test hide element after

h. Remove element:

This removes the element from the page and all its attributes and values.

a b test remove element before
a b test remove element after

i. Select parent:

This selects the parent tag of the element.

a b test select parent
a b test select parent element

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

Shopping Basket