Skip to main content

Create your own design system with global colors and text styles that can be easily assigned to elements on your site.


Global colors

Set predefined global colors (primary, secondary, text and accent colors), custom colors online or create new global colors from Elementor Site settings. From any Elementor page or post editor, click the burger menu in the upper left corner of the Widget panell, then navigate to Site Settings> Design System> Global Colors.

file-pmax5jfzn3-9510896

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 settings.

New global colors

In addition to the 4 predefined global colors (primary, secondary, text, and accent), you can add any color of your choice to the global palette, to use in any Elementor color option.

Online custom colors

You can also select any custom color to use online without adding it to the global color palette.

From any Elementor page or post, click the burger menu in the upper left corner of the Widget Panel, then navigate to Global Style> Site Settings> Colors and Typography.

  1. Edit color: Click on the color swatch to select a new color for any existing color. Names can also be changed. Click on the color name to change the name. For example, you can change Main to Main, Accent to Highlight, and so on.
  2. Add color: Click on Add color button to add a new global or online custom color
  3. Remove color: Position the cursor over the color swatch and click the trash icon this looks like.

file-aovdqujain-8432150

file-12lpk2fp9i-2768053

Note: When removing a global color, all of its instances will inherit its 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 for the new site, allowing its elements to be immediately and seamlessly adapted to the site you are on.

R Marketing Digital