Global colors allow you to define a color palette and link the individual colors to any or all widget with color settings. The color of any element that is linked to the global colors will automatically be updated when the linked color is changed in the global colors settings. This allows you to quickly make color changes, which helps reduce design time and ensures your site's style is consistent across pages.
Configure Global Colors
To configure global colors:
- In the side panel, click Design, then select Global Colors.
- Click the Plus icon next to Primary, or whichever setting you need to define.
- Type the HEX or RGB value of the desired color, or use the eye dropper tool to select a color.
Repeat these steps as necessary for each global color. Next, you need to connect the colors to widgets on your site.
Connect Global Colors to Widgets
To connect a widget to a global color:
- Click a widget to open it’s settings menu.
- Open the color settings and select one of the global colors listed at the top.
- Repeat as necessary for other elements.
- (Optional) If you need to edit one of the global colors, click the pencil icon () and the global colors settings will open where you can edit the desired color.
Once a widget is connected to global colors it will automatically update when the linked global color is updated.
Account owners automatically have global design permissions and can edit, view, and use global colors. Team members and clients who do not have global design permissions can view and use global colors, but they cannot edit them.