Docs
Sign in Get started free
Browse docs

Getting Started

Pages & Editor

Waitlist

AI Wizards

Appearance

Integrations

MCP Server

Team Management

Billing

Page Editor

The VOTLI page editor is where you build and customize your pages. It has two modes - Basic and Advanced - so you can make quick content edits or build fully custom layouts.

Editor modes

You can switch between modes using the toggle in the sidebar header.

Basic mode

Best for quick content updates. Basic mode shows a simplified list of your page components with only the most common settings - text, images, and key options. No need to think about layout or structure.

Advanced mode

Full control over your page. Advanced mode gives you:

  • A structure tree showing every section and component on your page
  • A complete settings panel with all available properties
  • Drag & drop reordering of sections and components
  • Copy, paste, and duplicate functionality
  • The ability to add, remove, and nest components

Component library

To add a component, click the Add component button on any section. This opens the component library - a searchable dialog organized by category.

Available categories

Category Components
Navigation Header Nav, Footer
Sections Hero Section, Hero Simple Center, Hero with Screenshot
Content Text Block, Heading, Button, Card, Image, Store Badges, Custom HTML
Layout Grid, Flex Container, Spacer
Platform Support Form, Data Deletion Form, Waitlist Form, Privacy/Terms/EULA/Cookie/Refund Content

Select a component from the library and it is added to your page instantly.

Component settings

Click any component to open its settings in the sidebar. Depending on the component, you may see:

  • Text fields - titles, labels, descriptions (with character hints)
  • Rich text - markdown-enabled content areas
  • Image picker - opens your media library to choose or upload images
  • Color picker - background and text colors
  • Select menus - variants (e.g. button style), alignment, sizing
  • Link editor - manage navigation links with labels, URLs, and icons
  • Toggle switches - show/hide elements, enable features
  • Custom CSS - advanced styling via a code editor (Advanced mode)

Naming components

In the settings panel, you can give any component a custom name and description. This helps your team identify components in the structure tree - especially useful on pages with many sections.

Page structure

Pages are organized in a simple hierarchy:

Page
└── Section
    └── Component
        └── Nested component (in slots)

Sections are the top-level containers. Each section can hold multiple components and has its own layout settings (max width, padding, background, HTML tag).

Components live inside sections. Some components - like Card, Grid, and Flex Container - have slots that accept nested components, letting you build complex layouts.

Adding and removing elements

Sections

  • Click Add Section at the bottom of the canvas to add a new section
  • Select a section and click the trash icon to remove it

Components

  • Click Add component inside any section to open the library
  • For components with slots, a + button appears to add nested content
  • Select a component and click the trash icon to remove it

Reordering

In Advanced mode, grab the grip handle (⋮⋮) that appears on a selected section or component and drag it to a new position. A drop indicator shows where the element will land.

You can also reorder via the structure tree in the sidebar.

Copy, paste & duplicate

Shortcut Action
⌘C / Ctrl+C Copy selected section or component
⌘D / Ctrl+D Duplicate in place
⌘V / Ctrl+V Paste from clipboard

Pasted items get new unique IDs, so you never end up with conflicts.

Toolbar

The top toolbar gives you quick access to key actions:

Area Controls
History Undo (⌘Z) and Redo (⌘Y) buttons
Viewport Switch between Desktop, Tablet (768px), and Phone (390px) previews
SEO Open the SEO settings dialog
URL View and edit the page slug inline
Save / Publish Save draft, publish or republish your page
More menu Preview draft, open live page, show/hide in navigation, revert to published, enable/disable page

Keyboard shortcuts

Shortcut Action
⌘Z / Ctrl+Z Undo
⌘Y / Ctrl+Y Redo
⌘C / Ctrl+C Copy
⌘D / Ctrl+D Duplicate
⌘V / Ctrl+V Paste
Escape Deselect current component

Shortcuts are disabled while typing in text fields.

Responsive preview

Use the viewport switcher in the toolbar to preview your page at different screen sizes. This lets you check how your layout looks on phones and tablets without leaving the editor.