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.

VB-element-menu.png

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.

VB-article-list-element.png

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.

VB-Call-to-action-create-link.png

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

VB-Call-to-action-element.png

The Create Link dialog box displays.

VB-Call-to-action-edit-link.png

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.

    VB-language-selector.png

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

VB-heading-element.png

Image element

Enter a Description for the image and click Select Image

VB-Image-element-new.png

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

VB-select-image.png

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

VB-image-element.png

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.

VB-paragraph-element.png

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.

VB-testimonial-element.png

Styles are not configured for the Testimonial element.