Create your own design system with global colors and text styles that can easily be assigned to elements across your site.
Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors from Elementor’s Site Settings. From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Design System > Global Colors.
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.
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.
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 > Site 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.
Note: Global styles are not part of the content template itself. This is the logic behind the design system. When you import the template to another site you get the globals from the new site, enabling your elements to immediately and perfectly mesh with the site it is on.