Colors

Select one of the predefined Color Schemes:

2563.png

Or create your own based on the predefined schemes.

Meaning of color values #

2564.png

  • Background - default background color for all site pages
  • Alternate Background - used for input fields in all forms, for 'Load More' button in portfolio and blog, for Portfolio filter bar, Tour & Tabs titles background, for regular Pricing Table headers
  • 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:

1203.jpg

How to create linear gradients? #

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

2637.png

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 Zephyr > Theme Options > Colors, select the desired color, and click Plus icon to add it to the Palette:

2565.png

Once colors are added, you can apply them to other color pickers in Theme Options, Headers, Grid Layouts, Page Options, 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

2639.png

The saved scheme will appear in the list of schemes:

2640.png

How to use Color Variables? #

Open any element color settings, hover over the color field, and click the "Triangle" icon:

2570.png

Apply a color from Color Schemes:

2571.png

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

2572.png

How to apply Footer colors? #

Assign the appropriate Row Color Styles to Row Settings of footer rows:

2566.png