In this lesson, we’re going to be taking a look at getting started with blocks now blocks are one of the key components when building pages and websites using Brizy. Let’s start by taking a look at the pre-built blocks that we can use. It’s very easy to get started. All we need to do is click on the plus and we can open up and take a look at all the different blocks that are available to us now. Brizy makes working with blocks incredibly easy.

Any other predefined ones are broken down into blocks styles and categories. So we take a look on the left hand, side we’re currently taking a look at kit number two. If we open this up and choose kit number one, you can see that opens up a range of different pre-defined blocks, switch back to kit number two. We also have styles now. This is basically the same layouts broken down into a light version and a dark version.

So currently we’re looking at all the light options and you can see if we scroll through, we have lots of different choices. If we switch over to dark, you can see, everything is exactly the same, just a dark variation of the same design and layout. We also have categories underneath now. Currently we are looking at all categories, so we look at all 500 plus template designs. We can also break this down into the various different category types.

So, for example, we may want to put a hero section into our page. We can click on hero and take a look at all the great designs that are specific to be used as a hero section on your page. If you want to add features in, we can choose the features option. We can also break things down into contact and so on now, you’ll also notice from all the blocks we have. Some of these are separated out as being Pro.

If we take a look at this top right hand corner, you can see, we have the word pro in the corner and various different designs inside you have a pro tag associated with them. That basically means you need to have Brizy Pro to be able to use these templates anything else completely free and you can use those whether using the free version of Brizy or the Pro version of Brizy. Now, on top of these great looking blocks, we can also create our own and we’ll take a look at creating one a little later in this tutorial before we do, though, I want to take a look at layouts now. Layouts are basically a collection of pages or a single page for landing page kind of design, grouped together under a common style. So, for example, if we take a look at this very first option, the agents one it currently has four layouts.

If we select this layout, we can take a look at all those different designs, so currently we’re taking a look at the home page design. If we mouse over, you can see we get a scrolling representation of the entire page design. We’ve also got a design for work, we’ve got a design section for about, and finally, we have a section for contact. We can go ahead and install any of these and use those as an entire set, or we can load them in one page at a time. You’ll also notice, we have an option at the bottom says: replace global styling.

If we select this when we import this layout, it will bring all the styles and everything with it to make sure that what you see is exactly what you can see in this representation. So we’re bringing in everything colors fonts, styling everything, okay, so let’s go back to our blocks and take a look at how easy it is to start building a page up using these predefined blocks as a starting point. So, let’s start building a typical page using some of these blocks as a great starting point. So the first thing you want to do is we want to place a hero section right at the top of our page, to call attention to what’s going on. So, let’s just filter these down in the categories to heroes.

What we’re going to do is we’re going to grab this one. This looks pretty good, we’re going to click that will now download all the assets for that the images everything and insert that into our design. So we’ve now created a hero section which we can go ahead and make any changes we want to. If you wanted to change the title, we can simply click inside there and just change that to whatever we want. So, let’s replace the heading.

We currently have we’ll drop something different inside there and next I want to change the background image to do that. We’re going to use the block options in the top right hand, corner and we’re going to use the option for background, we’ll select that we’ll remove the current image by clicking the X and then we’ll click to either upload or choose an image. I’m going to choose this image and click on select to insert that into our design. We’ve now just changed the background, so we’ve created our hero image. We’Re now ready to add some more content to our page.

So let’s do that. Let’s come down and click on. Add a new block and this time we’re going to choose one of the dark designs. So I’m going to use the option for features and I’m going to choose this option now. Select that and you can see that’s now inserted directly into our page.

So we can go ahead and make changes to any of these change, the images, the text and everything and continue to add more blocks to this design to get exactly what we want. You can see we can very quickly and very easily make changes to the design and everything else to do with it. So now we’re building up a page, that’s pretty cool, but what if we want to start completely from scratch, can we do that? Absolutely? Let’s click add a new block and instead of choosing one of the predefined block, layouts, we’ll click on create your own that now inserts a new blank container ready for us to add any content that we want in.

So we need to do. Is click on the plus and that will open up all the options. We have all the elements we can choose from inside the left-hand section. Alternatively, you can click on the plus in the top left-hand corner and that will open up the elements panel for you. So let’s go ahead and build something: we’re going to add a new column in just to give us two columns now, in the left column, we’re going to go ahead and add an image and, in the right hand, column we’re going to add some text.

Now, we’ve added the elements we can go ahead and add the content into those elements. So, let’s start off with our image container: let’s select it click to insert our image and choose the image to use we’ll choose this watch image and we’ll select it next up. We’re going to put the text field in the right hand, side! Let’s select all of this, and we’re just going to paste in our little block of text. So now we can go ahead and style this in any way that we want.

That’s the basics of inserting your own blocks and customising things. So next up, let’s take a look at how we can reorder things inside our design. Again, if we come to the left-hand panel, this time we’re going to open up the reorder block section, and this shows us a visual representation of all the blocks. We have whether we’ve created them ourselves or we’ve inserted them as part of the block library. So, let’s say, for example, we want to reorder this gallery and put that underneath our hero image.

All we need to do is drag this up and position it where we want, and you can see it immediately changes it inside our design same thing again. If we want to reorder this, we can position it exactly where we want our design updates in real time. Immediately so we’ve seen how to create our own designs, we’re going to clear this now, so we can take a look at how we can pull in an entire page design, as opposed to a block design. Now, there’s a really quick way of clearing. If we come down to the bottom right hand corner and we click on the little arrow next to update, we have an option inside there that says clear layout, we’ll select that, and that takes us right back to the start, with nothing at all on our page.

So let’s go ahead now and click on the plus again, but this time we’re going to hop over to the layout section, let’s find a design that we like we’re going to look for a nice, simple, clean layout. So let’s take a look. I like look at this option. I’m going to choose this and you can see this is a single page layout, so we’ll choose to import this layout, give it a couple of seconds and that will import all of the relevant information for us, and we now have our entire design pulled in ready For us to start making any changes that we want to any of this layout, we can use all the tools we just covered or the option to reorder things. If we want to all the skills I’ve just shown, you can be used to customise this entire layout to get exactly how you want.