Global color is one of the features offered by Brizy to streamline your workflow. The feature allows you to change the color of multiple elements at once, with a single click. Be it the elements on the same page or on the different pages within the site. This feature is pretty useful if you are working on a complex website that consists of several pages. It can save you a lot of time. Take a look at the screencast below. Notice the icons, texts, and the button.
As you can see on the screencast above, the color of the icons, texts, and button change altogether as we change the color from the color picker. It happens because we use a global color for those elements.
How to use a global color in Brizy
Brizy offers style presets which you can access by clicking the Styling menu on the left panel. Each style preset consists of global colors and global typographies. There are 8 global colors you can use on each style preset. The third color (from left) is used as the default color of the Button element as well as the Icon element, while the 7th color is used as the default color of the Text element. You can use other colors as the global colors for other elements on your page.
You can use a global color on any element in Brizy. You can also use a global color as the background of a column or block. To use a global color on an element, first, click the associated element to open the settings bar. Once the settings bar appears, click the Colors tab to open the color picker. Global colors lie beneath the color picker. Simply select the global you want to use.
Global color can be used on any setting on an element that involves color. Such as the border, background, and shadow.
To change the color of a global color, you can simply click the Styling menu on the left panel and then set a new color of a global you want to change the color of. When you change the color of a global color, the change will be applied to all elements where the associated global color is used (as we have demonstrated on the screencast above).