Transcript
Introduction
In this lesson, we will explore WordPress block layouts. We will learn to nest and group blocks to create advanced layouts and block structures. As a reminder, we use container blocks such as the Group block, Columns block, Cover block, Media and Text block, Row, Stack, and Grid blocks to nest blocks together. A container block serves as a container or wrapper for other blocks, allowing you to group related content and apply styles or settings to the entire group.
Example 1
In the first example, let’s recreate the following. I have grouped a Header, a Separator, and a Columns block together. To start off, I will add a Group block and select a container. Then, I will open up the sidebar settings and deselect ‘Inner blocks use content width,’ as I want to change the block’s width. Then, I will use the block toolbar to change to a wide width. Then, inside the Group block, I will add a heading and the relevant text. I will hold in shift and then enter to move to the next line. Below my heading, I will add a Separator block. And in the block toolbar, I will change the style to a wide line. And below the Separator block, we can add a Columns block. Select two equal columns. Then, add the text to the left and the right column.
Now, we can continue with styling. Firstly, I will select the heading. Then, I’ll open up my typography options. Firstly, select Appearance. And change the appearance to thin. Then, I will add a custom size. In this case, five REM. Finally, I will also change the lettercase to uppercase. Then I will keep the text in my left column the same. But I will change the text size in the right column to small for contrast. Then, I will select the Group block or the container block and add some padding around the content of my Group block. Then, our first design is completed.
Example 2
In the next example, we will recreate the following design based on one of the patterns available in the Pattern Directory. The first step is to add a Cover block and select a relevant overlay color. Then, I will select the Cover block, open up the sidebar settings, and de-select ‘Inner blocks use content width’ as I want to change the block’s width. Then, I will use my block toolbar and change the block’s width to full width.
The next step is to add a Row block and within the Row block, a Group block. In the first Group block, I will add some text and, below the text, a call to action or Buttons block with the words ‘Explore.’ Then, I will style my Buttons block. I will change the background color to black and the text to white. I will also increase the size to medium and change the lettercase to uppercase. Then, I will select the Group block and go to Styles. I will change the block spacing between the two blocks in the Group block to 24 pixels. Then, I will change the width of the Group block to fixed. Once we select Fixed, we will see it says specify a fixed width – we’ll change the fixed width to 320 pixels.
Next, we’ll select the Row block and add another Group block for the text on the right. Then, add the name of the album I am highlighting in this section. So I will type in ‘on’ and then hold in shift, press enter, type ‘in the’, hold in shift, press enter, and then ‘flame.’ Next, we will select the text, and then we can style it further below Typography. I will select Appearance, Line Height, Letter Spacing, and Letter Case in this case. Then, I will change the text size to 148 pixels, the appearance to bold, the line height to 0.8, the letter spacing to -4 pixels, and the letter case to uppercase. Then, we can change the alignment of the text to the right. To save time I will go ahead and duplicate the text and modify it accordingly.
Then we can select the Group block on the right, open up Styles, and for this Group block below Width, we will select ‘Fill.’ Here, we can read it says, ‘Stretch to fill available space.’ Once done, we can go to settings and justify the items to the right. Then, we can select the Row block again and, in the block toolbar, change the vertical alignment to align the top. Thereafter, we can select the Cover block, open Styles, and add some padding or space around the content of the Cover block. And in this case, I will change the padding to 5. To ensure that our design appears correctly on mobile, select the Row block and then select ‘Allow to wrap to multiple lines.’ Now, we can view our design on desktop and mobile.
Example 3
We can recreate the following design using the Columns block in the last example. So to start off, let’s add our Columns block and then choose 3 equal columns. Then, I will select the main Columns block or the container block and change the width to wide width. Then, I will select the first Column, add a Cover block, and select an image from my media library. Once inserted I will select the Cover block, open Styles, change the overlay color to black and the overlay opacity to 40.
Then, I will add a Stack block within my Cover block. Within my Stack block, I will add a Heading block, add the relevant text, select the text, and then change the heading to uppercase. Then, I will change the size to 2 REM and the text to bold. Below my heading I will add a Separator block and below the separator a Buttons block. Once I have added the Buttons block, I will type in the text and then change the style to Outline. I will also change the text to bold. Don’t forget to add the relevant URL. Then, I will select the Stack block and change the alignment to center. Then, I will also open Styles and change the block spacing to 3 between the blocks in the Stack block. Then, we can select the Cover block and change the position of the content to the top middle. Finally, we can add some padding around the content in our Cover block. Then, you also have the option to enlarge the size of your Cover block. Now that the styling is completed, we can select the left column and duplicate it twice. Then, we can delete the two empty columns and merely update the content.
Practical
Use WordPress Playground to test your knowledge.
- Re-create Example 2 demonstrated in the video.
- Here is a link to the pattern the example was based on: https://wordpress.org/patterns/pattern/fullwidth-vertically-aligned-headline-on-right-with-description-on-left/