Separator

The Separator Block allows you to add horizontal lines to visually divide content on your page, enhancing readability and organization. This simple yet effective element helps to create clear separations between different sections, making your content more visually appealing and easier to navigate.

How to add a separator block

  • Click on the ‘+’ icon for block Inserter and choose the separator block.
  • Alternatively, simply type /separator and press Enter.

Block toolbar

Each block has its own set of tools for customization. Here’s what you’ll find in the Separator block toolbar.

Transform to

The ‘Transform to’ button lets you change a Separator Block into other blocks like ‘Columns’ or ‘Group’. This feature allows you to seamlessly adjust your layout with a simple click, ensuring your content looks just the way you want.

Drag & Move

Use the six-dot icon to drag your block, or the up and down arrow buttons let you move a block one position higher or lower.

Alignment

The ‘Alignment’ tool lets you adjust the width of your separator in the Separator Block. Simply click the icon, and a menu will appear with various options. You can set your separator to no alignment, max 1200px wide, full width, or center-aligned.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Access the Separator Block settings by clicking on the Separator Block. The settings panel will appear on the right side, allowing you to customize your Separator Block options for a tailored layout.

Styles

  • Default: Standard horizontal line.
  • Wide line: A broader horizontal line for more emphasis.
  • Dots: A dotted line for a unique visual break.
  • Thick: A thicker horizontal line for strong separation.
  • Wide thick: A wider and thicker line for maximum impact.

Colors

The ‘Color’ option enables you to customize your Separator Block by selecting unique colors for the background. The background color will appear if your separator style is ‘Wide Line’, ‘Dots’, ‘Thick’, or ‘Wide Thick’.

Dimension

The Separator Block provides dimension settings options to add margin for better spacing and alignment.

Advanced

Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the Group block, enabling you to link it to another web page.

Additional resources