Visual Builder elements

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

This article uses the Mosey Bank sample project. See the developer documentation, Get started with a demo site for information on configuring the demo site. 

Visual Builder has several built-in elements that you can add to columns by selecting 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. They can have optional and required input fields.

Article List element

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

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.

  

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

Image element

Enter a Description for the image and click Select Image. 

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

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

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.

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.