Bricks Page Builder

Bricks is a visual site builder for WordPress that allows users to design and build websites using a real-time drag-and-drop interface. Unlike many WordPress page builders that work as plugins, Bricks is installed as a WordPress theme. It gives users control over pages, templates, headers, footers, dynamic content, WooCommerce layouts, and responsive design.

Bricks is suitable for web designers, developers, agencies, freelancers, business owners, and WordPress users who want a flexible visual builder with clean code output and advanced design control. This documentation covers how to use Bricks effectively, details on Bricks websites, and insight into Bricks design.

How to Use Bricks #

Getting Started #

To start using Bricks, follow these basic steps:

Install WordPress:
Bricks works inside WordPress, so you need a WordPress website before using it.

Download Bricks:
Download the Bricks theme ZIP file from your Bricks account.

Install Bricks as a Theme:
Go to Appearance > Themes > Add New > Upload Theme. Upload the Bricks ZIP file, install it, and activate it. Bricks is installed as a theme, not as a plugin.

Activate Your License:
Enter your Bricks license key so you can receive updates and access licensed features.

Create a New Page:
Go to Pages > Add New, enter a page title, then choose the option to edit the page with Bricks.

Start Designing:
Use the visual builder to add sections, containers, blocks, divs, headings, text, images, buttons, forms, menus, and other elements.

Basic Bricks Builder Overview #

Once you open the Bricks builder, you will see several important areas:

Canvas Area:
The canvas is the main visual workspace where you build and edit your page or template.

Elements Panel:
This panel contains the elements you can add to your design, such as headings, text, images, buttons, icons, forms, nav menus, sliders, and WooCommerce elements.

Structure Panel:
The structure panel shows the hierarchy of your page. It helps you select, organize, rename, duplicate, move, and manage elements.

Settings Panel:
The settings panel allows you to edit content, styles, layout, spacing, colors, typography, borders, conditions, interactions, and other element options.

Responsive Controls:
Bricks includes responsive controls so you can adjust designs for desktop, tablet, and mobile devices.

Templates:
Templates allow you to design reusable layouts for pages, posts, archives, headers, footers, WooCommerce products, and other areas of your site.

Save Button:
After making changes, save your work so the design updates on your website.

Creating Content #

To create content using Bricks, you can:

Create a New Page #

1. Navigate to Pages > Add New.
2. Enter a page title.
3. Open the page in the Bricks builder.
4. Add a section or container.
5. Add elements such as headings, text, images, buttons, and forms.
6. Customize the content, layout, spacing, and styling.
7. Preview the page.
8. Save or publish the page when ready.

Add Headings and Text #

To add written content:

1. Add a Heading element to the page.
2. Enter your headline.
3. Adjust the typography, size, weight, color, and alignment.
4. Add a Text or Rich Text element for paragraph content.
5. Use proper heading structure to keep the page organized and easy to read.

Add Images #

To add images:

1. Add an Image element to your layout.
2. Select an image from the WordPress Media Library or upload a new image.
3. Adjust the size, alignment, border radius, object fit, spacing, and styling.
4. Add alt text in the Media Library for accessibility and SEO.

Add Buttons #

To add a button:

1. Add a Button element.
2. Enter the button text.
3. Add the button link.
4. Customize the size, typography, colors, spacing, border, icon, and hover style.
5. Use buttons for important actions such as contacting you, booking a call, buying a product, or joining an email list.

Use Templates #

Bricks includes powerful template features that allow you to control different parts of your website.

You can create templates for:

Headers:
Design the top section of your website, including your logo, navigation menu, and call-to-action button.

Footers:
Design the bottom section of your website, including copyright text, links, contact information, and social icons.

Single Posts:
Create reusable layouts for blog posts.

Archive Pages:
Design blog archives, category archives, tag archives, search results, and custom post type archives.

WooCommerce Pages:
Create custom layouts for product pages, product archives, cart, checkout, and account pages.

Custom Post Types:
Build templates for portfolios, directories, case studies, team members, listings, and other structured content.

Bricks Websites #

Types of Bricks Websites #

Bricks can be used to create many types of WordPress websites, including:

Business Websites:
Useful for local businesses, agencies, consultants, service providers, and professional brands.

