Customize Site Design: Colors and Fonts

Colors and Design

From the visual editor, you have a palette of 10 colors to customize the background colors of blocks and the color of your text.

To customize your color palette, enter your HTML color codes at the end of the second custom CSS window called CSS Variables from the Appearance tab, when you click on My Sites, then on 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 second custom CSS window.

Main CSS Variables

Variables	Notes
—primary	Main site color
—secondary	Secondary color
—text-color	Text color
—background	Background color
—font-family	Main font
—font-family-secondary	Secondary font

Fonts

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

To do this, add the font import in the custom CSS window:

@import url('https://fonts.googleapis.com/css2?family=FontName&display=swap');

Then define the font-family variable:

--font-family: 'FontName', sans-serif;

Advanced Customization

For more advanced customizations, you can add custom CSS in the first CSS window.

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