Colors

Updated 1 month ago

Select one of the predefined Color Schemes:

Or create your own based on the predefined schemes.

Meaning of color values #

• Background - default background color for all site pages
• Alternate Background - used as default color in some theme elements', like Tabs, Pricing Table, Social Links, Grid Filter, FlipBox, Action Box, etc. Also it is used in several layouts of WooCommerce pages.
• Border - default border color for all elements
• Heading - default color for all text Headings
• Text - default text color for all site pages
• Link - the color of text links
• Link Hover - the color of text links on hover
• Primary Color - main accent color, used for many content elements
• Secondary Color - secondary accent color, commonly used for hovered states of content elements
• Faded Text - used for posts elements (date, category, tags, author, etc.), breadcrumbs, tag cloud links, some icons
• Background Overlay - might be used as Row Background Overlay or as an additional variable for any other elements

Alternate Content colors have the same meaning as Content colors, just for items located in Rows with Alternate Content colors:

Custom Global Colors #

Add custom colors to use globally on your site. 

You can assign a custom global color while editing by picking it from the list of available variables.

You can also use Custom Global Colors by referring to their variables in custom CSS. For example: 

background: var(--color-text-highlight);

where the "--color" is a mandatory prefix followed by the color slug.

How to create linear gradients? #

Click the corresponding input and click the Gradient button to enable gradients:

Then using the color picker set start and end point colors.

How to use the Color Palette? #

Palette is a set of colors, which can be added manually and then used in other color pickers. Go to Impreza > Theme Options > Colors, select the desired color, and click Plus icon to add it to the Palette:

Once colors are added, you can apply them to other color pickers in Theme Options, Headers, Grid Layouts, Page Options, and WPBakery Page Builder elements.

How to create your own Color Scheme? #

Change the current color scheme colors at Theme Options > Colors, then fill in the desired scheme name and click the "Save as new" button

The saved scheme will appear in the list of schemes:

How to use Color Variables? #

1. Open any element color settings.
2. Hover over the color field, and click the "Triangle" icon.
3. Apply a color from Color Schemes.

That's it! Now the field is bound with Content Link Color from Color Scheme.