Mastering Bricks Builder: 12 Essential Tips & Tricks for Top-notch Creations

Bricks Builder is the perfect drag-and-drop website builder for WordPress, allowing you to visually design your entire site in real time on a single screen. The primary focus of Bricks Builder is to provide an effortless website building experience. You don’t require professional developer skills, as the user-friendly interface allows you to create stunning websites without writing a single line of code.

While Bricks Builder shares similarities with Elementor in terms of ease of use, it stands out with some unique features. It produces cleaner code, similar to the oxygen builder. This ensures your website loads faster and performs better, which is crucial for optimizing your core web vitals and enhancing the user experience.

Moreover, Bricks Builder includes a dedicated mobile editing mode, enabling you to optimize your website’s appearance for mobile devices. This ensures that your site looks fantastic and functions seamlessly on smartphones and tablets.

In this article, we will explore the top 12 tips and tricks to make the most out of Bricks Builder. Whether you’re an experienced website builder or just starting, these tips will help you unlock the full potential of this modern website builder while saving your time and effort.

Let’s delve into some unique tricks and tips that can take your Bricks Builder experience to the next level.

Explore Tips & Tricks

1. Create and Publish a New Page from Bricks Builder

No need to worry about interrupting your workflow when you want to create a new page while working on another one in Bricks Builder. With the first tip, you can effortlessly create a new page right from the Bricks Builder interface.

Here’s how you do it: Look for the “Pages” option in the upper left corner of the Bricks Builder menu bar. Click on it, and then you’ll find a “+” button to create a new page. Once created, you can instantly edit this new page by clicking on it, and it will open in the Bricks Builder interface.

Keep in mind that when you use this method to create a page, it will only be created. To publish the page, you need to click on the “Publish” option within the edit page interface.

Bricks Builder: Create & Publish New Page Settings
Bricks Builder: Create & Publish New Page Settings

2. Switch Pages from Within the Builder

Navigating between pages in the Bricks Builder interface has become a breeze! You can seamlessly access other pages directly from the Bricks while working on your current one, eliminating the need to go back and search for them separately.

Simply click on the “Pages” option, and a list of all the pages created on your website will appear. You can easily view any page by clicking on it, and it will automatically open in the same tab.

If you want to view another page without leaving the current one, right-click on the desired page and choose the “Open in New Tab” option. This way, you can keep both pages accessible simultaneously.

Bricks Builder: Switch Pages From Builder Settings
Bricks Builder: Switch Pages From Builder Settings

3. Create or Insert a Template within the Bricks Builder

Let’s say you’re designing a blog website with Bricks Builder, and you’re currently working on a single blog post template. However, you also want a separate template for your blog’s homepage, showcasing a list of all your latest posts.

To create a new template from the Bricks Builder interface, you need to click on the “Templates” option and then click on the “+” sign. Now, customize the template according to your preferences and requirements.

If you want to insert a pre-designed template on your page, just click on the “Templates” option again, then a list of all created templates will be displayed. From there, you can effortlessly select the template you want to insert.

Bricks Builder: Create & Insert Template Settings
Bricks Builder: Create & Insert Template Settings

4. Create Additional Breakpoints

Breakpoints play an important role in ensuring that your webpage appears correctly and adapts to various devices, making it responsive. With Tip No. 4, you can easily create additional breakpoints to preview your page on multiple devices according to your specific needs.

To access this feature, first, make sure you have enabled the Custom Breakpoint option in Bricks ➝ Settings. If it’s already enabled, you can skip this step.

Let’s say you’re designing a website using Bricks Builder and want to ensure that it looks great on smaller screen devices. To achieve this, you can create your breakpoint tailored to your desired screen width size.

Simply click on the three dots in the Bricks Builder breakpoint menubar. Then, click on the “+” sign to add a new breakpoint. Fill in the necessary details, such as the device’s width, a label, an icon, and any other specifications you need. Once you’ve filled in the required information, click the “Create” button to generate the new breakpoint.

Bricks Builder: Create Breakpoints Settings
Bricks Builder: Create Breakpoints Settings

5. Preview at a Width in-Between Existing Breakpoints

With Bricks Builder, previewing the width of existing breakpoints is a simple process, giving you greater control over your website’s responsiveness. In the Bricks Builder interface, simply click on the three dots option, and a menu will appear, allowing you to access the settings of existing breakpoints.

