Elements in Visual Builder

  • Updated

Elements are the building blocks for creating content in the visual builder, a new editor interface in the Optimizely Content Management System (CMS (SaaS)).

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

Visual Builder element menu

Administrators can also define other elements. See Create a content type in Content Types. 

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.

The built-in elements in the Mosey Bank example are as follows.

Article List element

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

Visual Builder article list element

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.

Visual Builder Call to action create link

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

Visual Builder Call to action element

The Create Link dialog box displays.

Visual Builder Call to action edit link

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.

    Visual Builder language selector

  • 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 email address. 
  • External link – Enter a URL. 

You can select More (...) > Style to display the call to action based on styles set in the CMS. 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 the CMS. See Select Styles.

Visual Builder heading element

Image element

Enter a Description for the image and click Select Image

Visual Builder Image element new

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

Visual Builder select image

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

Visual Builder image element

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

Paragraph element

Enter text into the Paragraph element.

Visual Builder paragraph element

Styles are not configured for the Paragraph element.

Testimonial element

The Testimonial element has multiple fields in it.

  • 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. See the Image element.
  • Reference title – Enter the reference of the testimonial customer.
  • Reference text – Enter the testimonial content.

Visual Builder testimonial element

Styles are not configured for the Testimonial element.