Overview
The visual editor is a WYSIWYG (What You See Is What You Get) editor where you click directly on page elements to edit them. Everything you see in the editor is exactly how your page will look when published.
Editing Elements
Click on any element on the page to select it. An Inspector Panel opens on the right with editing options:
- Text — Click any text to edit it inline. Change font family, size, weight, line height, and letter spacing. Adjust alignment (left, center, right, justify). Change text color.
- Colors & Backgrounds — Change background color (solid colors and gradients). Set text and border colors. Use your Brand Kit colors for quick access.
- Background Image — Right-click to open the dropdown, and adjust the Fit and Position parameters to place your background image precisely. Turn on the toggle for Overlay to set a color and an opacity to overlay on your image.
- Spacing & Layout — Adjust padding and margin using scrub inputs — drag horizontally to adjust, or click to type a value directly. Hold Shift while dragging for fine-tuned adjustments. Set width, height, and border radius.
- Links — Click any link or button to edit its URL. Set links to open in a new tab.
- Images — Right-click an image to change settings like Object Fit and Object Position, or give the image a color overlay, border, shadow or adjust the in-line display attributes.
Scrub inputs
Numeric fields in the Layout tab (padding, margin, width, height, etc.) use scrub inputs — drag horizontally to adjust the value, or click the field to type a number directly. Hold Shift while dragging for fine-tuned adjustments.
Images
Click an image to select it, then open the Settings tab to update the source URL or alt text. Use the image library icon in the Settings tab to browse or upload from your asset library.
-
Object Fit and Object Position — for images and videos that are set to Cover or Contain, the Inspector Panel also shows two controls that let you choose how the media is cropped or scaled inside its container:
-
Object Fit — Controls how an image or video scales to fill its continer
Cover: Fills the entire container. Crops the media if the proportions don’t match.
Contain: Shows the entire media without cropping. Adds empty space (letterboxing) if the proportions don't match.
Other options: Inherit, Fill, None, and Scale Down.
-
Object Position — Controls which part of the media stays visible when it is cropped or letterboxed (e.g., when using Cover or Contain).
Set the focus: Click the 3x3 grid to anchor the media to one of nine points (e.g., top-left, center, bottom-right).
How it works: If your image gets cropped, the position you select is the part that will stay in view.
Check your setting: A text label next to the grid clearly states your currently selected position.
-
Adding Content
Use the Add panel in the toolbar to insert new content:
Images — Upload or browse your asset library
Videos — Embed YouTube, Vimeo, or other video URLs
Forms — Add lead capture forms with AI assistance
Checkout — Add payment buttons (Stripe, PayPal, etc.)
Responsive Preview
Switch between Desktop, Tablet (768px), and Mobile (390px) views using the device icons in the toolbar. See exactly how your page looks on different screen sizes.
Preview Mode
Click the Preview button (or press Cmd+F / Ctrl+F) to see your page exactly as visitors will. All editing UI disappears — forms work, links are clickable, and animations play. Click Exit Preview to return to editing.
Undo & Redo
Made a mistake? Use Cmd+Z (Mac) or Ctrl+Z (Windows) to undo. Use Cmd+Shift+Z / Ctrl+Shift+Z to redo. You can also use the undo/redo buttons in the toolbar.
Dark Mode
Toggle between light and dark editor themes using the sun/moon icon in the toolbar. This only affects the editor appearance — your published page is not affected.
Need more help?
You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