---
title: Select styles
slug: cms-saas/docs/select-styles
docTags: 
createdAt: 2026-07-30T20:18:07.000Z
---

**Style** lets you choose rendering options for parts of your [experiences](docId\:fw42GyhbrcH5AIDDT18VZ) in Visual Builder. When [configured by a developer](docId:0o9L75GP0gCgPCxNO1CvS), you can change styles on rows, columns, elements, sections, or experiences to affect the content that displays.

:::hint{type="info"}
**Note**
Styles are not defined for Article List elements, Paragraph elements, or Testimonial elements. See [Elements in Visual Builder](docId\:fw42GyhbrcH5AIDDT18VZ).
:::

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. See [Display templates (styles)](docId:0o9L75GP0gCgPCxNO1CvS).

## Row style

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/pyTQHLYSxNQXrnC3VoOVq_688b16954ca08b523a477f0c08dc372d086cf2aa98888f84c3c8b29ccfd28034-style-5.png)

The following examples show how the row changes if you select **Button Type > Primary 3** and **Text align > Center**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/XKKTntN8FuGgef1Mlmc3E_eb44b1497f93e26e1739d88ed1b2c843e47a1494aa2c7aa9350dc549a32a3449-image.png)

**Displays as > Default** – The row's 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 **Column**, select **More** (**...**) **> Style** from the element.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Zo0Nl50PD99bjTCXUb73Y_3cebc358692da500ad03877fd24345e99392573082f5565f01e1a7177c9e3729-style-1.png)

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/95214St9WobC1dSsBblJY_0d0eb1cb8a054fa988fa32f9b62d440e8e390606f3f5b625e5fae0c5a68cb1ad-style-3.png)

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/UlRJfMP0JW8FE8BzYrQwn_2c9e279c096b9e78525a8b9ed415d02dc3a0885c6234e793f2813a967f2e80ba-style-2.png)

## Call To Action element style

To change the style of a [Call To Action element](docId\:fw42GyhbrcH5AIDDT18VZ), select **More** (**...**) **> Style** from the element.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_lkCUkzX70W7VdTgKrEcq_5560bd17d5f4846b49891dfe23a9a5179fadcc4010e786bba5f429ae40302892-image.png)

The following examples show how your selections change the **Call To Action** element:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/HAB7lJ6vDjYFwGsjsq6un_595cfda403ec72f5e95c9da6e94f193bf0f5e48fa079d904ddf1e9be560d5271-image.png)

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/lu2H1OuYVLkKJgwqPVx5t_65d44fb8d6323b3689b3c6752d368fbcf26aaa9cc4549da25d19fd1cefcd53b0-image.png)

## Heading element style

To change the style of a [Heading element](docId\:fw42GyhbrcH5AIDDT18VZ), select **More** (**...**) **> Style** from the element.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/dtuiUBeBj2TwGYsT6YpAP_d34309dcbf525a34817fb494a8c1734fc7d9ba191a087566a020779f5b6d4ac9-image.png)

The following examples show how the heading element changes with your selections:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/OoeYAboPAPXE6qv3wK4CD_41f11332305f82f0e88f5f43306dbe4d5b7ca839d7142a0a5842562b158eb249-image.png)

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/xWpM80Zvg66Iq6lQ4f_9h_136cc1bb063706d8c4e56e8cabf640bdcb9fdfee787f22e63f3a9388e7c13319-image.png)

## Image element style

To change the style of an [Image element](docId\:fw42GyhbrcH5AIDDT18VZ), select **More** (**...**) **> Style** from the element.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wYOLHgtIHg23fNv4IVG0b_85cce62b70c36c346e14625f2295455fdaa99c41dd9af2160d49ed689b219ee2-image.png)

## Element-enabled or section-enabled blocks

You can affect styles on [element-enabled](docId\:uW3I84XU2e0gu0WunI8HD) or [section-enabled](docId\:uW3I84XU2e0gu0WunI8HD) blocks in Visual Builder.

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-ZuKI9sJEYydEFiDomH1L_70efc96269680251ff52735bc21faa1dd4602356f9202f0e82c50456086931fa-image.png)

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.