How to use Bricks Builder

four must know when using bricks builder

How to get started with Bricks Builder.

If you’ve recently purchased Bricks Builder, you may wonder how to get started and create a stunning website that reflects your website with this powerful builder. While the software is designed to be user-friendly, having a step-by-step guide to get you started can still be helpful. In this article, I’ll walk you through the four essential steps to start with Bricks Builder. From installing the builder to customizing your builder’s settings, you will know better how to use Bricks by then. Let’s get started!

1: Installing Bricks Builder

Installing Bricks Builder as a Theme
Bricks Builder Installation

It’s important to note that Bricks Builder should not be installed as a plugin. To say it correctly, Bricks Builder is designed to be used as a theme, not a plugin.

License Activation

Obtain the license key from the Bricks Dashboard.

Where to obtain the license key?

Log into your Bricks account > License > License Key(copy the key)

Bricks Dashboad Obtain License Key
Obtain Bricks License Key

Where do you insert the license key?

In the WP dashboard. Head to Bricks(top left) > License

You will then see a field to paste the license key you copied from the Bricks account. Paste it, then click on activate license. The license activation is done when you see the status is processed in green.

Apply Bricks License Key
Bricks License Processing

2: Bricks Settings

Whenever I develop a new site(most probably for my biz) with Bricks, I will activate and deactivate something from the Bricks setting. But, of course, all these are based on personal preferences and might not suit your use case.

Setting > General

Brief about Bricks Setting - General
Bricks Setting – General

Post Types

By default, Posts & Pages have been enabled for you. However, you can disable Posts for the Post Types if you are not going to style and write your blog posts in the Bricks Builder. I will do this for some sites when necessary.

Gutenberg Data

This option is for you to convert the data in Gutenberg into Bricks data and vice versa. I strongly recommend doing so if you are using an SEO plugin(Rankmath, SEOPress or others), so they can detect the content more accurately.

Brief about Bricks Setting - Misc and Custom Breakpoints
Bricks Setting – Misc

Miscellaneous

As mentioned above, you must disable these options if you use any SEO plugins for your site. Otherwise, Bricks will generate one more repeated meta tag for your website that would cause issues with ranking.

Custom Breakpoints

Bricks Custom Breakpoints
Bricks Custom Breakpoints

I will enable this for all my builds because it allows me to build websites with better responsiveness.

With the custom breakpoints, you can build your website from standard breakpoints or a mobile-first layout, as it offers a base breakpoint, which is an excellent idea for users that need different approaches.

Settings > Builder

Bricks Settings - Builder
Bricks Setting – Builder

Disable Autosave

I don’t like the builder auto-saving my changes which would cause multiple revisions to my history. And it might affect the Undo feature as well.

Builder Mode

It depends on you as it’s a choice subject to personal preference. I like it to be dark mode myself.

Bricks Builder Dark Mode UI
Bricks Dark Mode UI

The Bricks logo on the builder is beneficial. It can be linking to a preview of the current page you’re editing, back to your homepage, back to the dashboard, Post Type, back to editing your page in WordPress mode and no link. Please refer to the screenshot below.

Bricks Builder - Toolbar Logo Link
Bricks Toolbar Logo Link

You can enable the option to open it with a new window(which I prefer).

Bricks Builder Settings
Bricks Settings – Builder

Control Panel

If you don’t use the global class while creating your website, you can toggle it and disable the option.

Bricks Global Class Field
Bricks Global Class Field

Structure Panel

Element Actions

The duplicate and delete buttons, as shown in the image below, are disabled by default. You have to enable it in the settings. I find this useful for my workflow.

Bricks Structure Panel - Duplicate and Remove Buttons
Bricks Structure Panel – Duplicate and Remove Buttons
Structure Items Collapsible and Expanding

This option makes your structure panel tidier on page load and easier to navigate between your page.

Bricks Structure Panel - Collapse
Bricks Structure Panel – Collapse
Structure Items Expand when clicking on the Canvas

Look at the structure panel on the right; the items in it expanded when I clicked on the heading element. Most importantly, the structure panel will scroll automatically when we click on the component on the canvas.

Bricks builder auto scroll on click
Bricks Builder auto scroll on click

Dynamic Data

This is my favourite option. Without this feature, you will see your dynamic data render “How to use Bricks Builder” this way instead of valid data showing the actual post title on the editor.

Bricks setting - render dynamic data text on canvas
Render Dynamic Data text on canvas.

Dynamic Data Dropdown

It depends on you if you want the same. You might think, what is this for? Refer to the screenshot below.

Expand dropdown width when open
Expand dropdown width when open.

The screenshot above is the dropdown field when you click on the dynamic data highlighted in purple.

Settings > Performance

Disable Emojis, Embed, Google Fonts and etc
Disable Emojis, Embed, Google Fonts, etc

