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

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. 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.