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
Texte --base: 16px;	taille de police du texte
Layout --entete-bordure: #7ad1b9;	liseré en haut du menu de navigation
Buttons --btn-fond: var(--primary); --btn-color: var(--texte-inverse);	couleur bouton primaire et texte du bouton primaire
Buttons --btn-secondary-fond: var(--texte); --btn-secondary-color: var(--texte-inverse);	couleur bouton secondaire et texte du bouton secondaire
Card --card-fond: #FFF; --card-highlighted: #fffae1; --card-highlighted-footer: #ffdd49;	couleurs reprise dans le tunnel de vente et le récapitulatif de commande
Footer --footer-fond: #FFF; --footer-texte: var(--texte);	couleur du pied de page et du texte contenu dans le pied de page

Les variables disponibles avec l'éditeur visuel sont les suivantes :

```

--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.

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