Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Modifier les couleurs

Que vous préfériez un thème en noir et blanc ou une combinaison de couleurs vives, vous pouvez utiliser le panneau Styles du site pour définir les couleurs du texte, des traits et des zones d’arrière-plan de votre site.

Ce guide vous propose de découvrir comment ajuster les couleurs des différents éléments de votre site.

Remarque : les pages de couverture ont leurs propres options de style.
Ces étapes concernent la version 7.0. Si votre site utilise la version 7.1, consultez l’article Options de style et de design de la version 7.1 pour en savoir plus.

Regarder une vidéo

Avant de commencer

  • La modification des couleurs s’applique à l’ensemble du site : si vous changez la couleur d’un élément de page (comme le corps de texte), cette modification sera prise en compte sur toutes les pages.
  • Pour modifier la couleur d’une certaine section de texte, comme un seul mot dans une phrase, utilisez un bloc Markdown.
  • Chaque ajustement de couleur doit être modifié individuellement.
  • Les modifications de couleurs ne sont pas conservées lorsque vous changez de modèle. Elles réapparaissent si vous revenez au modèle initial.
  • Le panneau Styles du site ne vous permet pas de changer les couleurs d’une page ou d’un bloc spécifique. Si vous avez des compétences en codage, vous pouvez effectuer ces modifications avec du code CSS. Veuillez noter que nous n’offrons aucune assistance pour les modifications avancées de ce type.

Étape 1 - Sélectionner une page

Tout d’abord, accédez à la page à laquelle vous souhaitez apporter des modifications. Dans le Menu principal, cliquez sur Pages. Ensuite, cliquez sur la page dont vous souhaitez modifier les couleurs.

Vous devez ouvrir une page au préalable pour deux raisons :

  1. Certains ajustements n’apparaissent que lorsque vous affichez la page à laquelle ils s‘appliquent. Par exemple, pour votre page Blog, certains ajustements spécifiques au titre n’apparaissent dans le panneau Styles du site que lorsque vous prévisualisez la page.
  2. Même si vos modifications s’appliquent à l’ensemble du site, vous pouvez prévisualiser les changements de style sur la page sélectionnée au fur et à mesure que vous les effectuez.

Après avoir sélectionné la page souhaitée dans le panneau Pages, revenez au Menu principal. Cliquez ensuite sur Design, puis sur Styles du site.

Étape 2 - Rechercher un ajustement de couleur

Les ajustements de style disponibles dépendent de votre modèle. Faites défiler le panneau Styles du site vers le bas pour voir tous les ajustements que vous pouvez appliquer à la page affichée.

Chaque ajustement de couleur affiche un cercle à côté de son étiquette. Ce cercle indique la couleur actuelle de l’élément.

Remarque : le cercle ne s’affiche pas si la couleur est transparente ou s’il s’agit du même gris que celui utilisé comme arrière-plan du panneau Styles du site.

 

Pour trouver des ajustements spécifiques à un élément de la page, cliquez sur l’élément souhaité dans l’aperçu. Le panneau Styles du site affiche uniquement les ajustements de style pour cet élément et masque les autres. Ce raccourci est disponible dans la plupart des modèles et pour la plupart des zones de votre site. Cliquez sur Tout afficher pour afficher de nouveau tous les ajustements de la page.

Une fois l’ajustement trouvé, cliquez dessus pour ouvrir le sélecteur de couleur.

Étape 3 - Sélectionner une couleur

Utilisez le sélecteur de couleur qui s’ouvre pour trouver la couleur souhaitée. Cliquez sur le curseur du bas pour sélectionner la couleur et ajustez la luminosité (clair/foncé) en cliquant quelque part dans le carré qui occupe la partie supérieure du sélecteur.

color-sliders.png

Si vous connaissez la valeur de la couleur souhaitée, vous pouvez également la saisir dans le champ Valeur. Le champ Valeur accepte plusieurs formats différents :

  • HEX - Exemple : #FFFFFF
  • RVB ou RVBa - Exemple : rvba(255, 0, 149, 1)
  • TSL/TSLA - Exemple : tsla(325, 100 %, 50 %, 1)
  • HTML (en minuscules) - Exemple : blanc

Pour trouver la valeur de couleur recherchée, vous pouvez consulter des sites externes comme color-hex.com ou imagecolorpicker.com.

Remarque : le champ de valeur est automatiquement rempli lorsque vous utilisez le curseur de couleur pour trouver une couleur. Vous pouvez copier-coller ce code pour ajouter la même couleur à d’autres ajustements dans le panneau Styles du site.

value-field.png

Étape 4 - Modifier la transparence

Pour ajuster la transparence d’une couleur, utilisez le curseur d’opacité en faisant glisser le cercle sous le sélecteur de couleur. Le côté gauche est totalement transparent, tandis que le côté droit est totalement opaque.

change-the-opacity.png

Remarque : certains ajustements de couleurs ne comportent pas de curseur d’opacité.

Le curseur d’opacité est particulièrement utile dans le cas des couleurs de superposition, qui s’affichent sur les images.

overlay-opacity.png

En présence d’une couleur ou d’une image superposée à une autre, rendez la couche supérieure transparente pour que la couche inférieure reste visible.

opacity-overlap.png

Étape 5 - Terminer et enregistrer

Cliquez à l’extérieur de la fenêtre de couleur pour fermer le sélecteur de couleur.
 
Pour annuler une modification avant d’effectuer l’enregistrement, cliquez sur l’icône annuler en haut du panneau ou sur le point situé à côté de l’ajustement concerné. Consultez l’article Modifier le style pour en savoir plus.

undo_and_dot_icons.jpg

Une fois vos modifications effectuées, cliquez sur Enregistrer.

click_save.jpg

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 60 sur 175