Separator Block

The Separator block adds a horizontal line to visually divide sections of content. It’s a simple but effective way to create structure and breathing room on a page.

Start here: watch the walkthrough (3 minutes)

Why use the Separator block

Use the Separator block when you want to:

  • Create a clear visual break between sections
  • Separate different topics within long-form content
  • Add subtle structure without adding more text
  • Improve readability by giving content room to breathe

The Separator block is decorative and structural — it helps organize content visually, but it does not create semantic hierarchy like a Heading block.

How to use the block

Start by adding the Separator block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Position it between sections of content
  • Adjust the width in the block toolbar
  • Modify spacing in the Styles tab if needed

Because the block is purely visual, it should be used intentionally and sparingly.

Block toolbar

The block toolbar appears above the Separator block when it’s selected.

Available options

  • Block width: Adjust how wide the separator line appears within the layout.

Use width settings to match the surrounding content layout. For example, a full-width separator may work well between major sections, while a shorter width may be more appropriate within narrow content areas.

Block styles

In the block settings sidebar under the Styles tab, you can adjust visual presentation.

Margin

Controls the space above and below the separator line.

Increasing margin adds more breathing room between sections. Avoid using empty Paragraph blocks to create spacing — use margin settings instead.

Style variations

Most sites offer a single default style. Depending on your design system, additional separator styles may be available. These might include thin line, thick line, or dotted line.

If color options are available, you may also be able to adjust the separator’s color.

Tips for editors

Use separators sparingly

Too many separators can make a page feel fragmented. Use them to clarify structure — not to decorate every section.

Don’t use separators instead of headings

If content introduces a new section or topic, use a Heading block. The Separator block should support structure, not define it.

  1. WordPress.org Separator Block documentation — please note that your block may have customizations affecting functionality, appearance, or settings.