In this lesson, we’re going to take a look at getting started with blocks now blocks are the key components you use to create your designs inside Brizy cloud to start working with them is very easy. All we need to do is click on the plus and that will open up the block browser. Now you can see the blocks are broken down into various different component sections. If we look on the left, first of all, we have blocks. These are the kits different designs we can pick and choose from at the moment.

We’re looking at kit number two. If we open this up, you can see we can switch between kit number one and kit number two, and basically these are just a selection of different designs based around the block elements. Let’s switch it back to kit number two. Next up. We have the styles option and this is where we can switch between the dark version and the light version of the same selection of designs.

For example, if we switch to dark you’ll, see all the same designs, are there they’re, just the darker versions switch back to light again, the same kind of thing. We then have things broken down into categories. This allows us to very quickly and easily jump through to any type of block design that we want. For example, we may want to take a look at the hero layouts. We can simply choose hero and that will then filter this down to show us all of the hero based block designs.

We can then scroll through to find something we want and click to insert it into a design. We can repeat that process for any of the different categories we have available. For example, we may want to insert a gallery we can select and that will show us all the gallery designs. If we switch it over to dark mode, you can see the dark variations of those designs. Now, if you prefer to start from scratch, you can do that as well.

All we need to do is switch back to all categories, and then we can start to create our own custom block, we’ll take a look at creating our own block designs. A little later. Let’s take a look at layouts next now: layouts are basically entire web page or website designs. You can see if we take a look at this car wash example there’s one individual layout. However, we take a look at the mechanic.

There’s six layouts: let’s open up the mechanic and take a look, you can see what this does now is it breaks it into two separate sections: on the left hand side we have a visual representation of the page or design we’re currently looking at. If we hover over this you’ll, see the scroll and show us every aspect of that page design. If we take a look on the right hand side, we currently have six different layouts or six different pages for this entire mechanic design. For example, we’ve got the homepage. We’re currently looking at we’ve also then got pages for the about page, a gallery page a contact page and so on, and you can see as we click on them.

It show us the representation in the left-hand pane and we can hover over and see the entire design. We could then go ahead and insert this into our page if we wanted to or we can pull in every single design. We’ve also got an option underneath that says, replace global styling. What this does is, if we select that, when we insert this template into our page, it will pull in all of the styling options, including the styling for the colors typography, alongside the images layout on all the design aesthetic. So what you basically do is by selecting replace global styling you’ll bring the design in exactly as you see it, in this representation on the left hand, side.

Let’s take a look at this in action. Let’s choose the option to replace global styling and say we want to import this layout, we’ll choose the home page and click the import layout button. That will then go ahead, download all the files and import this into our page that we’re currently working on and, as you can see, there’s the entire design, the styling, the typography, the images everything being pulled in. We can now go ahead and start making changes to this to get it exactly what we want using this as a starting point. Now, that’s pretty cool and a great starting point, but let’s just say we want to build something up ourselves using those blocks.

Let’s clear this design, we’re going to use the option to clear the layout, and that takes us right back to the beginning, removes everything from the page. Let’s click the plus, to open up our blocks browser for this design. I want to start off with a nice hero section and i want to use a light design, so we’re going to switch back to our light. Styles select the hero category, and now i can find a block that i want to use. I kind of like the look of this one, so i’m going to choose this option to insert that into a design and there we go.

We’ve now inserted that directly into our design. So now we can go ahead and make changes to any of the different elements. Let’s start by changing some of the text, we’ll select this heading we’ll select the text. I want to change and I’ll change that to vegetarian. If you want to make any other styling changes, we can use the options below and we’ll take a look at all of these in their own dedicated video as we go through this course.

If you want to change the button, the link or anything else to do with it, you can simply select the button. Click on the link insert the link you want, or to a block or to a pop-up or even to a file and again we’ll take a look at these options in their own dedicated videos. If you want to change any images, you can simply select the image. Click the image option and then you can change the image to something completely different. So let’s say we’re happy with this hero section: let’s go ahead and add another block in we’ll click, the add new blog option open up our browser and this time we’re going to switch to the dark style and we’re going to just choose something like the gallery.

So we can now find something that we like to look of, for example, this one. We click to insert that, and you can see that inserts the gallery directly below using the darker style and again we can edit any of the options inside your go ahead. Change the images, the text, titles, everything, let’s add one more block in – let’s add new. What we’re going to do is we’re going to do a contact option this time so we’ll select the contact we’ll find a form element that we, like the look of. I kind of like the look of this one, but i want the light version of it.

So we’ll select the light version insert that and there you go. We’ve now created our own custom page using pre-built blocks, but what if we want to create something from scratch, can you do that? Absolutely, let’s click on the plus again this time, instead of choosing one of the predefined blocks, will choose to create your own option. That will then insert a container now. This container gives us a little plus in the middle and we can click on the plus and that will open up all the elements from the left hand side.

Alternatively, what you can do is you can click on the plus in the left hand, menu and that will open up the same panel and this is we can access all of the elements. So, for this example, let’s add another column in let’s come down, choose the column. Option drag that over and drop it inside our first container. That’s now inserted a second column. You can see each of the columns has a plus inside it.

We can click on the plus and that will open up the elements option or we can simply drag and drop whatever we want into it. So let’s go ahead and find the image we’ll drop, that element into our first column, and you can see that now inserts a blank placeholder. We click on the placeholder and we’ve got a set of options. We can choose from. Let’s pick the first one, which is to allow us to choose what image we want, we’ll click to choose an image from our computer, we’ll go ahead and upload that and there’s our image inserted in.

We have more control options inside this dialog box. We take a look at images in their own dedicated video a little later. Next up, let’s go and add some more elements: let’s click the plus we’re going to go ahead and grab the text element, we’ll drop that into our design, and you can see that now inserts a text element, so we can go ahead and style this any way. We want and add whatever content we want inside you. So let’s replace this text there we go, let’s also go ahead and add a button.

So again, let’s come over to our elements, we’re going to find the button we’ll drag that into our design, and you see that now inserts a button we can go ahead. We can style this. We can position this. We can do everything we want directly inside the editor if we want to add a title in: let’s go ahead and add another text element in or position that above the text a and we’ll just change this and now we can go ahead and we can style That text any way we want pretty cool and that’s how easy it is to go ahead and actually create your own blocks. So now, we’ve seen how to insert blocks create our own blocks.

What about if we want to change the order of these blocks around well? Let’s go over to the left-hand section and this time we’re going to open up the option to reorder our blocks. You can see this now shows us a visual representation, a thumbnail of each of our different block designs. If we want to reposition these in any way, we can simply grab the block that we want and drag it to the new position and you’ll see that updates in real time inside our design. So again, if we want to remove this and push it down below, we can do exactly that and we very quickly and easily making changes to the order of our design.