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

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

Create a Visual Builder experience from scratch

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

Suggest Edits

📘

Note

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.

    The Create Experience window displays with saved blueprints.

  2. Enter a Name for the experience.

  3. Select Blank Experience.

  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.  

  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 Visual Builder elements.

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

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.

Updated 14 days ago