Intro to Bricks Builder

This is Erik with RankByDesign. In this quick lesson I’ll give you a beginner-friendly overview of Bricks Builder, what it is, and how to start building pages and templates.

Important: I’m not affiliated with Bricks Builder in any way. This is simply a tutorial showing how I personally use Bricks Builder to build a course platform.

Recommended: Work on a staging site, and make sure you have a full site backup before making changes.

What Is Bricks Builder?

Bricks Builder is both a theme builder and a page builder combined into one system. This makes it different from page builder plugins like Elementor, which run on top of a theme.

Because Bricks is a theme + builder in one, you can build your full site layout inside Bricks — including headers, footers, templates, and dynamic content.

Where Bricks Shows Up in WordPress

After installing Bricks, you’ll typically see two themes under Appearance → Themes:

• The Bricks parent theme
• Your Bricks child theme

The child theme is important because it protects your customizations during updates.

Bricks Dashboard Overview

Inside the WordPress dashboard, Bricks includes key areas like:

• Templates – build layouts like headers and footers
• Settings – global options for Bricks
• Custom Code – insert scripts like Google Analytics or tracking tags
• Custom Fonts – upload and manage your own font files
• Sidebars – useful for blog layouts and widget-style sections
• System Info – troubleshooting details

How Templates Work in Bricks Builder

In Bricks, templates are how you build global site parts like:

• Header templates
• Footer templates
• Single post templates
• Custom post type templates (example: course lessons)

Once a template is created, you tell Bricks where it should display using Template Conditions.

How to Create a Page in Bricks Builder

Step 1: Create the Page

Go to Pages → Add New, add your page title, and save it as a draft.

Step 2: Edit with Bricks

Click Edit with Bricks. Bricks will open with a blank layout and a few starting options.

Step 3: Add Your First Section

Add a section to start building. Bricks uses a structure-based layout where content is added inside sections and containers.

Understanding the Bricks Interface

When Bricks opens, you’ll see two key editing areas:

• Structure Panel (Right) – shows how your page is built (sections, containers, elements)
• Elements Panel – where you search and insert elements like headings, text, videos, and buttons

When you click an element, its settings appear so you can style it, move it, duplicate it, or apply classes.

Adding a Heading and Video (Quick Demo)

Add a Heading

Click the container to activate it, then click the + icon and choose Heading. Bricks inserts placeholder text that you can replace with your own headline.

You can align the heading using the layout settings (example: cross-axis alignment).

Add a Video

Click the + icon again, search for “video”, and insert the video element. Bricks adds a placeholder video until you replace it with your own content.

Previewing and Saving Your Work

To preview the page at any time:

• Use the preview icon to see what your page will look like
• Save your draft as you go
• Preview the page on the front end any time

This makes it easy to build pages gradually without losing progress.

Responsive Editing (Breakpoints)

Bricks includes built-in display breakpoints so you can preview your design for:

• Desktop
• Extra Large (example: 1280px)
• Tablet
• Mobile landscape
• Mobile portrait

This allows you to design once and quickly adjust spacing, layouts, and typography for different screens.

Structure Tips (Collapse Panels)

As your layout grows, Bricks lets you collapse:

• Entire sections
• Containers
• The full structure panel

This makes it easier to navigate larger pages and keep your work organized.

Lesson Overview

• Bricks Builder is an all-in-one theme builder and page builder
• It installs as a theme (parent + child)
• Templates control headers, footers, posts, and custom layouts
• Pages are created normally, then edited visually with Bricks
• The structure panel shows layout; the elements panel inserts content
• Preview and save drafts while building
• Breakpoints help ensure mobile responsiveness

What’s Next?

In the next lessons, I’ll show you how to build a course platform using Bricks Builder, including templates, dynamic content, and a repeatable lesson system that stays clean and easy to manage.

Tip: Bookmark this page. I may expand it later with additional icons, interface tips, and layout shortcuts as the series progresses.