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.

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

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.

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. By default, an experience is made up of sections that you can save as reusable blueprints. An experience can also hold more than one layout, such as a main canvas and a sidebar. See Create Visual Builder content from scratch and Create Visual Builder content from a blueprint.

From a developer's perspective, experiences provide access to the layout system and the UnstructuredData array. See Configure Visual Builder. To give an experience type more than one layout, see Composition properties.

An outline is a tree of the sections in your experience, with the rows, columns, and elements of each section. Use it to add and manage the content of your experience in one view. If an experience has more than one layout, Visual Builder first lists each composition by name. Select a composition to open its layout.

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.

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

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.

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

A developer creates elements for the end user to use. For information about elements, see Content modeling.

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

Visual Builder may encounter a 404 (not found) error if it attempts to access a page or content item that is not properly synced or indexed with Optimizely Graph. Optimizely Graph fetches and manages content. This issue can arise if a page is newly created, modified, following a deployment, or if a sync job failed, resulting in Optimizely Graph being unable to locate the content at the specified path. To address this: