Configure separator blocks

Configure a separator block

A separator block adds a decorative shape between sections of a page. It is purely visual: learners never interact with it, and it never affects progress. The block’s default style is full-bleed width with no padding.

When you select a separator block, the inspector shows its properties:

• Shape — choose Line, Dotted, Fade, Wave, Mountain, Angle, or Gradient.
• Fill — use a course token (Course accent, Course panel, Course heading, or Course text) or a custom hex color.
• Height — drag the slider between 24 and 320 pixels.
• Flip ↔ — mirror the separator horizontally.
• Flip ↕ — mirror the separator vertically.
• 180° — rotate the separator 180 degrees.

Select a separator block on the canvas to see its shape, fill, height, and orientation controls in the inspector. Full-resolution PNG

The separator inspector remains usable on phone-width screens via the inspector drawer. Full-resolution PNG

Connect adjoining backgrounds

Turn on Connect adjoining backgrounds when the separator should join two content areas rather than sit between them as a separate decoration. Place it directly between the blocks whose backgrounds you want to connect.

Connected transitions use the visible neighboring solid backgrounds. Choose Wave, Angle, or Mountain; other shapes fall back to Wave in connected mode. Fill and vertical flips apply only in standalone mode. When a neighboring block has no supported solid background, the transition uses the course background on that side. Gradients and images are not carried through the shape. Check the result in Preview and use a standalone separator when needed.

A wave joins two solid backgrounds without a separate strip or gap. Fictional workshop content. Full-resolution PNG

Keep separators purposeful: use one to mark a change in topic or activity. Preview at phone width too, and keep headings in the content so the structure is clear without the decorative shape.