Disable Emojis, Embed, Jquery Migrate and Google Fonts

I don’t use such options(all enabled options) on some of my builds, so I’d turn them off so the builder doesn’t load extra resources on my page, so my site will be lighter.

Add IDs & Classes as needed
Add IDs & Classes as needed.

Element ID & Class

I love this option a lot. Because it makes the HTML output even cleaner, we won’t see the IDs on my page when we style our element with a global class. Refer to the screenshot below.

Bricks HTML Output
Bricks HTML Output

That’s all about the Bricks setting I set for my sites.

Some of you might be unsure how to assign the header and footer to your page. I see people posting on Bricks’ official group asking why they failed to see their header and footer after doing everything.

Create a header

On WP Dashboard, head to Bricks > Templates > Add the new template to create your first header.

Create a header
Create a header

Give your header a name, and assign the template type to the header. Please remember that this is not the place to set conditions for your header. You can only give the template with the condition when you click “Edit with Bricks“.

This is precisely the same step as “create a header” above. Assigning the template type to “footer” instead of “header” would be best.

Set Conditions for your templates

Now, you should have created a template for a header and footer. Now, choose your template and click on “Edit with Bricks”. You will see the Bricks Builder in 1-3 seconds.

Head to Setting(arrow pointing) > Template Setting > Condition

You will then see this screen as per the screenshot below. This section allows you to set conditions for your templates and which page you want to show and hide.

Bricks Builder Set Template Condition
Bricks Builder Set Template Condition

If you want your template to use across the entire website, you must choose “Entire Website” from the first dropdown.

4: Setting Theme Styles

Bricks Theme Styles Setting
Bricks Theme Styles Setting

Finally, it’s time to talk about setting theme styles.

When I start building my website, setting up theme styles is the very first step of the workflow.

Pre-Define Styling

In the theme style settings, you can pre-define the styles you want for every element. For example, you can choose the layout for your website, define a max-width for the container(for global width purposes), and pre-define the heading/paragraph and all other elements(some call them widgets) on the website for your website. I am not going through every element here, but I’ll tell you what I’ll do for the theme styles.

Conditions

It would be best if you assigned a condition to make your theme styles work for your website.

Theme Styles Condition
Theme Styles Condition

The theme styler is powerful because you can create multiple theme styles and assign them to your desired pages. Also, you can give every page an individual style(but no one will do so). The best part is that you can exclude it for the pages you don’t want the theme style to apply.

You must choose “Entire Website” from the dropdown to apply the theme style to your website entirely. Then, you can click on the “+” to add a condition for the theme style to exclude which pages you don’t want the same type to apply.

General

Bricks Theme Style - General

You can choose whether you want your website layout to be full-width or boxed. And the background colour for the entire site.

You can set the lightbox item’s width and height here and the lightbox’s background colour. You can also change the colour and size of the close button.

Colours

Theme style setting - Colours

This option allows you to do the colour preset you want for your site. But it is only applicable to headings and buttons.

Theme style setting - links

This option allows you to preset the link style you want for your site. But it only allows you to do basic styling. You need custom CSS to achieve the different styling for the links.

Typography

Theme style setting -  typography

You can change the percentage of the HTML font size. It is 62.5% by default and the standard of web development. And you can preset the font size and styling for the text and headings. For example, “All Headings” mean to style it from one place. So it applies to all the headings. You can then set different sizes for every title from h1-h6.

Theme style setting - Typpography headings
Theme style setting - Typpography headings 2
Theme style setting - Typpography misc
Miscellaneous

I will usually use Hero & Lead for my hero sections. I preset them here and don’t need to create a global class for them when I design my hero section. You can also preset the blockquote element(if you use it).

What did you learn from this article?

I hope this guide helped you to get started when using Bricks Builder. Should you need any more precise information, please comment below. I will come back to you with the solution that you want.

The most important I want to share with you guys is that don’t forget to back up your website when you design your site. Otherwise, your effort will be wasted once something goes wrong.

Thank you for reading this article!

Find this article helpful?

Leave the first comment

Related Posts

Bricks Builder

Bricks Builder: The Visual WordPress Site Builder

Introduction A website builder can save you much time and effort when creating a website.…
Read post
calculating service year dynamically

Dynamic Service Counting Year for Business Website

Introduction For businesses, showcasing how long they have been in operation can be a powerful…
Read post
how to use Yabe Webfont in Bricks Builder

How to use Yabe Webfont in Bricks Builder

How to use Yabe Webfont in your Bricks Builder? Welcome back to my site! In…
Read post
Previous Post
Next Post

Recommendations

Tidio Live Chat + Chatbot Recommended by Jornes
20% OFF with Jornes20
MaxAddons for Bricks Builder
10% OFF with JORNES