Create a Visual Builder experience from a blueprint

  • Updated
You can create experiences in any part of the page tree, but only the Mosey Bank example branch has a configured preview in the sample site, so you should create your experience under that structure. To rename or delete a blueprint, see Blueprints.

In the page tree, select Mosey Bank's More (...) > Create Experience. Visual Builder create experience

The Create Experience window displays with saved blueprints. In this example, select the Banking experience blueprint that was saved from the Mosey Bank experience, and enter Newton Bank in the Name field. You can filter blueprint names to find the one you want.

Visual Builder create experience from blueprint window

Visual Builder displays the new experience with the blueprint you selected. Newton Bank starts out with the same outline as Mosey Bank, and you can customize it.

Visual Builder display new experience

The left side displays the page tree and outline; the right side displays the preview. You can select desktop, tablet (shown), or mobile views. See Preview an experience for information.

Visual Builder preview experience

Rename a section

  1. On the section you want to rename, select More (...) > Rename.

    Visual Builder rename hero

  2. In this case, rename Hero to Opening Banner.

    Visual Builder rename hero to Opening banner

Add a section

To add a section, click Add Section on an outline.

Visual Builder add section

The Add Section window displays. If you have sections saved as blueprints, you can select it and click Add Section to use a section that is already defined for you.

Visual Builder add section selection

The section is added to the bottom of the outline.

Reorder sections, rows, columns, and element.

You can drag and drop a section to reorder it. You can also drag rows, columns, and elements to customize your experience. Visual Builder numbers rows and columns; you will see the result in the Preview panel when you reorder them.

You cannot drag an element from one column to another.

Visual Builder add section 2

Remove a section

  1. Select More (...) > Remove.

    Visual Builder remove section

  2. Click Remove Section to confirm.
    Visual Builder remove section confirmation dialog box

Copy and paste a row or column

You can copy a row or a column. When you paste it, Visual Builder adds the row or column to the bottom of the hierarchy.

Visual Builder Copy and paste a row or column

See Elements in Visual Builder and Select styles for information about customizing the elements of your experience.