Create your own design system with global colors and text styles that can easily be assigned to elements across your site.
Global Colors
Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors from Elementor’s Global Settings.
Global
Predefined Global Colors
By default, the predefined colors ( Primary, Secondary, Text and Accent) are pre-populated from your theme’s CSS. Change them here to override your theme’s settings. Learn which elements are impacted by the default color palette.
New Global Colors
In addition to the 4 predefined global colors (Primary, Secondary, Text, and Accent), you can add any colors you choose to the global palette, for use in any Elementor color options.
Reorder Global and Custom Colors
You may change the order of your colors by clicking and dragging to the desired position. This allows you to group your color pallets and improve your workflow.
Inline Custom Colors
You can also select any custom color to be used inline without adding it to the global colors palette.
From any Elementor page or post, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Global Style > Global Settings > Colors & Typography.
- Edit Color: Click the color swatch to select a new color for any existing color. The names can also be changed. Click the color’s name to change the name. For example, you could change Primary to Main, Accent to Highlight, etc.
- Add Color: Click Add Color button to add a new global or inline custom color
- Delete Color: Hover over the color swatch and click the trash can icon that appears.
Note: By deleting a global color, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.
