#3: WordPress Content - UTC Website Knowledge Base

Creating content in WordPress is at the heart of building a dynamic and engaging website. Whether you’re writing blog posts, crafting static pages, or curating multimedia-rich articles, WordPress offers a flexible and user-friendly editing experience.

Topics:

Nesting and using blocks to create visually appealing content
Using block patterns
Embedding media and third-party content on your website
Taking advantage of query loops
Using the Comments block
Designing with the Columns block
Using the Group block
Designing with Row and Stack blocks

Nesting and using blocks to create visually appealing content

Transcript

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.

Using block patterns

Transcript

What are block patterns?

But what are patterns? Block patterns are pre-made designs or layouts of grouped blocks that are available to modify and change to meet your needs. It will essentially save you time but also enhance creativity and design. Instead of nesting and grouping blocks together, patterns have already done that for you. In one click, you will have access to beautiful and functional layouts from calls to actions, headers, columns, galleries, and more.

Adding a theme pattern

To add a pattern, click on the plus icon on the top left, also called the Inserter, and open up the patterns tab on the right next to Blocks. At the top, you will see all patterns. Below are all the synced and non-synced patterns you have created yourself. Synced patterns are marked with a purple icon and non-synced patterns don’t have one, but more about synced and non-synced patterns in a moment. Below My patterns, you will see the patterns that come with your theme. They are organized into various categories to help you find what you need. Once you click on the category, you will see a preview of all the available patterns when you scroll down.

You can also select Explore All Patterns at the bottom to get a bird’s eye view of the patterns that come with your theme. You can also go through them category by category. Let’s look at a quick example. When you select a pattern, in this case, one from my Featured category, you can modify the pattern to meet your design requirements. It can easily be edited in the same way as any other block. You can change the alignment of the container block. You can edit the heading, update the content, replace the images, and, for example, change the background color of your pattern as well as other styling options. But all the hard work and the layout have already been done for you. The only thing you have to do is select the pattern and modify it to meet your requirements.

Using the Pattern Directory

The patterns that come with your theme are limited. If you want more patterns to choose from, you can explore the Block Pattern Directory. To do that, let’s make our way to the WordPress.org website. Click on “Extend” and then select “Patterns”. Here, you can search and find new patterns on your website. You will notice there is an option to view only curated patterns or hundreds of patterns that have been added by the WordPress community. You can type in the search block, search by category, or browse through all the available options until you find what you’re looking for. Once you find the pattern you are after, you can click on the “Star” to add it to your favorites. When you are ready to add the pattern to your site, open the pattern, click on “Copy Pattern,” return to your website, and then paste. Then, you can start changing and modifying your pattern. This is what my pattern looks like after altering it to meet my design needs.

Managing patterns

When you make your way to the Site Editor and in the Side View you will see a Patterns tab. Here you can manage, edit, and create all of your patterns, synced or not, along with your template parts. When you click on “My Patterns”, you will see all your custom patterns. The synced patterns have a purple icon, and the unsynced patterns don’t. If you hover over the purple icon, it clearly says, “Editing this pattern will also update anywhere it is used”. Below custom patterns, we will see all the available categories as well as the patterns that are provided by your theme. It is also worth noting that when you click on the three vertical dots of a pattern that comes with your theme, you can also duplicate and add that pattern to your custom patterns area, and when you’ve saved it as a custom pattern, you can modify it as you, please. At the bottom, you will find all your header, footer, and general template part patterns.

Custom patterns

Let’s start with your own patterns. If you click on the plus icon next to “Patterns,” you can create your own custom synced or unsynced patterns. After naming it, you can add it to the relevant category, in this case, the “Call to Action” category, and then you can choose to sync it. In this example, I will choose to sync the pattern, and at the bottom, it says, “Sync this pattern across multiple locations.” And now you can start creating your synced pattern, and when it is ready, we can click “Save”. To create a pattern in the block editor, merely select the design, click on the three vertical dots of the block toolbar, and select “Create Pattern.” Then, follow the same process as before, and I will once again select a synced pattern. So, if you love a design, you can save it and reuse it as a synced or non-synced pattern.

Template part patterns

Lastly, let’s talk about template parts. To manage your header and footer, you have template part patterns at your disposal. Templates create a design for a webpage, and this is usually done by adding a header and footer template part. Let’s look at an example and open up our page template. When you open your page template, we can go ahead and select our current header and then click on the three vertical dots. Next, we can select “Replace Header.” When you do this, you can select one of your existing template parts or patterns that come with your theme. And it works exactly the same way with your footer. Below Patterns, you can manage and edit your existing template parts. To add a new template part, click the plus icon next to “Patterns” and select “Create Template Part.” Here, you can select between creating a general, footer, or header template part. To create a new header template part, name it appropriately, select “Header” and then click “Create”.

