How to Set Up Bricks Builder the Right Way

Bricks Builder has a steeper initial learning curve than Elementor but rewards the investment with cleaner code and better performance. This guide covers the first-time setup process and the most important concepts to understand before building.

Step 1: Purchase and Install

Bricks Builder requires a license from bricksbuilder.io ($149 lifetime for unlimited sites). After purchase, download the plugin ZIP, install via WordPress → Plugins → Add New → Upload Plugin, and activate. Enter your license key in Bricks → License.

Step 2: Configure Global Settings

Go to Bricks → Settings. Key settings to configure before building:

• Post types to edit with Bricks — select which post types use the Bricks editor (Pages, Posts, custom post types)
• Template preview — set a preview URL for testing templates
• Custom breakpoints — Bricks defaults to mobile/tablet/desktop; add custom breakpoints if your design requires them
• Enable WooCommerce builder — if you have WooCommerce installed

Step 3: Understand Containers

Bricks uses containers instead of sections and columns. A container is a flexbox or grid element that holds other elements. This is the biggest conceptual shift from Elementor users. Key container concepts:

• Containers can be nested — a container inside a container inside a container
• Direction (row vs column) controls whether children stack horizontally or vertically
• Set containers to 100% width for full-width sections, or limit width for contained layouts
• Use gap (not margin) to create space between container children

Prefer to have someone handle the setup? Describe what you need and get a free estimate — no obligation.

Step 4: Build Your First Page

Edit a page and click “Edit with Bricks.” The editor loads with a blank canvas. Add elements from the left panel:

1. Add a Container — this is your section wrapper
2. Set container width to 100% and background colour or image
3. Add a child container inside — set max-width to 1200px and margin auto for contained content
4. Add elements inside the inner container: Heading, Text, Image, Button

Step 5: Set Up Global Styles

Go to Bricks → Theme Styles. Configure global typography (font families, sizes, line heights), colours, button styles, and spacing defaults. Changes here apply sitewide and reduce per-element styling. Set up your brand colours in the colour palette — they are available across all element style panels.