Changing the global colors
Changing global colors helps you quickly update your site’s look and feel, and maintain color consistency across all pages and elements.
Avoid setting individual colors directly on elements throughout your site. Always use the global color settings to keep your design consistent and easier to manage in the future.
1.
🧑💻 Log into your website with the provided credentials.
2.
Go to any page and click “Edit with Bricks” from the top admin bar.
3.
🎨 Once the Bricks Builder is open, click the color palette icon located in the upper-right toolbar. This will open the Color Manager, showing the list of default global colors.
🎨 You will find a list of default global colors such as:
- Primary, Primary Dark and Light
- Secondary, Secondary Dark and Light
- A range of Grays (e.g., Gray 100 to Gray 900)
- Status colors (Warning, Info, Danger, Success)
4.
🎨 Click on any color swatch to open the color picker.
5.
🧭 In the color picker, you can manually set a hex code or pick a color visually.
6.
These global colors can then be used across your entire site—for buttons, backgrounds, text, etc.—by selecting them in each element’s color options.
7.
💾 Once you’re done, click the Save icon (upper right corner) to apply the changes.
