Personnaliser le design de son site : couleurs et polices

Couleurs et Design

Depuis l’éditeur visuel, vous disposez d’une palette de 10 couleurs pour personnaliser les couleurs de fond des blocs et la couleur de votre texte.

Pour personnaliser votre palette de couleurs, renseignez vos codes couleurs html à la fin de la seconde fenêtre de CSS personnalisé nommée Variables CSS depuis l’onglet Apparence, quand vous cliquez sur Mes sites, puis sur Editer (petite icône du crayon).

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

Vous avez aussi la possibilité de modifier certains éléments de design de votre site pour respecter votre charte graphique, depuis la seconde fenêtre de CSS personnalisé.

Variables CSS principales

Variables	Notes
—primary	Couleur principale du site
—secondary	Couleur secondaire
—text-color	Couleur du texte
—background	Couleur de fond
—font-family	Police principale
—font-family-secondary	Police secondaire

Polices

Vous pouvez changer les polices de votre site en utilisant les Google Fonts.

Pour cela, ajoutez l’import de la police dans la fenêtre CSS personnalisé :

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

Puis définissez la variable font-family :

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

Personnalisation avancée

Pour des personnalisations plus poussées, vous pouvez ajouter du CSS personnalisé dans la première fenêtre de CSS.

Inspectez les éléments de votre site avec les outils de développement de votre navigateur pour identifier les classes CSS à cibler.