Spacer Block

The Spacer Block lets you add white space between blocks and customize its height …

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Block Editor – Spacer Block

WordPress Block Editor - Spacer Block

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

***

Spacer Block – Description

The Spacer block lets you add white space between blocks and customize its height.

Spacer block.
Add white space to your content using the Spacer block.

How To Use The Spacer Block

In this section, we’ll cover:

  • How to add a Spacer block to your content.
  • How to edit and configure your Spacer block and block settings.
  • How to remove the Spacer 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 Spacer Block

To add a Spacer block to your content:

  • Select a place in your content to add a spacer block (i.e. before or after), then either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Spacer block (in Most Used or Design section),
    • Add the Spacer block in the Content Area.
  • Use the tools in the Spacer Block Editor or Block Settings section to adjust your space.

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 Spacer block…

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

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

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

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

Spacer block.
Spacer block added to content.

After adding a Spacer block to your content, you can:

  • Edit the block to adjust the space.
  • Save, publish, or update your post or page.

How To Edit A Spacer Block

To edit a Spacer block:

  • Click inside the Spacer block to select it.
  • Use the Block Editor tools to adjust the spacing using the resizing handle.
  • Use the Block Settings to adjust the spacing by entering a height in pixels in the ‘Spacer Settings’ section.
Spacer block - adjusting white space.
You can adjust the amount of white space in The Spacer block.

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

How To Remove A Spacer Block

To delete or remove a Spacer block from your content:

  • Click inside the Spacer block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove block’.
  • This will remove the Spacer block from your content.
Spacer block: More Options - Remove block.
Use the More Options menu to remove a Spacer 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 Spacer block into a Reusable block.

Spacer Block Tools, Options & Settings

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

  • Spacer Block Editor
  • Spacer Block Settings

Spacer Block Editor

Spacer block editor.
Spacer block editor.

The Spacer Block Editor displays:

  • Block Type (See ‘Spacer Block – Additional Info’ section below.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • More Options – See How To Use Blocks to learn how to use this section.

Spacer Block Settings

Spacer block settings.
Spacer block settings.

Spacer block settings include:

  • Block description area
  • Spacer Settings
    • Adjust spacing height in pixels.
  • 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).

Spacer Block – Additional Info

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

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

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

Sample post with Spacer block added.
Use the Spacer block to add white space between other blocks and customize its height.

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

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

Get Thrive Leads for WordPress

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as Spacer Block.