Landing Pages:
Ideal for sales pages, lead generation pages, product launches, webinars, and advertising campaigns.

Portfolio Websites:
Great for designers, photographers, developers, writers, and creative professionals.

Blogs:
Bricks can be used to design custom blog layouts, single post templates, archive pages, and category pages.

E-commerce Stores:
When combined with WooCommerce, Bricks can help build custom shop pages, product pages, cart pages, checkout pages, and account pages.

Membership Websites:
Bricks can be used with membership plugins to create protected content, dashboards, resource libraries, and member-only pages.

Online Course Websites:
Course creators can use Bricks to build course sales pages, lesson layouts, student dashboards, and educational resources.

Directory Websites:
Bricks works well for dynamic websites such as directories, listings, job boards, real estate sites, and searchable resource libraries.

Benefits of Using Bricks #

Visual Website Building:
Bricks allows you to build and edit websites visually in real time.

Theme-Based Builder:
Because Bricks is a WordPress theme, it can control the entire website structure, including templates, headers, footers, and archives.

Clean Code Output:
Bricks focuses on producing clean HTML and CSS, which can help with performance and maintainability.

Advanced Layout Control:
Users can create precise layouts using sections, containers, blocks, divs, flexbox, grids, spacing controls, and responsive settings.

Dynamic Data:
Bricks can display dynamic WordPress content, including post fields, custom fields, WooCommerce product data, and other live content.

Template Builder:
Bricks gives users control over reusable templates for posts, pages, archives, headers, footers, and WooCommerce layouts.

WooCommerce Features:
Bricks includes WooCommerce-specific elements and templates for designing online stores visually.

Developer-Friendly Options:
Bricks includes features that appeal to advanced users, including custom code options, conditions, query loops, dynamic data, and developer documentation.

Bricks Design #

Choosing a Theme #

Bricks is itself a WordPress theme, so you do not need to choose a separate theme in the same way you would with many page builders.

When setting up Bricks, consider:

Use Bricks as the Active Theme:
Install and activate Bricks under Appearance > Themes.

Use a Child Theme if Needed:
If you plan to add custom PHP, theme files, or advanced code changes, use a Bricks child theme.

Control Design Through Bricks:
Use Bricks templates, global settings, and builder controls to manage your website design.

Avoid Theme Conflicts:
Because Bricks is the active theme, avoid trying to combine it with another full-featured theme.

Customizing Your Website #

Bricks gives you several ways to customize your website.

Using Global Styles #

Global Styles help keep your website consistent and easier to manage.

You can use Global Styles to control:

Colors:
Set brand colors and reuse them throughout your site.

Typography:
Define heading styles, paragraph styles, font families, font sizes, line heights, and text colors.

Buttons:
Create consistent button styles for calls to action.

Spacing:
Use consistent spacing rules for sections, containers, and layouts.

Theme Styles:
Set site-wide styling defaults for common elements.

Using Global Styles helps prevent inconsistent design and makes future updates much faster.

Building Page Layouts #

When building page layouts in Bricks, consider the following:

Start with Structure:
Plan your sections before designing. Common page sections include hero, services, about, features, testimonials, pricing, FAQ, and contact.

Use Semantic Structure:
Use appropriate elements and heading levels so the page is easier to read, maintain, and optimize.

Keep Spacing Consistent:
Use consistent padding, margins, gaps, and section spacing.

Use Reusable Templates:
Save layouts and sections that you will use across multiple pages.

Build Mobile Early:
Check tablet and mobile views throughout the design process instead of waiting until the end.

Keep Designs Focused:
Every section should have a clear purpose and support the goal of the page.

Using the Structure Panel #

The Structure Panel is one of the most important tools in Bricks.

You can use the Structure Panel to:

Select Elements:
Quickly select sections, containers, divs, and nested elements.

Rename Elements:
Give elements clear names so large pages are easier to manage.

Reorder Elements:
Drag elements into a different order.

Duplicate Elements:
Copy sections, containers, and content blocks.

Delete Elements:
Remove unnecessary elements from the page.

Manage Nesting:
Understand how elements are placed inside each other.

A clean structure makes Bricks websites easier to edit, troubleshoot, and scale.

Using Query Loops #

