We’re going to take a look at how we can handle margins and padding inside Brizy Cloud. Now there are various different ways. We can approach this, so I’m going to show you all the key ways. So, first of all, we could interact directly on the page itself. You can see if we come to the top section we get this blue highlight and the arrow changes to this two-headed arrow.

We can now simply click and hold the mouse button down and adjust that directly inside there very, very quick and easy and a nice visual way of working. We can do exactly the same at the bottom. We can simply click hold and drag, and this allows us to move things around in a much more visual fashion. But if you want to get really detailed make sure you insert exactly the values you want, there’s a really quick way of doing that too. Let’s come to the top right hand, side of this particular section.

We get this little option panel, let’s click it and you can see inside there. We now get a range of different options if we click the Cog icon that will open up the settings panel. We can open up more settings and this will open up our panel from the right hand, side, and we can now attach any kind of values we want to the margins and pad in directly inside you. So, first of all, under the styling tab, we’ve got padding. You can see.

Currently we have all four values are operating independently, so our top is set to 198. Let’s just tweak that to make sure it’s 200 to be perfect and we can do exactly the same with the bottom. We can click inside there and we can set the value we want. We’ve now set exact values you can. If you want to also link these together, we simply need to click the link, value icon and now all our values are set together.

The nice thing about working with Brizy Cloud, though, is: if we change that back you can see. Our original values are inside there, so we select the first option and make an adjustment. All four sides are now being affected. Click back inside you can see. All four sides have now been set to the same value.

We can do exactly the same with the margins. If we come to the margins you can see, this is currently set for all of the values to be linked. We can unlink those and now work with these independent of each other, so we want to adjust the top. We can easily adjust that inside there. So that’s how easy it is to edit and work with the padding and the margins on a particular section, but you can also do this on an element level.

So, for example, if we take a look at this yellow box, we’ve got various different elements inside you headings text those kinds of things we can adjust those as well. So all we need to do is select what we want. Again, click the little Cog icon hit. More settings and that’ll open up the same panel, but now we’re only editing the margin and the padding’s around this specific element we can do now is we can come over to the right hand panel. We can click the little lock icon to lock this in place.

So we can make changes to the values and the panel will stay there and now we can go ahead and adjust the margin or the padding’s on only this particular element. So if we adjust things you can see that now closes the spacing app. So we may say we want this heading to be a little closer to the subheading above it or we might want to give it a bit more breathing space. We can simply adjust those values and that will only affect that particular element. It’s as simple as that, and you can apply this to every single element inside your design to find in tune that spacing now, let’s go ahead and take a look at the spacer element.

First of all, let’s just reset these values to their original values. To put it back to exactly what it was and would unlock this panel from the right hand, side: okay! So now, let’s go over to our elements: on the left hand, side, click plus and we’re going to go and search for spacer. There’s our spacer element. We’ll now drag that into our design, we’ll position that below this heading – and this now is basically a spacer that allows us to adjust spacing as its own dedicated element.

So again, we’ve got the option to select the little Cog icon and now inside. Here we get a really simple set of options, or basically one option: we can adjust the height of this. As you see, this will then adjust that space set element. This is great if you’ve got really specific designs, and you want to make sure whether that space is retained. Using the space hit element is a great way of doing just that foreign