In this lesson, we’re going to take a look at how we can work with columns and rows inside Brizy cloud to get started. Let’s click to add a new section. We click on create your own and we now have a new block with a container. So let’s go ahead and open up the elements panel on the left hand, side scroll down until we find the grid options and inside there we’ve got rows and columns. So, let’s start off by adding a row to our container, we’ll drag the row element into a container, and you see that now splits this into two columns inside a single row.

So now we’ve got our row and our columns in place. We have a few more options in how we can configure these different elements. So, for example, you see in the top left hand corner we’ve got this little grey circle with an up pointing arrow. When we mouse over this, you can see it highlights the entire row. We can click on this and that will open up a context-based set of options that allow us to do various different things.

For example, we can set things like background, colours background images, videos and so on. So, let’s see how this actually interacts with a row and then we’ll take a look at how that differs slightly for the way that we work with columns. So, first of all, let’s choose this very first little chip open that up and that’s our background options and we can choose between static images, videos and google maps. For example. Let’s just choose an image and you can see once that’s uploaded.

We now have that image in the background of our entire row. If we wanted to, we can also set up colors. So let’s remove this image, let’s go to the second option and inside there we can just read overlays borders and shadows. Let’s simply go ahead and choose a background: color we’ll pick this sort of minty green kind of color, and you see now that inserts that into the background of our row. So, on top of that, we’ve also got options now for linking the entire row, and we can do various different things with this.

Let’s open up the link option and inside there we can set this to be a standard, URL and link to a page. We can also go ahead and set this to be a block or we can set it to be a pop-up. So, in other words, we could set this to jump through to another part of our page or design, or we can have this open up a pop-up that we’ve created simply by clicking the entire row. If we move over to the cork section, we now have control over the way that this row interacts with the container it’s inside. So at the moment this is taking up 100 of the container width, but we can adjust that you can see if we bring this down to say, for example, 75.

It now only takes up 75 of its parent container. You’ve also got options then, for the height you can see, auto is set by default, but we can, if we want to choose a custom value. If we select that you can see, we can now set up the height in custom pixel value, and we can also set exactly how the content is going to be laid out inside that, based upon the height you’ve, also got more settings. If we click on this, you can see that opens up additional settings on the right hand, side and we can control our padding margin, corners and so on. So you can see at the moment we’ve got control over the padding and the margins of the corners, and this is being controlled on all four sides, but you can, if you want to easily adjust this and then control each side independently.

The same goes for your margins and also for your corners. You call the advanced section. You can see. We’ve got more options inside here as well, so we can choose whether you want to show or hide this particular row based upon the desktop or mobile and tablet. We can also control things like the zed index, apply custom, CSS, ids and classes to it and also a lot more now.

The next set of options we have are basically that allow us to clone or duplicate this entire row. So we click we get an exact duplicate of that we can also do, though, is we can simply click on the trashcan icon to delete it and there we go pretty simple. Okay, so we’ve seen how to interact with the rows, but what about the columns? How do they differ? Well, let’s hover over one of our columns.

You can see this now highlights in blue and in the top right hand, corner of each of our columns. We get a blue circle with an app arrow now, as opposed to the grey circle. So let’s go ahead and click on that and again you can see we get a range of different options, but these are specific to the column we have selected. So again, we’ve got those options for dealing with the image. So if you want to add an image to the background, we can do that.

We can also set filters inside there to apply to the image we can come over and choose a background color. So let’s, for example, choose this purple color and you see now only that particular column is affected. The same goes for the link. We can also go ahead and add another column in simply by clicking the plus, and you can see now we have a third column again. We’ve got the option for choosing the content position, so we can choose between top middle and bottom.

If we click the more settings again, you see, we now have options on the right hand, side for both the styling for our padding margins and corners and so on, and also the advanced options we can. If we want to go ahead and duplicate this and again, we now get a fourth column. Now an identical duplicate of our first one with our purple background and everything or we can go ahead and we can click on the little trash can icon to remove it. And we can do the same again for any of these columns to simply go ahead and remove them. Now.

You’ve probably noticed that every time you have a column inside Brizy cloud, they’re, always equal width. You may not always want that. So Brizy cloud makes it incredibly easy to make changes to that you’ll see when we hover over. We get the blue border and in between any of our different columns, we get this little blue pill shape. We can simply hover over that.

You can see our mouse pointer changes and now we can click and drag, and we can set this to whatever size that we want. We get a little visual representation above to tell us exactly what’s happening so there we go. We’ve now set something up around 70 30 If you want to make changes to that again, you can simply drag that over as you see fit. So it’s incredibly easy to make these changes directly inside the editor by simply dragging and dropping your column, widths.