Style elements with CSS in the Optimizely Web Experimentation Editor

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization

You can use the Visual Editor to change the appearance of certain elements on a page of your site. For example, maybe you want to make a headline stand out more by changing the font or adding a border. You can change the styling of an element with CSS by applying CSS tags for size, color, placement, and visibility.

Style a page element with CSS

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

  2. Select a page from the drop-down list to edit it.

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

  4. Select Styles.

  5. Use Inline CSS to modify the selected element. Click to select an element in the Visual Editor. Any CSS code that already exists for that element automatically populates.Styles.png

  6. Select the element you want to change and type your CSS into the text box.

  7. Click Save.

Preview your changes, then publish them.

CSS properties in Optimizely

You can use any CSS property to apply changes to elements in the Visual Editor. You cannot, however, target pseudo-elements, such as :active, :focus, :hover, or whole classes, as inline CSS does not target these element types.