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,
as well as 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.
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 width of the block.
And then I will use the block toolbar to change to wide width.
And then inside the Group block, I will add a heading and the relevant text.
And 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 wide line.
And below the Separator block, we can add a Columns block.
And select two equal columns.
And then add the text to the left and the right column.
Now we can continue with styling.
Firstly, I will select the heading.
And then I'll open up my typography options.
And firstly select Appearance.
And change the appearance to thin.
Then I will add a custom size.
In this case, five REM.
And finally, I will also change the lettercase to uppercase.
Then I will keep the text in my left column the same.
But for contrast, I will change the size of the text in the right column to small.
Then I will select the Group block or the container block.
And then add some padding or some space around the content of my Group block.
And then our first design is completed.
In the next example, we are going to 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 then select a relevant overlay color.
Then I will select the Cover block.
Open up my sidebar settings.
And deselect 'Inner blocks use content width' as I want to change the width of the block.
Then I will use my block toolbar and change the width of the block to full width.
The next step is to add a Row block.
And then to add a Group block.
Then in the first Group block, I will add some text and below the text a call to action or Buttons block.
And I will type '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 then change the letter case to uppercase.
Then I will select the Group block and then make my way to Styles.
I will change the block spacing between the two blocks in the Group block to 24 pixels.
And then I will change the width of the Group block to fixed.
And once we select Fixed we will see it says specify a fixed width.
And then we'll change the fixed width to 320 pixels.
Next we'll select the Row block and then add another Group block for the text on the right.
And 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 go ahead and select the text and then we can style it further.
So we'll make our way to Typography.
And in this case I am going to select Appearance, Line Height, Letter Spacing and Letter Case.
And then I will change the size of the text to 148 pixels.
And 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 right.
And to save time I am going to 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.'
And here we can read it says, 'Stretch to fill available space.'
And once we have done that we can make our way 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 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.
A final step to ensure that our design appears correctly on mobile is to select the Row block and then select 'Allow to wrap to multiple lines.'
Now we can view our design on desktop and mobile.
In the last example we can recreate the following design using the Columns block.
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 and add a Cover block.
And then 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.
And 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 also change the text to bold.
Below my heading I will add a Separator block and below the separator a Buttons block.
And once I have added the Buttons block I will type in the text and then change the style to Outline.
And then I will also change the text to bold.
And 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 top middle.
And 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.
And then we can delete the two empty columns.
Then we can merely update the content.