Most WordPress page builder plugins work in a similar enough way. When creating a new page, you can start by adding a new container. A container is a large area where you can place all of the design elements. From column, text, image, button, icon, and so on. Each page builder plugin uses a different term for the container. In Brizy, a container is called a block while in Elementor and Divi Builder, a container is called a section. In the context of page builder plugin, the concept of block/section is pretty handy as it helps you to organize each section of your page. You will find how handy blocks/sections are when you are working on a long page.
For instance, when creating the homepage of a website, you can use different blocks/sections for the hero section, team member section, projects section, and so on. Take a look at the screenshot of the homepage of a website below.
The homepage above consists of 9 blocks as you can see on the screencast below.
If you have switched from WordPress classic editor to the WordPress block editor (Gutenberg), you might already know how blocks can benefit users and offer flexibility in the page editing process. For instance, if you want to add a missed block to the page you are working on, you can simply add a new block and then set the order to set its position on your page.
How to add a block in Brizy
As we mentioned in the opening section, when creating a new page (or template) with a page builder plugin (including Brizy), you can start by adding a block before adding any design element. To streamline your workflow, Brizy offers tons of premade block templates you can choose from. A block template is a block that consists of predefined elements. If you prefer to add and customize the elements yourself, that’s okay. Brizy also offers an option to do so.
To add a new block, you can click the plus icon on the canvas area on the Brizy editor. New to Brizy? You can read our previous article to learn how to use Brizy.
Select a block template you want to use. Clicking a template will import it to the Brizy editor. Or, if you have your own design concept and want to add and customize the elements yourself, you can click Create your own.
To streamline your workflow, Brizy allows you to save a block to the library. The blocks that have been saved to the library can be reused on other pages on other blocks on the page you are currently editing. Brizy also offers a cloud service to allow you to save the finished blocks to the cloud so that you can use them on different websites (on different domains). This feature is pretty handy for web agencies.
To save a block to the library, hover your mouse over the block you want to save and click the mixer icon to open the settings bar. On the settings bar, click the heart icon.
To access the saved blocks, you can click the Saved tab when adding a new block.
Turning a block into a slider
Need to add a slider element to your page? Brizy indeed has no element dedicated to adding a slider element to your page, but it doesn’t mean you need to install an additional plugin only to add a slider. In Brizy, you can turn a certain block into a slider. To do so, hover your mouse over the block you want to turn it into a slider. On the appearing settings bar, click the hex nut icon and toggle the Make it a Slider option.
You can read our previous article to learn more about how to create a slider in Brizy.
Creating a global block
The ability to add a global element is a common feature found on page builder plugins. Brizy also offers this kind of feature. With a global block, you can apply new changes to multiple pages at once as long the pages contain the associated global block you make the changes to. Understanding the concept of the global element is getting more crucial in Brizy as Brizy uses this concept on the custom header and custom footer.
To create a global block, you can hover your mouse over the block you want to turn it into a global block. On the appearing settings bar, click the hex nut icon and toggle the Make it Global option.
Reordering the blocks
When creating a custom header in Brizy, you need to reorder the blocks to place the block header at the top. Brizy has a feature to make it easier for you to reorder the blocks. Instead of dragging the blocks within the canvas area, you can do so from the left panel. Click the block icon on the left panel and drag the blocks upward or downward to reorder them. You can also delete a certain block from here.
Customizing a block
To make your design looks compelling, you can customize your block before you add any element to it. You can set things like the background color, width, height, border, set the margin, and so on. You can also apply a parallax effect, entrance animation, and divider.
Setting the background, height, width, and border
In Brizy, you can customize a block (and other design elements) via the settings bar. To open the settings bar, hover your mouse over the block you want to customize. To set an image background, you can click the Background tab on the appearing settings panel. Simply click the image picker to select the image you want to use. You can use a different image background for the normal state and the hover state. Simply click the icons on the left side to switch between states. To apply a certain filter to the image background, you can click the Filters sub-tab.
To apply an overlay to the background, you can click the Colors tab on the settings panel. You can also go here if you want to use a solid color background instead of an image. From here, you can also set the border color as well as the size.
To set the width and the height of the block, you can click the gear icon on the settings panel.
If you want it, you can also apply a parallax effect to the block background. Read this article to learn more.
Applying entrance animation and divider
The settings bar allows you to make basic customization. To add advanced customization such as setting the padding, margin, applying custom CSS, applying entrance animation, and so on, you can open the settings panel. To do so, click the gear icon on the settings bar and select More Settings.
To apply an entrance animation, open the Advanced tab on the settings panel. You can select an entrance animation effect on the Entrance Animation option.
To add a divider, you can open the Styling tab. You can select a divider style on the Type option beneath the Dividers option. You can add a divider whether at the top side or at the bottom side.
Brizy allows you to create both a custom header and a custom footer on your WordPress. However, the creation process is a bit different from other page builders. To add a custom header/footer to a page, you need to edit the associated page. Brizy has two exclusive block types for both header and footer. Specifically for the header block, there are additional setting options to set a header style (fixed, sticky, or static).
The bottom line
Section is the first thing you need to know and learn to create a page using a page builder plugin. Instead of “section”, Brizy uses the term “block”. Whichever the term you prefer, they are basically the same thing stuff. Probably, Brizy prefers the term “block” as it is more familiar to WordPress users. When creating a page or template with Brizy, you can add as many blocks as you want. You can use one block only of course. But, it’s not recommended as it would be way trickier to manage the design elements.
You can use blocks to divide your page into different sections. This will make the editing process way easier.