Select styles
Steps with information on how to select styles in the Visual Builder in Optimizely CMS (SaaS).
Style lets you choose among rendering options for parts of your experience. When configured, you can change styles on rows, columns, elements, sections, or experiences to affect the content that will be displayed. For example, you can have the same (headless) content but with different styles that affect how the content elements display in the Preview panel. Changing the Display as option may change the particular settings available. A developer can configure the names and available options.Â
You can use the following examples on the beta sample site.Â
Row style
To change the style of a Row, select More (...) > Style from the element.
The following examples show how the row changes with your selections. When the row displays as a card, it not only changes appearance but the remaining settings (Vertical Spacing, Background Color, Columns on Small Screen) you can select. When displaying the same row as Default, the available settings and appearance change.
Your organization can configure the selections to ensure that only brand-approved styles display.
Column style
To change the style of a Row, select More (...) > Style from the element.
The following examples show how the column changes with your selections.
Call To Action element style
To change the style of an Image element, select More (...) > Style from the element.
The following examples show how the call to action changes with your selections.
Heading element style
To change the style of a Heading element, select More (...) > Style from the element.
The following examples show how the heading changes with your selections.
Image element style
To change the style of an Image element, select More (...) > Style from the element.
The following examples show how the image changes with your selections.
You can affect styles on elements or sections.Â
-
To select styles, select More (...) > Style.
-
Choose your options. For example, you want something highlighted, something else with a particular font, or an image displayed as a gallery view or a floating animation.
Updated 5 days ago