COFFEE Help Center
    Main WebsiteContact Support

    Using Templates and the Page Builder

    Confidently edit elements, rearrange sections, and preview the mobile view of any page in the builder.

    For: Marketing and Admin Users
    Time: 15 minutes

    Before You Begin

    • •Open an existing funnel or website page in the page builder.

    Instructions

    1

    Add and Edit Elements

    Drag elements from the left panel — text, images, buttons, forms, video, and more — onto your page. Click any element to edit its content. The settings panel on the left changes based on what you have selected, so you can adjust text, links, spacing, and styling.

    [SCREENSHOT NEEDED: Page builder left panel showing draggable elements]

    2

    Rearrange Sections

    A page is built from stacked sections. Hover over a section to reveal the drag handle, then drag it up or down to reorder. You can also duplicate a section to reuse a layout, or delete one you do not need.

    [SCREENSHOT NEEDED: Builder showing a section drag handle and duplicate/delete controls]

    3

    Style with the Design Panel

    Select an element and switch to the "Design" or "Advanced" tab in the left panel to change fonts, colors, borders, shadows, and spacing. Changes apply only to the selected element unless you save and apply a global style.

    [SCREENSHOT NEEDED: Design tab open with typography and color controls for a selected element]

    4

    Check the Mobile View

    Click the mobile icon at the top of the builder to preview how your page looks on a phone. Most elements stack automatically, but you may need to adjust font sizes, padding, or image widths so nothing gets cut off. Toggle back to desktop when you are done.

    [SCREENSHOT NEEDED: Builder top bar with mobile preview toggle highlighted]

    5

    Save and Preview

    Click "Save" to keep your changes, then use "Preview" to view the page as a visitor would. Preview lets you click through forms and buttons without the page being live to the public.

    What Success Looks Like

    • You can add, edit, and rearrange elements on a page.
    • You have previewed the page in mobile view.

    Common Mistakes

    • × Designing only in desktop view and never checking mobile, where most visitors will actually see the page.
    • × Editing a single element's style instead of using global styles, leading to inconsistent fonts and colors across pages.

    Troubleshooting

    If An element will not drag or move:

    Make sure you are dragging the element handle, not the content inside it. Some nested elements need to be selected first before they can be moved.

    Last updated: 10/1/2026