---
title: Get started with Visual Builder
slug: cms-13/docs/get-started-with-visual-builder
createdAt: 2026-07-30T20:22:08.991Z
---

Visual Builder is the editor interface in Optimizely Content Management System (CMS 13) that makes content creation and layout building intuitive and accessible. Content creators can design, modify, and reuse layout templates directly in the user interface (UI) to create adaptable experiences for any channel, without developer involvement. Front-end developers can also empower editors to modify the style of the content they create while adhering to brand guidelines. See [an interactive demo](https://optimizely.navattic.com/cms-content-modeling) on how to approach content modeling in CMS 13 and Visual Builder.

See also [Configure Visual Builder (for developers)](docId:_25oKPc2PruHIFr_QPEvc) for Visual Builder developer information.

Visual Builder syncs content between the outline and the preview panel, so you see your changes immediately. See also [Preview Visual Builder content](docId:_NZhDzXG1kge9dscSRp3p).

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

## Visual Builder concepts

Visual Builder uses the following core concepts to organize and build content.

### Element

Elements are the building blocks for creating content. See [Elements in Visual Builder](docId\:poWrdQQWhlJ7bQg3Sxoal).

Elements can be as simple as a **Heading** with a single text input field or more complex with various optional and required fields.

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

You can also define custom elements. See [Content types](docId\:b_1MwlNWqtTQrzZKeqkt7).

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

Elements do not have a layout. As an editor, you cannot divide elements or modify their structure. You should define only unchanging structures as elements.

### Section

Sections are horizontal slices of a page comprised of elements. Sections use *rows* and *columns* in a grid layout to structure content. You can save sections as a reusable blueprint.

### Outline

An outline is a list view of your sections. Drag and drop a section to any order or go to the content you want to edit by hovering over the section in the preview or the outline.

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

### Pages in Visual Builder

Pages in Visual Builder are flexible and composable web or application pages that display in a list. They are comprised of sections that you can save as reusable blueprints. See [Create Visual Builder content from scratch](docId\:M1WuWpTYrtfmM7nWe-hW2) and [Create Visual Builder content from a blueprint](docId\:N2mIVb3NiqhcVROXZvo6C).

### Blueprint

Blueprints are reusable layout templates that editors can create directly in the UI. Save sections and experiences as blueprints. See [Manage blueprints](docId\:KkY2_Lj82dHr5d2jPZCvo).

### Style

Style settings let you modify the appearance of content based on pre-approved guidelines. Apply style to any level of Visual Builder content, such as elements, rows and columns, sections, or experiences. See [Select Visual Builder styles](docId:6TsN4WhTUJgDtmxOKHe3r).

## Elements in Visual Builder

Elements are the building blocks for creating content in the Visual Builder.

Visual Builder has several built-in elements that you can add to columns by selecting **Add Element** (**+**) > *element name* as shown in the following image.

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

Administrators can define additional elements. See [Create a content type](docId\:b_1MwlNWqtTQrzZKeqkt7).

An element can be as simple as a **Heading** with a single text input field, or more complex, like the **Testimonial** element. They can have optional and required input fields.

### Call To Action element

To create a **Call To Action** element, click **Select Content** to use content from the content tree, or drag content from the **Assets** pane (**Shared Blocks** and **Media**).

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

If the **Call to Action** element already exists, replace, edit, or remove it by selecting **More (...)**.

### Custom Element 1 and 2

To create custom elements, see [Content types](docId\:b_1MwlNWqtTQrzZKeqkt7).

### Heading element

Enter text into the **Heading** element. Select **More** (**...**) > **Style** to display the heading based on styles configured in CMS 13. See [Select Visual Builder styles](docId:6TsN4WhTUJgDtmxOKHe3r).

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

### Image element

Drag an image or click **Select Image**.

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

The **Select Image** window displays. The CMS asset tree displays. Select an image and click **OK**.

For existing images, replace, edit, and remove them from the **More** (**...**) menu.

Select **More** (**...**) > **Style** to display the image based on styles configured in CMS 13. See [Select Visual Builder styles](docId:6TsN4WhTUJgDtmxOKHe3r).

### RichText element

Enter text into the **RichText** element. See also [Edit content using TinyMCE](docId\:DayuLEILGFjNErMEFIEmK).

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

:::hint{type="info"}
**Note**
Visual Builder uses the TinyMCE editor for **RichText** elements. You can customize the TinyMCE editor. Styles are not configured for the **RichText** element.
:::

### Video element

Drag a video file or click **Select Video**.

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

The **Select Video** window displays. The CMS asset tree displays. Select an image and click **OK**.

For existing videos, replace, edit, and remove them from the **More** (**...**) menu.