Intermediate WordPress User

0 of 30 lessons complete (0%)

Content Creation

Designing with row and stack blocks

This is a preview lesson

Register or sign in to take this lesson.

Transcript


Introduction

In this lesson, we will take a closer look at how we can use Row and Stack blocks to achieve our design needs. Using the Group block is one of the cornerstones of mastering the block editor. When you select a Group block, you have the variations of the Group block. The standard Group block, which gathers blocks in a container, the Row block, which arranges blocks horizontally, the Stack block, which arranges blocks vertically, and the Grid block, which arranges blocks in a grid. Let’s look at some common examples of where the Row block will come in handy.

Using the Row block

Firstly, I want to show you how you can create the top section of my example with the help of a Row block. So if we scroll down, we will see it’s currently empty, so let’s go ahead and type in forward slash row. Add a Row block and then add a heading and name it the ‘Green House.’ Then I will press enter, and of course, the text will now be on the right of the heading. Let’s copy the text from our example, ‘Make your home a sanctuary,’ and then paste it. Open the List View, select the Heading and the Paragraph block, and then group them together using my block toolbar. Now that the text is below my heading, I want to remove the space between the blocks. So I’ll open up my sidebar settings, make my way to Styles, and below Dimensions, I will ensure that the block spacing is set to zero. Now that the heading and the text are closer to each other, I think it looks great.

I will close my sidebar settings and select the Row block again in my List View. Click on the Inserter and add a Buttons block. Let’s say ‘Explore’ and open our sidebar settings, and select the outline style. Next, I would like to move the Buttons block to the right, and this is where the power of the Row block really comes into play. Select the Row block in our sidebar settings, make our way to justification in our block toolbar, and then select Space between items. And once we select that, we will notice that the Buttons block pushes to the right. Lastly, I would like to align the Buttons block to the bottom. So, select Change vertical alignment in our block toolbar and click on Align bottom. So as you can see, many design possibilities are using the spacing and alignment options of the Row block.

Building a header

Secondly, the Row block works very effectively for headers. So, to add a header, let’s make our way to Appearance and then click on the Editor. And this will take you to your Site Editor, where you can manage templates and add headers and footers. Make your way to patterns, click on the plus icon next to patterns, and then select Create template part. We’ll go ahead and select Header and then name it appropriately, and then click on Create.

Now, we can build our header by first adding a Row block. Next, I will add my site logo, which I’ve already added to my media library, and then enlarge it. Once I’ve done that, I will press Enter. Next to my site logo, I will add my Site Tagline block. ‘Better beans, better coffee.’ Then, I’ll open my List View, select the Site Logo and the Site Tagline block, and then wrap them in a Stack block. Now, I would like to remove the space between the two blocks, so I’ll make sure I’ve selected my Stack block, open up Styles in my sidebar settings, and ensure that the block spacing is zero. Then, I will change the justification to center in my block toolbar.

Next, I’ll select my Row block, the container block, go to Styles and change the background color to salmon. Then, I’ll click on the Inserter and add my Navigation block. Now, we will see a list of all the pages I’ve added to my site, but I’ll click on the three vertical dots and select a navigation menu I’ve already created. Then, I will ensure that I select my Row block again, and then below Layout in our sidebar settings, I will click on Space between items to ensure that the navigation menu moves to the right. Then, our header is done.

Using the Stack block

Let’s end off by taking a closer look at the Stack block. In this example, we have three columns; as you will notice, there’s less text or content in the left column. I would like the background color, and the Buttons block to push down and align with the columns in the middle and the right. Let’s see what I’ve done. I’ve stacked all the content within a column together in a Stack block, and secondly, I stacked the heading and the paragraph together in a Stack block. But I’ve left the Buttons block by itself.

Next, when we select the main Stack block and open up our styles settings, you will notice I’ve changed the background color of the Stack block, not the column. And I’ve added some padding around the main Stack block. The next crucial step is to change the minimum height of the stack block to 100%. As we did that, you would have noticed that the background color expanded and aligned with the other columns. Next, we will ensure that the Buttons block on the left aligns with the other Buttons blocks. So, select Change vertical alignment in your block toolbar and then select Space between. Now you will see that the buttons block is pushed down to align with the other columns.

Conclusion

These blocks may appear basic on the surface, but as you have seen, you can do a lot with them once you apply additional settings like space between and minimum height.