Transcript
Introduction
As we have learned, blocks form the cornerstone of building your online home. You can think of them as the literal building blocks of your website. In this lesson, we are going to build on our knowledge of blocks, explore using various types of blocks, as well as nest and group blocks together to create various layouts.
Nested blocks
Nested blocks help you create more complex layouts by adding multiple blocks inside each other. We typically use container blocks such as the Group block, Columns block, Cover block, Media and Text block, or Row block to group content together.
As a reminder, when you open up the List View, you can navigate between layers of content and nested blocks. Let’s look at the second section on this homepage to see this in action. I’ll go ahead and select the Columns block. And when we expand the Columns block, we will see all the blocks inside. In the left column, we will notice a Heading block, a Separator block, and a Paragraph block. In the right column, we will see a Gallery block with four images. Let’s go ahead and create some examples together.
Group block
Firstly, I will group some blocks together using a Group block. But first, I’m going to add a Heading block and then name it appropriately. In this case, laughter is the best medicine. Then I’ll press Enter and add a Columns block, select two equal columns, and then add some text in the left column and in the right column. Then, I will select both of these blocks in my list view by holding in shift and clicking on my mouse, which allows me to select multiple blocks and then use the block toolbar to group them together in a Group block.
Next, I would like to change the width of the Group block to wide width. But before I will be able to do that, I have to deselect Inner blocks use content width. Only once I’ve deselected this option, the nested blocks will be able to use the content width options, such as wide width and full width. If I don’t deselect this option, I won’t be able to change the alignment to full width, for example. As you can see, nothing happens. So once deselected, I can return to the block toolbar and change the width to wide width without the constraints set by the theme.
Next, we can open the Styles tab to further style our block. The first thing I want to do is change the background color of the Group block. Please also note that you can add a background image to a Group block if you want to. Click on the three vertical dots next to Typography to see all available options. Next, I will go ahead and add some padding to create more space around the content of my block. You may decide to style your Group block even further.
When you have multiple layers of content on a page, you can use the Group block to rename sections. So, in the top example, we will see the first section is called Our Story, and now I can select the Group block below and rename it. In this case, Testimonial. So, this feature of the Group block will allow you to structure and organize your content.
Media and Text block
In the next example, let’s use the Media and Text block to group blocks together. So, let’s go ahead and add the Media and Text block. Then, on the left, we can add an image from our media library. On the right, we can start adding content. At the top, I will add a heading and name it Sushi is art. Press enter and then add some text. At the bottom, I want to add a call to action or, in this case, a Buttons block. Then I’ll say Learn more and I’ll use the block toolbar to make the text bold and also to add the relevant URL. Then, I will select the parent block in the List View and change the alignment to wide width. You can also use the block toolbar if you want to change and show the image on the right. Below Settings, I will change the media width to 40. Then, I will open the Styles tab and add some padding around the content. Finally, I will change the vertical alignment of the image to align the bottom.
Columns block
In the next example, we are going to use the Columns block. The Columns block is one of the most effective blocks to create complex layouts or designs. So let’s go ahead and add a Columns block and then select three equal columns. In the left column, I’m going to go ahead and add some text and name it Platters, press enter, and then add a paragraph. Below that, I will add an Image block and select an image from my media library. Then, I will select the text at the top, make it bold, and enlarge the size, followed by centering the text of both paragraphs. Once aligned in the center, I will select the Image block and change the aspect ratio to square. Then I will select the main Columns block or the parent block and change the alignment to wide width.
Thereafter, I will make my way to Styles and add some padding around the block’s content, as well as block spacing between the three columns. When I’m done styling the block, I will select the left column and duplicate it twice. Once duplicated, we can delete the empty columns. Then, we can go ahead and modify the content as we please.
Cover block
In the last example, we are going to use a Cover block. The Cover block allows you to display text and other content on top of an image or video. It is a great block to use for headers and banner-style displays. So, let’s go ahead and add our Cover block. Then, you will see that you can select a color overlay. But I will go ahead and add an image from my media library as background. Then, I will add some text followed by a Buttons block. Then, I will write Order and change my call to action’s background and text colors. Then, I will select both blocks and stack them together using a Stack block. This allows me to customize the blocks simultaneously. Then I will justify the Stack block to center, select the Cover block and change the alignment to wide width. Don’t forget to deselect Inner blocks use content width. Now, we can make further modifications. I will enlarge the text, Enjoy 20% off and the Buttons block. I also want to make the text of the Buttons block bold, and don’t forget to add your URL. Then I will select the Cover block, and please note in the block toolbar you can toggle the block to full height. But then we can also manually decrease or increase the size. Then, I will open the Styles tab and change the overlay opacity to 30 to make it lighter. Then, my cover block is ready to go. I trust you now feel more confident nesting and grouping blocks together.
Practical
Go to WordPress Playground and re-create the following examples to test your knowledge.
Example 1:
Example 2:
- Re-create the first example
- Step 1: Add a Heading block
- Step 2: Add a Columns block with two equal columns and add text to the left and right.
- Dummy text used: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Step 3: Select the Heading and Columns blocks and Group them. Then, change the Group block’s width to Wide Width.
- Step 4: Change the background color of the Group block to a color of your choice.
- Step 5: Tweak the padding of the Group as you prefer.
- Re-create the second example
- Step 1: Add a Cover block and a background image. If you don’t have an image on your computer, you can use https://unsplash.com/.
- Step 2: Change the width of the block to Full Width.
- Step 3: Change the overlay color (I used #2C3066) and set the overlay opacity to 80%.
- Step 4: Change the padding to 4 on each side of the block.
- Step 5: Add a Group block, write ‘enjoy’, press enter, and write ‘20% off’. Change the letter case to upper case, enlarge the text to 160 pixels, and make it bold.
- Step 6: Add a Spacer block with a size of 50 pixels.
- Step 7: Add a Buttons block, change the background color to white, and the text to black.
- Step 8: Buttons block: Change the letter case to upper case and the text size to 20 pixels. Lastly, add padding to meet your design requirements.