- Style page elements using CSS
- Identify supported CSS tags in the Optimizely X Web Editor
In Optimizely, you can use the Editor to change the appearance of certain elements on a page your site. For example, maybe you'd 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's how to style an element on your site with CSS in the Visual Editor, with step-by-step instructions below:
Navigate to your experiment or create a new one. Select a variation where you'd like to make a visual change.
At the top of the Editor, select a page from the dropdown menu to edit it.
In the left-hand rail, click Create > Element Change to add a new change or click an element on the page.
In the left-rail, select Styles.
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'd like to change and type your CSS into the text box. In the example below, we've added a border around the hero title element. Note the change in appearance.
Congratulations! You're ready to preview your changes, then publish them live to the world.
CSS properties in Optimizely X
You can use any CSS property to apply changes to elements in the Editor. You cannot, however, target pseudo-elements, e.g. :active, :focus, :hover, or whole classes, as targeting these types of elements is not supported by in-line CSS.