Dev GuideAPI ReferenceUser Guide
HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
GitHubNuGetDev CommunityOptimizely AcademySubmit a ticket
Start typing to search…

Create Visual Builder content from scratch

Create Optimizely Visual Builder content from scratch. Follow step-by-step instructions to build pages, sections, rows, columns, and add elements.

  1. Go to Root > More (...) > Create Page in the page tree.

    The Create Page window displays with saved blueprints.

  2. Enter a Name for the experience.

  3. Select Blank Experience.

  4. Click Create. The page 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 pane is where you create a collection of sections that build your experience. You can unpin the page tree and asset panes 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 (+) > 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 or selecting More (...) > Rename and entering another name.

  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 Elements in Visual Builder.

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

You can add as many rows, columns, or elements as you like to a section. Elements within an outline are collapsed by default. You can click to expand one element at a time.

The total number of validation errors displays next to each section that has required fields that you have not completed. You can go to the outline within a section to view the breakdown of validation errors on each row, column, and element within that 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 Visual Builder content from a blueprint for more actions you can take with Visual Builder to customize your experience.

Updated 2 days ago