Video

Transcript

Hi everyone! Welcome to our Intro to Building series. I’m Shawn, and in this first lesson, we’re diving into the basics of container blocks.

Containers are foundational blocks in Refoundry, essential for building layouts by grouping content into organized sections. A container block is a way to group blocks together as a single section. It’s a versatile wrapper that organizes and holds any blocks you want to include, such as images, text, or even other layouts. The only thing you can’t put directly into a container is a column block—that has to go inside a row. Containers are the backbone of Refoundry layouts, especially when combined with rows and columns to create more advanced designs.

Containers come with powerful options to control spacing and background settings, which we’ll dive into in this lesson. In later lessons, we’ll cover advanced settings like background images, linear gradients, borders, and positioning options.

Let’s start by discussing the max-width versus full-width container settings. I’ll begin by adding a container block. In Refoundry, every container has the “Remove Max Width” setting disabled by default, which you’ll find under the Layout tab here. By default, max-width is active, keeping the content neatly contained at a width of 1200 pixels. This is designed to help with readability and alignment, ensuring content doesn’t stretch too wide.

To illustrate, I’ll set a medium blue background for this container and add a simple content block. When we view this on the front end, you can see that it stays within the 1200px max-width setting.

If you want a container to stretch edge-to-edge across the screen, you need to toggle the “Remove Max Width” setting to active. I’ll select the container, toggle this on, and save. After refreshing the screen, you’ll see the container now extends fully across the page. This is great for creating full-width sections, like those with background images or expansive callouts.

Max-width containers are most useful for keeping content centered and aligned consistently across sections, while full-width containers work well for sectional design elements and background effects.

To demonstrate the benefits of using both, I’ll add an inner container and leave max-width active. I’ll move my paragraph block inside it, set a light blue background, and refresh the page. Now we have a full-width container with a medium blue background and an inner, max-width container with a light blue background, ensuring our text isn’t stretched all the way to the edge. This setup provides a cohesive full-width background with a centered inner layout.

For Refoundry Pro users, the Component Library comes with a similar nested two-container setup for each pre-built section. This dual container approach lets you control both the visual impact of a section’s background and the alignment of its inner content, keeping everything organized and readable.

Now let’s explore padding and margins, which control spacing within and around containers. Padding is the inner space inside the container, determining how close or far the content is from the edges. Margins create outer space, affecting the distance between containers and other elements on the page.

To adjust these settings, we select the container, go to the Spacing tab, and use the sliders for top, right, bottom, and left padding. We have similar sliders for margin. Padding and margin sliders range from 0 to 12 and are based on rems.

For example, to create some spacing between the outer container with the medium blue background and the inner container with the light blue background, I’ll add top and bottom padding of 4. After saving, you’ll see a nice space around my block.

Now, if I wanted to add spacing around the entire container, I can set margin values. For illustration, I’ll add a second section, set its background color to pink, and create margin space between them. After refreshing, you can see the space between the two elements.

That covers the basics of container blocks. By understanding these settings and using a two-container structure, you’ll have more control over spacing, background effects, and layout organization.

In the next lesson, we’ll dive into row blocks and how they structure the alignment and flow of your content within containers. If you have any questions or want to learn more, feel free to reach out through our website or book a demo. Happy building, and see you in the next lesson!