Colors
Last updated
Last updated
Colors are a fundamental aspect of the theme, and understanding how to work with them will help you achieve the best results and enhance your site’s overall appearance.
To manage and edit colors go to Appearance -> Customize -> Styling -> Colors
The color palette defines the base colors of your site based on your brand guidelines.
It is a set of of 8 colors by default but you can add more colors by clicking the ➕ icon in upper part of colors strip.
Base palette colors are utilized to be used throughout all color pickers as references so when you update a color in the base palette, every other reference is updated automatically as well.
You can also choose from predefined palettes by clicking the 🎨 palette icon.
When the colors are modified, the ✏️ icon will show up instead of the ➕ icon where you can save the current set of colors as a palette:
After you save the palette, it appears in the list of Custom Palettes as Palette X where X is an ordered number:
You can also export or import existing palettes including current colors in the same dialog by clicking Export/Import tab:
Theme palette colors are also recognized by both the Gutenberg and Elementor. This ensures consistency across your site’s design, allowing you to seamlessly apply your chosen color palette in different parts of your site, whether you’re using the Gutenberg blocks or Elementor’s widgets.
Links - Normal and hover color for every link in the theme.
Text - Default text color and muted text color.
Text Selection - Change how selected text looks when selected.
Headings H1-H6 - Default colors for all headings (as every heading size inherits from this value).
Heading 1 to Heading 6 - Custom color for every heading size.
Footer - Footer background, text, headings and link colors.
Site Background - The body background color.
Overlay - Default color of backdrop overlays for lightboxes.
Every color provides a CSS variable reference of this form you can use throughout the site:
As well as their RGB variant:
So you can use with custom opacity for example:
