In this lesson, we’re going to dig a little deeper into columns and rows inside Brizy. So, let’s add a new section inside here we’re going to create our own block, and you can see this now puts a block container inside there. For us, let’s hop over to the plus in the top left hand corner and you can see, we’ve got row and we’ve got columns. Let’s start by adding a row in so we’re going to drag and drop that into our container, and you can see that now inserts a new row broken into two columns, so you’ve got a left column and we have a right column. We can start adding extra widgets inside here when we’re ready, but we’re going to focus more on how these containers can be interacted with and configured.

You can see in the top left hand corner we’ve got this grey circle with an up pointing arrow. This is where we can select the options for our row. We select there and you can see we get a little pop out with six different options. So, let’s take a quick look at some of these options to kind of get a feel for how rows and columns actually differ. Now we’re currently looking at the row itself and like i say that contains two columns, so the first option we have inside you is the background option.

Let’s select that and inside there you can see we can choose from different types of backgrounds. We’ve got the option for images, videos and also maps. Let’s take a look at adding an image, and i can show you, then how the row is affected by setting a background image and how that differs slightly from the way that a column works. So, let’s select an image, we’ll choose this option and we’ll click select, and you can see that now fills out the background of the row and that row expands or contains the two columns. So you can see that that is now set as the entire background.

For that entire row, let’s remove that image. For now we can also set colors inside here. So we choose the second chip. You can choose between overlay, border and shadow options. So, let’s just say: we’ll set this to be this blue color and again, you can see it works in exactly the same way as what you have when you’re working with images so pretty cool.

We can also set the entire background to be a link. We can have a URL block or a pop-up. You’ve also got more options, so you can see we could set this entire row to take up a hundred percent or we can actually make it smaller. So we can say we might only want to take up something. Like 65 percent and you’ll see that now makes the row smaller inside the container itself.

We can also set the height inside here. So if you want to set an automatic height, which is where it is by default or we can set a custom height and then we can adjust this to a value that we want and we can also control the position of the content. Currently, you can see that our two columns are sitting right at the top, but we can set this to be set to the middle or we can set it to the bottom. So you get full control over the position, the size and everything else to go with it. Let’s reset these values.

Let’s take a look at more settings if we open that you’ll find what we have is more options on the right hand, side we get this extra pop out, and this is where you’ve got options for padding. You can see, we can group all padding together or we can separate those out to the four component sides. We’ve got the same for margins, we can adjust the corner and if we come into advance, we’ve got even more options inside there now. The two final options we have are the ability to clone. So we can duplicate this and get an identical replica and the final option is the little trash can and this allows us to delete.

So you can see very quick, very easy now, let’s take a look at what we have for the column settings so this time. If we come to the right hand, side of either of our columns, we get a little blue circle with an arrow and that’s just denoting the fact we’re editing or selecting a column as opposed to the grey circle with the arrow, which is for the row. So, let’s take a look, you can see inside here. We’ve got a lot of very similar options. We’ve got the background for the images and you can see we can choose an image.

We have slightly less options inside here, though we now only have an image. We can’t set things like videos and those kinds of things. We’ve also got background colors, so we can select that and let’s choose a different color, and you can see now what’s happening, is that this is just a column that sits inside the row and they both have their own separate options. So we’ve set the road to have a dark blue background, but this left hand column is said to have a light grey background. So let’s just undo that and now we can also go ahead and we want to apply a link or pop up to this.

We can do that on a column basis. We can also click the plus to add another column, so we want to add a third column. We can do just that inside there again, we’ve got options for the content and the position of the content, and we also have the more settings option which will bring out that right hand panel again for us, we can also duplicate and we can delete from inside. Here now the other thing we have that makes life easy. When we’re working with these columns is, we can easily come in and adjust the size of them.

You see that whenever we mouse over any of the columns, we get this blue border around and you can see we get these handles on the left and the right hand side. By simply dragging these handles, you can see we can very easily adjust the size of any of our columns visually, very quick and very easy to work with