Help Center
Help Center›Page Builder

How to Edit a Page in the Visual Editor

Updated
Feature Availability User Permissions Time to Complete Skill Level
Philippine and US stores on Launch, Grow, Scale and Premium Trial Store owner, or a team member with Page Builder access About 10 minutes Beginner

Summary

Overview: The Visual Editor lets you change a page yourself, right in Max AI's page preview. Click any element to change its text, image, link, colors, spacing or visibility. Drag in new sections and elements, save your own blocks to reuse, and undo mistakes. Editing by hand doesn't use AI credits.

Prerequisites:

  • A store on the Launch, Grow, Scale or Premium Trial plan.
  • A page open in Max AI's Builder. See How to Build Pages with Max AI.

Step-by-Step Instructions

Step 1: Open the Visual Editor

  1. Open the page in Max AI's Builder (for example with Edit a Page, or Edit in Page Builder → All Pages).
  2. Above the message box, click the Visual Editor button (Select any element on the page to edit its text, styles, or attributes with AI.).
  3. The chat is replaced by the editing panel, with two tabs: Insert and Style.

Step 2: Select an element

  1. Click any element in the preview: a heading, paragraph, image, button, section and so on. The panel shows Edit and the element type, for example Edit Heading.
  2. A row of links above the panel shows where the element sits (for example Section › Columns › Heading). Click one to select that larger part instead.
  3. A small toolbar appears on the selected element:
    • ⠿ (Drag to move): drag the element to a new spot.
    • ⧉ (Duplicate): add a copy.
    • ★ (Save as block): save it to My Blocks. See Step 6.
    • ✕ (Delete): remove it. You can also click Delete Element at the bottom of the panel.

Step 3: Change text

  1. Click a text element and type directly in the preview.
  2. Highlight words to show the text toolbar:
    • Link / Edit link: turn the words into a link or change where they go. Unlink removes the link and keeps the words.
    • Font weight, Italic, Underline, Strikethrough and Letter case for the highlighted words.
  3. Under List in the panel, turn a text block into a bulleted or numbered list, or back.

Step 4: Change images, links and styles

On the Style tab, the panel shows the settings that fit the selected element:

Section What you can change
Image Settings Change Image (picks from your media library) and Alt Text (a short image description).
Link Settings URL and Open in new tab.
Embed The address of a video or embedded content.
Custom HTML Code you pasted in a Custom HTML block.
Form Settings Settings for a contact form and its fields.
Typography Font, Size, Line height, Letter spacing and Align.
Colors Text and Background color.
Background Image Add Background Image, Change Image or Remove.
Spacing & Size Width and Height (Original, Full width or Custom), and margin and padding (Inline (X) and Block (Y)).
Layout Direction (vertical stack or horizontal row), Columns, Align and Justify.
Visibility Show on all, Hide on mobile or Hide on desktop.

Desktop and mobile styles: the chip at the top of the panel says Desktop styles or Mobile styles. To change how the element looks on phones only, switch the preview to Mobile View first. Mobile edits apply to screens narrower than 768 pixels.

Step 4b: Resize an element by dragging

When you select an element, small white squares appear on its edges. Drag one to resize the element without opening the panel.

  1. Click the element you want to resize.
  2. Drag a square on the left or right edge to change the width. You can press anywhere along that edge, not just on the square itself.
  3. As you drag, a dark label shows the size you're about to set, for example 64%, 437px or Full width.
  4. Let go to keep it.

Widths are set as a share of the space the element sits in, so the element stays tidy on phones as well as desktops. A drag snaps to the common fractions — 25%, 33%, 50%, 66%, 75% and Full width — when you get close to one.

Which elements get which handles

  • Most things in the page body get the two width handles: headings, text, quotes, lists, forms and their fields, dividers, icons, containers and buttons.
  • Images also get a bottom edge and the four corners, so you can change the height and drag a corner.
  • Videos and embeds get the two width handles and a bottom edge, but no corners.

