The Bricks Builder Blueprint

By Eljay Bos

Welcome to the Bricks Builder Blueprint in which you can find anything you want to know about the Bricks Page Builder in order to build fantastic websites! With the Bricks Builder, you can build WordPress websites that rank high in speed and performance! Bricks is a fast, very customizable, and performant tool.

 

The Bricks Builder Blueprint is the restructured Bricks Academy documentation (and more!) that will bring every nook and cranny of the Bricks Builder onto your device. Now you will have a description of every element and every setting at your fingertips. With the clickable Table of Content just look for the topic you need and click on it. There you go. 

 

This is the first structured e-manual about Bricks Builder with numerous pictures that show and explain everything you need and want to know. 

 

With Bricks, you can create your entire site visually. From header to footer, and anything in between. You can now customize every aspect of your site right in the builder. Soon you'll forget you're using WordPress.

 

You can insert dynamic data. You can edit and preview multiple breakpoints for a fully responsive website optimized for mobile. And Bricks has lots of smart features to help you build better sites in less time.

 

Bricks is a drag & drop website builder for WordPress. It enables you to create your entire site visually, and in real-time. All on one screen.

 

• Language: English
• Publisher: Eljay
• Release date: Jun 25, 2023
• ISBN: 9798223507529

Eljay Bos

The author has been building websites since 2004, at first with Drupal, later with Joomla, and now for a couple of years with WordPress. Originally, he started working with Elementor, a WordPress page builder, but after some disappointing experiences, he became an early adaptor of the Bricks Builder. Which now has become his first-choice page builder. When looking for solutions to solve a problem he found that the online documentation of Bricks could be improved to better help users.  This has resulted in The Bricks Builder Blueprint.

Book preview

Introduction

Welcome to the Bricks Builder Blueprint where you can find anything you need to know about Bricksbuilder to build fantastic websites!

With the Bricks builder, you can build WordPress websites that rank high in speed and performance! Bricks is a fast, very customizable, and performant tool.

Group

With Bricks, you can create your entire site visually. From header to footer, and anything in between. You can now customize every aspect of your site right in the builder. Soon you'll forget you're using WordPress.

You can insert dynamic data. You can edit and preview multiple breakpoints for a fully responsive website optimized for mobile.

And Bricks has lots of smart features to help you build better sites in less time.

Bricks is a drag & drop website builder for WordPress. It enables you to create your entire site visually, and in real-time. All on one screen.

The builder is composed of three areas: TOOLBAR (1), PANEL (2), and CANVAS (3)(see pic below)

Group

1.1.  Toolbar

(click here to see a full in-depth explanation)

Positioned at the top of the builder is the toolbar. Its controls allow you to perform various actions without ever having to leave the page you are editing.

GroupLeftPanel.pngScreenshot 2022-11-10 at 9.29.16.png

1.2.  Panel

The panel displays relevant information for the action you are currently performing.

Positioned on the left by default. You can move the panel around freely by dragging it via the panel header anywhere on your screen.

By default, it shows you a list of all available elements, for you to double-click, or drag and drop onto the canvas (see left image). When editing an element the panel changes to show all controls of the selected element (see right image).

When accessing the Settings (gear icon) from the toolbar (see orange circle), all available settings for Theme, Page, and Template are displayed to be adjusted to your needs (see image below).

Settingstopbar.png

1.3.  Canvas

The heart of the builder is the canvas. A visual representation of your page that you can visually adjust to your liking by adding sections, containers, blocks, divs, and elements (see workspace images above).

Requirements

To provide you with a cutting-edge site builder for WordPress Bricks uses the most modern technology stack (VueJS 3, etc.) while keeping sufficient backward compatibility.

Below are a few minimum requirements your server should meet for Bricks to run smoothly:

•  PHP 5.4+

•  MySQL 5.6+

•  WP memory limit of at least 64 MB

•  Max file upload size of at least 16 MB

•  Modern browser: Please use the latest version of Chrome, Firefox, Safari, or Microsoft Edge when editing your website with Bricks. Older browsers such as Internet Explorer lack support for some of the more advanced builder features. No worries, your website will display fine in those older browsers. They are just not suitable for the builder.

2.1.  How To Increase WP Memory Limit

You can define WP_MEMORY_LIMIT by adding the following code to your wp-config.php file:

define( 'WP_MEMORY_LIMIT', '256M' );

Some web hosts set the PHP memory limit to 8 MB. In that case, you might consider upgrading to a more powerful hosting plan. If your host does not allow you to config this setting by yourself, please get in touch with them.

2.2.  How To Increase Max File Upload Size

If you encounter problems uploading larger files to your site (or when downloading high-resolution images from Bricks’ Unsplash integration) there are a few ways to increase the maximum upload file size.

A maximum upload size of 16 MB should suffice. But 64 MB would be ideal. Log into your hosting account and change the following two PHP server settings to:

•  post_max_size: 64M

