Online Store

Creating a custom color palette for your site

With predesigned palettes, you don’t need to pick and combine colors since all palettes are curated by professional designers. But if you want a particular color palette that suits your brand, you can create one.

About color palettes and color customization

Each palette consists of six complementary color schemes picked by professional designers. When you change a color in one of the color schemes, it automatically applies to the blocks with the same color scheme across your website.  

The full customization of palettes is a premium feature, meaning that for the free, Bronze, or Silver plan users, it’s limited to customizing the Background block color and the Accent colors of each color scheme.

With Yola Gold plan, you can access the feature full-scale and change the color of various site elements:

  • Typography, including your site name, various headings, text links, and price labels;
  • Navigation links (active and default); 
  • Decorative elements like borders, feature icons, and social icons;
  • Primary and Secondary buttons – both their texts and backgrounds.

Customizing a color palette

Every palette has six basic color schemes, and all of them are customizable. You can customize the palette you like the most by changing just a couple of its colors, or you can change all available colors to create a totally unique palette.

Note: Unlike in Block settingsAppearanceBlock style, where color scheme change only applies to the current block, in Color palette settings, ​​the changes you make affect all blocks of your site that have the same color scheme.

Your current palette is always named Palette 1 and is always on the top of your list. It also has a blue checkmark icon near its name. 

To change a color in the palette, follow these steps: 

  1. Click the Design button on the Topbar to open the Website design menu.
  2. In the Colors tab, hover over the palette you want to customize and click the Settings icon. (Or click the Plus (+) button if you want to customize your current palette.)

    B2C - Custom palette - 1.png
  3. In the next window, click the color scheme you want to customize to open its settings.

    B2C - Custom palette - 2.png

  4. The Color scheme settings menu gives you an explanation of what every color is used for. Read it carefully and click the color you want to replace. 
  5. In the next window, use the color picker with the full palette to select your desired color. You can preview the changes on the site immediately. 
  6. Click Submit when you are happy with the color you’ve selected. 
  7. Repeat steps 3 to 6 with other color schemes if needed.
  8. Click Submit and Save in the next windows to apply the changes. 

Here’s the video of the color customization process for a site’s Light color scheme.

At the end of it, you see that the changes apply to all blocks with the light color scheme on the page (and on the site, too). 

Note: After you save the changes, the palette appears on the top of your list with the new name, for example, Custom palette 1. You can create several custom palettes for your site, and they will be numbered automatically.

B2C - Custom palette - 3.png

Deleting a custom palette

You cannot delete predesigned color palettes in the Colors tab. But you can delete a custom palette you’ve created. Hover over the palette you want to delete and click the trash bin icon. 

B2C - Custom palette - 4.png

Remember to save the changes and publish your website to make them live.

We hope this article has helped you. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
0 out of 0 found this helpful