Global Colors

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 ( PrimarySecondaryText 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 > Global Settings > Colors & Typography.

  1. 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.
  2. Add Color: Click Add Color button to add a new global or inline custom color
  3. 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.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email

Did this answer your question?

255 people find it useful

Yes

No

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before