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 des combinaisons de couleurs audacieuses, vous pouvez utiliser le panneau Design et les styles de section pour modifier les couleurs du texte, des lignes et des zones d’arrière-plan de votre site.

Ce guide vous explique brièvement comment changer la couleur des différents éléments de votre site. 

Regarder une vidéo

Avant de commencer

  • Les modifications de couleurs effectuées dans le panneau Design sʼappliquent à tout votre site. La modification dʼun élément de page, tel que le texte dʼun bouton, sʼappliquera à tous les endroits utilisant ce thème (version 7.1) ou sur toutes les pages (version 7.0).
  • Pour modifier la couleur d’une certaine section de texte, comme un seul mot dans une phrase, utilisez un bloc Markdown.
  • Si vous savez coder, vous pouvez essayer de limiter vos modifications de couleur à des éléments précis par CSS. Gardez à l’esprit que notre service d’assistance ne couvre pas les questions liées au code personnalisé.
  • Si votre site utilise la version 7.0, la modification de couleurs se fait différemment. Consultez la section ci-dessous pour connaître les étapes à suivre.

Modifier les couleurs à l’échelle du site

Pour modifier toutes les couleurs de votre site, choisissez une palette de couleurs :

  1. Dans le Menu principal, cliquez sur Design, puis sur Couleurs.
  2. Cliquez sur Modifier à côté de Palette pour choisir une palette de couleurs.
  3. Cliquez sur Enregistrer en haut du panneau.

color_palette_-_click_edit.png

Choisissez parmi quelques types de palettes de couleurs :

  • Palettes Designer : choisissez parmi un ensemble de palettes prédéfinies dans des couleurs complémentaires.
  • À partir de l’image... : téléchargez une image pour créer une palette basée sur les couleurs dominantes de votre image.
  • À partir de la couleur... : choisissez une couleur primaire pour votre palette à l’aide du sélecteur de couleurs.
  • Couleurs personnalisées : choisissez une couleur pour chaque partie de votre palette à l’aide du sélecteur de couleurs.  

La palette de couleurs crée les différents thèmes de couleurs pour vos sections de page. Pour voir le thème attribué à une section :

  1. Dans le Menu principal, cliquez sur Design, puis sur Couleurs.
  2. Cliquez sur Thèmes de section.
  3. Faites défiler l'aperçu de votre site et passez en revue les étiquettes de thèmes de section pour chaque section.

Modifier les couleurs de la section

Après avoir défini les couleurs à l'échelle du site, vous pouvez modifier le thème de couleur de la section de votre choix afin de lui donner un aspect unique :

  1. Dans le Menu principal, cliquez sur Pages
  2. Sélectionnez la page que vous souhaitez modifier et cliquez sur Modifier en haut à gauche.
  3. Cliquez sur l’icône en forme de crayon dans la section en question.
  4. Dans lʼonglet Couleurs, sélectionnez un thème.
  5. Passez la souris sur Terminé dans l’éditeur de page et cliquez sur Enregistrer.

section_editor.png

Choisissez un thème :

  • Minimal : le texte et les titres sont en noir ou blanc, d’autres couleurs sont utilisées pour l’arrière-plan et les petits éléments de site.
  • Gras : la couleur sur le côté gauche de la palette s’applique à tous les textes et titres, d’autres couleurs sont utilisées pour l’arrière-plan et les petits éléments de site.
  • Accent : la couleur sur le côté gauche de la palette s’applique à l’arrière-plan (Foncé) ou au texte (Clair), tandis que d’autres couleurs sont utilisées pour l’arrière-plan et les petits éléments de site. 

Dans certains cas, les couleurs du texte et des boutons seront par défaut en blanc ou en noir pour offrir un meilleur contraste avec la couleur d’arrière-plan.

Personnaliser les couleurs du thème

Vous pouvez personnaliser n’importe quel thème en définissant des couleurs spécifiques pour les différents éléments de site. Toute modification apportée aux couleurs d’un thème s’appliquera à toutes les zones de votre site utilisant le thème en question.

Pour modifier un thème :

  1. Dans le Menu principal, cliquez sur Design, puis sur Couleurs.
  2. Cliquez sur Thèmes de section
  3. Cliquez sur lʼicône en forme de crayon situé à côté du thème que vous souhaitez modifier.
  4. Cliquez sur la modification à effectuer, puis choisissez une nouvelle couleur. Vous pouvez utiliser une couleur prédéfinie à partir de l’onglet Palette ou cliquer sur Personnaliser pour utiliser le sélecteur de couleurs. Vous devrez peut-être faire défiler la page pour voir toutes les modifications. 
  5. Utilisez le curseur d’opacité pour modifier la transparence.
  6. 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é.
  7. Cliquez sur Enregistrer.

Le sélecteur de couleurs

Utilisez le sélecteur de couleurs pour choisir une couleur personnalisée pour un élément de votre site. Chaque réglage de couleur a un cercle à côté de son étiquette montrant la couleur actuelle de cet élément.

