In this video we’re going to take a look at the basic building block elements that you use to create your first pages using Brizy we’re going to take a look at the box model, we’re going to take a look at rows, columns and elements. All the key things you need to know to start building great looking pages using Brizy. So what exactly do i mean by the box model? Well, if we take a look at the basic layout that we have on screen in front of us, everything is made up of basically boxes. So, for example, our page is a box, the heading section and our main content is inside a box.

We then have images that sit inside two separate boxes inside the main box. That is the page, so everything is basically just boxes once you kind of start to see things like that, you’ll very quickly get accustomed to building and viewing websites in that box model mentality. But why exactly is the box model so useful? Well, basically, it allows us to scale and move things around on the page, knowing how things are going to work. So this is great when you’re working with desktop layouts, then you want to switch to a tablet view and then finally, a mobile view on all the different sizes that sit in between all those different ranges.

So let me show what i’m talking about. Currently, we have everything kind of stacked on top of each other, except for this sort of two colors, which is side by side. Let’s quickly, just change our preview from looking at the desktop layout and we’ll switch over to tablet layout and you’ll see what happens now. Is everything adjusts accordingly for the smaller screen real estate? If we switch over again into mobile view this time you see, things now start to stack on top of each other as opposed to side by side, so the layout becomes more fluid and also more predictable.

So that’s the basics of what the box model is and why it’s so useful now, let’s take a look at rows and columns. So, for example, if we take a look at this section, you can see we have a row, that’s denoted by this blue box around it. We have several different things we can do inside here. We can affect the row itself. We can click on this top left hand side, and we can do things like open this up.

Adjust the width set, the height additional settings make it linked, set the background. Color, set background images, videos, hot spots loads of really useful things. If we wanted to, we could increase this and add in extra columns. So, for example, if we come over to the top right hand side we get this as blue arrow, we can click on there and we can click on the plus. This will then add a second column inside the row still working inside our box model.

So now we have two separate columns. All our content in our first column is moved over to the left hand, side and then the right hand side gives us a blank column. We can start adding more content into and again we can do things like adjust the background. Color make it a link. All those kinds of really useful things to remove a column is just as easy as adding one.

We can simply come back up to the blue arrow in the top right hand, corner click and just choose the trash can and that will then remove it, leaving all our normal content from our first column all intact. The same thing goes, then, for the second block we have. This is again another row with columns inside it which we can adjust the sizing of. So if we wanted this left hand side to be smaller and the right hand side to be larger, we can grab this little blue spacer and just drag it across, and you can see that adjusts everything working perfectly and again. If we switch over to mobile view.

You can see everything stacks on top of each other and the resizing also takes into effect. So it’s really easy to get used to working with this box model and setting things up to look great across all the different kinds of devices. You want your website to show on now that we’ve seen exactly how to get started using rows columns in the box model. Let’s take a look at how we can add in different elements. So what we’re going to do is we’re going to add a new block underneath so we’re going to add new, we’ll say we want to create our own, and this gives us a blank row ready to start adding our own custom content to.

We can select it and we can start adding anything we want. We can also modify the entire block. If we come over to this top right hand, side, we get the set of options, we can click, and now we can control how this particular block actually works. So, for example, we may want to send a background color, let’s just click on it – and we’re going to set this to have a background image, we’ll choose the image option and we’ll just find a background that looks great, choose this option and we’ll just select it. This now places that inside that block ready for us to start adding our content into.

So let’s create two columns to do that, because we currently have a blank block. All we need to do is click plus and choose the option for columns we’ll drop that inside there and that automatically creates two columns. If you need additional columns, you can simply click on the blue arrow click on plus. We now have three separate columns. So now we can go ahead and add whatever we want inside here and to do that, we’re going to click plus and that opens up all the elements on the left hand side.

So the element panel gives us access to all of the different elements we can choose if you were using the free version which we currently are. This is what you’ll currently have access to. However, there are lots, more options inside the pro version and we’ll take a look at pro as we go through the different lessons. So, let’s just say for this example, we want to choose an image. We can simply drag that drop it inside and we now have a placeholder ready to choose our image.

The same goes if we want to drop in some text. Let’s grab the text, element drop that into the second column, and we now have some filler text inside there. We’ll do the same again, we’ll add one more image to the right hand side, and we now have our basic layout all set up. Let’s go ahead: choose some images, we’ll just select and we’ll click on the little image icon, click, the image, upload option and we’ll choose some images. We’ll choose this one and we’ll do the same for our second image, we’ll select it choose the image option and we’ll pick an image.

Finally, we’ll alter the position of our text in the centre, we’ll click the column and we’re going to click on the cog icon, and then we can adjust the position of the content, we’ll position it in the centre and we’re done that’s how easy it is to start creating your first page layouts using Brizy.