Separator Block

The Separator Block lets you break your content sections with a horizontal separator …

WordPress Gutenberg Blocks – Separator

WordPress Gutenberg - Separator Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Separator Block Description

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

Add a horizontal separator using the Separator Block

(Add a horizontal separator using the Separator Block)

How To Use The Separator Block

To add a Separator Block:

  • 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 a ‘Separator’ block (in Most Used or Layout Elements section), or
    • Add the ‘Separator’ block in the Content Area.
  • Add, paste in, or upload your content.
  • 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 - Add Separator Block

(‘Add Block’ Tool – Add Separator Block)

Or, select a Separator Block in the Content Area

Add a Separator Block from the Content Area

(Add a Separator Block from the Content Area)

After adding a Separator Block, you can add a horizontal separator:

Add a horizontal separator

(Add a horizontal separator)

After adding a horizontal separator:

  • Edit block 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 of the horizontal separator, or
    • Use the Block Settings to change the style of the horizontal separator.

Edit a Separator Block

(Edit a Separator Block)

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:

  • Click inside the Separator Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Separator Block

(Remove a Separator Block)

Additionally …

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

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.)
  • More Options

Separator Block Settings

Separator Block Settings

(Separator Block Settings)

Separator Block settings include:

  • Block description area
  • Styles
    • Short Line
    • Wide Line
    • Dots
  • Advanced Settings
    • Additional CSS Class

Separator Block – Additional Info

  • The Separator Block cannot be converted into other block types.
  • Selecting ‘Change block type’ brings up the ‘Block Styles’ menu.
  • Installing plugins or themes on your site may add new functionality, options, or settings to Separator Blocks.

Change Block Type - Separator Block

(Change Block Type – Separator Block)

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Separator Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Separator Block.