A lesson to show three ways to set up and style the Group block. Highlights include adding a background image, renaming, borders, radius, grouping and ungrouping.
Learning outcomes
- How to setup a Group block and add blocks.
- How to rename and organize the List View.
- How to customize the Group block using the settings and styles options.
- Find documentation about the Group block
Transcript
Introduction
Welcome to Using the Group block. The Group block allows you to group and style multiple blocks together, simplifying content management and design.
Example overview
Here is an example page that I want to go through first of some options of how to use the Group block. So the first one, I use the Group block with a background image and a heading. I’ve also added a border and radius. The second one, I used a Group block with an image, heading and paragraph. Also added a border around that. The third one, example is a group block with a heading and a gallery block to create the page.
Group block demo #1
I’ve opened up a page, and I’m turned on my list view, which is the three slashes over in the upper left hand corner. I like to have my toolbar at the top. So if you’d like to do this, you can click on the three dots in the upper right hand corner and go to top toolbar and turn that on. We’re going to add a Group block. So I’ll type in group with the slash. I’m just going to click on the front the first one option, and then I’m going to go over to my styling tools. I’m going to add my background image, open up my Media Library, make sure that you’ve optimized your images before uploading them, and then add alt text for accessibility.
Now we’re going to go and style our image so we have the Group block clicked. I’m going to go up into my tools at the top and go to align, and I’m going to do a full width on the align. Okay, so now I’m going to go back over to the right and go to the styles. I’m going to scroll down to minimum height, and I want to add probably about 644 let’s try that maybe 645 because I want to be able to get the hands in there. So we’ll start there and make sure I click Update. And then another tool that you can use is going back up to the background, where you had the background image, and go to size and open that up. So this gives you the option to take the main focus and adjust that so I can adjust that so that the hands are showing, and click update on that. I’m going to then click on the plus sign within the group block and add a heading. We make this baking. I’m going to click on the tools and go to align text center. So we can’t see the the heading text very well. So I’m going to do some styling on that. So I’m going to go over to the styling tools and click on background, and it opens up my my colors, and I’m just going to pick the green from here, and then I need to add some padding. So I’m going to go down to dimensions within the heading block and turn on padding. I’m going to do two clicks front and top and bottom, and two clicks side to side. I’m also going to go back up to the group block do a little bit more styling there, because I want a little bit of space between the heading and the top. So I’m going to go to Styles, I’m going to add some padding for the top and bottom so that looks good. And then I’m going to add my border. So I’m going to go down to the border, I’m going to add that same green, and then I’m going to add a little bit of thickness to it. And then I’m also going to use the radius to show you how to use that. So we’re just going to click on radius, and I’m going to a radius adds a curve to the corner. So I’m just going to make it very dramatic and go all the way to 100 and we’re going to click update, and we’ll refresh the page, and there’s our first block.
Group block demo #2
For our second example, I’m going to click on the three dots and do an add after. This time, I’m not going to start with a Group block, because I want to show you how to group blocks together. So let’s start with an image. And we’re going to make this one a cookie one, and then I’ll add a heading. And I’m going to grab some text from my example, and I use cupcake ipsum. It’s a free site that you can get filler text from, and this one is just baking, so it’s fun. Alright, so we have our three blocks over here in our list view, and we can click on the first one and then hit Shift and click on the last one. And once we have those highlighted, we’re going to click on the three dots and we can scroll down to the group. Okay, so that was simple. Click Update, and then we can go back on those three dots and click rename, and keep our list view organized. Okay, so let’s go ahead and stop do some styling of this one. This one, I’m going to do a line to a wide width. Okay, give it a little bit different in the layout. I’m going to turn off this just because I want the text to be able to spread out a little bit more. And we’ll see when we get all our styling done on that. I do want to click on the image, because the image is going to be a little bit big. It doesn’t auto with the original. So I’m going to put in 568, because I want it a little bit smaller. And then I want to align this to this center. Okay, so we’ll click on that, click on the Update button. And then I also want to add, go back up to our group block, and I want to add a border around this so I’m going to click on the colors and open that up and just do a small border there. Click on Update. I’m going to go up and add some padding. So on this one, I want to add about four clicks of padding, and then two on the side. Let’s do that. And then also, there’s an option for this block spacing. So I want to add a little bit of space in between each of the three blocks that I’m using. So we’ll do that. And I think I have everything. Let’s look at it on the front end. Click and refresh. I forgot to align the text. So let’s go back to the header and we’ll align that to the center. There we go. And we’re good for that.
Group block demo #3
To add our last Group block. I’m going to click on the three dots from the previous group and do an add after I’ll type in for a group block. I’ll pick the first option. I’m going to add a heading, and I’ll style my heading to align text center from the toolbar at the top, and then I would add my gallery here like that, but there is the example has Several different images. So to save time, I’m going to do a quick back, back up. And what I’m going to do is just do a copy and paste instead of adding all of the so I’m going to click on that gallery, go to the three dots, and do a copy so I can add my images quickly. If I open up the Gallery block, you see that they’re all individual images. Okay, so we’re going to go back up to our group block. We would rename it. You guys know how to do that. Now, on this one, I’m going to make it a full width, okay? And the other thing is to on my layout for the Group block. For this one, I’m going to turn off this toggle, and this is going to make the images spread out a little bit more. So make sure I click that update, because that’s a big update. I’m going to add a background, so I’m going to click on the styling, go to background and click on the brown. I need a little bit of padding here, so I’m going to go down to padding under dimensions and do two clicks on the top and bottom and two clicks on the side. We’ll click update on that. Think everything looks good. Fingers crossed everyone. We’ll do a refresh, and there we are.
Conclusion
See the resource section for the link to documentation about the group block. Have fun exploring all the ways to use the group block. Thank you for watching.