Skip to content
Optimizely CertificationOptimizely Certification Optimizely Certification

Visual Builder Basics

⏱ 20 minutes beginner
📜Foundationcms

Why Visual Builder changes page composition

Section titled “Why Visual Builder changes page composition”

Traditional CMS editing means filling in form fields and hoping the result looks right. Authors create content in one view and preview it in another, switching back and forth to adjust layout. This disconnect slows down publishing and increases the chance of layout mistakes reaching production.

Visual Builder eliminates that gap. You compose pages directly on a visual canvas — dragging components into position, seeing the result as visitors will see it, and publishing without ever leaving the editor. Authors control layout and content in a single workflow, while developers maintain design consistency through component definitions.

What you will do

Section titled “What you will do”
  1. Create a new page in the content tree
  2. Add components to the page using the Visual Builder canvas
  3. Arrange and configure components within layout sections
  4. Preview the page across devices
  5. Publish the page

Create a new page

Section titled “Create a new page”
  1. Open the CMS editor and navigate to the content tree
  2. Right-click the parent page where you want the new page to live
  3. Select New page
  4. Choose a page type from the list — page types that support Visual Builder show a canvas icon
  5. Enter a page name and click Create

The editor opens the Visual Builder canvas. You see an empty page with the layout structure defined by the page type.

Add components to the canvas

Section titled “Add components to the canvas”

The left panel shows available components. These are defined by your development team and represent reusable content blocks — hero banners, text sections, image galleries, call-to-action cards, and similar elements.

To add a component:

  1. Click the Add component button (plus icon) in an empty section of the canvas, or drag a component from the left panel onto the canvas
  2. Drop the component into a layout section — sections highlight in blue when you hover over a valid drop target
  3. The component appears on the canvas with placeholder content

To rearrange components:

  • Drag a component by its handle (the grip icon at the top) to move it within the same section or into a different section
  • Components snap into position within the layout grid
  • The canvas updates in real time so you see exactly how the page will look

Configure component content

Section titled “Configure component content”

Click any component on the canvas to select it. A properties panel opens on the right side.

  • Text fields — Type directly or paste content. Rich text fields include a formatting toolbar.
  • Image fields — Click to open the media library, or drag an image from your desktop.
  • Link fields — Enter a URL or pick an internal page from the content tree.
  • Reference fields — Select related content (other pages, blocks, or media items).

Changes appear on the canvas immediately. There is no separate save step for individual field edits — the page keeps your work in a draft state automatically.

Work with layout sections

Section titled “Work with layout sections”

Layout sections define the grid structure of your page. A page type might include sections for a full-width header, a two-column body, and a single-column footer.

  • Sections cannot be added or removed by authors — they are defined by the page type. If you need a different layout structure, ask your developer to create a new page type or modify the existing one.
  • Components within a section follow the section’s column rules. A two-column section lets you place components side by side; a single-column section stacks them vertically.
  • Nested components are supported when developers define container components. A “Tab Group” component might accept child “Tab” components, for example.

Preview across devices

Section titled “Preview across devices”

Before publishing, verify how the page looks on different screen sizes.

  1. Click the Preview button in the top toolbar
  2. The preview opens in a new view with device controls
  3. Switch between desktop, tablet, and mobile viewports using the device icons
  4. Check that components reflow correctly and no content is cut off

Preview shows the exact rendering your visitors will see, including any personalization rules or conditional content that applies to the current preview context.

Publish the page

Section titled “Publish the page”

When the page is ready:

  1. Click the Publish button in the top toolbar
  2. If your site uses approval workflows, the page enters the approval queue instead of publishing immediately — you see a status indicator showing the current workflow step
  3. Once approved (or if no workflow is configured), the page goes live

Scheduling: To publish at a future date, click the dropdown arrow next to Publish and select Schedule publish. Pick a date and time, and the page publishes automatically.

Common tasks

Section titled “Common tasks”
TaskHow
Duplicate a componentSelect the component, click the overflow menu (three dots), select Duplicate
Delete a componentSelect the component, click the overflow menu, select Delete
Undo changesUse Ctrl+Z (Windows) or Cmd+Z (Mac), or click Undo in the toolbar
View version historyClick Versions in the top toolbar to see previous published versions
Revert to a previous versionIn the Versions panel, select a version and click Restore

What developers need to know

Section titled “What developers need to know”

As a developer, your role is to define the components and page types that authors use in Visual Builder.

  • Components are content types that inherit from BlockData with Visual Builder metadata. Each component specifies which properties are editable on the canvas and how the component renders in the frontend.
  • Page types define the layout sections (grid structure) and which components are allowed in each section.
  • Rendering happens in your frontend application (React, Next.js, or another framework). Visual Builder sends content through Graph; your frontend maps component types to React components or equivalent.

The author experience is only as good as the components you provide. Well-designed components with clear naming, sensible defaults, and appropriate validation make Visual Builder productive for the entire content team.