In this lesson, we’re going to touch upon how to start using colors inside Brizy, let’s start by changing the color of this button, so we’re going to come over we’re going to select this element in this example the button, and then we have the color toolbar or The color chip we can click on there and that opens up the whole color panel now inside here we’ve got various different ways in which we can set colors. If we take a look at the first option, we’ve got the main color section. This allows us to fine tune and tweak the color of the element we have selected. So, for example, if I drag this down from the blue through to the green, you can see our button now updates to green, really simple. We’ve also got these options underneath which are part of the global colors, and you can see this is where we can choose from any predefined global color.

That applies to our entire color palette for this particular website. So, for example, if I want to set this to this pale pale blue, I can select that and that now immediately picks up the color really simple. So, let’s set that back to that dark, blue next up, we can choose whether we want to work with solid colors or if we want to work with gradients. So once we choose the gradient option, you can see. This gives us an extra set of options at the top to create gradients.

You can see, we’ve got our starting color and our end color, and we can adjust these very, very easily, we’ll select our last color and we’ll choose a different color from our predefined color palette, which use this light. Blue, for example – and you can see now that updates we go from the dark blue through to the light blue, very simple to work with. You can also go ahead and work with opacity, so we can adjust the opacity of this particular section, and you can see that now drops the opacity down in this example to about 20 percent. This can be really useful when you want to create some pretty cool effects. Let’s set that back to 100 now, you’ll also notice.

When we’ve got the gradient option, we have this extra option underneath to choose what type of gradient we want to work with by default. We’ve got linear, but we can change that to radial, so we choose radial and we now get a radial effect. Switching that back to linear. We can also adjust the angle in which this is going to display. So, let’s change this from 90 degrees to 180 degrees, and you can see that now changes the effect of the gradient on our button.

Really cool, really easy to work with. Let’s just set this back now to a solid color. Now you also notice when we’ve chosen the color chip we have more than just this color palette and these options for the global colors. We also have the options for, in this example, background the text, the border and the shadow effect. So you can change the colors using the same method for any of these four key elements in this example and finally inside here we have the option to control the hover effect.

So now, when we switch to this we’re making changes to the color, that’s going to be used for the background, the text, the border or the shadow when we’re dealing with the hover effect. So let’s take a look at that in action. Let’s change back to our background and let’s change the color of this to something like this pale blue. Now, when we mouse over, you can see we get the effect between the foreground color and the background color. When we hover now many times when you’re designing websites or working with a brand you’re going to have specific color values that you need to use, we can use those very easily.

You can see in the bottom left hand corner of this panel. We have the hexadecimal value for color and we can easily drop in any hex value inside there to get exactly what color we need for our designs. So there’s one more thing. I want to look at now and that’s global colors. So, let’s clear this layout and let’s load in an entire design, so i can show you exactly how the global colors affect things.

Let’s go back to our layouts and let’s find a design that we like, let’s just quickly switch to free, and this one looks pretty good, we’ll choose the option to say, replace global styling and we’ll import our layout. Now that our design is imported, we can go ahead and make changes globally to the color scheme. That’s being used to do that, we can do it in a really simple way, we’ll go to our styles panel in the left hand, side, and that shows us all. The current styling applied to this particular template. As you can see, the first option are the range of colors being used throughout our design, so we can select any of these colors and make changes to them and that will affect the entire design globally, wherever this particular style is being used.

So, let’s take a look at this blue color, which is being used for these buttons and various other different parts of our site. If you wanted to change that to something completely different, we can do that by simply selecting the color chip and then choosing an alternative. Color we can use the main color picker. We can also go ahead and use the color scale on the right hand, side or we can drop in a hexadecimal value. If we have a specific value, we want to add into a particular design.

Let’s use this slider on the right hand, side and change this color to something like green. You can see now that anywhere that color, that original color was being referenced. The button, for example, the subheadings these little highlight behind the image everything has now been updated globally. As you can see, working with global colors inside Brizy opens up a whole range of possibilities and speeds up your entire workflow. So let’s take one final example now of how we can use these global styles.

Let’s come back up to our top and we’ll remove this existing button and replace it with a new one of our own. Let’s go ahead and add that into our design and there we go there’s our button. So now we can go ahead and customise this any way that we want. So if you want to reference those global colors, we simply need to click on the button. Choose the color chip and you can see that now gives us all the global colors and we can simply choose whatever we want from there.

So simply set this back to the green color. We had originally adjust our alignment and then we can go ahead if we want to make changes to our global colors again and we’ll see our new button will make changes alongside it. So again, let’s set this to a different color and you can see now that everything reflects including our new button and that’s how easy it is to start working with the global colors in