Video

Transcript

Hi everyone, Shawn here again. Welcome back to our Getting Started series. In this lesson, we’ll explore how to build a basic layout using containers, rows, and columns. Once you master these building blocks, you’ll have full control over how your content is organized and displayed.

Let’s start with a quick analogy to understand how these elements work together. Containers are like the drawer of a filing cabinet. They hold whatever content you want—images, text, videos—but without structure, things could get a little messy. That’s where rows and columns come in.

Rows are like the rails inside the drawer. They allow us to align content using flexbox controls. With rows, you can adjust both horizontal and vertical alignment to position everything just right. Columns are like the folders hanging on the rails. They divide the space inside a row, letting you organize content further. Columns also offer alignment controls to manage the placement of elements inside them.

You can nest these structures as deeply as needed, but there’s one rule to follow: rows can only be added to containers, and columns can only be added to rows.

Let’s start by adding a container to our page and placing some basic content—a heading, a paragraph, and an image block—inside it. Once we’ve added these blocks, we’ll click the parent selector icon in the toolbar to easily move back to the container block. This is a quick tip for navigating nested blocks.

Now that we have a container with some content, what if we want more control over the layout—like placing the image on the left and the text on the right? This is where rows and columns come in.

Let’s add a row inside the container. Select the container, click the inserter icon, and choose Row. Now that we have a row, we need to add columns so our content can sit side by side.

By default, columns are set to 12 units wide, which means they take up the full width of the row. This is based on a 12-column grid, which is a common standard in web design. Let’s set the width of the first column to 6 units. Now we need a second column.

There are two ways to do this:

1. Go back to the row block, add another column, and set its width to 6 units.
2. Duplicate the first column block. Duplicating a block copies all its settings, which saves time.

Now that we have two equal columns, let’s move the content into them. I’ll drag the image block into the first column. Notice how the block jogs inward as I move it, showing that it’s been nested inside the column. The collapse and expand icon becomes active, confirming that the block is inside the column.

I’ll move the heading and paragraph blocks into the second column. You can also move multiple blocks at once by selecting one block, holding Shift, and selecting another. Now the content is split—image on the left, text on the right—and things are already looking much more organized.

Let’s fine-tune the layout using flexbox controls. By default, everything is aligned at the top, but we can adjust this. With the row block selected, use the flex align controls to change the vertical alignment. If we want the text to center-align vertically with the image, we choose Align Center.

The flex alignment of a row determines vertical alignment, while flex justify manages horizontal alignment. If we switch the layout from a row to a column, the content will stack vertically.

We can also adjust the sizing controls for individual blocks. For example, if we want the image to fill the column’s width, we can set its width to 100% and leave the height set to Auto.

Rows also offer other alignment options, like Space Between, which places content at opposite ends of the row with equal space between them. This layout technique can be creatively applied to various designs.

Columns have their own flexbox controls as well. You’ll find these under Layout and Display. By default, columns are aligned as rows, but we can switch this to column alignment if needed. This is useful if you want to align block-level elements—like buttons—that don’t have their own alignment controls.

Once everything is aligned and positioned, flexbox-based controls give you precise control over the placement of your content, whether within individual columns or across rows and columns.

The ways you can use these layout controls together are endless, offering incredible flexibility for your designs.

And that’s it! You’ve now learned how to build a basic layout using containers, rows, and columns. Thanks for watching! If you have any questions, feel free to reach out through our website or book a demo. See you in the next video!