If you’ve been using GenerateBlocks for a while, you’ve probably seen how containers have evolved over time. Today, I want to walk you through the best practices for using outer and inner containers, how to tweak them, and address some common issues you might face.
Step 1: Understanding the Outer Container
Let’s start by adding a container to a blank FAQ page. When you add a container, you’ll see options like “Add Inner Container,” “Align Text,” and more in the toolbar. The first container you add is your outer container. By default, this outer container will span the full width of your content area.
The outer container is typically used for background elements like colors or images that need to stretch across the entire page. If your site layout is set to full width (either in the customizer or through an element layout), the outer container will stretch accordingly.
Step 2: Adding and Styling the Inner Container
Next, you’ll want to add an inner container. This container holds your content (text, images, etc.) within the outer container. The inner container is what keeps your content aligned and within a defined width, like 1200 pixels.
To add an inner container:
- Click on the outer container, then click “Add Inner Container.”
- Set the inner container’s max width to your global width (e.g., 1200 pixels).
- Add left and right margins set to “Auto” to center the content.
Example: Applying Background Colors and Padding
To demonstrate, let’s add some background colors and padding:
- Outer Container: Add a light gray background and set padding to 80px top/bottom and 20px left/right.
- Inner Container: Add a darker background color, some padding, and then add a heading with black text.
When you view the page, you’ll see that the light gray background spans the entire width, while the darker inner container is centered within that and restricted to 1200 pixels.
Step 3: Using the Inner Container for Consistent Layouts
Most of the time, I recommend using an inner container within the outer container to keep your designs consistent and aligned with your global container width. The inner container keeps your content neatly within that width, while the outer container allows for full-width backgrounds or effects.
Step 4: Handling Padding and Margins Responsively
When setting up your containers, always add left and right padding to the outer container. This ensures that on mobile devices, your content doesn’t touch the edges of the screen. Without this padding, your text might look cramped on smaller screens, which isn’t ideal.
Exceptions: When to Skip the Inner Container
There are occasions where you might want to skip the inner container. For example, if you’re designing a call-to-action or a featured image section that needs to break out of the standard container width, you can leave out the inner container or adjust the outer container’s max width.
Final Thoughts: Consistency is Key
The most important thing when building websites is consistency. By using a system with outer and inner containers, you create a predictable and efficient workflow. This not only makes the design process smoother but also ensures a cohesive look across your site.
