Get started with Visual Builder

Using Visual Builder, you can design, modify, and reuse blueprints (layout templates) directly in the Optimizely Content Management System (CMS) (SaaS) user interface. You can create adaptable experiences for any channel without developer involvement. Front-end developers can also create styles that you can pick to help you adhere to your brand's guidelines.

📘

Note

See an interactive demo on how to approach content modeling in Optimizely CMS (SaaS) and Visual Builder.

Visual Builder syncs content between the Outline and the Preview panels, so you see your changes immediately. See Preview an experience.

Visual Builder concepts

Visual Builder is the editor interface in CMS (SaaS) that lets developers, content managers, and content administrators collaboratively build and manage content. This section explores the key concepts of Visual Builder, providing insights into how each aspect contributes to the content creation process.

Experience

An experience is an extension of a page that accesses Visual Builder functionality. Experiences 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 an experience from scratch and Create an experience from a blueprint.

From a developer's perspective, experiences provide access to the layout system and the UnstructuredData array. See Configure Visual Builder.

Outline

An outline is a list view of your sections where you add and manage the content in your experience.

• Go to the content you want to edit by hovering over the section in the Preview or the Outline.
• Click on each content to edit them.
• Control the style of the content.
• Save the content as a reusable blueprint.
• You can drag and drop a section to any order.

Section

A section is a visually distinct segment of your webpage; a group of content on a page. You can save sections as a reusable blueprint.

Sections use rows and columns in a grid layout to organize and arrange content. See the Grid section in the Configure Visual Builder documentation.

Element

Elements are the building blocks for creating content. As a content manager, you cannot divide elements or modify their structure because they are the smallest building blocks. You should define only unchanging structures as elements. 

An element can be as simple as a Heading with a single text input field or more complex, like the Testimonial element with various optional and required fields with customer names, locations, pictures, and text. See Elements in Visual Builder. 

Elements do not have layout controls, but you can style them.

Visual Builder has built-in elements, but content administrators can create element-enabled blocks to experiences in Visual Builder.

📘

Note

Visual Builder uses the TinyMCE editor for Paragraph elements and Reference Text in the Testimonial element. You can customize the TinyMCE editor. See Edit content using the TinyMCE rich-text editor.

Blueprint

Blueprints are reusable layout templates that content managers can create in the user interface. You can save sections and experiences as blueprints. See Blueprints and Save as blueprint.

Style

Style settings let you modify the appearance of the content based on pre-approved guidelines. You can apply style to any level of Visual Builder content such as elements, rows and columns, sections, or experiences. See Select styles. 

See Configure Visual Builder for information about creating styles in Visual Builder.

Elements in Visual Builder

Elements are the building blocks for creating content in Visual Builder, the editor interface in CMS (SaaS).

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

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

Article List element

Select the number of articles you want to display from 1 to 6.

📘

Note

Styles are not configured for the Article List element.

Call To Action element

If you create a Call To Action element, click Add Link to define it.

If the Call to Action element already exists, select More > Edit Link.

The Create Link dialog box displays.

To create a link, select your preference and then upload the content. After you define the Call To Action element, click OK. 

• Language – Automatically detect the site language or select from the available languages for the Call To Action element.

  

• Page – Click Select Page to select a page from the site's Page Tree. 

• Media – Click Select Media to select a page from the For All Applications or For This Page media navigational panel. 

• E-Mail – Enter an e-mail address. 

• External link – Enter an URL. 

You can select More (...) > Style to display the Call To Action element based on styles set in CMS (SaaS). See Select styles.

Heading element

Enter text into the Heading element. You can select More (...) > Style to display the heading based on styles set in CMS (SaaS). See Select styles

Image element

Enter a Description for the image and click Select Image. 

The Select Image dialog box displays. The CMS (SaaS) asset tree displays. Select an image and click OK. 

For existing images, click the image to display the Select Image dialog box again and select a different image, or click the X to remove the image.

You can select More (...) > Style to display the image based on styles set in CMS (SaaS). See Select styles.

Paragraph element

Enter text into the Paragraph element.

📘

Note

Styles are not configured for the Paragraph element.

Testimonial element

The Testimonial element has the following fields:

• Customer Name – Enter the name of the testimonial customer.
• Customer Location – Enter the location of the testimonial customer.
• Customer Photo – Click Select Image. The Select Image dialog box displays. Select the image from the Media navigational panel.
• Reference title – Enter the reference of the testimonial customer.
• Reference text – Enter the testimonial content.

📘

Note

Styles are not configured for the Testimonial element.

Custom elements

Content administrators can create elements by creating a shared block type (called a component in the API) and selecting Element for Available for composition in Visual Builder. For instructions on creating elements, see the Block type section in the Content types documentation.