WordPress Block Editor - Separator Block

WordPress Block Editor – Separator Block

WordPress Block Editor - Separator Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

***

Separator Block – Description

The Separator block lets you break your content sections with a horizontal separator.

Add a separator to your content using the Separator block.
Create a break between your content ideas or sections with a horizontal separator.

How To Use The Separator Block

In this section, we’ll cover:

  • How to add a Separator block to your content.
  • How to edit and configure your Separator block and block settings.
  • How to remove the Separator block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Separator Block

To add a Separator block to your content:

  • Select a place in your content to add a horizontal separator (i.e. before or after), then either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Separator block (in Most Used or Design section),
    • Add the Separator block in the Content Area.
  • Use the tools in the Separator Block Editor or Block Settings section to resize, edit, format, or customize your separator element.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Separator block…

Add Block tool - Separator block.
Add a Separator block to your content using the Add Block tool.

Or, select a Separator block using the Inserter tool in the Content Area.

Inserter tool - Separator block.
Use the Inserter tool to insert a Separator block into your post.

Either of the above methods will add a Separator block to your content.

Separator block.
Separator block added to content.

After adding a horizontal separator, you can:

  • Edit your block’s settings,
  • Save, publish, or update your post or page.

How To Edit A Separator Block

To edit a Separator block:

  • Click inside the Separator block to select it, then:
    • Use the Block Editor tools to change the style or alignment of the horizontal separator, or
    • Use the Block Settings to change the style of the horizontal separator.

info

The active theme installed on your site controls the Separator block’s default separator line and available styles.

For example, the Separator block for the theme used in the screenshot below adds a short line to content by default.

Separator block - Default horizontal separator line.
A short horizontal separator line.

The theme’s optional styles also include a wide horizontal line.

Separator block - Full-width horizontal separator line.
A full-width horizontal separator line.

And a dotted line too.

Separator block - Dotted separator line.
A dotted separator line.

You can change the color of your separator lines using the Separator block’s color settings.

Separator block - Color settings.
Use the Separator block’s color settings to change the color of your separator lines.

Remember to update and publish your post or page to save your settings.

How To Remove A Separator Block

To delete or remove a Separator block from your content:

  • Click inside the Separator block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove block’.
  • This will remove the Separator block from your content.
Separator block: More Options - Remove block.
Use the More Options menu to remove a Separator block from your content.

Additionally…

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
  • You can also convert a Separator block into a Reusable block.

Separator Block Tools, Options & Settings

The Separator block includes tools, options, and settings for:

  • Separator Block Editor
  • Separator Block Settings

Separator Block Editor

Separator block editor.
Separator block editor.

The Separator Block Editor displays:

  • Change Block Type (See ‘Separator Block – Additional Info’ section below.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • Change Alignment Tool
    • Align center
    • Wide width – makes the block stick out on either side of regular content.
    • Full width – makes the block stretch over the entire width of the browser window (regular content remains within margins on either side).
  • More Options – See How To Use Blocks to learn how to use this section.

Separator Block Settings

Separator block settings.
Separator block settings.

Separator block settings include:

  • Block description area
  • Styles -The styles displayed in this section depend on the theme and plugins installed on your site. For example, short line, wide line, thick line, dots, etc.
    • Default Style – Use the drop-down menu to select a default style for the block.
  • Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Clear button to restore the default text color.
  • Advanced Settings
    • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
    • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Separator Block – Additional Info

You can convert a Separator block into the following block types:

Alternatively, you can select different separator styles by clicking on the ‘Change block type or style’ feature and choosing another separator option in the Styles section.

Separator block - Change block type or style.
Change the Separator block into other block types.

Installing plugins or themes on your site may also add new functionality, options, or settings to the Separator block.

Sample content with Separator line.
Break up your content using horizontal lines with the Separator block.

Congratulations! Now you know how to use the WordPress content editor’s Separator block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top