May 5, 2023

Bricks Builder Layout Widgets – Understanding Sections, Containers, Blocks & DIVs

Play Video

Welcome to our tutorial on Bricks Builder Layout widgets. This guide will help you understand the core concepts of sections, containers, blocks, and DIVs in Bricks Builder. We’ll be following along with a video tutorial from the Web Squadron channel, which provides a comprehensive look at these elements and how to use them effectively.

Getting Started with Bricks Builder Layout Widgets

Before we dive into the details, make sure you have Bricks Builder installed on your WordPress site. If you haven’t done so yet, you can download it from the official website. Once you have it installed and activated, you’re ready to start exploring the world of Bricks Builder Layout widgets.

Bricks Builder Layout Widgets Overview

Understanding Sections, Containers, Blocks & DIVs

In Bricks Builder, the layout of your page is divided into sections, containers, blocks, and DIVs. Here’s a simple way to understand these elements:

  • Bricks Builder Section
    Think of a section as a house. It’s the overall area where you’ll be adding your content. For instance, your header could be one section, your hero banner another, and so on.
  • Bricks Builder Container
    Containers are like rooms within the house (section). You can have as many containers as you want within a section.
  • Bricks Builder Block
    Blocks are like partitions within the rooms (containers). For example, in a living room container, you might have a TV area block and a study area block.
  • Bricks Builder DIV
    DIVs are used for more bespoke elements. You can use DIVs to add custom HTML, styling, or code from CodePen. However, if you’re using the standard elements that Bricks Builder provides, you might not use DIVs that often.


Adding a Bricks Builder Section and a Container

To add a section, simply click on the “+” sign. This will automatically create a new section with one container. If you want to add more containers, you can do so by clicking on the “+” sign within the section.

Styling the Bricks Builder Container

Once you’ve added a container, you can style it by selecting the container and going to the “Style” tab. Here, you can adjust the background color, add padding, and more. Remember, a section is automatically full width, so if you want to add a full-width image or color, you don’t need a container or a block.

Adding Bricks Builder Blocks

To add a block, select the container where you want to add the block, then click on the “+” sign and select “Block”. The block will be added within the selected container. You can then add elements (like a heading, text, or button) within the block.

Practical Application of Bricks Builder Layout Widgets

Now that we understand the basics of sections, containers, blocks, and DIVs, let’s see how we can use these concepts in a practical way.

Creating a Layout with Bricks Builder Layout Widgets

Let’s create a layout with two sections, each containing two containers, and each container containing two blocks. Here’s how you can do it:

  1. Add a new section. This will automatically create a section with one container.
  2. Duplicate the container within the section. You now have a section with two containers.
  3. In each container, add a block.
  4. Duplicate the block within each container. You now have two blocks in each container.
  5. Repeat the process to create a second section with the same layout.

Adjusting the Layout with Bricks Builder Layout Widgets

With Bricks Builder, you have full control over the layout of your page. You can adjust the height and width of sections, containers, and blocks to create the exact layout you want. You can also use the “Direction” feature to arrange your containers and blocks in a row or column, and use the “Align” feature to align your elements along the main axis or cross axis.

Advanced Techniques with Layout Widgets

While the basics of sections, containers, blocks, and DIVs are relatively straightforward, there are more advanced techniques you can use to create complex layouts.

For example, you can use the “Column Gap” and “Row Gap” features to add space between your blocks. You can also use the “Copy Style” and “Paste Style” features to quickly apply the same style to multiple elements.

Bricks Builder Layout Widgets Recap

To recap, sections, containers, blocks, and DIVs are the building blocks of your page layout in Bricks Builder. By understanding how these elements work and how to use them effectively, you can create complex layouts with ease.

To practice what you’ve learned, try creating a layout with multiple sections, containers, and blocks. Experiment with different heights, widths, and alignments, and see what kind of unique layouts you can create.


In this tutorial, we’ve covered the basics of Bricks Builder Layout widgets, including sections, containers, blocks, and DIVs. With this knowledge, you can start creating complex layouts in Bricks Builder with ease.

For further learning, consider exploring other features of Bricks Builder, such as the Element Library or the Template Builder.


Required Resources

Bricks Builder Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Bricks Builder Layout Widgets – Understanding Sections, Containers, Blocks & DIVs
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.