Site Colors
Last updated
Last updated
Add a unique style to your website with the help of Global Colors, and assign colors and text styles to elements across the site easily.
Predefined Global Colors
By default, the predefined colors (Primary, Secondary, Text, and Accent) are pre-populated from the Sequoia theme’s CSS. Change them here to override the theme’s settings.
Primary Colors are used for Headings and Icons.
Secondary Colors are used for List Items, Subheadings, Animated Headings, and Price Table backgrounds.
Text Colors are used for Paragraphs and Menu items
Accent Colors are used for Links, Button backgrounds, Tab and Accordion headings, and Badges
Each of the colors will be used in various widgets in ways similar to the examples above. Below are some color examples to help visualize the areas in which each color is used.
You can add any more colors to the global palette for use in all of Elementor's color options, in addition to the four basic global colors (Primary, Secondary, Text, and Accent).
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.
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: To choose a different color for any existing color, click the color swatch. You can change the names as well. 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.
