Dev GuideAPI ReferenceUser Guide
HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
GitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

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.

Build a page from scratch when you want full control over the layout and content structure. Start with a blank experience and add sections, rows, columns, and elements to assemble your page.

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

    Screenshot of the page tree context menu with the Create Page option where editors create a new page from scratch

    The Create Page window displays with saved blueprints.

  2. Enter a Name for the experience.

  3. Select Blank Experience.

    Screenshot of the Create Page dialog with the Blank Experience option selected where editors start a page without a blueprint

  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. Unpin the page tree and asset panes to create more space for content editing. Your blank preview can contain site-specific settings, such as headers or footers, depending on your implementation.

    Screenshot of Visual Builder with the page tree and empty outline on the left and a blank preview on the right where editors begin building content

  5. Click Add Section (+) > Add Section (or the link below it) to start a new section.

    Screenshot of the Add Section button in the outline where editors add the first section to a blank experience

  6. Select a blank section and click Add Section.

    Screenshot of the Add Section dialog with a blank section option where editors select a section type to add

  7. Visual Builder creates a New Blank Section, which you can rename by clicking the name or selecting More (...) > Rename and entering another name.

    Screenshot of the New Blank Section in the outline with the Rename option where editors rename the section

  8. Click Add Row to start your first row.

    Screenshot of the Add Row button in the outline where editors add the first row to a section

  9. Click Add Column to start your first column in row 1.

    Screenshot of the Add Column button in the outline where editors add the first column to a row

  10. Click Add Element and select the element you want in row 1, column 1. See Elements in Visual Builder.

    Screenshot of the Add Element menu with available element types where editors select an element to add to a column

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.

Add as many rows, columns, or elements as you need to a section. Elements within an outline are collapsed by default. Click to expand one element at a time.

Screenshot of a completed section with a row, column, and Heading, Image, and Paragraph elements showing the outline and styled preview

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. 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 10 days ago