Create a Visual Builder experience from scratch

  • Updated
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, Select Mosey Bank's More (...) > Create Experience. Visual Builder create experience

    The Create Experience window displays with saved blueprints.

  2. Enter a Name for the experience.
  3. Select Blank Experience.

    Visual Builder create new experience dialog box

  4. Click Create Experience. 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 panel is where you create a collection of sections that build your experience. You can unpin the page tree to create more space for content editing. Your blank preview may contain site-specific settings, such as headers or footers, depending on your implementation.  

    Visual Builder beach vacations experience

  5. Click Add Section (+) (or the link below it) to start a new section.
  6. Select a blank section and click Add Section.

    Visual Builder add blank 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.)

    Visual Builder Rename Section

  8. Click Add row to start your first row.

    Visual Builder add row

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

    Visual Builder add column

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

    Visual Builder add element

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

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

Visual Builder beach vacations example

Visual Builder uses the TinyMCE editor, 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 removal.

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