In this lesson, we’re going to take a look at the elements and element panel inside Brizy now to access the elements panel. You have a couple of ways of doing this. You can click the plus in any of the columns or rows or, alternatively, you can click on the plus in the top left hand corner. Both of these will open up the elements panel and display all of the different elements you can choose from with Brizy. So what we’re going to do first of all, is take a look at how we can add our first element to the page: let’s go ahead and add an image: let’s grab the element drop that into the column or row that you want to insert it into this now places a placeholder ready for us to choose the image we want.

If we now select this, it opens at the context options. So this panel has three different layers of control, so we’ve got this first layer, which is where you can see all the different icons based upon the different element you’ve chosen. We can then go ahead and click on any of these icons to open up the second layer. This is now where we can do things like choose the image, the image options, the zoom, those kinds of things. We can also control things like the alignment of objects, text, images and so on, and then the third layer is where we have additional settings.

So if we open up the settings panel, you can see we have more settings at the bottom once we select that that now opens up the extra more settings panel on the right hand, side – and this is where we can control things like padding margins and some advanced options: now: let’s go ahead and just choose the image we want to insert into our image element: we’ll choose the first icon and from there we can now choose to either upload or select an image from our media library. Let’s go ahead and do that. We’ll click on it and this will open up our media library. Now we can choose the image that we want to insert. So, let’s find this image of a watch, we’ll select that and choose select.

We’ve now gone ahead and added the image into the element. We can go ahead now and apply any styling links positioning all those kinds of things if we want to for now, though, we’ll just leave it as it is next we’ll go ahead and add another element in this time: we’re going to choose the text element. So, let’s go up to the top left hand, corner and click the plus to open up the elements panel and we’re just going to simply go ahead and grab the text option and position that underneath our image element, this now pulls in some basic text. For us again, we can click to select this and we now have a different range of options again.

Lots of these are going to be common things like alignment and so on. Other things are going to be based upon the different elements you’ve inserted into your page. So for this example, we leave the text as it is, but if we wanted to go ahead and apply different kinds of styling or select different kinds of fonts and so on, we can do that by clicking on the first icon. We can easily go ahead then, and choose from any of our predefined styles. We can adjust the alignment, we can do loads and loads of things using these options.

The third and final element we’re going to add in we’re, going to go ahead and add a button. So again, for more elements: panel, let’s grab the button icon position that way we want inside our design, and you can see that now inserts the button again, if we click on the button, we get all the context options and this time you can see the first option is where we can click and choose the kind of button. We can do things like the size of this. We can align those we can control the fill the corners lots of options inside you. We could even go ahead and control the icon, that’s being used and the position of the icon.

Okay. So I like the look of my button, let’s go ahead and apply a link to it. We’ll choose the link icon, and this opens up the option for links. You can see we have various different options to choose from a simple URL. We can go ahead and link this to a block inside our design.

We can also control pop-ups using this as well we’re going to keep it simple and just use a URL to simply insert the URL we want to use, and if we want to, we can also set this to open in a new tab and also make it No-follow we’ll leave those as they are for now, though, this kind of gives you the basics of what you need to know to get started, using the elements and all the different levels of element control we have inside Brizy.