Pour choisir une nouvelle couleur, cliquez sur le cercle de couleur à côté de la modification que vous souhaitez apporter. Cliquez sur le curseur inférieur pour sélectionner une couleur, puis choisissez une nuance en cliquant dans le carré juste au-dessus.

pick_a_color.png

Sinon, si vous connaissez la valeur de la couleur souhaitée, vous pouvez cliquer sur le champ de valeur pour la modifier. Le champ de valeur accepte les formats suivants :

  • HEX : ex. : #FFFFFF
  • RVB ou RGBA : ex. : rgba (255, 0, 149, 1)
  • HSL/HSLA : ex. : hsla (325, 100%, 50%, 1)
  • HTML (doit être en minuscules) : ex. : blanc

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

Conseil : le champ de valeur s’affiche automatiquement lorsque vous utilisez le curseur de couleur pour trouver une couleur. Vous pouvez copier et coller ce code pour ajouter la même couleur à d’autres réglages dans le thème.

custom_color_value.png

Transparence

Pour modifier la transparence d’une couleur, utilisez le curseur d’opacité en faisant glisser le cercle sous le sélecteur de couleur. Le curseur d’opacité est particulièrement utile dans le cas des couleurs de superposition, qui s’affichent sur les images. 

  • Dans la version 7.1, le côté gauche affiche une teinte très légère, tandis que le côté droit affiche une teinte plus foncée. Vous ne pouvez changer que la transparence des couleurs de palette.
  • Dans la version 7.0, le côté gauche est complètement transparent, tandis que le côté droit est complètement opaque. Certains réglages de couleur ne proposent pas de curseur d’opacité.

ajustement_the_opacity.png

Modifier la couleur du contour de l’insertion

Lorsqu’une section possède une image d’arrière-plan, vous pouvez l’afficher en mode Pleine page ou en mode Insertion.

  • L'option Pleine page étend l'image d'un bord à l'autre de la fenêtre de votre navigateur, couvrant toute la largeur de votre site.
  • L'option Insertion met l'image légèrement en retrait et crée un contour autour cette dernière.

Lorsque l’image est définie sur Insertion, vous pouvez modifier la couleur du contour :

  1. Dans le Menu principal, cliquez sur Design, puis sur Couleurs.
  2. Survolez votre thème et cliquez sur l'icône crayon.
  3. Sous Tout le site, cliquez sur Contour de l’insertion et choisissez une couleur.
  4. Cliquez sur la flèche Couleurs en haut pour revenir au panneau Couleurs, puis cliquez sur Enregistrer pour enregistrer vos modifications.

Modifier les couleurs dans la version 7.0

Si votre site utilise la version 7.0, le processus de modification des couleurs de votre site est quelque peu différent.

Conseil : les pages de garde possèdent leurs propres options de style.

Dans le panneau Design, utilisez les réglages disponibles dans les styles de site pour définir manuellement les couleurs de votre site. Les réglages de style spécifiques dépendent du template utilisé pour votre site. Consultez les guides de votre template pour plus d’aide sur la modification des couleurs de votre site.

Pour changer les couleurs d’un site de la version 7.0, accédez d’abord à la page que vous souhaitez modifier. Certains réglages ne s’affichent que lorsque vous êtes sur la page en question : rendez‑vous donc sur la page à modifier pour voir les réglages dont vous avez besoin. Vous pouvez également prévisualiser vos modifications sur la page au fur et à mesure que vous les effectuez.

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 templates et pour la plupart des zones de votre site. Cliquez sur Tout afficher pour afficher de nouveau tous les ajustements de la page.

site_styles_-_show_all.png

Pour cela :

  1. Dans le menu Accueil, cliquez sur Pages, puis sur la page à modifier.
  2. Lorsque l’aperçu de votre site affiche la bonne page, revenez au menu Accueil.
  3. Cliquez sur Design, puis sur Styles du site.
  4. Faites défiler la page vers le bas pour voir tous les réglages disponibles sur la page que vous consultez. Cliquez sur le réglage à modifier, puis choisissez une nouvelle couleur.
  5. Utilisez le curseur d’opacité pour modifier la transparence.
  6. Cliquez à l’extérieur de la fenêtre de couleur pour fermer le sélecteur de couleur.
  7. 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é.
  8. Cliquez sur Enregistrer en haut du panneau.

Modifier les couleurs d’arrière-plan

Les options disponibles pour les couleurs d’arrière-plan dépendent du template :

  • Tous les templates : vous pouvez définir la couleur de la zone de contenu principale.
  • Certains templates : vous pouvez définir différentes couleurs pour l’en-tête, le pied de page et l’espace autour du contenu.

Important :

Pour plus d'aide, consultez le guide de votre template.

Regarder une vidéo

Cette vidéo concerne la version 7.0.

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