Let’s delve into the world of WordPress Bricks builder, one of the latest tools for visually editing WordPress websites. When it comes to using builders, the two major concerns are speed and flexibility. Well, the Bricks builder has stepped up to the plate, claiming to address these very issues. Now, let’s examine whether it lives up to its promises.
Bricks Web Builder at First Glance
Bricks Builder is an intuitive visual tool designed for building entire websites using WordPress. Just as the name implies, you can effortlessly construct pages or even complete sites, brick by brick, with this exceptional builder.
What sets Bricks Builder apart is that it is seamlessly integrated within the Bricks theme, eliminating the need for additional plugin installations. Furthermore, it boasts dynamic data support, a custom fonts uploader, a plethora of templates, and built-in SEO optimization.
These impressive features make the process of building your website a breeze. I must admit, I truly appreciate the advancements made since the initial release of this builder.
Additionally, Bricks Builder has a public roadmap that outlines the upcoming features they plan to develop. This user-centric approach to future development is commendable. However, it remains to be seen whether they can maintain this level of responsiveness as their user base grows and the number of feature requests escalates.
Thus far, everything about Bricks Builder appears promising and encouraging.
Why Bricks Builder Among So Many Options?
The market is flooded with numerous page builders, including the immensely popular Elementor and the reliable Beaver Builder. Other options like Breezy, Oxygen, and many more also exist. With such a plethora of choices, you might wonder if there’s really a need for yet another page builder.
However, in my opinion, there is indeed room to explore another page builder when it offers distinctive features like Bricks Builder. This builder doesn’t aim to revolutionize the way you perceive or utilize page builders; instead, it focuses on enhancing the existing features. The Bricks Builder team attentively listened to user feedback regarding other page builders and created a product that users would adore, right from version 1.0.
One of the reasons i admire Bricks Builder is its seamless integration within a theme. Unlike the aforementioned page builders, Bricks Builder is embedded directly into a WordPress theme. Developing a builder within a theme carries certain advantages, as well as some evident drawbacks, which i will discuss later in this article.
For now, it’s evident that Bricks takes a unique approach. Is it merely another theme? No! Is it simply another page builder? No! It’s a hybrid, a distinct blend. That’s why you may have noticed us referring to it as a builder rather than just a page builder or a theme. You can also perceive it as a site builder based on WordPress (quite literally).
My First Impression after hearing about the Bricks Builder
When I heard about the builder,” my initial expectation is a plugin, not a theme. However, Bricks breaks this convention by being a theme, which can be both advantageous and disadvantageous, but the benefits outweigh the drawbacks. Due to its cohesive design and focus on a unified functionality and concept, the code remains streamlined without any unnecessary or unused elements, resulting in a robust structure.
Upon installation, Bricks provides you with a blank canvas where you have complete control to build everything according to your desires, from the header to the footer. Whether this is beneficial or not depends on your objectives. If you have specific requirements and are satisfied with premade solutions, there might be no need to build from scratch.
Pros Of Bricks Builder
Interface
Upon installing Bricks, you have the option to either utilize the default Gutenberg editor to create posts or take advantage of the Bricks builder. Furthermore, there is the possibility of converting content between the two: items already constructed using Gutenberg can be converted to Bricks and vice versa, although not all elements may be compatible.
It’s important to highlight that Bricks is a classic theme that adheres to the default template structure of WordPress.
1. Settings
Bricks provides a user-friendly settings panel that allows you to precisely configure the aspects controlled by the builder. It even offers role settings to determine who has editing access with Bricks and the ability to insert code snippets. The settings panel consists of seven tabs (or eight, if Woo Commerce is installed), offering comprehensive control over various aspects:
General – This tab focuses on Gutenberg to Bricks compatibility, SEO settings, and options to enable custom CSS breakpoints and experimental settings.
Builder Access – Here, you can manage the major user roles and specify who has the authority to execute code on the website. The flexibility provided in this tab is commendable.
Templates – In this tab, you can control the templates you create. You have the option to make them public and even restrict their accessibility to specific URLs. Additionally, you can import templates from external sources.
Builder – This tab covers miscellaneous builder settings, including autosave frequency, language settings, default wrapping container type, panels configuration, and dynamic data rendering.
Performance – The Performance tab allows you to optimize performance by managing emoji usage, enabling lazy loading, and choosing CSS and font loading methods (inline or external file).
API Keys – As the name suggests, this tab is dedicated to managing API keys for services such as Google Maps, Captcha, or Facebook.
Code – The Code tab enables you to add custom scripts to the header, footer, and specific locations within the body, both before and after the closing tags.
If Woo Commerce is installed on your website, an additional tab named “Woo Commerce” will be available. It provides options to enable or disable product badges, gallery features, light box zoom, and the Woo Commerce builder itself.
2. Builder
Upon creating a new post, custom post, or page, you’ll notice a prominent yellow button labeled “Edit with Bricks.” When clicked, the builder loads within a mere two seconds, ensuring a swift and seamless experience.
To begin, you have the option to edit the general style settings for your entire website or modify default styles for specific templates, pages, or even individual users. Additionally, you can apply conditions on top of these settings, making use of the impressive feature known as Conditions, which we’ll explore in more detail later.
The builder interface consists of four panels:
Top Panel – This panel provides access to main settings, history, help, breakpoints, preview, and save buttons, ensuring convenient navigation and control.
Left Panel – Here, you’ll find over 50 elements (similar to “widgets” in Elementor or “blocks” in Gutenberg), pages, contextual settings, and the powerful Conditions feature. It offers a comprehensive range of options for customization.
Right Panel (Structure) – The Structure panel displays and allows manipulation of the page’s structure, including containers and elements, along with their hierarchy. You can rename, move, delete, duplicate, make elements global, and even copy and paste elements or their styles.
Canvas – The canvas serves as a visual representation of your changes and allows for direct editing of text elements. You can effortlessly switch between light and dark themes to suit your preference.
Upon adding an element, its menu appears on the left panel. The menu consists of a content tab for setting tags, global styles, and dynamic data, and a style tab that offers precise control over every aspect of element styling. Additionally, there is a dedicated button for configuring conditions specific to that element.
The Bricks builder interface strikes an excellent balance between intuitiveness and depth. It provides a user-friendly experience while offering a multitude of options and settings for each element and device type.
Features
Bricks presents a plethora of exceptional features waiting to be explored. Let’s embark on a journey to discover each of these fascinating aspects individually.
1. Conditions
The conditions feature in Bricks has truly left a lasting impression on me. It offers unparalleled flexibility as it can be applied to global styles, templates, and elements – essentially, to anything within the Bricks builder. The introduction of element conditions in version 1.5.4 has brought about an exciting advancement worth examining closely.
Now, any element can be selectively rendered based on specific conditions being met, without merely being hidden (a crucial factor for optimized performance). These conditions can be stacked on top of one another and employ both “AND” and “OR” relationships. Furthermore, the OR relationship can be established between sets of conditions, connected by the AND operator. As you can see, this feature is remarkably user-friendly.
However, what truly elevates it to another level is the ability to incorporate dynamic data, complex expressions, and filters as part of the condition set. Just envision the immense flexibility that awaits you when combining the formidable capabilities of JetEngine with the Bricks builder. It’s a game-changer, opening up a world of endless possibilities.
2. Dynamic data
The Bricks builder offers an exceptional feature that allows you to utilize dynamic values throughout your design. This functionality proves invaluable when crafting templates, and it also comes in handy when adding content to posts and pages. The range of available data tags is extensive, and you can even apply filters to further refine the output. For example, you can utilize tags such as {post_title: link} or {featured_image: medium_large} to enhance the display of your content.
Additionally, Bricks provides an echo tag specifically designed for custom PHP functions. By using the {echo:my_custom_function} tag, you can effortlessly echo the value returned by the PHP function named my_custom_function(). This feature grants you the flexibility to incorporate and display custom PHP functionality within your designs, further expanding the possibilities for dynamic and interactive elements.
3. Query Loops
Query loops in Bricks undoubtedly deserve the praise and accolades they receive. They offer a remarkable capability to populate containers, accordions, and sliders with dynamic content. To harness this feature, you first need to enable a custom query loop and configure all the necessary settings within the parent container menu. This setup ensures that the data is retrieved from the database and made available for use in all the nested elements.
With query loops, you can retrieve various types of data, including posts (such as pages, custom posts, media, products, etc.), terms, and users. Allow me to illustrate an example of creating a container populated with a post query. In this basic configuration, I have only utilized the essential settings. However, it’s worth noting that a multitude of options are available. You can include or exclude specific posts and terms, set parent IDs, and even add additional filters based on taxonomy or meta queries, among other possibilities. The flexibility and customization options provided by query loops are truly extensive.
3. Templates
The Bricks builder interface empowers you to create a wide range of templates, including those for header, footer, single posts, search results, archives, error pages, and even dedicated templates for WooCommerce pages. These templates can be conveniently organized into bundles, allowing for efficient management. To enhance navigation and usability, you can assign tags and feature images to the templates.
Moreover, inserting templates into your designs as sections is a breeze with the Template element, streamlining the process of incorporating pre-designed components into your layouts.
(Templates Screen Shoot)
One remarkable feature worth highlighting is the community template library. It provides access to a rich collection of templates contributed by the Bricks community. You can make use of these templates in your projects or even share your own creations with the community. Additionally, Bricks allows you to connect directly to another website and import templates from there, expanding your resources and possibilities.
Last but not least, the import and export functionalities further enhance your workflow efficiency. They enable seamless transfer of templates between different projects or even among different websites, ensuring flexibility and ease of use.
4. WooCommerce builder
When using Bricks to edit WooCommerce pages, you may encounter a default shortcode that is not editable within the Bricks interface. However, you still have the option to add elements before and after the existing content in those pages.
If you desire to fully customize WooCommerce pages according to your preferences, Bricks makes it a straightforward process. You can create custom templates specifically designed for WooCommerce pages. By assigning the desired template to the corresponding WooCommerce page, you gain the ability to utilize over 20 elements provided by Bricks to tailor the page exactly the way you want. This empowers you to unleash your creativity and achieve a highly personalized and unique design for your WooCommerce pages.
5. Convertibility to and from Gutenberg
If you’ve already begun building your website using Gutenberg but wish to transition to Bricks, you’ll be pleased to know that it’s a seamless process. Gutenberg blocks can be easily converted to the WordPress Bricks builder, and vice versa, ensuring compatibility between the two (at least for the majority of blocks).
This means that you can smoothly migrate your existing content and design elements from Gutenberg to Bricks without encountering significant obstacles. Whether you prefer the simplicity of Bricks or the flexibility of Gutenberg, you have the freedom to switch between the two editors while maintaining the integrity of your content and layout. It’s a convenient feature that allows you to explore different editing experiences and choose the one that best suits your needs.
5. Speed
The Bricks builder boasts several noteworthy features that set it apart. One of its standout qualities is its emphasis on speed and clean code. Developers have leveraged the Vue.js framework, eliminated JQuery from the front end, and made performance a top priority. This commitment to optimization has resulted in a significant advantage for Bricks.
In addition to its performance-oriented approach, Bricks offers several other notable features:
Flexbox container – The default container layout in Bricks is based on the flexible box (Flexbox) model. However, you have the flexibility to switch to an alternative display value if desired.
Custom attributes and tooltips – Bricks allows you to add custom attributes to elements that support them. This functionality extends to incorporating tooltips, providing additional information or context where needed.
Custom code snippets – Not only can you add custom code globally, but Bricks also enables you to include custom code snippets for each specific page. This allows for fine-grained customization and integration of specialized functionality.
Global elements – Bricks introduces global elements, which can be added and reused throughout the entire website. Any changes made to the style or content of these initial global elements will automatically propagate to all instances where they are used. This streamlines the maintenance and consistency of your design.
Seamless post and page switching – With Bricks, you can effortlessly switch between posts and pages or create new ones without leaving the builder interface. This streamlined workflow eliminates the need for constant navigation between different sections of your website.
Of course, these are just a few of the notable features available in Bricks. To fully experience the breadth of its capabilities, you can explore and test them firsthand in the Bricks builder sandbox.
6. Global CSS classes, custom CSS, and JavaScript
One of the valuable features in Bricks is the ability to create custom global CSS classes that can be reused throughout your website. The great news is that you can design these classes entirely visually, without the need to write any code. Simply provide a name for the class, customize its properties, and you’re all set.
Bricks offers the flexibility to add CSS styles to each individual element. This means you can fine-tune the appearance of specific elements according to your preferences. Additionally, you have the option to include both CSS and JavaScript code on a per-page basis, allowing for further customization and functionality.
A notable detail worth mentioning is that the CSS editor in Bricks even supports Emmet abbreviations. This feature enables automatic code completion, which significantly speeds up the coding process and helps prevent typing errors. It’s a small but impactful feature that enhances efficiency and accuracy while working with CSS.
With Bricks, you have the power to visually create custom global CSS classes, apply CSS styles to elements, and conveniently utilize the Emmet abbreviation support in the CSS editor. These capabilities empower you to achieve the desired visual design and functionality for your website with ease and precision.
7. Bricks is a WordPress theme
Bricks Builder is an exceptional WordPress theme designed to enable the creation of custom websites with remarkable speed. It is specifically tailored for individuals who desire to enhance their websites with additional functionality but do not possess coding knowledge or skills. With Bricks Builder, you gain access to a user-friendly drag-and-drop interface, simplifying the website-building process and making it accessible to users of all levels of expertise. Whether you are a beginner or an experienced user, Bricks Builder provides an intuitive and seamless experience, allowing you to craft stunning websites without the need to write a single line of code. It’s a powerful tool that empowers you to bring your website vision to life effortlessly.
8. Price
You can begin with an affordable price of $99 for a lifetime license, which covers one website. Alternatively, you have the option of a lifetime license for UNLIMITED websites at a cost of $249.
Cons of Bricks builder
Having already highlighted the advantages of Bricks, it’s important to address a few limitations that currently exist.
1. Missing elements
The team behind Bricks is undoubtedly making remarkable progress, continuously adding new features with each release. However, it’s important to note that Bricks is still a relatively young product, and as such, there are certain elements that are currently missing, despite the already impressive collection of over 50 available elements. Some examples of elements that are not yet included are unfold, timeline, SVG animation, Lottie, filter image gallery, image hotspots, and others. Additionally, compared to other platforms, Bricks currently offers a more limited selection of pre-made templates. Nonetheless, it’s worth acknowledging that the team is actively working on expanding and enhancing the product’s offerings.
2. Missing integrations
Due to its recent release, Bricks currently has a limited range of third-party add-ons and marketing integrations available.
3. Features change between versions
While I appreciate this aspect of Bricks, others may have different preferences, especially if they manage multiple client websites. Bricks is developed by a small team that implements frequent changes and improvements. As a result, feature updates between versions can lead to changes in functionality, which may cause frustration and occasional bugs. However, the advantage of this fast-paced development approach is that bugs are swiftly addressed and new versions are released promptly. I find this strategy beneficial as it allows for quicker progress towards an optimal product.
4. Minimal Pre-made Designs
If you heavily rely on the design libraries offered by established plugins like Elementor or Divi, Bricks Builder may not be the ideal choice for you at the moment. Currently, Bricks has a limited selection of pre-made designs to choose from when starting to build your website, which means you would have to begin from a blank page. I don’t rely on pre-made designs, so it doesn’t bother me, but it might be a concern for you if you prefer having a wide range of design options readily available.
Bricks Web Builder and JetPlugins Integration
The creators of Crocoblock are always attentive to innovative solutions for highly dynamic websites. As a result, they have seamlessly integrated JetEngine with Bricks, unlocking endless possibilities and elevating website development to a whole new level.
With this integration, you can harness the power of JetEngine’s Query Builder, which not only works with JetEngine Listings but also integrates seamlessly with the native Bricks Loop. This synergy allows you to leverage JetEngine’s impressive features alongside the flexibility and speed of Bricks. Additionally, JetSmartFilters are also available to further enhance your website’s functionality.
Stay tuned for exciting updates from Crocoblock as they continue to push the boundaries of web development.
NOTE: Don’t forget to install a free JetStyleManager plugin to customize every detail of your Gutenberg website styles.
Although the full integration of JetEngine functionality is currently in progress, you can already use JetEngine and other Gutenberg-compatible plugins from Crocoblock alongside your Bricks-powered website. While not all of them have Bricks integration yet, they can still be utilized with the Gutenberg builder.It’s important to note that Bricks is not compatible with the Elementor plugin. Therefore, refrain from installing Elementor on the Bricks theme and avoid using JetPlugins, such as JetElements and similar ones, that are specifically designed for Elementor.
Bricks Builder Template Library
Similar to other page builders, Bricks also provides a template library. However, it is important to note that Bricks currently does not offer complete site templates. Additionally, the number of templates available in Bricks is comparatively lower than other popular builders.
Nevertheless, Bricks introduces some unique features, one of which is the Remote Template. With Remote Template, you can import templates from any website that has been built using Bricks, as long as the site owner has enabled public access to their templates.
At present, Bricks Builder includes templates for various components such as headers, footers, individual content sections, archive pages, search results, and 404 error pages. Furthermore, Bricks allows you to create your own custom templates, giving you the flexibility to design according to your specific requirements.
Bricks Builder FAQ
It is an advanced WordPress theme equipped with a powerful visual builder and an extensive array of dynamic features.
Due to its exceptional speed, lightweight design, flexible pricing options, and unparalleled freedom, this cutting-edge WordPress theme empowers users with limitless possibilities in creating highly dynamic and interactive pages.
Yes,
While this WordPress theme does offer a certain level of user-friendliness, it should be noted that there is a notable learning curve involved. For individuals who are completely new to website building, opting for Elementor might be a more suitable alternative.