Select styles

  • Updated

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.

VB-row-style-0.png

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.

VB-row-style.png

VB-row-style-2.png

Column style

To change the style of a Row, select More (...) > Style from the element.

VB-column-style-0.png

The following examples show how the column changes with your selections.

VB-column-style-1.png

VB-column-style-2.png

Call To Action element style

To change the style of an Image element, select More (...) > Style from the element.
VB-call-to-action-styles-3.png
The following examples show how the call to action changes with your selections.

VB-call-to-action-styles-0.png

VB-call-to-action-styles-1.png

Heading element style

To change the style of a Heading element, select More (...) > Style from the element.

VB-heading-styles-3.png

The following examples show how the heading changes with your selections.

VB-heading-styles-2.png

VB-heading-styles-1.png

Image element style

To change the style of an Image element, select More (...) > Style from the element.

VB-image-styles-0.png

The following examples show how the image changes with your selections.

VB-image-styles-1.png

VB-image-styles-2.png

VB-image-styles-3.png

You can affect styles on elements or sections. 

  1. To select styles, select More (...) > Style.

    Visual Builder select style

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