Helping site owners learn WordPress since 2012 · (844) WP-TUTOR
Block Editor

How to Add a Separator Block in WordPress

Step-by-step guide to adding a Separator block in the WordPress Gutenberg editor and customizing its color, width, and thickness to divide content.

WT
WP Tutoring TeamWordPress Instructors
Updated Mar 11, 2021
1 min read
Table of contents

Step 1

Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Scroll to Layout Elements. Select Seperator Block.

Step 2

The Separator block will appear. You’ll see a short line. On the right, you will see a sub-menu. From there you can customize your separator block. You can color it, change the width, change the thickness,  add CSS classes, etc.

Step 3

Once you’ve finished adding the necessary menu information, save your edits

WT

WP Tutoring Team

WordPress Instructors

We’ve been teaching WordPress to individuals and businesses since 2013 — through step-by-step tutorials and 1-on-1 tutoring sessions.

Leave a comment

Comments are reviewed before they appear.

Get our free WordPress starter guide

Join thousands of site owners and get step-by-step WordPress tutorials in your inbox, plus printable cheat sheets.

Beginner-friendly, no jargon
Printable cheat sheets & checklists
Unsubscribe anytime

Request your session

We’ll reply quickly — usually the same business day.

By using this form you agree with the storage and handling of your data by this site.