BLOCKS: Horizontal Separator Block

Horizontal Separator Block

The Horizontal Separator Block makes it easier to divide your content into clearly defined sections on a Dashboard, Portal Page, Public Page, Document, Proposal, Campaign, Lesson or Sales funnel. It displays a horizontal line across the page and can be fully customised in terms of style, size, colour, width, and alignment to suit your layout needs.

What is this Block Used For?

Use this block whenever you want to create a clear visual break between sections of content on a page. It is a simple but effective tool for improving the readability and structure of your pages.

  • Divide content sections to improve readability and visual flow
  • Add a styled decorative line that matches your brand colours
  • Create clear breaks between headings, text blocks, images, and other content
  • Replace blank space with a more intentional visual separator

How to Add This Block

1. Open the Content Block Editor on the page you wish to edit.

2. Click the Add Block (+) button to open the block selection menu.

3. Select Separator from the list.

How to Configure the Block

After clicking the edit icon, the Separator Options modal will appear. All configuration for this block is handled through the Style Options and Access Options tabs.

Separator Style: Choose the type of separator line to display. Options include Solid, Dashed, Dotted, and other available line styles.

Size: Set the pixel height of the separator line to make it thicker or thinner as needed.

Width: Set the width of the line as a percentage of the block. For example, enter 100% for a full-width line or 50% for a shorter centred line.

Color: Use the Color Picker to set the colour of the separator line. You can also adjust the transparency of the line using this tool.

Alignment: Align the separator to the centre, left, or right of the block.

Border Style: Add a border style around the block itself, separate from the separator line.

Border Radius: Choose the border radius for the block, from None up to 35px, to soften the corners if a border is applied.

Border Color: Select a colour for the border surrounding the block.

Background Color: Set a background fill colour for the entire block area behind the separator line.

Text Color: Set the text colour for any text displayed within the block border area.

Custom CSS Class: Apply a custom CSS class to the block for further styling and customisation beyond the built-in options.

TIP: Use the Background Color and Border Style options together to transform the Horizontal Separator into a more prominent styled divider that stands out as a visual section break rather than a simple line.

What Users Will See

Visitors on the published page or portal will see the separator line displayed between content blocks according to the style settings you have configured.

  • A horizontal line in the style, colour, width, and alignment you have set
  • A styled block area if a background colour or border has been applied
  • A subtle or prominent visual break between page sections, depending on your configuration

Best Practices

Used consistently, the Horizontal Separator Block helps your pages feel structured, professional, and easy to navigate.

  • Keep the separator style consistent across your pages to maintain a cohesive look and feel
  • Use a light colour and thin size for subtle section breaks, or a bolder colour and larger size to create stronger visual divisions
  • Combine the Horizontal Separator with the Empty Space Block above and below it to give the line more breathing room and visual prominence
  • Use the Width setting to create shorter decorative separators rather than full-width lines, particularly on wider layouts
  • Match the separator colour to your brand palette to keep your portal looking polished and on-brand

TIP: The Horizontal Separator Block works especially well when used between block groups sections. Adding a separator after each heading/content helps users quickly scan the structure of your page and find the information they need.

RELATED ARTICLES

CLICK HERE to learn about the Content Block Editor.

CLICK HERE to learn about all Block Editor Block Types.