Personnaliser le design de son site : couleurs et polices

Boutique box

Cette page concerne les boutiques box, hébergées par Ciklik. Vous utilisez le module PrestaShop ? Voir la documentation PrestaShop.

Couleurs et Design

Depuis l’éditeur visuel, vous disposez d’une palette de couleurs (variables --color1 à --color11) pour personnaliser les couleurs de fond des blocs et la couleur de votre texte. Votre site en déclare 10 à l’installation.

Pour personnaliser votre palette de couleurs, renseignez vos codes couleurs html à la fin du champ Variables CSS de l’onglet Apparence pour (suivi du nom de votre site), quand vous allez dans Paramètres > Sites, puis cliquez sur Éditer (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 ce même champ Variables CSS.

Variables CSS principales

Variables	Notes
--primary	Couleur principale du site
--texte	Couleur du texte
--lien	Couleur des liens
--fond	Couleur de fond
--entete-fond	Fond de l’en-tête
--btn-fond / --btn-color	Fond et texte des boutons
--btn-secondary-fond / --btn-secondary-color	Fond et texte des boutons secondaires
--footer-fond / --footer-texte	Fond et texte du pied de page
--fond-mini-banner	Fond du bandeau au-dessus du menu
--police	Police du texte
--police-titre	Police des titres

Polices

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

Pour cela, renseignez le nom de la police (par exemple Open Sans) dans les champs Police des titres et Police du texte de l’onglet Apparence pour. Les deux polices sont alors chargées automatiquement depuis Google Fonts.

Attention

Renseignez les deux champs, avec uniquement le nom de la famille (lettres, chiffres et espaces, sans graisse ni guillemets) : sinon aucune police n’est chargée. Si votre champ Variables CSS contient déjà les variables --police ou --police-titre, ce sont elles qui s’appliquent : mettez-les à jour ou supprimez-les.

Personnalisation avancée

Pour des personnalisations plus poussées, vous pouvez ajouter du CSS dans le champ CSS Personnalisé du même onglet.

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

Voir aussi

Ajouter un logo

Ajouter une bannière

Créer sa page d'accueil et des pages de contenu avec l'éditeur visuel

Check-list visuels