Compared to other page builder plugins like Elementor and Divi Builder, Brizy is way less popular. But in terms of capability, Brizy is arguably comparable to those two popular plugins. In some ways, Brizy is even better. Brizy has a very intuitive interface, just like Elementor. There is a panel on the left side to add design elements, set the page layout, and manage the blocks. To make the settings to the design elements, you have a settings bar. Pretty similar to Gutenberg (the WordPress default editor), but with more setting options.
If you are new to Brizy, this article will show you how to use it. This article will focus on how to create a page with Brizy. To learn how to use Brizy to create a custom header, custom footer, and popups, you can read separate articles on this site.
Creating your first page with Brizy
Understanding the Brizy interface
Before you start to create a page with Brizy, it would be better to learn the interface of the Brizy editor first. Here is the screenshot of the Brizy editor.
As you can see on the screenshot above, the interface of the Brizy looks pretty simple. The initial interface consists of only the left panel and the canvas area. The panel on the right side (the settings panel), will only appear when you click the gear icon on the settings bar when you want to customize a certain element.
Here are the elements on the Brizy editor:
- The left panel
What we mean here is the fixed panel which lies on the left side of the editor (as you can see on the screenshot above). You can use this panel to add design elements (text, image, shape, form, button, and so on), reorder the blocks, set the page layout, switch to device mode (desktop, tablet, smartphone).
- Canvas area
In many articles on this site, you will find the word “canvas”. The word refers to your actual work area where you add your design elements.
- Settings bar
In some ways, the user experience of the Brizy editor is pretty similar to Gutenberg (the default block editor of WordPress). When you click a certain element on the canvas area, a bar that consists of rows of setting options will appear. You can use this bar to customize the associated element. The setting options are varied, depending on the element you click.
- Settings panel
On the settings bar of every element, you will see a gear icon. Clicking this icon will open a new panel on the right side. We call it the settings panel. This panel allows you to make advanced settings to the associated element.
Editing a page with Brizy
After learning the interface of the Brizy editor, you can start working with it. To edit a page with Brizy, first, create a new page (Pages -> Add New). Give your page a name just like usual and click the Edit with Brizy button to edit the page with Brizy. Clicking the button will take you to the Brizy editor.
Before adding any element to your page, you can set the layout page first (called template on Brizy). To do so, click the paper icon on the lower side on the left panel and select the layout you want to use.
The layout options available depend on the theme you use. After setting the page layout, you can start adding elements to your page. Start by adding a new block.
You can click the plus button on the canvas area to add a new block (we will cover further about block later). You can then add the elements from the left panel. To add an element, you can drag the element you want to add and drop it to a block on the canvas area (will also be covered further later).
Once done editing your page, you can publish it by clicking the tiny arrow icon on the bottom-right corner and select Publish Page.
You can also preview your page first before make it live. To do so, you can click another arrow icon on the bottom area. You need to save the page as draft first by clicking the Save Draft button before previewing your page.
Once you are done working with the Brizy editor and want to switch back to the WordPress dashboard, you can click the hamburger icon on the bottom-left corner and select Go to Dashboard.
Adding and managing blocks
Two terms you need to familiarize yourself with when working with Brizy: block and element.
A block is a container where you can place design elements while an element is the actual design element you can use to create your page. Brizy itself offers more than 30 elements in total (free version is limited 20 elements). On some page builder plugins, a block is called section while an element is called widget or module.
As mentioned above, to add a new block, you can simply click the plus button on the canvas area. To customize a block (such as setting the background color, margin, layout, and so on), you can click the icon similar to a mixer. You can see this icon when hovering your mouse over a block. Clicking the mixer icon will open the settings bar where you can customize the block.
To delete a block, you can simply click the trash icon on the settings bar. You can also reorder the blocks. To do so, you can click the block icon on the left panel. Drag a block downward or upward to reorder it. You can also delete a block from here.
A block can be saved to the library in case you want to reuse it later on other pages. To save a block to the library, hover your mouse over the block you want to save, open the settings bar and click the heart icon. You will be asked if you want to save the block to Brizy Cloud. If you want to save the block you own hosting server, you can simply click the Skip button.
To access the saved blocks or layouts, you can go to the Saved tab when adding a new block.
Adding columns
On some page builder plugins — including Elementor and Divi Builder — you are required to add a column when adding a new section. On Brizy, column is not a required element, but adding columns to a block would make your design way better and organized. You can use a column as a smaller container to place design elements. To add a column to a block, you can simply drag the Column element from the left panel and drop it to the canvas area.
The Column element will add two columns to your block. To insert a new column, hover your mouse over an existing column and click the arrow icon on the top-right corner on the column. Click the plus icon on the appearing bar to add a new column. To delete a column, you can simply click the trash can icon on the bar.
To resize a column, hover your mouse over the column you want to resize. Click and hold the column handle while dragging it leftward or rightward.
To add a background to a column you can open the settings bar by clicking the arrow icon on the column you want to add the background to. You can use an image as the background or use a solid color as the background. If you want to set the border color or set the box shadow, you can do so from the Border tab and Shadow tab on the color picker.
You can click the gear icon on the settings bar to open the settings panel in case you want to make the advanced settings to the column.
Adding elements
We have briefly covered this earlier above, but we will cover it further in this section. Elements are the actual design elements you can use to make your page looks eye-catching. On some page builders, you will find different terms. On Elementor, for instance, design elements are called widgets while on Divi Builder they are called modules.
Brizy offers over 30 elements in total. To add one, you can simply drag the element you want to add from the left panel and drop it to the canvas area.
To customize the element, you can click the associated element to open the settings bar. Please note that the customization options available on the settings bar are varied, depending on the element. To make the advanced settings such as padding, margin, entrance animation, and so on, you can click the gear icon on the settings bar to open the settings panel.
If you want to edit the default text content of the element that contains text content, you can simple block (or delete) the default text and replace with your own text.
To delete an element, you can click the trash can icon on the settings bar or simply press the Delete key on the keyboard.
Using keyboard shortcuts
To streamline your workflow, Brizy offers keyboard shortcuts you can make use of. You can see the list of keyboard shortcuts by clicking the hamburger icon on the bottom-left corner and select Shortcuts. Here are the keyboard shortcuts offered by Brizy.
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + Shift + V | Paste style |
| Ctrl + D | Duplicate |
| Delete | Delete |
| Ctrl + Left/right arrows | Horizontal align |
| Ctrl + Up/down arrows | Vertical align |
| Ctrl + Z | Undo last operation |
| Ctrl + Shift + Z | Redo |
| Ctrl + S | Save draft/Update page |
| Ctrl + +/- | Responsive zoom in/zoom out |
| Ctrl + Shift + A | Add a new block |
| Esc | Select the parent element |
The bottom line
As we mentioned in the opening section, this article is aimed at helping you to create your first page using Brizy. We have more specific articles (such as how to create a custom header with Brizy or how to create a popup with Brizy) which you explore on this website.
Brizy itself is a unique, modern page builder plugin to help you to create a website in a visual way using WordPress. To get started, you can use the free version of Brizy. To unlock more features like the ability to add dynamic content, create custom header and footer, you can upgrade to the pro version anytime you need to.
