Once you have provided a name and Experiment URL for an experiment, the variant version of the web page is loaded in the experiment configuration screen. Initially, this is identical to the control version. You can select whether to view the variant or control version of the web page by clicking on the appropriate tab in the experiment configuration header panel.
When the variant version is displayed, you can select the element you wish to change by clicking on it.
Note: Disabled or inactive elements cannot be selected directly. In this case you can select the parent element and then either edit the parent element or use the Select Child option on the Element Configuration menu for the parent.
The element currently selected is highlighted in red. Once you click on the element, the element configuration panel is displayed.
Element configuration panel
The element configuration panel only displays the configuration options that are available to the currently selected element. For example, if there are no child elements then the Select Child option is not displayed.
The configuration options available are:
Edit: This option is available to all element types and you can use it to edit all properties of the selected element. If you click on it the element configuration panel displays a set of tabs containing the following;
HTML editor: This allows you to directly edit the HTML for the selected element.
Text editor: This allows you to edit the text associated with the selected element.
Style: This allows you to configure all of the style properties associated with the selected element. The properties are grouped together by category. The following table shows which properties are available in which category. The table displays all available properties. Some of the properties included here are only available on specific browsers, and the values for the properties may also be restricted by specific browsers.
Category
Properties
Advanced Properties
Text
font-family
font-size
font-style
font-weight
text-align
line-height
color
text-transform
text-decoration
overflow
text-shadow
word-wrap
word-break
word-spacing
font-variant
letter-spacing
Background
background-repeat
background-image
background-position
background-color
background-attachment
opacity
Border
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-radius
Dimensions
width, height
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
max-height
min-height
max-width
min-width
Layout
float
position
z-index
clear
left
right
bottom
top
display
visibility
clip
Other
border-collapse
border-spacing
list-style-type
list-style-image
list-style-position
cursor
N/A
Classes: This allows you to assign a defined CSS class to the specified element.
Edit Image: If the selected element is an image element you can define the image properties using this option. The configuration options available here are:
Image URL: This is the source URL for the image.
Alt Text: This is the alternative text for the image.
Title: This is the text displayed in the tooltip for the image.
Image Size: This is the size at which the image should be displayed. You can select either Default, Maintain Original Size, or Manual Resize. If you select Manual Resize then you must enter a value for the height and width of the image in pixels.
Make/Edit Hyperlink: This option is available to all elements which are a container with content. It is displayed as Make Hyperlink, unless the element is already a hyperlink, in which case it is displayed as Edit Hyperlink. The configuration options available here are:
URL: This is the URL to which the visitor is directed if they click on the hyperlink.
Title: This is the text displayed as the tooltip for the hyperlink.
Target: This specifies how to open the hyperlink once the user clicks it.
Custom JavaScript: This option is available to all element types. It is used to execute a custom JavaScript at runtime.
Remove/Undo Remove: This option is available to all elements. It is used to remove, or undo a previous decision to remove, the selected element from the variant page.
Note: In the experiment configuration screen the element is removed, but the space where it was is preserved so that the removed element can be tracked. When the variant is displayed to a visitor, the element is still loaded as part of the web page, but it is not visible on screen.
Select Parent: This is used to switch focus to the parent element of the currently selected element. The element type of the parent element is shown in brackets.
Select Child: This is used to switch focus to the child element of the currently selected element. The element type of the child element is shown in brackets.
Track Click Goal: This is displayed if the element selected is a link, input element, button, or <a> tags. It assigns the selected element as one of the goals for the experiment and opens the Goal Configuration slide panel so that you can configure the goal. For more information on configuring an element as a goal, please refer to the ???? section of this document.
When you make a change to the variant page, the content in the Variant tab is updated to reflect the changes made. This means you can switch between the Control tab and the Variant tab to see how the changes impact on the variant page.
You can make as many changes as you wish to the variant page.
