Video

Transcript

Hi everyone, welcome back to the Intro to Building series. I’m Shawn, and in this video, we’re diving into nested layouts—a powerful way to take your designs to the next level. Nested layouts allow you to layer and organize elements, creating complex yet easy-to-manage structures.

To start, let’s work with the layout we already set up in the previous lesson. I’ve got some text and a button in the leftmost column block, but I want to add another button and arrange them side by side. If I simply duplicate the button, you’ll see they stack on top of each other because the default flex alignment for this column is set to column. To align them horizontally, I need a nested layout.

I’ll add a container inside this column, and within that, I’ll insert a row since I need the flex alignment controls that rows provide. Then, I’ll add a column to the row and move both buttons into this column. By default, the column is still set to stack elements vertically, so I’ll go to the display settings, switch the alignment to flex, and set the direction to row. Now the buttons are aligned side by side.

When I save and refresh, you’ll notice there’s a small alignment issue. This happens because row gutters are enabled by default, adding padding around the elements. To fix this and align the buttons perfectly with the content above, I’ll turn off the gutter setting for the row. And now, everything lines up nicely.

For the next example, I’m going to remove one of the three columns to create more space and stretch the remaining two columns to fill the row. I’ll set each column to six units wide. Inside the right column, I want to add a stack of highlights. To do this, I’ll start with a container. You don’t always need to include a row or columns inside a container; sometimes, the container itself is enough.

I’ll add a heading to the container and style it as a highlight headline. I’ll make it smaller and change the color to white. Then, I’ll set the container’s background to dark blue and add some padding for spacing. I’ll also add a simple “Learn More” button to the container. When I refresh the page, you’ll see this highlight section nicely styled and spaced.

If I want multiple highlights, I can simply duplicate this container. By removing the padding for illustration purposes and adding consistent margins between the highlights, I now have a clean stack of highlights in the layout.

For the final example, let’s enhance these highlights by adding an icon to the left of the text. I’ll need more structure for this, so I’ll add a row inside the highlight container and create two columns. The first column will be set to three units wide, where I’ll insert an image block for the icon. I’ll choose an icon, set it to contain, and size it to be no taller than 50 pixels.

In the second column, which I’ll set to nine units wide, I’ll move the text and button from the highlight into this column. Once everything is set, I can duplicate this enhanced highlight layout to create multiple instances with consistent styling. And there you have it—a multi-layered nested layout with icons, text, and buttons all working together seamlessly.

Nested layouts open up endless possibilities for creative, organized, and responsive designs. Whether you’re working with simple button arrangements or multi-layered sections, these techniques let you structure your layouts however you want.

In the next lesson, we’ll dive into responsive settings and learn how to adjust these layouts for different devices. If you have any questions or want to learn more, visit our website or book a demo. Happy building, and see you in the next lesson!