Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Style elements with CSS in the Editor

This article is about Optimizely X. 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

Here's an up-to-date list of the CSS style tags that you can apply to elements in the Editor. We're expanding this list, so check back often.

To change this:

Use this CSS Property:

Example Inline CSS:

Font size font-size font-size: 32px;
Font weight font-weight font-weight: 300;
Font color color color: #aaa;
Background color background-color background-color: #aaa
Background image background-image image: url ('https://www.YourImage.com');
Height height height: 150px;
Width width width: 900px;
Border color border-color border-color: #bada55;
Border style border-style border-style: solid;
Border width border-width border-width: 2px;
Position position position: absolute;
Display display display: none;
Visibility visibility visibility: hidden;