How to make a template compatible with Color Palette

The Color Palette feature allows you to apply different color themes to your websites in the Quick Creator flow.

It works by swapping specific global colors with new ones.

This step-by-step guide will explain how the color swaps work and show you how to apply these rules to your templates.

 

Step 1: Choose a template

Any template can be made compatible with Color Palette.

We recommend creating a copy of your template before making any modifications, so that you keep the original template intact.

 

Step 2: Open Global Colors

1. Open the template in the Editor by clicking Info > Log in to template
2. Navigate to the Global Design menu on the left side of the Editor
3. Under Global Design, navigate to Global Colors > Spot Colors
   
   
4. This opens a new overlay with a list of 8 Spot Colors:
   • 4 Primary Spot Colors
   • 4 Secondary Spot Colors

 

Step 3: Optimise the Spot Colors

The Color Palette reserves specific Global Colors for certain types of elements:

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

For compatibility, you should use these categories in the same way on your template.

 

How to correctly match the colors with the right categories

To maintain proper contrast between text and background colors, match the numbers of the Primary and Secondary Spot 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.

 

Step 4: Apply the Global Spot Colors to the template

Now you need to apply the Global Spot Colors to your template.

1. Navigate to the element you want to apply a color to. It could be a row, column or module.
2. Click the pencil icon to open the ‘Edit’ overlay.
3. Click ‘Local Design’. It is important that you edit locally, so the template previews correctly in the Quick Creator flow.
   

4. Find the element you want to edit, for example background, text, border or icon.

5. Choose one of the eight Global Spot Colors based on the logic described above.

   • For example, select Primary Spot Color 1 (brown) for the button background, and Secondary Spot Color 1 (white) for text.

6. Repeat for all other elements.

 

Step 5: Publish your template

Remember to publish your template.

 

Step 6: Activate the template for Color Palette

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

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

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

 

Step 7: Test your template

We recommend testing your template in the Quick Creator flow to make sure it works as intended with Color Palette.

Please go through the entire flow and create the website to properly test the template.

Please note that:

• Text and some other elements do not preview in the Quick Creator. Please view the created site to see which elements the color palette was applied to. 
• For multi-page templates, preview will only work on the homepage. Other pages of the template will not preview the color palette changes.