Style elements with CSS in the Visual Editor

2 min

Optimizely Web Experimentation

Optimizely Personalization

You can use the Visual EditorVisual 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

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

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

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

Select Styles.

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.

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

Click Save.

Preview your changesPreview 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.