The WordPress Separator block allows you to add a horizontal line or separator between two blocks of content on WordPress pages and posts. It helps you create a visual break or separation between different sections or ideas within your content.
This is a very simple and straightforward block. In this post, I’ll show you how to use the WordPress separator block with a quick step-by-step guide.
Method One: Using the Default Separator Block of Gutenberg
The default Gutenberg block editor comes with a Separator block, with which you can break between content. Take a look at the tutorial below.
Step 01: Find and Add the Separator Block to Your Desired Place on the Editor
Select the place where you want to add the Separator block. Hover your cursor on the place to appear the Gutenberg plus (+) button.
Press the plus (+) button. Type Separator in the search box. Click to add the block to the editor.
You can see the Separator block has been added to the editor.
Step 02: Resize the Gutenberg Separator Block
By default, the Separator block comes as a small horizontal line. To increase its size, come to the right sidebar and click the Wide Line option. You will see that the width of the line has increased.
Step 03: Colorize the Gutenberg Separator Block
By default, the Separator block is black. To change its color, go to the Color option on the right sidebar. Click Background and select the color you want to apply.
Method Two: Using the Divider Block of the Ultimate Blocks Plugin
Ultimate Blocks is a Gutenberg block plugin. It comes with 26+ custom blocks to extend the power of the default WordPress block editor. It has a Divider block with which you can also break between content.
Ultimate Blocks has a free and premium version. You can break between using the free version. However, below I have attached buttons to its free and premium versions.
Once the plugin is installed on your site, start following the tutorial as explained below.
Step 01: Find the Divider block of the Ultimate Blocks plugin
Take your cursor to the place where you want to break between the content. Once you hover over the area, the plus (+) icon will appear.
By clicking the plus (+) icon, find the divider block.
The Divider block of the Ultimate Blocks plugin has been added to the editor. You can see it in the picture below.
Step 02: Configure Settings of the Divider Block
Now, come to the settings tab on the right sidebar, keep the block selected.
From this section, you can change the thickness, height, width, and orientation of the block.
By scrolling down the section a bit, you’ll find more options like alignment, visibility control, animation, responsive control, and more.
Note: The Red-marked options are reserved only for premium users.
Step 03: Stylize the Divider Block
Now, come to the Style tab. From here, you can change the Line Type, Colors, and Dimension Settings. If required, you can even add Custom CSS.
Thus, you can break between content using the Divider block of the Ultimate Blocks plugin, using more settings and stylization options.
Final Words!
It is best not to use this separator block more than once or twice in the entire blog post. Because if you use it too much, it will disturb the readability of the users. In addition, consider the overall design and aesthetic of your website when customizing the separator style.
Finally, test your website’s responsiveness to ensure the separator displays correctly on all devices. If using a theme that already provides visual separators, evaluate whether the Separator block is necessary or redundant. Thus, hope you can use the WordPress Separator block perfectly.
