Share This Post
How to Add a Spacer Block to WordPress
Reading Time: 3 minutes
Spacer blocks give a little bit of “elbow room” between two other blocks. (Kind of like your mom sitting between you and your sibling at the movies so you couldn’t fight.) But before we describe how to add a spacer block, let’s talk about why you’d want to add a spacer block.
Why Add a Spacer Block to a WordPress Post or Page
The short answer is: Sometimes, we just need a little extra space. A little “margin.” We dare you – as we’re a year into the pandemic – to think of a situation where that’s not true! As tons of people are working from home, our routines and structures have broken down almost completely, which means work bleeds into time for self and family for many of us. There’s no “space between.”
As a more visual example – since your website is visual – would you hang pictures on every inch of your living room walls? Of course not! It would be visually unattractive, and it would make your brain hurt because you wouldn’t know where to look.
So think about it: Do you want your website visitors to have an experience like that? Again, of course not! You want to design your website so that visitors know where to look. When they know where to look, it’s the first step in their journey to becoming your client. There’s a flow.
White Space Is a Design Tool
Hey, how about that? By the time you’re done reading this, you’ll know how to add a spacer block to your website. And since spacer blocks create white space (also known as negative space – even though it’s a positive thing), and white space is a design tool, you’re about to become a web designer. (Feel free to tell your friends.)
Whereas business owners tend to think of white space as wasted space, because it could be holding more of their content, smart designers know it helps the design. It helps people focus on what’s important. White space allows people to find the specific information they’re looking for. It even improves reading comprehension by 20%!
So, even though you’re breaking up walls of text with headings, subheadings, bullet points, images, etc., don’t be shy about adding a bit more elbow room on your website. It will improve your user experience, which will benefit your bottom line!
“Music is the space between the notes.”
~Claude Debussy, French Composer
How to Add a Spacer Block
Now that we know why we need them, here’s how to add a spacer block.
If you know your way around the block editor, you won’t be surprised to learn there is more than one way to tell WordPress to add a spacer block.
Click on the + icon on the top left of the screen. When the block window pops up, scroll until your find the spacer block or type “spacer” in the search bar. Click the spacer icon (a double-ended arrow) and – boom! – you have some elbow room on your page.
Simply type the command for a spacer block which is
Then hit return/enter and (boom, again!) your spacer block appears!
Don’t forget that if you accidentally drop your spacer block in the wrong place that you can easily drag it to where you want it! You can also use the arrows on the spacer block controls to ‘hop’ the block up or down one location.
Manipulating Your Spacer Block
Speaking of the spacer block controls, you may recall that each block has its own “menu” of options. All you have to do to get to those options is click on the block and that block-specific menu appears. Clicking on the dots allows you to drag the spacer up and down the page. You’ll also see the arrow mentioned above.
Change the Size of the Spacer Block
Once again, there are two ways to do this. When you click on the spacer block, you’ll notice it has a “handle” – the blue dot on the bottom center of the block allows you to grow or shrink the block by dragging the handle up and down with your mouse.
Alternatively, while the spacer block is the active block on the page (that is, you clicked on it), when you click on the cog icon on the top right of the window, a slider appears. You can change the height of the block by moving the slider or by changing the number of pixels in the little box next to the slider.
At the End of the Day
We all need a little elbow room, a little margin, a little white space in our surroundings and lives. (Trust us: It’s like a universal law.) So does your website. Don’t be afraid to give your visitors a little bit of breathing room as try to absorb the content of your website. They’ll appreciate it!