The Editor Interface

Master the Page Builder interface - learn what every button does and where to find key features.

Let's walk through the Page Builder interface so you can start creating pages with confidence.

The Four Main Areas

1. Top Bar - Save Status and Controls

At the very top of your screen, you'll find everything you need to manage your page:

Starting from the left:

• The RevvedUp logo takes you back to your dashboard

• Your work is automatically saved - you'll see "Saved: a few seconds ago" to confirm

In the middle:

• Three viewport buttons show how your page looks on desktop, tablet, and mobile

On the right:

• Preview Mode toggle lets you see your page without editing controls

• Undo and redo arrows let you step through your changes

• The yellow Publish Page button makes your changes live

2. Right Sidebar - Blocks and Settings

The right sidebar is where you'll find everything you can add to your page.

At the top, there are three buttons for page-level settings and configuration.

Below that, you'll see categorized buttons for all the different blocks you can add:

• Layout - Contains the Section block for creating new page sections

• Text - Paragraphs, headings, quotes, and more

• Media - Images, videos, and embeds

• Cards - Testimonials, feature cards, and slideshows

• Tables - Data tables and comparisons

• Lists - Bullet lists, numbered lists, and toggles

• Columns - Multi-column layouts

• Lines - Dividers and separators

• Buttons - Call-to-action buttons and forms

To add any element to your page:

1. Click on a category to see what's available

2. Drag the element you want onto your page

3. Drop it exactly where you want it to appear

Pro tip: The Layout category contains the Section block - this is how you add new sections to your page! Simply drag a Section onto your page to create a new horizontal slice for your content.

3. Main Editor Window - Your Page Canvas

This is where you build your page. It shows exactly how your page will look, with three main parts:

Header - Your navigation bar at the top Content - The main area where you add all your sections and blocks Footer - The bottom area with links and social icons

Working with Sections

Your content is organized into sections that stack vertically.

To create a new section:

• Drag the Section block from the Layout category in the right sidebar

• Drop it where you want the new section on your page

When you click into any section, a toolbar appears with options to:

• Change settings and visibility

• Add backgrounds and colors

• Adjust fonts and spacing

• Add animations

• Copy or save as a template

• Move sections up or down

• Delete sections you don't need

Learn more in our comprehensive Managing Sections guide.

Working with Blocks

Inside each section, you add blocks (text, images, buttons, etc.):

To add blocks:

• Type / on an empty line for a quick menu

• Or drag blocks from the right sidebar

To edit blocks:

• Click into any block to see its specific controls

• Each type of block has different options (like link settings for buttons or upload options for images)

• Some blocks can be resized by dragging their edges

To move blocks:

• Look for the drag handle on the left when you hover

• Click and drag to reorder

4. Floating Toolbars - Smart Controls

Whenever you select text or click into different elements, a floating toolbar appears with relevant options.

For text, you'll see formatting options like bold, italic, links, and AI rewriting.

For other elements, you'll get controls specific to what you're editing - like alignment options, conversion tools, or element-specific settings.

The toolbar is smart - it only shows you what's relevant to what you're working on at that moment.

Mode-Specific Features

Template Mode Only

When editing templates, you'll see additional features:

• Template Variables - Access via slash command or toolbar

  • Insert {{variable}} placeholders

  • Preview with sample data

  • 50+ available variables

• AI Text Blocks - Dynamic content generation

  • Configure per industry/role

  • Set tone and length

  • Preview examples

• Global Changes - All edits affect future generated pages.

NOTE: any changes to a page template does NOT change the other generated pages.

Generated Page Mode Only

When editing a specific contact's page:

• Resolved Variables - See actual values instead of placeholders

• AI Content Review - Generated content is already in blocks on the page

• One-off Edits - Changes only affect this specific page

Keyboard Shortcuts

Essential Shortcuts

• ⌘/Ctrl + S - Save (though auto-save is active)

• ⌘/Ctrl + Z - Undo

• ⌘/Ctrl + Shift + Z - Redo

• / - Open block menu (when cursor is on empty line)

• Arrow keys - Navigate through existing blocks

Text Formatting

• ⌘/Ctrl + B - Bold

• ⌘/Ctrl + I - Italic

• ⌘/Ctrl + U - Underline

• ⌘/Ctrl + K - Add link

Interface Tips

For Beginners

1. Start with a simple section and add blocks

2. Use the Mobile Preview frequently

3. Drag blocks from the right sidebar for visual selection

4. Hover over sections to see all controls

Power User Tips

1. Learn the / commands for faster editing

2. Use keyboard shortcuts to speed up formatting

3. Save custom sections as templates for reuse

4. Type { to quickly insert variables

Common Gotchas

1. Can't find controls? - Click into sections to reveal toolbars

2. Changes not showing? - Remember template edits only affect new pages

3. Can't add certain blocks? - Check block nesting rules

4. Page looks different on mobile? - Always preview before publishing

Quick Reference Card

Area	Purpose	Key Actions
Top Bar	Save status & viewport	Undo/redo, preview modes, publish
Right Sidebar	Block library	Drag blocks, access page settings
Main Canvas	Content editing	Click to edit, hover for section controls
Floating Toolbar	Text formatting	Bold, italic, links, AI rewrite

Next Steps

Now that you know your way around the interface:

• Jump into the 5-Minute Quick Start to build your first page

• Or explore Designing Your Page to understand page structure

Remember: The interface is designed to be intuitive. Don't be afraid to click around and explore – you can always undo changes!