Query Loops allow Bricks to display repeated dynamic content from WordPress.

Query Loops can be used for:

Blog Post Grids:
Display recent posts, featured posts, or category-specific posts.

Portfolio Items:
Show projects, case studies, or creative work.

Product Listings:
Display WooCommerce products dynamically.

Directories:
Create listing grids for businesses, people, locations, resources, or services.

Custom Post Types:
Display content from custom post types with dynamic fields.

Query Loops are useful when you want one design layout to repeat automatically for multiple pieces of content.

Dynamic Content #

Bricks supports dynamic data, which allows your website to pull information directly from WordPress.

Dynamic content can be used for:

Post Titles:
Automatically display the title of a page, post, product, or custom post type.

Featured Images:
Display images assigned to posts or products.

Post Meta:
Show dates, authors, categories, tags, and excerpts.

Custom Fields:
Display data from custom field tools such as Advanced Custom Fields, Meta Box, or similar plugins.

WooCommerce Products:
Display product prices, descriptions, images, stock status, ratings, and add-to-cart elements.

Dynamic content is especially useful for blogs, directories, portfolios, WooCommerce stores, and custom database-driven websites.

WooCommerce with Bricks #

Bricks includes WooCommerce builder features for designing online stores visually.

With Bricks and WooCommerce, you can create:

Custom Product Pages:
Design single product layouts with images, titles, prices, descriptions, add-to-cart buttons, product meta, reviews, and related products.

Product Archive Pages:
Customize shop pages, category pages, and product listing layouts.

Cart Pages:
Improve the cart experience with a cleaner layout.

Checkout Pages:
Create a more polished checkout experience.

Account Pages:
Customize the customer account area.

Sales Pages:
Build focused product landing pages for promotions, bundles, and special offers.

For WooCommerce websites, focus on clarity, speed, trust, and an easy buying process.

Responsive Design #

To make your Bricks website mobile-friendly:

Use Responsive Breakpoints:
Preview and adjust your design for desktop, tablet, and mobile.

Adjust Font Sizes:
Large desktop headings may need to be smaller on mobile devices.

Check Spacing:
Reduce padding, margins, and gaps where needed for smaller screens.

Stack Layouts Properly:
Make sure multi-column layouts stack cleanly on mobile.

Simplify Mobile Navigation:
Use a mobile-friendly menu that is easy to open and use.

Test on Real Devices:
Builder previews are helpful, but testing the live site on actual phones and tablets is better.

Bricks Performance Tips #

To keep your Bricks website fast and efficient:

Use Optimized Images:
Compress images before uploading them to WordPress.

Keep Layouts Clean:
Avoid unnecessary nested elements and overly complicated structures.

Use Global Styles:
Global styles reduce repeated manual styling and make design updates easier.

Limit Extra Plugins:
Only install plugins that are necessary for your website.

Avoid Excessive Animations:
Use animations and effects only when they improve the user experience.

Use Caching:
Enable caching through your hosting provider or a caching plugin.

Keep Bricks Updated:
Update WordPress, Bricks, WooCommerce, and plugins regularly.

Test Performance:
Use page speed tools to find images, scripts, layout issues, or plugins that may slow down the website.

Additional Resources #

For more information, you can refer to the following resources:

Bricks Academy
Official Bricks documentation, tutorials, guides, and developer references.

Bricks Website
Information about Bricks features, pricing, updates, and resources.

Bricks WooCommerce Builder Documentation
Guides for designing WooCommerce stores with Bricks.

WordPress Support
General WordPress documentation and troubleshooting help.

WordPress Plugins Directory
Find plugins that extend WordPress functionality.

WooCommerce Documentation
Helpful for learning how to manage online stores, products, payments, shipping, and checkout settings.

Conclusion #

Bricks is a flexible and powerful visual site builder for WordPress that gives users control over pages, templates, headers, footers, dynamic content, and WooCommerce layouts. It is especially useful for designers, developers, agencies, and advanced WordPress users who want a visual workflow combined with clean structure and strong performance potential.

By learning how to use the builder, Structure Panel, Global Styles, templates, Query Loops, dynamic data, WooCommerce tools, and responsive controls, you can build professional, fast, and easy-to-manage WordPress websites with Bricks.