Resizing writes the same values as Width and Height under Spacing & Size in the panel, so you can fine-tune there afterwards.

Step 5: Add sections and elements (Insert tab)

  1. Click the Insert tab. Click an element to add it, or drag it onto the page.
  2. Choose from:
    • My Blocks: blocks you saved yourself.
    • Sections: Hero, Feature grid, Call to action, Testimonial, FAQ, Contact form.
    • Layout: Section, Columns.
    • Content: Heading, Text, Bulleted list, Numbered list, Image, Button, Divider, Spacer, Social icons, Video or Embed, Custom HTML.
  3. Click a block to add it, or drag it to the spot you want in the preview. New blocks use your store's colors and fonts.

Step 6: Save and reuse your own blocks

  1. Select a section or element, then click ★ (Save as block) on its toolbar.
  2. In Save as block, give it a name (up to 60 characters), then click Save block.
  3. Your block now appears under My Blocks on the Insert tab, ready to add to any page.
  4. To rename or delete a saved block, hover over it in My Blocks and click the pencil (Rename) or bin (Delete). Deleting a block doesn't change pages that already use it.

Step 7: Undo, cancel or save your edits

  1. Use the undo and redo buttons at the bottom of the panel, or press Ctrl+Z to undo and Ctrl+Shift+Z to redo.
  2. Click Cancel to throw away all the edits you made since you opened the Visual Editor.
  3. Click Save N Changes (or Save Changes) to apply your edits to the page. You see Your changes are saved. You can keep building your page with Max.
  4. Your edits are now in the builder, but not on your live store yet. Click Save → Save Draft or Publish at the top of the preview. See How to Build Pages with Max AI.

Step 8: Go back to an earlier version (optional)

  1. Every change creates a new version. The version number (for example v4) shows at the top left of the preview.
  2. Click it and pick an earlier version (Select a previous version to revert to).
  3. Max shows Revert active page to version N. in the chat. Click Approve revert to go back, or Reject revert to keep the current version.
  4. Save or publish the page to keep the change.

Step 9: Preview your store's design while editing

To try your store's colors, fonts and buttons on this page before you save them, click Design Settings in the message-box menu next to Visual Editor. See How to Customize Your Store's Design.

Verify It Worked

Success criteria:

  • After Save Changes, you see Your changes are saved. You can keep building your page with Max. and the version number goes up.
  • After you publish, your changes show on the live page.
  • A block you saved appears under My Blocks on the Insert tab.

Troubleshooting

Common errors

  • The Style tab is greyed out: Select an element to style it. Click an element in the preview first.
  • Save Changes is greyed out: you haven't changed anything yet in this editing session.
  • "Partially saved": some of your changes couldn't be applied. Review the page and redo those edits.
  • Delete is greyed out on a contact form field: The contact form needs this to send. Delete the whole form instead.
  • "Could not read this element from the preview, so it was not deleted. Please try again.": try again, or reload the page.
  • "Still loading fonts": wait a moment, then add the saved block again.
  • Max won't make new changes: you have a change list waiting. Approve or reject it first.

Limitations & considerations

  • Resize handles don't appear on a section wrapper (the page's skeleton), on product views, or on elements that sit outside the page body. The panel hides the Width row in those cases too.
  • An element can't be dragged wider than the space it sits in. When you reach the edge, the label reads Full width. Widen its parent to go wider — resize the container around it instead.
  • Editing by hand in the Visual Editor doesn't use AI credits.
  • Edits aren't live until you Save Draft or Publish the page.
  • Closing the Visual Editor without saving undoes the edits from that session.
  • The section wrappers of the page (the page body, menu and footer areas) can't be deleted.
  • Save as block isn't offered for elements that show products.
  • First name, last name, email and the send button of a contact form can't be deleted on their own.
  • In the menu and footer editor there's no Insert tab. See How to Set Up Your Store Menu and Footer.

Next Steps & Related Resources

Need more help? For more information and assistance, please send an email to support@prosperna.com.

Last Updated: 10/14/2026