Customize site design: colors and fonts

Colors and Design

From the visual editor, you have a color palette (variables --color1 to --color11) to customize the background colors of blocks and the color of your text. Your site declares 10 of them at installation.

To customize your color palette, enter your HTML color codes at the end of the CSS Variables field in the Appearance for tab (followed by your site name), when you go to Settings > Sites, then click Edit (small pencil icon).

--color1: #ABD7D1;
--color2: #121C38;
--color3: #43619A;
--color4: #7ad1b9;
--color5: #fafafa;
--color6: #4D9DE0;
--color7: #E15554;
--color8: #E1BC29;
--color9: #7768AE;
--color10: #ccc;

You also have the option to modify certain design elements of your site to match your brand guidelines, from the same CSS Variables field.

Main CSS Variables

Variables	Notes
`--primary`	Main site color
`--texte`	Text color
`--lien`	Link color
`--fond`	Background color
`--entete-fond`	Header background
`--btn-fond` / `--btn-color`	Button background and text
`--btn-secondary-fond` / `--btn-secondary-color`	Secondary button background and text
`--footer-fond` / `--footer-texte`	Footer background and text
`--fond-mini-banner`	Background of the banner above the menu
`--police`	Body font
`--police-titre`	Title font

Fonts

You can change your site’s fonts using Google Fonts.

To do this, enter the font name (for example Open Sans) in the Title Font and Body Font fields of the Appearance for tab. Both fonts are then loaded automatically from Google Fonts.

Advanced Customization

For more advanced customizations, you can add CSS in the Custom CSS field of the same tab.

Inspect the elements of your site with your browser’s developer tools to identify the CSS classes to target.