In this video we’re going to take a look at the elements and elements panel inside Brizy cloud now you can access the elements panel in two distinct ways. We can click the plus inside any column, row or section, and that will open up the elements panel from the left hand side. Alternatively, if you want to, you, can simply click the plus in the top left hand corner, and that will do exactly the same thing. This now lists out all of the different elements: the building blocks that we can use to create content inside our pages texts, buttons, icons, videos, all those kinds of things, including layout options like columns and rows. So, with the elements panel open we’re ready to start adding elements to our design to create the page, the design, the layout we want to work on.

So at the moment we’ve got a container, let’s go ahead and add in a row, so we simply drag that and drop that into the container, and you can see that now inserts the element into our design. Now we can go ahead and click on the plus. If we want to – or we can repeat the same procedure and drag any of the elements from the left-hand panel, let’s start off by adding an image to our column layout, we’ll grab the image element, we’ll drop that into our column, and you can see that now inserts a placeholder, we now have three layers of control over this particular element. If we select the element you can see, we get the first layer, which is this context-based pop-up. This allows us to do things like choose the image set, links, alignment and so on.

If we click on any of these that’ll open up the second layer, so now we can choose the image we want to work with the zoom level, whether you want to open up in a light box and many other features. Let’s go ahead and add an image. We add this one in and now we can go ahead and access the third level. So, for example, if we come over now to the little cog icon, you can see, we’ve got an option for more settings. If we choose that that will open up the options from the right hand, side that allows us to control various other aspects of this particular element.

So, for example, if we switch to the styling section, we can adjust the padding and margins, so we may want to add a little bit of margin around this. Let’s just set this to be all four sides, and then we can just simply drag this and create our margin. As simple as that, we’ve also run things like corners. You can see, we can now apply that effect and we can adjust things like the position, whether this is absolute or fixed. If we switch over to the advanced section you can see, we can also show and hide this based upon the devices being viewed upon apply.

Zed index CSS, id’s and classes, and so much more. Let’s go ahead and reset all of these values. Now, we’ve reset all the values: let’s go ahead and add another element: let’s go back up to the element panel, we’re going to grab this text element and drop that underneath the image you can see that now inserts a small block of placeholder text. We can select this and you’ll see this time. We get a different selection of tools.

Some of these are common things like the cog icon, links, icon and so on. Other ones are unique to this particular type of element, so we want to change things like alignment. We can do all those kinds of things directly inside you, you might want to send to this set to the right and so on. You might want to change the typography, and you can do that inside here as well. So this, for example, we’ll choose Montserrat as our font and our font updates.

Accordingly, let’s go ahead and add one more element. Just so, you can see and get an understanding of the common different options we have and the unique options based upon the type of element we choose, we’re going to come back up. Click on the plus this time, we’re gone to grab a button and position that underneath our text, you can see that now inserts the button. If we click on there, you can see again we get a range of unique options alongside some familiar options like the options for alignment and so on. So if we want to, we can click on this first icon, which allows us then to set the button size.

Fill corner radius and so on. We can also set an icon inside you. We can remove one, we can set the position, the size, the spacing and so on. We can adjust the typography, we can adjust the color. So let’s just choose a different color.

For here we can set the link option and you can see inside here we can choose between a URL a block, so we can move to another block inside our design, further down the page and so on, pop-ups or we can link to files. So, for example, let’s keep this really simple. Let’s link this to the google home page once you’ve inserted that in there we can then choose to open this in a new tab or make it a no follow link. Now i don’t need to go into these right now. These are a little bit more advanced than i want to cover in this video, but this should give you a solid understanding of how you can start to use the elements inside Brizy cloud to create your designs and all the different types of options you have based upon the different element that you choose to insert