How to use Quick Creator Color Palette

This article explains how to use the Color Palette functionality in Quick Creator.

What is the Color Palette?

Color Palette allows you apply different color themes to your websites in the Quick Creator flow. The palettes each consist of a combination of global colors, designed to work together as a cohesive theme, replacing the existing colors of the template.

This flexibility allows the same template to be used for many different types of businesses.

How to use the Color Palette

1. In the Quick Creator flow, select a template.
2. Use the filter to choose what type of color palette you want access to, for example pastel, standard, or earth tones.
3. Choose a Color Palette from the options below the template selection.
4. If needed, customize any colors to match your preferences.

How to make templates compatible with Color Palette

Any template can be made compatible with the Color Palette feature.

To ensure you always have an original version, we recommend making a copy of your template before making any modifications.

For a template to work with the Color Palette, its colors must be defined as follows under Global Colors:

• Primary Spot Colors 1-4: Use for backgrounds on rows, columns, modules, and elements such as buttons, pagination dots, arrows, lines and icons.
• Secondary Spot Colors 1-4: Reserved for text.

To maintain proper contrast between text and background colors, match the numbers of the colors:

• Primary Spot Color 1 should be paired with Secondary Spot Color 1.
• Primary Spot Color 2 should be paired with Secondary Spot Color 2.
• And so on.

Make sure the matching numbers go together. For example:

• If Primary Spot Color 1 is dark, Secondary Spot Color 1 should be light.
• If Primary Spot Color 2 is light, Secondary Spot Color 2 should be dark.
• And so on.

A few things to keep in mind:

• Please note that the preview is an approximate representation of what the template will look like with the applied color palettes. 
  • Color Palette preview now works for the following elements:
    • Modules:
      • Social Media Links (Module design settings for Background, Border, Icons)
      • Icon List (Module design settings for Background, Border, Icons)
      • Review (Module design settings for Title, Description, Stars, Background, Border)
      • Buttons (Module design settings for Background, Border, Icon, Text)
      • Divider (Module design settings for Divider color)
      • Form (Module design settings for background, border, submit button)
      • Text (Module design settings for background, border)
    • Pagination Dots (Gallery, Row Slider, Image list, Product Catalog, Blog Catalog, E-commerce Catalog)
    • Arrows (Gallery, Row Slider, Image list, Product Catalog, Blog Catalog, E-commerce Catalog)
• For multi pages templates, preview will only work on the homepage. Other pages of the template will not preview the color palette changes.

For more information, please read the article How to make a template compatible with Color Palette.

How to activate Templates for Color Palette

Once a template is compatible with the Color Palette, you must mark it as "Is Color Palette Ready" in RAI:

1. Navigate to the template.
2. Click the Info link on the left.
3. In the "Is Color Palette Ready" dropdown, select "Yes".

This allows you to control which templates your sales team should be able to use Color Palette with.