We are not about to break up with Divi anytime soon, but since the rise of Elementor and Webflow, some of our clients are looking for a an editing experience that feels somewhat inspired by Adobe Products. We also love to stay on top of the latest WordPress visual builders, especially those that come recommend by both our clients and developers. Here’s how to start using Bricks Builder if included in your WordPress package from 2023.
This video provides a comprehensive one hour guide for beginners to build their first website using Bricks. The content covers various aspects of installation, setup, and utilisation of Bricks in the most productive manner. It includes details on the Bricks admin area, custom fonts, templates, and settings. The video also showcases how to edit pages with Bricks, utilise the builder interface, insert pre-designed templates, and adjust the canvas width for better screen visibility. Moreover, viewers will learn about the structure panel, using dynamic data, adding elements to the canvas, aligning elements, and manual saving options. The video concludes with information on keyboard shortcuts, previewing the builder and frontend, creating a website header template, customizing default styling, building a custom color palette, and responsive editing.
The following timestamps may help direct you your specific interest:
- 0:00 Introduction
- 2:59 Installation & Licence Activation
- 6:59 Bricks Admin Area – System Information
- 8:19 Bricks Admin Area – Sidebars
- 8:58 Bricks Admin Area – Custom Fonts
- 9:43 Bricks Admin Area – Settings
- 15:31 Bricks Admin Area – Templates (Setting up a Header Template)
- 18:46 Editing a page with Bricks
- 20:25 The Builder Interface
- 22:12 Inserting a pre-designed Template
- 25:16 Adjusting the Canvas Width (useful when working on a smaller screen)
- 27:18 Structure Panel
- 30:23 Using Dynamic Data (via AFC)
- 32:44 Adding Elements to the Canvas
- 35:00 Aligning Elements (inside a Container)
- 37:01 Manually Saving your Changes (Autosave enabled by Default)
- 38:00 All Keyboard Shortcuts (Time-Saver)
- 39:24 Builder & Frontend Preview
- 40:00 Creating our Website Header (Template)
- 49:17 Customize the Default Styling via Theme Styles
- 54:05 Creating your own Custom Color Palette
- 58:27 Responsive Editing
- 1:01:40 Outro
