Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Style elements with CSS in the Editor

There are two versions of Optimizely
What version do you have?
X
Optimizely Classic
This is what the Optimizely Classic user interface looks like.
Optimizely X
This is what the Optimizely X user interface looks like.
. If you're using Optimizely Classic, check this article out instead.
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

THIS ARTICLE WILL HELP YOU:
  • 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.

  1. Navigate to your experiment or create a new one. Select a variation where you'd like to make a visual change.

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

  3. In the left-hand rail, click Create to add a new change.

  4. You'll see a short list of options for changing or inserting elements on the page. Select Element Change.

  5. In the left-rail, select Styles.

  6. 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.

  7. Click Save.

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.