In this video, we’re going to take a look at all the building block elements that you use to create your first pages with Brizy cloud. We are going to take a look at rows. The box model elements all the key things that you need to start building pages. So let me start off by explaining what I mean by the box model. Let’s start with our page, which is effectively a box inside that box, we’ve got another box.

In this example, we’ve got a box which is a row inside there. We have various different elements: text, buttons and so on. If we scroll further down the page, you can see, we have two images which sit inside their own boxes, which in turn sits inside the main box, which is your page, and this is basically how the box model works. The beauty of the box model, though, is when you start to see it everything as boxes. You start to understand how you can work and interact with the various different views in which you can work, for example, desktop tablet and mobile.

So let me just demonstrate the point: let’s come over and change our view to tablet view, and you see what happens is everything is still fundamentally laid out in the same way, our columns are side by side for our images. If we take a look above, you can see, everything is still stacked on top of each other, and this is how it’s working. Basically, each box is stacked, either on top or side by side, depending upon the size of the view. Now, if we switch over to something like mobile view, you see what happens now is instead of put stacking our images side by side. It now stacks them on top of each other, still retaining that simple box model methodology.

Another benefit of understanding and working with this box model is: it offers a lot of fluidity when you’re creating your designs. This then helps you understand how your page is going to flow based upon the different size devices you’re working with next, let’s take a look at rows and columns. Let’s switch back over to our desktop view, scroll back up and take a look at this section. You can see if we come over, we get this blue border around it. In the top left hand corner.

We can now affect the row by using the grey circle with the arrow. If we select this, we can set a range of different parameters. We could do things like set the background: videos colors, those kinds of things we can set a background color. We can make the entire row a link. We can also come in and set the width of this the height and a lot more settings available inside you.

We kind of also if we want to, we can delete this entire row now inside of a row. We have a column now inside each row. We have at least one column. So let’s come up to this. Let’S go back over and you can see.

We now get this blue border around our column. If we come to the top right hand corner, we get a blue circle with the up arrow, as opposed to the grey for the row. We can select this and again we get a selection of similar options. Again, we’ve got things like the background image set background. Color set the entire column this time to be a link.

We can also go ahead and add an extra column in should we want to. If we click on that, you can see. We now get a second column on the right hand side. So all our content is pushed over to the left hand, side and then the right hand side is ready for us to start adding new elements inside elements like text, buttons, images, video and so on. So we’ve seen how easy it is to add a column.

Removing one is just as easy from our pop-up at the top right hand, corner of our column, we can simply come over click. The trash can – and you can see that removes that entire column, leaving all of our left column, information intact and now expanded to take up the space where we deleted the second column. So now we’ve seen how to insert and delete extra columns how to deal with rows. Let’s take a look at this example underneath, so this is a simple box model with two columns inside a row. If you want to adjust the size of any of these columns, it’s very easy to do.

All we need to do is grab this little blue chip in between the two columns, click and drag, and you can see that will now resize each of the columns and their contents on screen for us really easy to do. If we switch over to a different view, for example, mobile view you can see, everything is still laid out perfectly exactly as we’d want it to be. So now that we’ve finished up working with rows, columns, explain the box model. The final piece of the puzzle is how we deal with elements. So let’s go ahead, go back into desktop view, let’s go ahead and add our own new section, underneath with a click to add a new block, we’ll create our own and you’ll see.

This now creates a new section with a row already in place for us. We can now go ahead and start adding any of the elements that we want. We can do that by clicking on the plus and that will open up all the elements. From the left hand side, alternatively, we can click on the plus, on the left hand, side, and that will do the same thing. This shows us all of the different elements we have access to for this starting point: let’s scroll down till we find the grid option.

Let’s go ahead and just add in a column we’ll drop that inside there and that now creates a two column layout for us. So now we can go ahead and add any elements we want inside these. So let’s go ahead and add in an image on the left hand, side to start off with you can see that puts a placeholder. What we need to do is select this, and then we get a menu option that pops out that allows us to do various different things. For example, the first option allows us to choose an image to insert we’ll select that we’ll click to upload an image, i’ll select an image and click open and that now inserts the image into the left hand side for us.

We’ve then got all controls we want inside. Here we can adjust the zoom the focal point, lots of great options. If we come over to the right hand, side and select this, we can now go ahead and insert another element in so for this example, let’s select plus we’re going to grab the text element and drop that into there. You can see that now puts in some placeholder text. If you wanted to put a heading in, we can simply drag another piece over drop that inside there we can come in and just choose to edit this.

Let’s just call this the title: we’ll change the typography inside there and we’ll set this to be heading 2. There we go so now: we’ve inserted elements into the left-hand side and the right-hand side. Now, if we want to adjust various different parts of each of these different columns, we can come over to the blue little circle in the corner. Select that – and we can do things like adjust the position of the content inside there. So, let’s click on the little cog icon and you can see this now gives us the option for the content position.

Let’s select center and that’s now inserted that into the center position, so very, very easy to work with. We can also affect the entire section to do that. All we need to do is come over to this little option in the top right hand, corner click and that now opens up a range of additional options that will affect the section. So we can do things like set a background image inside you background video apply filters. We can set a parallax effect lots of great options for this example, though, let’s just set a background, color we’ll select the color option.

So now we can pick any color. We want from the color picker or we can use any of our global colors from the set of options at the bottom. For this example, though, let’s just set this to be the pale grey background, so it matches everything else and we are done with that. We’ve now just affected the entire section, and that’s how easy it is to get started using the various different options we have working inside the box model with columns, rows and elements inside Brizy cloud.