Home » Posts » The Spacer Block | The Gutenberg (Block) Editor
The Spacer Block | The Gutenberg (Block) Editor

The Spacer Block | The Gutenberg (Block) Editor

The Spacer Block

The Spacer Block is super easy to use and it is a very useful block to have.

Use these Blocks to add an adjustable amount of empty space between blocks. They are a great way to create padding and white space on pages and blog posts. You can add a Spacer Block anywhere: between paragraph blocks, image blocks, between an image and a paragraph, etc…

On my post Strava Challenge – MA RA TH ON Worldwide Team Relay I have made ample use of Spacer Blocks. Please click the link to view the post >

I copied the entire post to a new page and removed all the Spacer Blocks. Have a look at how the page now displays >

Have you noticed that there is no space between the featured image and the first paragraph?

How to Add a Spacer Block?

Go to a page or blog (you are welcome to click on a screenshot to enlarge).

Click the plus (+) sign: ‘Add block’ in the area you would like to add the Spacer Block.

The spacer Block

Scroll down and click ‘Layout Elements’

The spacer Block

Click ‘Spacer’

On the right-side bar (or left-side depending on your theme settings) enter the height in pixels. By default the height is 100 pixels. I normally use 20px or 30px.

And that’s it! Keep in mind that you can use a Spacer Block anywhere between blocks and do remember that you can duplicate or delete blocks and that you can also move blocks up or down as with any other Gutenberg (Block) editor.


Leave a Comment

Your email address will not be published.

Shares
CrestaProject
%d bloggers like this: