Divider
The Divider block is a visual break on your Flo page — a horizontal line, a short label in the middle, or empty space between blocks. Fans do not tap it, submit anything, or leave your page.
Use it to separate your Newsletter from your Link rows, add breathing room before a Course, or mark a new section with a small OR label. In the block library it is labeled Divider.
Available on every plan
The Divider block is on Free and all paid plans. You can add as many dividers as you need.
Where to find it in the library
Divider sits in the shorter list below the main block rows (same area as Book a Session). It is not in the top group with Link and Text.
What fans see
Depending on your settings, visitors see one of these:
| What you set up | What fans see |
|---|---|
| Solid, Dashed, or Dotted line | A horizontal rule across part or all of the page width |
| Center label | A short word in the middle with lines on both sides (for example OR, NEW) |
| Center icon | A small icon in the middle with lines on both sides |
| Invisible spacer | No line — only extra vertical space between blocks |
Line color follows your page theme when you leave the default. On dark pages the line is light; on light pages it is subtle gray. You can pick a custom Line color anytime.
Add a Divider block
Open the builder
Dashboard → Builder on a desktop browser.
Add Divider from the library
Scroll to the lower block list on the Block tab (or use Layers → +) → Divider.
Choose where it sits
Drag it in Layers between the blocks you want to separate, or insert it from the preview between two blocks.
Style the line
Open Display — pick line style, spacing, width, and optional center label or icon.
Publish
Flo auto-saves your draft. Click Publish or Update live so fans see the change — Publishing.
Right panel tabs
| Tab | What you edit |
|---|---|
| Content | Short note that dividers are visual only — all styling is under Display |
| Display | Line style, spacing, color, width, center decoration, gradient, invisible spacer |
| Behavior | Hide/show schedule, UTM targeting, device, block background override, entrance animation |
| Analytics | Views for this block (last 30 days) |
There is no Edit modal and nothing to connect from the dashboard.
Content tab
The Content tab reminds you that dividers do not collect data or open links. Open Display to change how the line looks.
Display tab
This is where you configure the divider.
Style
Pick the line type:
| Style | Look |
|---|---|
| Solid (default) | Single continuous line |
| Dashed | Short dashes |
| Dotted | Small dots |
The preview in the panel updates when you tap a style.
Spacing
How much vertical space sits above and below the line (or spacer):
| Option | Effect |
|---|---|
| Compact | Less space — tight sections |
| Normal (default) | Balanced gap |
| Spacious | More space — clear section break |
Spacing still applies when Invisible spacer is on — that mode uses spacing without drawing a line.
Line color
Use Line color to override the automatic theme color. Clear the picker or leave it unset to let Flo match your page (light line on dark backgrounds, subtle gray on light backgrounds).
Line width
How wide the line runs across the page:
| Option | Effect |
|---|---|
| Full (default) | Edge to edge within the content area |
| 60% | Shorter line, centered |
| 30% | Short accent line, centered |
Center decoration
Add something in the middle of the line:
| Option | Effect |
|---|---|
| None (default) | Plain line only |
| Label | Short text between two line segments (shown in small caps) |
| Icon | Icon between two line segments |
Label text — type what fans should read, for example OR, AND, or NEW. Keep it short so it fits on mobile.
Icon name — type one of these names exactly (capital letter optional):
| Icon name | Icon name |
|---|---|
| Star | Heart |
| Sparkle | Diamond |
| Flower | Sun |
| Moon | Infinity |
If the name does not match the list, the icon will not show — use Label instead for custom words.
When you switch between Label and Icon, Flo clears the other field so only one decoration shows.
Gradient fade
| Setting | Effect |
|---|---|
| Gradient fade off | Solid color along the full line width |
| Gradient fade on | Line fades in from the sides toward the center |
Gradient fade works with Solid style only. Dashed and Dotted ignore this toggle.
- Plain line (no center label or icon): the whole line softens at the left and right edges.
- Line with label or icon: each side segment fades toward the center decoration.
Invisible spacer
| Setting | Effect |
|---|---|
| Invisible spacer off | Line (or decoration) shows as configured |
| Invisible spacer on | No visible line — only Spacing above and below |
Use this when you want gap between blocks without a visible rule. While Invisible spacer is on, line style, color, width, and decoration controls are dimmed — turn the spacer off to edit the line again.
Behavior tab
Same shared controls as other blocks — see Blocks.
Useful examples for Divider blocks:
| Use case | Setting |
|---|---|
| Show a “Coming soon” break only during a launch week | Show from / Hide after |
| Extra space only for mobile layouts | Uncommon — pair with Device = Mobile |
| Subtle entrance when scrolling | Entrance animation — Fade, Slide up, or Pop |
Custom background under Behavior wraps the whole divider section. Most creators leave it off so only the line shows.
Analytics tab
After the block is saved, Analytics shows roughly the last 30 days:
| Metric | Meaning for Divider blocks |
|---|---|
| Views | How often fans scrolled this section into view |
| Conversions | Usually 0 — dividers have no buttons or forms |
| Conversion rate | Not meaningful for a visual separator |
Use Dashboard → Analytics for page-wide trends.
Example setups
| Goal | Suggested approach |
|---|---|
| Clean break between offers | Solid, Normal spacing, Full width |
| Subtle separation on dark pages | Default line color, Dashed, 60% width |
| “Or choose another option” | Solid + Label OR |
| Decorative break | Solid + Icon Sparkle or Star |
| More space, no visible line | Invisible spacer + Spacious |
| Soft section ending | Solid + Gradient fade on |
Place a divider between blocks in Layers — order matters. A divider above your Course block only affects what comes after it in the scroll.
Divider vs Text block
| Divider | Text | |
|---|---|---|
| Purpose | Space or a line | Words fans read |
| Fan action | None | Read |
| Main settings | Display tab | Content + Display |
| Library row | Lower list | Main list |
Use Divider for structure. Use Text when you need a sentence or headline.
Troubleshooting
| Issue | What to try |
|---|---|
| Divider not on myflo.link | Update live after edits — Publishing |
| Cannot find Divider in library | Scroll the Block tab — it is below the main rows |
| Line too faint or too strong | Set Line color manually, or check Page tab background contrast |
| Gradient does nothing | Gradient fade only works with Solid — not Dashed or Dotted |
| Icon missing in the middle | Match an icon name from the list (Star, Heart, Sparkle, etc.) or use Label |
| Label and icon both wanted | Only one center decoration at a time — pick Label or Icon |
| Line disappeared but space remains | Invisible spacer is on — turn it off to show the line again |
| Settings grayed out | Turn off Invisible spacer to edit line style and decoration |
| Divider hidden on live page | Behavior schedule, Hide in Layers, or Update live — see Blocks |
What's next?
- Block types — all block types compared
- Blocks — reorder, hide, schedule
- Text block — headings and paragraphs
- Page builder overview — full builder tour
- Themes and fonts — page background and colors