Embedding media and third-party content on your website

Transcript

Embed block

First up is the Embed block itself. When you select the Embed block, you can display content from other sites. Now that I’ve selected the block, it says paste the link to the content you want to display on your site. So I’ve already grabbed a URL from one of my X posts, which I’ll paste and click on Embed. Then, we will see that the post displays on our site. You can also use embed blocks built for specific third-party services, such as X, YouTube, WordPress, Vimeo, CrowdSignal, PocketCasts, etc as you can see in the list on the left. Instead of using the general Embed block, we could have used the X embed block to achieve the same result.

YouTube & Spotify block

In the next example, I’m not going to click on the Inserter to the top left, but rather type the forward slash and the block’s name. I would like to add a YouTube video to my site, so I will type in forward slash YouTube, select the block, and then add the URL of the video, and then click on embed. But WordPress has made adding third-party content to your site even easier. Technically, you don’t even have to add the block. You can merely paste the URL straight into your page or post. Let’s look at another example. Instead of inserting the Spotify embed block, I will paste the URL of a Spotify podcast straight into my page.

Transforming an embed block to a Columns block or Group block

Did you know you can transform an embed into a Columns or a Group block? Transforming to one of these will let you change the background color and layout. I would like to add a TED talk, so I will type in forward slash TED, select the block, and then paste the URL of the talk. Once I’ve done that, I will select my block toolbar and transform this block to a Columns block. Then I will open up my sidebar settings and then change it from one column to two columns. Then, I will add another TED embed block into my right column, paste the URL of my second video, and then click on Embed. I will select my Columns block or container block, and then, in the block toolbar, change the alignment to wide width. Then, you can go to Styles, change the block’s background color, change the padding, etc. But what happens if the embed blocks don’t work?

HTML block

Well, we can use the HTML block. For example, the embed block does not work for Facebook or Instagram posts. Let’s make our way to one of our Facebook posts. Click on the three vertical dots, click on embed, copy the HTML code, return to your website, type forward slash HTML, and then select the custom HTML block. Then, we can go ahead and paste the code. We can click on the preview in the block toolbar to see how the post will display.

Taking advantage of query loops

Transcript

Structure of a Query Loop block

Each Query Loop block comprises various blocks like the Post Featured block, the Categories block, the Post Title block, the Post Author block, the Post Excerpt block, etc. While you won’t be able to edit the content of these nested blocks, you can customize the appearance and layout, including adding or removing additional blocks as you’d like.

Examples

Let’s look at a few example websites to see how they have used query loops. In our first example, a query loop has been used to highlight the latest stories, recognizing women’s creativity, leadership, courage, and innovation. Below that, a query loop has been used to display blog posts. In the second example, query loops have been used to display different types of recipes. First, we have breakfast recipes and amazing appetizers if we scroll down. In our last example, a query loop has been used to create a news page. Let’s first look at how to modify a Query Loop block and use patterns.

Editing

So let’s make our way to Appearance and click on Editor. This will take us to our Site Editor, and currently, we are on our blog home template, which displays all our blog posts. Let’s open the list to see how our Query Loop block is structured. At the top, we will see the Featured Image block. Then we have the Post Title block followed by the Post Meta blocks. They include the Post Date block, the Post Author block, and the Categories block. Lastly, there is the Post Excerpt block. But of course, we can alter what we want to have displayed. So, for example, let’s delete the Post Excerpt block. Select the Post Title block and drag and drop it above the Featured Image block. The great thing about updating the Query Loop block is that if you change something in one post, it will appear everywhere else.

Start blank versus patterns

But what if we want to use a completely different pattern and layout? Well, we can click on Replace in our block toolbar and browse through the various patterns that come with your theme. And when you select a pattern, you can, of course, customize it as you please. You will have two options when you add a new Query Loop block. You can choose a pattern, or you can start blank. When you click Start blank, you can select one of the variations. In this case, I will select Title, Date, and Excerpt. Then we can modify it further. Let’s go ahead and add a Featured Image block below the title. Thereafter, we can open up Styles and change the aspect ratio to, for example, 4×3 to ensure that all the post-featured images display the same.

Filters

Next up, we will look at taxonomies or filters and how to use the sidebar settings. I’ve created a lifestyle page and only want to see posts related to this topic. So, I will select the Query Loop block and open my sidebar settings. The first thing we have to do is deselect the Inherit query from the template, as I want to customize the settings of the query loop. When you scroll down, you can filter your posts using taxonomies, such as categories and tags, authors, and even keywords. I will select taxonomies as I’ve created a lifestyle category and only want to see posts with this category displayed. All posts that don’t fall under this category will be excluded when I add the lifestyle category.

