How to use the Spacer block

Learn how to use the spacer block and how to use the different resizing and styling tools available in the site editor.

Learning outcomes

1. Add spacer blocks to your WordPress website.
2. Use a variety of tools to enhance and style your spacer blocks.
3. Use tools to resize the spacer block to the exact dimensions.
4. Move spacer blocks to different parts of your post, page, or site editor.
5. Add a background color to a spacer using the group block.

Comprehension questions

1. What is the purpose of the spacer block?
   1. To make a paragraph bigger. 
   2. To move images closer together. 
   3. To add space between blocks. 
2. What is one way to add a spacer block?
   1. /spacer
   2. Say to your computer, “Spacer block appear”.
   3. Add a group block 
3. Does the spacer have any styling tools?
   1. Very few
   2. So many I can’t keep track. 
      
      

answers- 1. 3, 2. 1, 3. 1.

Transcript

0:00
Hi and welcome to WordPress. This is a tutorial on how to use the spacer block, I will be using the WordPress 2023 theme. Here is a list of the objectives for this tutorial. Add spacer blocks to your WordPress website. Use a variety of tools to enhance and style your spacer blocks. Use tools to resize the space block to exact dimensions, move spacer blocks to different parts of your post page or site editor. Add a background color to a spacer using the group block. I have set up a spacer block page and I’ve set up some headings, paragraphs and images to show when a page has too much squished to it things that are too close to each other. So we have the title and a paragraph, then a heading two paragraphs some images, you can see that there’s very little space between the paragraph and the images. This is what it’s looks like. Now, this is what we’re going to get to. So we have a little bit more space between the title and paragraph, I’m going to show how to add the spacer block here and actually give it some color, then add another spacer here to just let the page breathe a little bit and if the visitor a place for their eyes to rest when they’re scrolling through. So we’re gonna go into the edit page mode. I’m going to open up my list view. You can see I have different groups that I’ve put together. A group one is our headings and paragraphs. And then group two is a Columns Block I have three columns. And so then each of those columns has an image within that. And the third group is another heading with paragraphs, I’m going to open up my settings and styling. With the spacer block, you have some limited styling. Within here. Here are the settings you only have a height, you can change this to a toggle, the t shirt sizes small medium large, you can go into pixel or you can use the toggle here. The styles as of right now only have a top and bottom margin that you are able to adjust if you click on there, there’s nothing available right now.

2:26
Let’s go ahead and add a spacer. So we’re going to start up here at our paragraph.

2:34
We’re going to click on the three dots. And then scroll down and go to add after. You’ll see that your cursor is starting to flash and it says type backslash choose a block. So that’s what we’ll do backslash type spacer, we’ll click on that. And the defaults, gives you 100 pixels, as you can see over here, I think that’s a little too much for that space. So we’re going to just adjust it a little bit, I wanted to be able to make it a little bit bigger so that you can see it when we see our main page. So probably I’ll do seventy, click to update. We’ll go to our main page, go back up to the section that we’re editing, make sure I refresh that page. You can see that there’s now a space right there. Okay, very simple to add. Our next section is between group one and group two where we have the images. This I’m going to do a little bit different, there’s different ways of adding the spacer block. So I’m going to click on that second group, which is right here. And I’m going to click on the three dots, I’m going to do the add before this time. Again, I can do the backslash. Or I can go up to the plus sign over here and type in the word spacer. So those are two different ways of finding the spacer block, then just click on the X to return to the library. And then I can click on the three slashes up here to go back into my list view. We can adjust the size here I’m going to make this one a little bit bigger because we’re going to take this one and do something fun with it. All right. Again, I said that there’s no styling up here. Make sure I update this so that it appears. But what I can do is I have some basic tools here. I have the spacer icon, I have a drag so I can drag it to different places. I could put it down here instead. This button the move up, move down does the same thing. And then the third option, it’s just your basic Overall toolbar, okay. But over here, if I click on here, I do have the option to make this block part of a column or part of a group. So we’re going to make it a group. Now I’m in the group editing. And you can see that over here, so I have another option and I can make it full width. I can make it the wide width and things like that. You can see in the ListView, the spacer block is still there, it’s just that it’s within a group. So that group is giving me more. And I’m going to toggle off the inner block use content width, because I want the spacer block to go all across because I’m going to give it a background color. So I’m gonna go over to my style. And now I have the ability to add a color, add that blue, and then click Update. We’re gonna go back to that page, refresh. And now we have our band, which is a spacer. And we can always go back and adjust it if it’s too big or too small. The last spacer we’re going to put after the images and before the heading. I’m going to highlight the group of images that I’m going to click on the three dots. I’m going to add after I’m going to backslash spacer click on that with just this just a little bit. Get the updates go back to my main page. And there I have another space. Please visit learn that wordpress.org For more learning experiences. Thank you