Studio Editor: Working with Site Colors
4 min read
Site colors make up the overall color theme used across your client's site. This theme is divided into color ranges that are applied to different categories (e.g. background and text) and contain specific shades.
Both single colors and color ranges are customizable, so you can design and adjust specific parts of the site as needed.
How do I find site colors?
In this article, learn more about:
Understanding site colors
These are the colors that are used across the site you're working on. They're usually wired to components. For example, one color may be wired to section backgrounds, another to text, etc.
The number of site colors you start with depends on the template you choose, or whether you decide to build from scratch. However, you can add, manage, and replace site colors to ensure a smooth design experience.
Editing site colors
Customize the site colors from the Site Styles panel to suit your design needs, and reinforce your clients' branding.
Important:
Changing a color instantly affects the elements with the color you are updating - e.g. any themed elements you have previously added, or elements you have used this color on.
To edit the site colors:
- Click Site Styles
on the left side of the editor. - Select the Colors tab.
- Click the color you want to adjust.
- Choose how to select the middle color in the range from the following options:
- Select a new color from the picker using your cursor.
- Input the HEX, RGB, or HSB information into the relevant fields.
- Click the Dropper
to select a new color from anywhere on your screen.
- Click Apply.
Managing site colors
Manage site colors to make the design process as smooth as possible. You can rename colors to make them easy to find, or replace colors to make quick changes to the site.
To manage site colors:
- Click Site Styles on the left side of the editor.
- Select the Colors tab.
- Hover over the relevant color and click the More Actions icon
.
- Choose what you want to do:
- Change the color name:
- Click Rename.
- Enter the new color name into the field.
- Delete / replace:
- Click Delete.
- Select the replacement color from the picker.
- Click Apply.
- Change the color name:
Can't delete / replace a color?
- Certain shades are used as the default color for Wix apps and elements on the site, and the Delete option is therefore greyed out. However, you can click the shade in the panel to replace it.
- Shades that have not been set as a default color may still be in use across the site, and you are therefore prompted to replace the color instead.
Applying site colors to elements
As colors are assigned to categories, they're automatically applied to some themed elements in the Add Elements panel (e.g., styled text elements). You can also apply site colors to elements on the canvas using the Inspector.
To apply site colors to elements:
- Select the relevant element.
- Click the Open Inspector icon
at the top right of the editor. - Click the color box under Design to open the picker.
- Select a shade from Theme Colors to apply it.
Good to know:
If the element contains more than 1 color, you can customize each shade by clicking its color box.
Did this help?
|