You also have the option to display posts from a specific author. Once I select the Query Loop block again, I will go to my sidebar settings, click on Filters, select Authors, and select the person whose posts I want to display. Now, we will only see posts written by Roger Lister. You can, of course, also choose a keyword and only display posts that contain that word or words in the text.

Sidebar settings

Lastly, let’s have a closer look at our sidebar settings. As mentioned, I’ve deselected ‘Inherit query from the template’ to customize the query. If you toggle it on, certain customization options will be hidden. If you toggle it off, more customization options will appear. When you add a new Query Loop block to a post or template, it is also important to turn this off, as your Query Loop block might not appear on the front end. The next option is post type. At the moment we are displaying blog posts. But you can also display pages or even custom post types. Below that, you have the option to order your posts from newest to oldest, oldest to newest, or alphabetically. Next, let’s talk about sticky posts. A sticky post is a post that sticks to the top of your blog page, and the option in your sidebar settings will allow you to include sticky posts, exclude them, or only show sticky posts. Below sticky posts, we will see the option to turn off ‘Force page reload.’ This will allow someone to browse through posts without a page reloading and could contribute to a better user experience. Finally, we have already discussed using filters.

Using the Comments block

Transcript

Advantages of allowing comments

Allowing comments on your site has many advantages. It lets you deepen your relationships with readers and discover what interests them. It also increases the likelihood of them subscribing to your newsletter or purchasing something. Essentially, allowing comments can help you build a community around your blog. It is essential to manage comments effectively by using WordPress’s built-in settings under discussions in your dashboard and installing an anti-spam plugin. You can also check out our video about managing spam.

The single template and comments block

The Comments block is generally added to the single posts template. Let’s make our way to Appearance and click on Editor. Then, open up templates and select the single template or the single posts template. As we can see, our single template consists of a header, a Content block, and then a Comments block. And right at the bottom, a footer. When we open the List View, we will have a clearer picture of all the nested blocks. And within the Group block, we will see the Comments block. Have you ever wondered what will happen if you delete the Comments block? All comments on all blog posts assigned to this template will disappear on the front end of your website. So, be careful not to delete this block.

To put it all in context, when I open up one of my posts, in this case, The World is Your Oyster, we will see the post on the left, and on the right, next to templates, we will see this post has been assigned to the single template. When I open the post on the front end of my site, I will see the structure that the template provides and the Comments block. But what if you wanted to display comments on one of your pages? You can open up the sidebar settings, and below Discussions, select Allow comments.

Latest comments block

To end off, I also wanted to mention the Latest Comments block. The Latest Comments block allows you to display readers’ most recent comments on your blog. Let’s add this block to my home page to show you how it works. So, below ‘Feedback from our readers,’ I will add the Latest Comments block. To clarify, the block is not to add comments but to display the latest comments readers have made across your entire site. Each comment links to its original post, when it was left, and who left it. You can use your sidebar settings on the right to style the block further.

Designing with the Columns block

Transcript

Adding and customizing a Columns block

To add a Columns block, click on the Inserter and type columns. Or you can type forward slash columns and select it from there. You can choose the number and the size of the columns you want to start with. The beauty of the Columns block is that you can add other blocks into each column. For example, you can create the Columns block to add structure and then add Image blocks, Heading blocks, and Paragraph blocks. You can also create this type of design by adding a Cover block to each column.

Block Toolbar

A parent-child relationship exists between the main Columns block and the individual columns that form part of the parent block. When you click on the alignment icon, you can change the alignment of your block to wide-width or full-width. Did you know that you can also duplicate columns? Let’s select the third column in the Columns block. When you click on the three vertical dots, you have an option to duplicate. Duplicating a design will save you a lot of time and effort. When you select an individual column, you also have the option in the block toolbar to use the arrows to move the column to a new position. But you also have the option in the List View to drag and drop a column where you want.

Sidebar Settings

If you wanted to add another column, you could merely click on the Inserter between two columns or select the parent block and open your sidebar settings. Then, below Columns, you have the option to increase or decrease the number of columns. Below that, we see the option to deselect or select Stack on Mobile. So ensure you select this option if you want your columns to stack on top of each other when viewed on a mobile device.

When we open Styles, we will see that the Columns block also allows us to change the colors of both the parent block or individual columns. Various typography options are worth exploring, such as font family, appearance, letter spacing, etc. You even have the option to change the size of your Columns block. Below Dimensions, you can adjust the padding or the space around the content of the block, you can add margin, or modify the space between columns. Right at the bottom of Styles, we can add a border and a radius to our Columns block. Lastly, you also have the option to add a drop shadow. There are various options to choose from.

Transforming other blocks into a Columns block

Another great feature is that you can transform other blocks into a Columns block and even a Columns block into a Group block.

Using the Group block

Transcript

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.

Designing with Row and Stack blocks

Transcript

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.