In this video, I’ll explain how Bricks Builder handles Sections, Containers, Blocks, and Divs, and compare it to Elementor’s layout system. If you’re switching from Elementor to Bricks, this will help you understand the differences and why many developers prefer Bricks’ cleaner approach.
Timestamps:
- 0:00 Introduction
- 2:29 Sections, Containers, Blocks & Divs Explained
Understanding the Bricks Layout System When Moving From Elementor
When moving from Elementor to Bricks, one of the biggest adjustments is learning how the layout system works. While both builders allow you to create complex page structures, Bricks approaches layouts in a way that is much closer to how modern CSS works.
In this guide, we will compare Elementor’s container system with Bricks’ approach using sections, containers, blocks, and divs. Understanding these building blocks will make creating pages in Bricks much easier and help you build cleaner layouts.
Elementor Containers Compared to Bricks Layouts
Elementor users are likely familiar with creating pages by adding containers and nesting them inside each other. This workflow has been around for years and is still a common way to build layouts.
The newer versions of Elementor introduce additional layout options, including flexbox containers and div blocks. While these tools are powerful, Elementor now has multiple layout systems available, which can make things confusing.
Depending on your setup, you may see:
- Flexbox containers
- Div blocks
- The older container system
- Grid-based layouts
- Different element versions
For someone who has been using Elementor for a long time, it can feel like there are too many ways to create the same layout.
A common Elementor workflow is to create a main container, add additional containers inside it, and then adjust widths. For example, you might create two nested containers, set each one to 50%, and create a simple two-column layout.
This approach works, but Bricks takes a more structured approach.
How Sections, Containers, Blocks, and Divs Work in Bricks
The Bricks layout system is built around four main elements:
- Sections
- Containers
- Blocks
- Divs
The order of these elements is important because each one has a specific purpose.
A typical Bricks structure looks like this:
Section → Container → Block or Div
Most of the time, you will start with a section. Inside the section, you add a container. Then inside the container, you decide whether you need blocks or divs depending on the type of layout you are creating.
This structure helps keep layouts organized and makes it easier to control spacing, widths, and alignment.
Using Sections and Containers in Bricks
When you add a new section in Bricks, it automatically creates a container inside that section.
The section is designed to span the full width of the screen. Think of it as the outer wrapper that controls the background, spacing, and overall area of a page section.
The container is where you control the actual content width.
By default, Bricks containers are usually set to a maximum width such as 1100 pixels. This keeps your content from stretching across extremely large screens.
A common setup looks like this:
- Section: Full width background area
- Container: Controls the content width
- Elements inside the container: Actual page content
For example, you may set the section background color to yellow and the container background color to red. The yellow area represents the full-width section, while the red area represents the restricted content area.
Understanding Blocks in Bricks
Blocks are one of the most commonly used layout elements in Bricks.
A block automatically fills the available width of the container it sits inside. This makes blocks useful when you want an element to take up the full available space.
For example, if you add a block inside a container and give it a background color, the block will expand across the entire container width.
If you add padding to the container, the block will still fill the available space while respecting that padding.
Blocks are especially useful for:
- Full-width content areas
- Columns
- Grouping elements together
- Creating structured layouts
When creating multi-column layouts, you can add multiple blocks inside a container and change the direction from vertical to horizontal.
By default, elements stack vertically. Changing the direction to horizontal allows blocks to sit next to each other.
Creating Column Layouts With Blocks
Creating columns in Bricks is different from older page builders where you simply dragged in columns.
Instead, you create multiple blocks inside a container.
For example:
- Add three blocks inside a container
- Change the container direction to horizontal
- Adjust the spacing between blocks
The container controls how the blocks are arranged, including:
- Direction
- Alignment
- Column gaps
- Row gaps
If you want spacing between columns, you can adjust the column gap setting. A value like 20 pixels will add consistent spacing between each block.
Bricks requires a little more understanding of flexbox concepts compared to traditional page builders, but once you understand the basics, it becomes much easier to create custom layouts.
Using Divs in Bricks
Divs work similarly to blocks, but there is one major difference.
A block automatically fills the available width, while a div only takes up the space needed by its content.
For example, if you place a heading inside a div, the div will only be as wide as the heading requires. It will not automatically stretch across the container.
This makes divs useful when you need more precise control over your layout.
A div is commonly used when you want to:
- Center content within a container
- Create smaller layout groups
- Build more custom structures
Blocks use flexbox by default, while divs use a standard block display behavior. This difference is why blocks provide more alignment controls compared to divs.
Using Bricks Layout Presets
One of the helpful features in Bricks is the built-in layout presets.
Instead of manually creating every structure, you can use preset layouts such as:
- 50/50 splits
- Three-column layouts
- 25/75 layouts
- Other common structures
When you select a preset, Bricks automatically creates the required sections, containers, and blocks.
One thing to pay attention to is the naming. Bricks may refer to certain layouts as columns, but technically they are often created using blocks or divs.
You can identify the element type by looking at the icons in the structure panel.
Quickly Adding Layout Elements in Bricks
Bricks includes a useful shortcut for quickly adding elements inside sections and containers.
When you select a section or container, you will see a blue outline with quick layout options.
From this menu, you can quickly add:
- Sections
- Containers
- Blocks
- Divs
You can also create preset layouts directly from this menu.
For example, if you select a container and want a 50/50 split, you can choose the layout option and Bricks will automatically create the structure for you.
This is often faster than manually dragging and dropping elements into place.
Nesting Layouts in Bricks
One of the strengths of Bricks is how easily you can continue nesting layouts.
For example, you might create:
- A section
- A container
- Three blocks inside the container
- Another 50/50 layout inside one of those blocks
This allows you to build complex page structures while keeping everything organized.
The layout popup makes this process much faster because you can create nested structures without constantly moving elements around manually.
Adjusting Width and Height Visually in Bricks
Bricks includes visual controls that make adjusting dimensions easier.
When you select a container, you can drag the width controls directly in the builder.
For example, you can change a container from its default width to:
- 50%
- 60%
- A custom pixel value
The visual slider automatically updates the maximum width setting.
You can also adjust height using:
- Pixels
- Viewport height (VH)
Viewport height is useful when creating sections that need to take up a certain percentage of the screen.
For example, setting a section to 30VH means it will occupy 30% of the browser window height.
A Simple Bricks Layout Workflow to Follow
When building pages in Bricks, a good workflow is:
- Start with a section.
- Add a container inside the section.
- Set your content width on the container.
- Use blocks when you need full-width layout elements.
- Use divs when you need more control over sizing.
- Adjust direction, alignment, and gaps as needed.
The biggest difference between Elementor and Bricks is that Bricks expects you to understand more about how layouts actually work in CSS. While this creates a slightly steeper learning curve, it also gives you much more control.
Building Better Layouts With Bricks
The Bricks layout system may feel unfamiliar at first, especially if you are coming from years of using traditional page builders. However, once you understand how sections, containers, blocks, and divs work together, creating layouts becomes much more predictable.
Bricks encourages cleaner structure and gives you more direct control over your designs. The more comfortable you become with flexbox concepts and nesting layouts, the faster you will be able to build custom websites.