To adjust a breakpoint’s width, select the “Edit” option of the specific breakpoint you want to modify from the available options. From there, you can easily change the width to your desired value.

Let’s say you have a breakpoint for mobile devices with a width of 480 pixels, but you want to optimize it for smaller smartphones with a width of 360 pixels so you can effortlessly adjust the existing breakpoint’s width to 360 pixels by following the steps mentioned above.

Bricks Builder: Preview Breakpoints Settings
Bricks Builder: Preview Breakpoints Settings

6. Customize Your Style for Each Breakpoint

When designing content in Bricks Builder, you may face situations where the layout appears good on larger screens but requires adjustments for optimal display on smaller devices like mobiles. Fortunately, Bricks Builder simplifies this process by allowing you to customize styling for each breakpoint effortlessly.

Let’s say you have a long article designed in Bricks Builder, and it looks great on desktop screens. However, on mobile devices, the text becomes too small, and the images appear too large, disrupting the overall layout. To resolve this, you can select the specific breakpoint corresponding to the mobile screen size and begin styling.

When you set styling for the base breakpoint (e.g., desktop), those styles will be reflected across all breakpoints. But, if you make different styling adjustments for a specific breakpoint (e.g., mobile), those changes will impact that particular breakpoint and all subsequent breakpoints that do not have individual styling.

Bricks Builder: Customize Breakpoints  Style Settings
Bricks Builder: Customize Breakpoints Style Settings

7. Find Attributes in the Element’s Details Panel Quickly

When dealing with complex designs in Bricks Builder, sometimes the element features are complex and cause confusion. If you are looking for a specific styling feature and don’t want to search through every option manually, there’s a simple and efficient tip.

By pressing Shift + Cmd + F (for Mac) or Shift + Ctrl + F (for Windows), you can activate the search bar of elements within Bricks Builder. From there, you can enter the name of the feature you’re seeking, and the search results will instantly display all relevant settings under the element.

For example, let’s say you want to adjust the border color of a specific element on your page. Instead of sifting through various menus and options, you can quickly access the border color settings by using the search function. Just type “border color” in the search bar, and it will display the exact settings for your desired feature.

Bricks Builder: Find Attribute of Element Settings
Bricks Builder: Find Attribute of Element Settings

8. Keyboard Shortcut to Add Elements

While designing a blog post page in the Bricks Builder interface, you may wish to include a “Call to Action” button to engage your readers so instead of manually scrolling through the lengthy element list to find the button, there’s a quicker and more efficient method available to add any element.

Simply press Shift + Command + E (for Mac) or Shift + Ctrl + E (for Windows), and the quick element search bar will appear. From there, type “Button” to find the desired element quickly. Then, press Tab to select the “Button” element, and with a quick hit of the Enter key, it will instantly be added to your page.

Explore the List Of Keyboard Shortcuts in Bricks Builder to easily perform the most common in-builder actions with simplicity and efficiency.

Bricks Builder: Keyboard Shortcut Keys Settings
Bricks Builder: Keyboard Shortcut Keys Settings

9. Different Ways to Add Elements

Bricks Builder provides users with multiple methods to add elements to their web pages, directly from the builder interface. One of the primary ways is through the shortcut key, which we discussed earlier in this article. Use anchor link

Another useful approach is the drag-and-drop method. In the Element sidebar, you’ll find a wide range of elements available. To add an element, simply click and hold on to the desired element, then drag it onto your page or structure.

Lastly, it also offers a straightforward click-to-add feature. Within the Element sidebar, each element is easily clickable. By clicking on the specific element you want to include, it will instantly appear on your page.

Bricks Builder: Ways to add Element Settings
Bricks Builder: Ways to add Element Settings

10. Apply Styles with Global Classes

Save time and effort in your website designing process with the Tip 10 of Bricks Builder. To begin, design any element according to your preferences, such as a heading, and apply the desired styling to it. Once the styling is set, you can add a class to that specific element according to the option displayed below.

Next, as you add other elements to your page, you can easily apply the previously created class to those elements. By doing so, the styling of the initial element will be copied and pasted to all subsequent elements where the class is applied.

