Create an experience from an experience 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. VB-create-experience-3.png

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.

VB-create-experience-from-blueprint-3.png

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.

VB-create-experience-4.png

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.

VB-create-experience-5.png

Rename a section

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

    VB-rename-hero.png

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

    VB-rename-hero-2.png

Add a section

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

VB-add-section.png

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.

VB-add-section-selection.png

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.

VB-add-section-2.png

Remove a section

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

    VB-remove-section.png

  2. Click Remove Section to confirm.
    VB-remove-section-2.png
See Elements in Visual Builder and Select styles for information about customizing the elements of your experience.