Style elements with CSS in the Optimizely Web Experimentation Editor

  • Updated
This topic describes how to style page elements using CSS, and identify supported CSS tags in the Optimizely Web Experimentation Editor.

In Optimizely Web Experimentation, you can use the Editor to change the appearance of certain elements on a page your site. For example, maybe you would like to make a headline stand out more by changing the font or adding a border.

This article shows you how to change the styling of an element with CSS. Applying CSS tags to an element in your page can change its size, color, placement, or whether it's visible or not. Read on to learn more.

Style a page element with CSS

Here is how to style an element on your site with CSS in the Visual Editor:

create-mulit-page-exp.gif

  1. Go to your experiment or create a new one. Select a variation where you want to make a visual change.

  2. At the top of the Editor, select a page from the dropdown menu to edit it.

  3. Click Create > Element Change to add a new change, or click an element on the page.

  4. Select Styles.

  5. Under Inline CSS, you can change the CSS an element on the page.

    Click to select an element in the Editor. Any CSS code that already exists for that element automatically populates. For example, the hero title element below has a CSS tag that defines the size and color of the text shadow.

    Select the element you want to change and type your CSS into the text box. In the example below, we have added a border around the hero title element. Note the change in appearance.

  6. Click Save.

Congratulations! Preview your changes, then publish them live to the world.

CSS properties in Optimizely

You can use any CSS property to apply changes to elements in the Editor. You cannot, however, target pseudo-elements, such as :active, :focus, :hover, or whole classes, as targeting these types of elements is not supported by in-line CSS.