In the below example, let’s say I start by designing a heading element and applying specific styling to it, like font size, color, and alignment. I add a separator for the heading. Now I create and assign a class to the heading element. Then we add another heading element to our page and simply apply the previously created class. All the styling from the initial heading will be copied over to the new heading element.

However, it’s important to note that the class only copies the styling and not the specific features you may have used, such as the separator in this example. So, you would still need to add Separator in another heading.

Bricks Builder: Apply Global Class Settings
Bricks Builder: Apply Global Class Settings

11. Access WordPress Editing from Bricks Builder

While working with Advanced Custom Fields in Bricks Builder, editing a page to add data into custom fields requires navigating to the WordPress editor page separately. However, Bricks simplifies this process by providing a convenient option for redirecting to the WordPress editor page directly from the builder.

To access the WordPress editor page, look for the “Edit in WordPress” option located in the upper right menu of the Bricks Builder interface. By clicking on this option, you will be seamlessly redirected to the WordPress editing page within the same tab.

For example, let’s say you are designing a product page using Bricks Builder, and you have custom fields set up in Advanced Custom Fields to input product details, such as price, specifications, and product description. Instead of leaving the Bricks Builder interface, you have to navigate to the WordPress editor separately by selecting edit in the WordPress option as “Open in New tab.”

Bricks Builder: Switch to WordPress Editing Settings
Bricks Builder: Switch to WordPress Editing Settings

12. Reusable Elements Across Pages

In Bricks Builder, there’s a useful feature that allows you to save any pre-designed element as a Global Element, making it easily accessible across different pages. This is especially handy when you need the same element with the same style in multiple places on your website.

For example, let’s say you’ve designed a beautifully styled “Team Members” section on your homepage. It includes a Designation, an image, and the name of the person providing the details. Now, you want to use this same Team Members section on other pages, like your “About Us” page.

To achieve this, first, create and design the element you want to reuse on various pages. Once you’re satisfied with its appearance, simply select the element by clicking on it. Then, right-click on the element, and a menu will appear. From the menu, choose the “Save as Global Element” option.

Bricks Builder: Reusable Elements Settings
Bricks Builder: Reusable Elements Settings

Keyboard Shortcuts on Bricks Builder

Easily perform the most common actions by utilizing convenient keyboard shortcuts. These shortcuts provide a quick and efficient way to navigate and execute essential tasks within the builder, saving you time and streamlining your workflow.

Some of the keyboard shortcuts are:

Keys CombinationDescription
CMD / CTRL + SSave changes
CMD / CTRL + PToggle preview mode
CMD / CTRLAdd an element outside the active nestable/parent element
CMD / CTRL + BSwitch between different responsive editing modes
CMD / CTRL + ZUndo your last change
CMD / CTRL + Shift + ZRedo your last change
CMD / CTRL + Shift + Arrow downEdit the next element (same level)
CMD / CTRL + Shift + Arrow upEdit the previous element (same level)
CMD / CTRL + Shift + Arrow leftEdit parent element(Container)
CMD / CTRL + Shift + Arrow rightEdit the first child element
CMD / CTRL + Shift + SForce save all data
CMD / CTRL + Shift + DDuplicate selected element
CMD / CTRL + Shift + LToggle Template Library
CMD / CTRL + Shift + PWrap Element in Block
CMD / CTRL + DeleteDelete the selected element (and its children)
CMD / CTRL + Shift + XShow Page Structure panel
CMD / CTRL + Shift + FToggle “Search settings” input (in the panel)
CMD / CTRL + Shift + HShow history/Revision panel
CMD / CTRL + Shift + EShow Elements panel (while focusing on search)
CMD / CTRL + ENTERToggle selected Element classes UI
ESCCancel / Close popup (Templates, Classes UI, etc.)
Shift (modifier)Hold down “Shift” to:
– Adjust element spacing (margin, padding)
or container sizing (height, width) on the canvas
in steps of 5 (custom units) or 10 (default unit = px)
– Directly edit new element
Keyboard Shortcut keys On Bricks Builder

Wrap Up

In conclusion, these Bricks Builder tips and tricks provide a seamless and efficient website-building experience. From seamless page creation and breakpoint customization to utilizing global elements and keyboard shortcuts, these techniques will streamline your workflow and enable you to create visually stunning websites effortlessly. With the ability to save and reuse pre-designed elements, achieve consistent styling across pages effortlessly.

Leave the first comment