•  upload_max_filesize: 64M

If you have access to your php.ini file, located in the root directory of your WordPress installation, open it, and modify the following settings:

upload_max_filesize = 64M

post_max_size = 64M

You can also add the following code to your .htaccess file, but make sure to backup your existing .htaccess file beforehand:

php_value upload_max_filesize 64M

php_value post_max_size 64M

If all above fails, you can try adding the following code to your wp-config.php:

@ini_set( 'upload_max_size' , '64M' );

@ini_set( 'post_max_size', '64M');

To confirm that your maximum upload file size has been updated successfully, go to Media > Add New. On the bottom of this page, you should see your maximum upload file size.

2.3.  How To Increase Maximum Execution Time

When you start seeing a message like Maximum execution time of 30 seconds exceeded you have to increase the execution time of your website by using one of the following three solutions:

#1: Add the following code to your wp-config.php file:

set_time_limit(180);

#2: Backup your .htaccess file and add the following code to it:

php_value max_execution_time 180

#3: Add the following code to your php.ini file:

max_execution_time = 180

Getting Started

One video can show more than 1000 words can tell. Check out the video below released with version 1.3.3, for a 62-minute explanation of how to get started.

Web Video

Installation & Activation

How To Install The Bricks Theme

You install Bricks the same way as any other WordPress theme. First, download the latest version of Bricks from your account. After that head over to your WordPress dashboard. Go to Appearance > Themes and click

Group

the Add New button.

On the next screen click the Upload theme button and select the bricks.zip WordPress

Group

theme from your computer. Click Install Now.

If the upload fails, please make sure to set your max file upload size to at least 8 MB. As a last resort, you can unpack and upload the bricks folder via FTP into the /wp-content/themes directory.

4.2.  Activate Your License

Group

Once Bricks is installed you should see a new menu item named Bricks in your WordPress dashboard, plus the following notification that prompts you to activate your license in order to use the builder:

docs-installation-step-1.png

Go to Bricks > License or click the Activate License link. This should bring up the license

Activate License.png

activation screen:

Copy your Bricks license key from your Bricks account and paste it into the license field. Click Activate License.

––––––––

Group

––––––––

Your license should now be active:

That’s it! You are now ready to start building your site with Bricks ...

Once you have activated your license head over to Bricks → Settings and select the post types you want to edit with Bricks.

Tip: While you could write your blog posts with Bricks, it’s best to create a Bricks template for your blog post layout, and write your blog posts in the WordPress editor as usual.

In the next chapter, we will go into detail about the elements in the Bricks admin bar. 1BricksWPDashboard1.png

Bricks in the WordPress Dashboard 1BricksWPDashboard1.png

After the installation of the Bricks theme, this item appeared in the left column of your WordPress Dashboard.

Let’s go over the different menu items one by one.

––––––––

2BricksWPDashboard2.png

5.1.  Getting Started

When you click on this item you’ll see the screen to your right. Whatever button you click on you’ll go to the online manual of Bricks Academy.

It would be wise, and you will get much more satisfaction when you read this information before you start building a site with Bricks. Unfortunately, Bricks Academy has not the most user-friendly interface.

3BricksWPTemplates3.png

5.2.  Templates

Using this menu item will bring you to your future template selection or you can start building one. You can also import templates from the public template repository.

More hands-on knowledge through this link!

5.3.  Settings

The first things to notice are the two blue-lined fields for Export or Import settings from a different site. A click on one of these buttons will either create a .json file or you’ll be able to import a .json file.

4BricksWPSettingsGeneral.png

5.3.1.  General

You’ll also notice the number of tabs in which changes can be made.

In the General Tab, one can set the type of content Bricks can edit. If you make new custom content it will be shown here. In this example, only Pages are selected.

To have a smooth exchange between Gutenberg data and Bricks data it is advisable to select both. Then the content can be worked on in both cases.

The rest of this screen speaks for itself.

Be careful though when using the experimental features. Make a backup of an existing site before conversion! Don’t forget to click ‘Save Settings’ after any change you made.

5.3.2.  Builder Access

5SettingsBuilderAccess.png

Here you can set builder access per user role. To define access for a specific user one can edit the user profile directly.

5.3.3.  Code Execution

Allow code execution for a specific user or role via the Code element. Only add code that you consider safe and grant permission to users you fully trust.

SettingsTemplates.png

5.3.4.  Templates

Here you can choose to en-/disable default and/or public templates. You can even decide whether or not you give access to your templates to other Bricks users.

When you want more hands-on knowledge go to this link!

5.3.5.  Builder

SettingsBuilder.png

In these settings, you can make changes to the appearance of the workspace, e.g. Dark or Light. Here you can also change the Bricks logo in the Toolbar to a different setting like Preview, Homepage, Dashboard, Post type, Edit in WordPress, and ‘no link’.

At the Element actions, you can set your preferences regarding which layout element you want to use as a Wrap