Personnaliser le design de son site : couleurs et polices
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é.
Comme notamment
Variables | Notes |
|---|---|
--primary: #ccc; | couleur primaire reprise sur votre site |
| taille de police du texte |
| liseré en haut du menu de navigation |
| couleur bouton primaire et texte du bouton primaire |
| couleur bouton secondaire et texte du bouton secondaire |
| couleurs reprise dans le tunnel de vente et le récapitulatif de commande |
| couleur du pied de page et du texte contenu dans le pied de page |
Les variables disponibles avec l'éditeur visuel sont les suivantes :
```css
--primary: #ccc;
/* Texte */
--texte: #074957;
--texte-leger: #9f9f9f;
--texte-inverse: #FFF;
--lien: #4d8bf4;
--base: 16px;
--danger: red;
--bordure: #e8e8e8;
/* Layout */
--fond: #FFF;
--fond-fonce: #fafafa;
--entete-bordure: #7ad1b9;
--entete-hauteur: 90px;
--entete-fond: #FFF;
--conteneur: min(calc(100vw - 30px), 1090px);
--police: Roboto;
--police-titre: Roboto;
--icon-fond: #FFDD49;
/* Buttons */
--btn-fond: var(--primary);
--btn-color: var(--texte-inverse);
--btn-secondary-fond: var(--texte);
--btn-secondary-color: var(--texte-inverse);
/* Card */
--card-fond: #FFF;
--card-highlighted: #fffae1;
--card-highlighted-footer: #ffdd49;
/* Footer */
--footer-fond: #FFF;
--footer-texte: var(--texte);
/* Account */
--account-sidebar-fond: var(--texte);
--account-sidebar-active: #FFDD49;
--account-sidebar-texte: var(--texte-inverse);
--account-sidebar-texte-off: #b9b8b8;
/* Table */
--table-header-fond: #f1f5f6;
--table-header-texte: #074957;
--table-alt-fond: #f7f7f7;
/* Cookie */
--cookie-background: #fff;
--cookie-color: #666;
--cookie-color-title: #000;
--cookie-color-primary: #4caf50;
--cookie-color-link: #4b4be6;
--cookie-offset: 15px;
--cookie-radius: 5px;
--cookie-padding: 20px;
--cookie-border: #e7e7e7;
--cookie-action-hover: #f5f5f5;
--cookie-disable: #adadad;
--cookie-cursor: #fff;
/* Shop */
--shop-fond: #FFF;
--shop-fond-produits: #f5f2f2;
--shop-onglet-bordure: #53e792;
--shop-compteur-produits: #da7c55;
--space: 8px;
--promo-fond: #5E9F7C;
--promo-texte: #fff;
--composable-header-fond: #EAE0D0;
--composable-footer-fond: #0D3F50;
--composable-footer-texte: #fff;
La **première fenêtre de CSS personnalisé** permet d'apporter des éléments complémentaires en CSS pour pousser certains aspects de design sur son site.
## Polices
Choisissez vos **polices** de titres et de texte avec [Google Fonts](https://fonts.google.com).
Les polices choisies sont à renseigner à 2 endroits :
* Cliquez sur **Mes sites**, puis sur **Editer**, dans l'onglet **Aparrence** renseignez les champs **police des titres** et **police du texte**)
ET
* Cliquez sur **Mes sites**, puis sur **Editer**, dans l'onglet **Apparence**, dans la seconde fenêtre de CSS personnalisé, au niveau des valeurs **polices** et **polices-titres** au niveau de Layout
Mis à jour le : 04/08/2023
Merci !