Get started with Visual Builder

Content managers can design, modify, and reuse layout templates directly in the user interface and create adaptable experiences for any channel without developer involvement. Front-end developers can also empower editors to modify the style of the created content while adhering to brand guidelines. See an interactive demo on how to approach content modeling in Optimizely CMS (SaaS) and Visual Builder.

Visual Builder synchronizes content between the outline and the preview panel so you see your changes immediately. See also Preview an experience.

📘

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.

Visual Builder concepts

Visual Builder is the editor interface in the Optimizely Content Management System (CMS) (SaaS).

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, an experience provides access to the Layout System and UnstructuredData. See Visual Builder queries.)

Outline

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

• You can drag and drop a section to any order.
• 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 blueprints.

Section

A section is a visually distinct segment of your webpage; a group of content on a page. (Developers have access to the Layout System and UnstructuredData. See Visual Builder queries.)

Sections use rows and columns in a grid layout to organize and arrange content. You can save sections as a reusable blueprint.

Element

Elements are the building blocks for creating content. As an editor, 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 Visual Builder elements. 

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

Visual Builder has built-in elements, but administrators can also define other elements. See Element Types in Content Types. The element type is like a simplified block, so it allows only a Content Reference property type with its Content type. The element type does not allow Block properties.

Blueprint

Blueprints are reusable layout templates that editors 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 the Visual Builder topic for information about creating styles in Visual Builder.