A shape divider draws a shape along a section's top or bottom edge, so the edge looks curved, wavy or angled instead of straight. (For a plain line between widgets, use the Divider widget instead.)
How to add a divider
- Click the section, then open Design > Style > Shape dividers.
- Turn on Top divider or Bottom divider. A white Wave is added, 80 px tall (40 px on Mobile).
- Pick a Shape.
- Set the Color. Use the color of the section next to it so the edge blends into it.
Settings
Each edge (top and bottom) has its own settings.
- Shape: Wave, Waves, Curve, Curve (uneven), Triangle, Triangle (uneven), Angle, Tilt, Arrow, Split, Zigzag, Mountains, Clouds or Book. Imported dividers show as Imported.
- Color: any color, from the color picker. A theme color stays linked to the theme.
- Height: how tall the shape is, 0 to 400 px. Switch the editor to Tablet or Mobile and the label shows the screen size, for example Height (mobile): a height set there is used only on that size. A shorter shape usually looks better on a phone.
- Width: stretch the shape from 100% up to 300% of the section's width for a gentler curve.
- Flip: mirror it left to right.
- Invert: turn the shape inside out.
- In front of content: draw it over the section's content instead of behind it.
Examples
- A soft wave into the next section: on a dark blue hero, Bottom divider > Wave in the white of the section below, 100 px on Desktop and 40 px on Mobile.
- A slanted services band: Top divider and Bottom divider both set to Tilt in the colors of the sections above and below, with Flip on the bottom one.
- A cloud edge for a kids' party business: Bottom divider > Clouds, 120 px, Width 200%.
Limits and what it can't do
- Sections only. Columns and inner columns don't have shape dividers.
- One divider per edge: a section can have a top and a bottom divider at the same time, not two on one edge.
- You can't draw your own shape. Imported shapes keep the old site's drawing, and switching to another shape replaces it.
- Width and the other settings are the same on every screen size; only Height can differ per size.
Imported sites
When you import a site that has shape dividers, they come in as Imported shapes, drawn exactly as on the old site. You can switch them to one of the shapes above at any time.
Who can use it
Agency people with the Mount Olympus tool. Client people need the Editor permission (it covers design).
Troubleshooting
- There's no Shape dividers option: you've selected a column or a widget. Select the section itself (use Select parent on the toolbar).
- A thin line or gap shows next to the divider: the divider color doesn't exactly match the next section. Pick the same theme color for both.
- The divider covers my text or buttons: turn off In front of content, or add more padding to the section.
- The divider is huge on phones: switch the editor to Mobile and lower Height there.
- The shape points the wrong way: use Flip (left to right) or Invert (inside out).