In the context of page builder plugin, column is a crucial enough element. Columns make it easier for you to set the layout of the design you are working on. Just like other page builder plugins, Brizy also allows you to add columns. In this article, we will cover how to add columns in Brizy and how to customize a column.
Brizy is a bit different from other page builders like Elementor and Divi Builder. Brizy doesn’t treat columns as an exclusive element. It’s considered as a regular element just like text, image, button, and so on. In other words, a column is not a required element in Brizy. You can create a design (page or template) without adding a column. However, it’s not recommended. In addition to making it easier for you to set the layout of your design, using columns makes it easy to organize the actual design elements (text, image, icons, buttons, and so on).
How to add a column in Brizy
When working on a page or template using Brizy, you can add as many blocks as you want. On each block, you can add columns before adding the actual design elements. You need to add a block before being able to add a column as block (called section on some page builders) is a required element. Read here to learn more about block in Brizy. In case you are new to Brizy, you can read our previous article to learn how to use Brizy.
Once your block is ready, drag the Column element from the left panel to the block on the canvas area.
By default, the Column element adds two columns. To add a new column, you can hover your mouse over one of the existing columns and click the blue arrow icon and then click the white plus icon on the appearing bar. To delete an existing column, you can click the trash icon on the appearing bar.
In Brizy, you can add a new column to an existing column. The pink line — when you hover your mouse over a column — indicates that the associated column belongs to another column (the parent column). Simply drag the Column element to an existing column to make it sub-column.
Customizing the column
Before styling up a column (such as setting the background), you might want to set the size first. By default, each column has the same size. You can resize a column by pressing and hold the column handle and drag rightward or leftward.
To style up the column, you can hover your mouse over a column you want to style up and click the blue arrow icon to open the settings bar. To set the background (image background), you can click the Background tab (leftmost) on the bar. Click the image selector to select an image. Or, if you want to use a dynamic image, you can click the database icon. You can set a different image for each state (normal and hover). Click the icons on the left side to switch between states. You can apply image filters from the Filters sub-tab.
You can add an overlay to the image background if you want it. To do so, you can click the Colors tab on the settings bar. From here, you can also set the border color as well as the border size. Also, you can set the box shadow. If you want to use a solid color background instead of an image, you can simply remove the image (from the Background tabs).
To make the advanced settings to the column (such as setting the margin, padding, and border radius), you can click the gear icon on the settings bar followed by the More Settings link. This will open the settings panel where you can make the mentioned advanced settings.
Once your column is ready, you can start adding the actual design elements to it. You can either customize the column before you add the actual design elements or before adding them. That’s totally your preference.
