In this video I’ll show you how to get started quickly with Brizy. So, first of all, let’s create a new page, we’ll give this a name and we’ll just click publish. So, let’s start by adding a new block to our page. We can click this large plus, and this allows us then to choose any of the pre-defined pre-built blocks that ship with Brizy. We could also create our own and start from scratch.

We also have options across the top to switch over to full layouts, and this is for the entire website. Some contain multiple pages. Some are just one page: let’s go back to the blocks option and let’s choose one of these predefined blocks and use that as the starting point. So let’s choose this option right here. This then loads in all of the different elements for us now, once our block is loaded in, we can select any of the elements on this page.

We can also select the entire block itself and if we come over the block you’ll see in the top right hand corner we get these context options, we click and we can now start to edit the block itself. So we want to make changes to this. For example, the width of it whether it’s going to be boxed or full width, we can change things like that and we’ll cover all of these as we go through all the lessons in this academy, but for now just knowing they’re they on top of that inside Any section or block we have these different columns and you can see, for example, where we have this heading. It’s inside its own dedicated column. We click there’s a column.

On the left hand, side we come down underneath there’s different columns for this different section inside our block, so we’re going to take a look at all these different things when we take a look at how to build a page step by step now, once we’ve seen these options we can see that any of these have context sensitive tools inside there. So, for example, if we click on the heading, we get a pop-up menu. That shows us all the different things to do with that specific element. For example, the typography, the colors, the alignment and all those kinds of things. If we select the button, which is another element, we get different options associated with that very specific element, so things like the button, the typography, the color and so on.

On top of these options, we also have the ability to right click on any of the elements, and this gives us even more options, including shortcuts that we can use. So, for example, if you wanted to duplicate this button, picking up all the styling and everything that’s associated with it, we can simply hit duplicate and we now get an identical copy. And then, if you want to make any changes to this, we can simply come in. Make whatever changes we want, and you can see that changes all the colors for the background. We can change all that and if we want to get rid of this, we could simply choose the option to delete and that just makes the whole process very quick and easy moving over to the left hand side.

If we want to add in new elements, we can click on the elements option, and this then shows us all the different elements we have available to us. You can see we have things like text, buttons, icons and so on. We also have rows and columns which allows us to create the layers that we want, that we’ve just seen and also insert sidebars and short-codes next, on the left hand side, we have the option to take a look at any of the blocks that we have inside our design, so at the moment we only have one so, let’s add a new one in to see exactly how all of this works, I’m going to search for something that looks a little different from all the pre-defined layouts and we’ll choose this one of the headphones. We’ll insert that you can see that immediately pulls that into our design, hop back over into the left hand, side, and you see we can now reorder our blocks by simply dragging and dropping these around and that immediately updates inside our preview section. On the right hand, side of our design – if we want to reorder those again, we can simply drag them back into the right position.

On top of moving these, we can easily delete them by hovering over and click on, the x on the right hand, side, and that completely removes the entire block. Next up, we have the option for our global styling and we can choose from any of the predefined styles, and this will affect the fonts, the colors, the typography, all those kinds of things or you can create your own or edit any of these options. Now, if we move down to the final three options at the bottom, the first one we have is responsive and this allows us to choose between the three different kinds of responsive layouts, desktop tablet and mobile. So, let’s change this to tablet, and now we can see exactly what this looks like on a tablet device. If we want to make any changes to this to make sure it looks exactly how we want, we can do that, we’re going to come back and check it on a mobile.

We can see exactly how good this looks on a mobile device. Next, we have the option for our pages, and this is where we can choose things like the template. That’s going to be used, how we want to view this, and if we want to apply a featured image to this particular page. The final option has a selection of different things we can do. We can find out about Brizy itself.

We can head over to the support documentation or we can do things like go back to the dashboard from here now. If we pop over to the bottom right hand side, we have another little toolbar. This gives us some more options on how the interface itself will work and some of the things that we can do. For example, the first option is to show or hide any hidden elements inside our design. We’ve also got undo and redo.

We can easily preview our design in a browser and finally, we’ve got the option to update or we can click the little fly out arrow and we can clear this entire layout, save it or switch to draft mode that wraps up the really quick overview of the Brizy interface in the next video we’ll take a look at how to get started. Building your first page