The visual editor lets you change anything on your page yourself: edit text, swap images, add sections, adjust spacing, and more. You can ask Piper to make changes for you too, but Manual Mode puts you in full control.
Switch to Manual Mode
Open your page in the builder. At the top of the left panel, click Manual Mode to edit the page yourself. Click Piper AI anytime to switch back and ask Piper for changes instead.
Manual Mode shows a Free label because editing by hand doesn't use any AI credits.
Getting around the builder
The builder has three main areas:
- Left panel: Add new content, apply your Brand Kit, and see every element on your page in Layers.
- Canvas: Your page, in the middle. Click anything on it to select it.
- Right panel: Change the style, layout, and settings of whatever you've selected.
Across the top bar you'll find:
| Control | What it does |
|---|---|
| Page name | The page you're editing. |
| Edit / Analyze | Switch between editing your page and viewing its analytics. |
| Device views | Switch between desktop, tablet, and mobile views. |
| Undo / Redo | Undo or redo your last change. |
| Help (?) | Get help while you're building through the Learn Builder guides, video tutorials, or submit a ticket with Support. |
| More (...) | You can adjust the domain and slug in this area, as well as access the page HTML, configure the SEO & Social information, and add tracking scripts. |
| Preview | See the page as visitors will. |
| Update | Save and publish your changes. |
Tip: Click the panel icon at the edge of either panel to collapse it and give yourself more room on the canvas. When the left panel is collapsed, a slim bar of icons stays on screen so you can jump back to Piper, Add, Brand Kit, or Layers.
The left panel
In Manual Mode, the left panel has three tabs: Add, Brand Kit, and Layers.
Add
The Add tab is where you find everything you can put on your page. Drag any item from here onto the canvas.
Use the search box at the top to find a block or widget quickly. You can also press / to jump straight to the search.
Sections
- Section: Add an empty section with one, two, or three columns. Pick the layout you want using the icons beside it.
- Section library: Browse ready-made sections, like headers, features, or testimonials, and drop one onto your page.
Blocks
| Block | What it's for |
|---|---|
| Text | Headings, paragraphs, quotes, and lists. |
| Media | Images and video. |
| Button | Buttons that link to another page, section, or site. |
| Form | Forms to collect leads. |
| Pop-up | Pop-ups that open from your page. |
| Spacer | Extra space between elements. |
| Line divider | A line to separate content. |
| Icon | Icons to add visual interest. |
| Embed / HTML | Your own code, like a video embed or a third-party widget. |
Click More blocks at the bottom to see even more options.
Some blocks open a list of styles to choose from. For example, click Text to see Heading 1, Heading 2, Heading 3, Paragraph, Quote, and List. Drag the style you want onto the page. As you drag, a highlight shows where it'll land. These styles use the fonts and colors from your Brand Kit automatically.
Brand Kit
The Brand Kit tab shows which Brand Kit your page uses for its colors, fonts, and voice.
- Pick a Brand Kit: Select the kit you want for this page, or choose None so Piper doesn't use any brand colors or voice.
- Edit, delete, or open a kit: Use the icons on the kit's card.
- Reapply Brand to Page: Update the whole page to match your Brand Kit. This is handy after you've changed your kit.
- Explore styles: Generate a new style or browse presets.
- Manage Brand Kits: Open your full list of Brand Kits.
Layers
The Layers tab shows every element on your page in order, from the navigation down to the footer. Sections contain containers, and containers hold elements like headings, paragraphs, and buttons.
- Click any layer to select that element on the canvas.
- Click the arrows to expand or collapse a layer and see what's inside it.
- Use Search layers (or press /) to find a specific element.
Tip: Layers is the easiest way to select something that's hard to click on the canvas, like a container behind other elements or an item that's hidden on the current device.
The right panel
The right panel is where you fine-tune whatever you've selected. If nothing is selected, it shows No selection: Click anything to edit it. Click an element on the canvas or in Layers and the panel fills in with that element's options. The element's type, like H1 or Input, shows at the top.
The right panel has three tabs: Style, Layout, and Settings. What you see in each tab depends on the element you've selected, so a heading, a button, and a form will each show different options.
Style
Style controls how the element looks. For a heading, for example, you'll see:
- Default / Hover: Set how the element looks normally, and how it looks when a visitor hovers over it.
- Text: Edit the words themselves.
- Typography: Font, weight, size, line height, letter spacing, alignment, italic, underline, strikethrough, and text color.
- Background: A background color behind the element, with an opacity setting.
Layout
Layout controls where the element sits and how much space it takes up.
- Visibility: Choose which devices the element shows on: desktop, tablet, and mobile. Turn one off to hide the element on that device.
- Position: Choose how the element is positioned on the page, like Static.
- Spacing: Set the padding (space inside the element) and margin (space around it) for the top, right, bottom, and left. Click the link icon to set all four sides at once.
- Dimensions: Set the width, height, and max width. Choose Fixed for an exact size.
Settings
Settings changes the most depending on what you've selected. It holds the options that control how the element works, not just how it looks.
For example, when you select a form, Settings includes:
| Setting | What it does |
|---|---|
| General | Give the form a name and a Link ID, so you can link to it from a button or menu. |
| Form fields | Click Add field to add a field, drag fields to reorder them, or click the trash can to remove one. Each field shows its type and whether it's required. |
| Multi-step form | Turn this on to split the form into steps with Next and Back buttons. |
| Form actions | Enter a Redirect URL to send visitors to another page, like a thank-you page, after they submit. |
| URL parameter capture | Turn on Capture UTMs to add UTM, gclid, and fbclid values from the page URL to every submission. |
| Spam protection | Turn on Require a CAPTCHA to block spam submissions. |
| Integrations | Connect the form to your email platform or CRM so leads go where you need them. |
Tip: Not sure where a setting lives? Check Style for how something looks, Layout for where it sits and how big it is, and Settings for how it works.
Editing on the canvas
Quick actions toolbar
Click any element on the canvas and a small toolbar appears above it with quick actions:
| Action | What it does |
|---|---|
| Drag handle (⠿) | Click and drag to move the element somewhere else on the page. |
| Element name | Shows what you've selected, like Heading 1 or Field. |
| Up and down arrows | Move the element up or down one spot. |
| Duplicate | Make a copy of the element right below it. |
| Trash can | Delete the element. |
| Ask Piper | Ask Piper to change just this element, like rewriting a heading or restyling a button. |
Formatting text
To edit text, click into it and start typing. Highlight any text and a formatting toolbar appears with quick styling options:
- Font
- Bold, italic, underline, and strikethrough
- Link
- Font size (use − and +, or pick a size)
- Text color
- Heading level, like H1 or H2
- Bulleted or numbered list
- Alignment
- Clear formatting
You can make the same changes, plus a few more like line height and letter spacing, in the right panel under Style.
Tip: Use the formatting toolbar to style a few words, like bolding one phrase. Use the Style tab to change the whole element at once.
Adding sections
Click a section on the canvas and a + icon appears at its top and bottom edges. Click + to add a new section above or below it.
At the very bottom of the page, you can also click Add section.
Adding columns
Click a column inside a section and a + icon appears on it. Click + to add another column next to it.
Resizing elements
You can resize images, buttons, sections, and columns right on the canvas. Click the element, then click and drag its drag handle to make it bigger or smaller.
For exact sizes, use the Dimensions settings in the right panel under Layout.
Editing for desktop, tablet, and mobile
Your page adjusts to fit every screen, but you can fine-tune how it looks on each device.
Use the three device icons in the top bar to switch between desktop, tablet, and mobile views. The canvas resizes to show you exactly how the page looks on that device, and you can edit it right there.
A few things to know:
- Device-specific changes: Style and layout changes you make in tablet or mobile view only apply to that device.
- Hide an element on a device: Select the element, open Layout, and under Visibility, turn off the device you want to hide it on. For example, you could show a long paragraph on desktop and hide it on mobile.
- Check before you publish: Click through all three views before you click Update to make sure everything looks right.
Tip: Headlines that look great on desktop can be too big on a phone. Switch to mobile view and lower the font size under Style if a heading wraps onto too many lines.
Frequently asked questions
Does editing in Manual Mode use AI credits?
No. Manual Mode is free, so you can make as many changes as you like without using credits. Asking Piper for changes, including with Ask Piper on an element, does use credits.
Can I switch between Manual Mode and Piper AI?
Yes, anytime. Click Piper AI or Manual Mode at the top of the left panel.
I made a mistake. How do I undo it?
Click the Undo arrow in the top bar. Click Redo to bring the change back.
I can't click on the element I want to edit.
Open the Layers tab in the left panel and click the element there instead. This works well for containers, elements behind other elements, or anything hidden on the current device.
Why don't I see the same options for every element?
The right panel only shows options that make sense for what you've selected. For example, a form has settings for its fields and spam protection, while a heading has typography options.
How do I see my changes before visitors do?
Click Preview in the top bar to see the page as visitors will. When you're happy with it, click Update.
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 ↗