Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Create a Visual Builder experience from a blueprint

Steps on how to create an experience in Visual Builder using a blueprint in Optimizely CMS (SaaS).

📘

Note

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.


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

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.

Rename a section

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

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

Add a section

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

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.

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.

📘

Note

You cannot drag an element from one column to another.


Remove a section

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

  2. Click Remove Section to confirm.


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.

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