Global Colors is a feature within 10web Builder that allows users to define a set of color options that can be easily reused throughout the website. Instead of manually specifying colors each time they're needed, users can create a palette of global colors, which can then be applied consistently across various elements such as text, backgrounds, buttons, and more.
How to access Global Colors
To review and adjust your global colors:
- Open the 10Web Editor and click on the Site Settings icon located on the left of the top bar.
- Under Design System click Global colors.
Default color settings
In the 10Web Website Builder, default color settings play distinct roles in the design of your website:
Primary colors: Typically applied to headings and icons.
Secondary colors: Often used for list items, subheadings, animated headings, and the backgrounds of price tables.
Text colors: The default for paragraphs and menu items.
Accent colors: Used to highlight links, button backgrounds, tab and accordion headings, and badges.
Inverse primary: Refers to a color that contrasts with the primary color and is suitable for use on light backgrounds.
Custom Colors: Used to add new global colors.
How to add new Global Colors
To introduce a new color to your palette:
- Click on Add Color.
- Enter a name and desired shade.
- Click on the Save Changes button.
How to edit Global Colors
To customize your global colors:
Modify a color: Simply hover over a color swatch and click it to open the color picker, where you can select a new hue.
Reorder colors: Click the arrow icon to rearrange the global colors.
Delete a color: Click the delete icon to remove a color.
Note:
System colors cannot be deleted.
Rename a color: Click on the color name to edit it, and type in the new designation.
Remember to save your changes after making adjustments.