Page Builder Overview
The page builder is where you design the page fans see at https://myflo.link/yourname. Open it from Dashboard → Builder (/dashboard/builder).
You work in three areas at once: a layers list on the left, a phone preview in the center, and Block / Page controls on the right. The top bar shows whether the page is Draft or Live, how many blocks you have, and buttons to preview, test, and publish.
This guide is a full tour of the builder. For going live step by step, see Publish your first page. For URL and visibility rules, see Your Flo page.
Blocks
Add products, bookings, email capture, and more.
Block types
Every block type explained.
Themes & fonts
Templates, colors, and typography.
Button styles
Shape, fill, and hover animation.
Publishing
Draft, live, update, and unpublish.
A/B testing
Test page variants from the builder header.
Before you open the builder
| Requirement | What Flo shows |
|---|---|
| Desktop browser | The builder needs a wide screen. On phone or tablet you see: The page builder requires a desktop browser. Your work is still saved — continue on a computer. |
| Account + page | New accounts get a starter page (profile header + blocks from onboarding). You can edit it right away. |
One page on Free
The Free plan includes one public page. Studio supports multiple profiles/pages — see Billing & plans.
Builder layout
| Area | What you do there |
|---|---|
| Top bar | Draft / Live status, block count, View live preview, A/B Test, Publish / Update live / Live (unpublish) |
| Left — Layers | See every block in order, reorder, hide, delete, open Add block |
| Center — Preview | Scrollable phone frame — click blocks to select them; edit the profile header from the canvas |
| Right — Block / Page | Block tab: block library or settings for the selected block. Page tab: fonts, templates, buttons, layout, SEO |
The center preview can zoom (controls on the canvas). That helps when you run an A/B test and see two phone frames side by side.
Top bar
| Control | What it does |
|---|---|
| Draft (top left) | Page is not public at your link yet |
| Live (top left) | A published version is active for visitors |
N blocks (center) | Count of blocks excluding the profile header — for example 3 blocks means header + three content blocks |
| View live preview | Opens your public URL in a new tab (myflo.link/yourname). Same address fans use; useful even while still in Draft only if you have published before — see Publishing |
| A/B Test | Start or manage a split test (Creator+). Locked on Free — upgrade prompt when you tap it |
| Publish | First time you go live |
| Update live | Orange button when the page is live but you have newer saved edits |
| Live (green, when published) | Click to unpublish — tooltip: Click to unpublish |
Full publish and unpublish flow: Publishing.
How saving works
Flo auto-saves your builder work so you do not lose edits.
| Behavior | Detail |
|---|---|
| When | About 8 seconds after your last change, and when you switch away from the browser tab |
| What is saved | Block content, order, visibility, and page settings (fonts, buttons, templates, SEO fields, etc.) |
| What auto-save does not do | Replace Publish — fans only see updates at your public link after you Publish or Update live |
| Page tab button | Save appearance at the bottom of the Page tab runs a save immediately. Success toast: Appearance saved |
If saving fails after a retry, Flo shows: Your changes couldn't be saved. Check your connection and save manually. Use Save appearance on the Page tab or make a small edit and wait for auto-save to try again.
Saved in builder ≠ live for visitors
Draft means your link is offline until you Publish. After you are Live, edits stay in your account until you click Update live.
Left sidebar — Layers
The Layers panel lists everything on the page in scroll order (top to bottom).
Profile header (pinned)
| Detail | Meaning |
|---|---|
| Profile header | Always at the top — not movable and not counted in the top-bar block total |
| Edit on canvas | Click Edit profile header (or the pencil on the header) to open the profile editor |
The profile editor has two tabs:
| Tab | You can change |
|---|---|
| Content | Photo, name, bio, social links, cover image or video |
| Design | Header layout and how the header looks on the page |
You can also update name and photo under Settings → Profile, but social links and cover media for the public page are easiest from the builder modal.
Content blocks
Each row shows a title (from the block settings), the block type, and actions when you hover or select:
| Action | Effect |
|---|---|
| Drag (six-dot handle) | Reorder — same order fans scroll on the live page |
| Move up / Move down | Nudge one step without dragging |
| Hide | Block stays in the builder; visitors do not see it |
| Delete | Removes the block from your page |
| Click a row | Selects the block and scrolls the preview to it |
Add a block
Tap + in the Layers header (or follow the empty-state hint). Flo opens the Block tab on the right with the block library.
Center — Phone preview
The preview matches how your page reads on a phone: narrow column, scrollable blocks, your chosen font and colors.
| Interaction | Result |
|---|---|
| Click a block | Selects it — settings appear in the right Block tab |
| Click empty preview background | Clears block selection (when not in an A/B variant focus mode) |
| Edit profile header | Opens the profile header modal |
| Add block (on canvas) | Same as Layers + — opens the block library |
Complex blocks (course, membership, digital download, booking) often open a setup modal the first time you add or configure them. Simple blocks (text, link, divider) edit mostly in the right panel.
Right sidebar — Block tab
Switch to Block to add or edit sections.
No block selected — block library
The library lists ready-made block types. Tap one to add it to the page.
| Library name | What it adds |
|---|---|
| Course | Sell a multi-lesson course — connect a course from Dashboard → Courses |
| Membership | Recurring tiers — Creator+; locked on Free with upgrade overlay |
| Digital download | Paid file or product checkout |
| Physical product | Shipped product checkout (same checkout block type, physical fulfillment) |
| Link | Button that opens any URL |
| Text | Heading or rich text |
| Newsletter | Email signup — subscribers go to your Flo list |
| Book a Session | Booking offer — Creator+; appears in the compact list below the main rows |
| Divider | Visual separator between sections |
Membership and Book a Session need Creator or above. Locked rows show Creator+ and link to billing upgrade.
Some blocks allow only one per page (for example a single profile header). The library dims types you already added when a limit applies.
Block selected — block settings
With a block selected, the Block tab shows fields for that type: title, linked product or course, button label, colors, visibility overrides, and more.
Use close or click the preview background to return to the library list.
Header-only note: the Profile header block is edited through the profile header modal on the canvas, not through a long form in this panel.
Right sidebar — Page tab
Switch to Page for styles that apply to the whole page (unless a single block overrides them).
Sections in the panel:
| Section | What you control |
|---|---|
| Templates | One-click looks — each template sets background, font, buttons, and spacing together |
| Typography | Page font — pick by name (Inter, Roboto, Playfair Display, Poppins, and more), grouped as Sans-serif, Serif, Display, or Mono |
| Buttons | Button color, text color, shape (Rounded, Pill, Sharp, Squircle), fill (Solid, Outline, Ghost, Soft), hover animation (None, Lift on hover, Pulse, Fill) |
| Layout | Page width (Narrow, Default, Wide) and block spacing (Compact, Normal, Relaxed, Spacious) |
| SEO | Page title and meta description (shown in browser tabs and search; description counter up to 160 characters) |
Built-in templates include Classic (default), Dark, Midnight Hues, Peach Punch, Cyan Chic, Neon Grape, Apricot Sorbet, Lime Light, Shadow Splash, and Blueish. Switching a template updates the preview right away; click Save appearance when you are happy.
Deeper detail: Themes and fonts, Button styles, Page templates.
Visibility and custom domain
Public vs Unlisted and custom domains are not in the builder — set them under Settings → Page & domain. See Your Flo page.
Draft, live, and publishing
| State | What fans see at myflo.link/yourname |
|---|---|
| Draft | Page not published — visitors may see This Flo page doesn't exist yet |
| Live | Last published snapshot |
| Live + unpublished edits | Fans still see the old live version until you click Update live |
| Button | When it appears | Toast on success |
|---|---|---|
| Publish | Never published before | Your page is live! |
| Update live | Published, with newer saved edits | Page updated and live |
| Live (click) | Published, no pending publish-needed changes | Page unpublished |
You can publish before Flo Payments is ready — fans can browse, join your list, and use free offers. Paid checkout needs an active earnings account — Connect payments.
A/B testing in the builder
Creator plan requiredOn Creator+, A/B Test in the top bar creates a second variant of your page. The canvas shows two phone frames you can drag apart; each variant has its own layers list and Block / Page settings while you focus it.
| A/B control | Meaning |
|---|---|
| A/B Test (no test yet) | Starts a new test |
| Draft / Paused / Live pill (test active) | Opens test settings in the right panel |
| Variant label | Rename variants on the frame (for example Control vs Variant B) |
Traffic split, results, and picking a winner are covered in A/B testing overview. In-builder specifics: A/B tests in the builder.
Tests vs the live page
A running test can show different versions to visitors. Promoting a winner updates what everyone sees — see Promote winner.
Typical workflow
Open Dashboard → Builder
Check the top-left pill: Draft or Live.
Polish the profile header
Edit profile header on the canvas — photo, bio, socials, optional cover image or video.
Add blocks
Layers + or Block tab → pick Newsletter, Link, Course, Digital download, or another type. Wire each block to a product, course, membership, or booking offer where needed.
Reorder and hide
Drag in Layers or use move up/down. Hide seasonal blocks instead of deleting if you may reuse them.
Style the page
Page tab → template, font, buttons, layout. Click Save appearance.
Publish or update
Publish the first time, or Update live after edits. Confirm at
myflo.link/yournamein a private browser window.
Troubleshooting
| Issue | What to check |
|---|---|
| Link shows “doesn't exist yet” | Page is still Draft — click Publish |
| Edits not visible to fans | You saved in the builder but did not click Update live |
| Block library item locked | Membership or Book a Session needs Creator+ — upgrade under Settings → Billing |
| Checkout block empty | Connect a product in Dashboard → Products (or course / membership / booking offer) in block settings |
| Can't open builder on phone | Use a desktop browser — edits are preserved |
| Appearance changes lost | Click Save appearance on the Page tab; wait for auto-save if you only edited blocks |
| Preview URL wrong | Your handle is in Settings → Page & domain — share myflo.link/yourname lowercase |
What's next?
- Blocks — add, reorder, hide, delete
- Block types — catalog and when to use each type
- Publishing — draft, live, update, unpublish
- Publish your first page — first go-live checklist
- Your Flo page — URL, visibility, SEO, custom domain
- Themes and fonts — templates and typography
- Button styles — shapes, fills, animations