Create Visual Builder content from scratch

📘

Note

Developer configuration is necessary to create Visual Builder content from scratch. For detailed instructions, see Configure Visual Builder.

Also, you can create experiences in any part of the page tree, but only the Mosey Bank branch has a configured preview in the sample site, so you should create your experience under that structure.

1. In the page tree, Root's More (...) > Create Page.

   

   The Create Page window displays with saved blueprints (in this case Blank Experience and Clarion Experiences.

2. Enter a Name for the experience.

3. Select Blank Experience.

   

4. Click Create. The experience displays in the page tree.

   Visual Builder displays the page tree and an empty outline on the left and a blank preview on the right. The outline pane is where you create a collection of sections that build your experience. You can unpin the page tree and asset panes to create more space for content editing. Your blank preview may contain site-specific settings, such as headers or footers, depending on your implementation.  

   

5. Click Add Section (+) (or the link below it) to start a new section.

6. Select a blank section and click Add Section.

   

7. Visual Builder creates a New Blank Section, which you can rename by clicking the name and entering another name. (You can also select More (...) > Rename.)

   

8. Click Add row to start your first row.

   

9. Click Add Column to start your first column in Row 1.

   

10. Click Add Element and select the element you want in Row 1, Column 1. See Elements in Visual Builder.

    

The following image shows a section with a row, column, and added elements (Heading, Image, Paragraph). Styles were applied to the Heading and Image elements. See Elements in Visual Builder and Select styles.

You can add as many rows, columns, or elements as you like to a section. 

📘

Note

Visual Builder uses the TinyMCE editor for text fields, which you can customize. See Edit content using the TinyMCE rich-text editor.

To remove a section, select More (...) > Remove. Click Remove Section to confirm the removal.

See Create an experience from a blueprint for more actions you can take with Visual Builder to customize your experience.