Les couleurs que vous choisissez représentent une part importante du design de votre site. Ce guide vous explique comment gérer les palettes de couleurs de votre site.
Dans ce guide
Si votre site utilise un thème qui prend en charge l’éditeur de site, vous pouvez modifier les couleurs de votre site à l’aide de Styles. Pour savoir si votre site utilise l’éditeur de site, il suffit de consulter la section Apparence de votre tableau de bord. Si vous y voyez Éditeur, vous pouvez modifier les couleurs de votre site en procédant comme suit :
- Dans votre tableau de bord, accédez à Apparence → Éditeur.
- Cliquez sur Styles à gauche ou sélectionnez l’icône Styles comme indiqué ici. L’icône ressemble à un cercle noir et blanc.
- Sélectionner Couleurs.
- Sélectionnez Palette pour choisir les couleurs par défaut de votre site ou choisissez parmi les éléments suivants sur votre site :
- Texte
- Arrière-plan
- Lien
- Légendes
- Bouton
- Titre
Le reste de ce guide expliquera chacun d’eux plus en détail.
La palette de couleurs de votre site définit les couleurs par défaut utilisées sur votre site. Même si vous pouvez toujours gérer la couleur d’un élément précis, définir votre palette de couleurs permet d’assurer la cohérence des couleurs sur l’ensemble de votre site Web.
Ici, vous pouvez modifier les couleurs du Thème, Par défaut et Personnalisées :
- Thème : couleurs définies par les concepteurs de votre thème lors de la création du thème, utilisées dans le design de votre thème.
- Par défaut : couleurs affichées dans les réglages des couleurs du bloc lors de la modification de vos pages et articles.
- Personnalisées : définissez et nommez des couleurs supplémentaires à utiliser dans votre palette de couleurs.
Pour mettre à jour les couleurs du thème, suivez les instructions ci-dessous :
- Cliquez n’importe où dans la zone située sous Palette.
- Cliquez sur les trois points à côté de Thème, puis sélectionnez Afficher les détails pour développer la liste des zones de couleur dans la palette.
- Chaque thème définit ses propres zones de couleur. Dans notre exemple, vous pouvez choisir entre Principal, Secondaire, Premier plan, Arrière-plan ou Tertiaire pour modifier cette couleur :
- Utilisez le sélecteur de couleur qui apparaît pour sélectionner la couleur de votre choix.
- Cliquez sur Terminé pour appliquer la couleur choisie.
- Cliquez sur Enregistrer dans le coin supérieur droit pour enregistrer vos modifications.
Vous pouvez également ajouter plusieurs couleurs personnalisées à la palette de votre site. Elles seront enregistrées et vous pourrez les choisir dans les réglages de couleur de vos blocs.
Pour ajouter des couleurs personnalisées, procédez comme suit :
- Dans Personnalisées, cliquez sur le bouton +.
- Choisissez votre couleur dans le sélecteur de couleur ou entrez une valeur de couleur HEX, RVB ou TSL.
- Cliquez sur le nom de la couleur (par défaut « Couleur 1 ») et saisissez un nom pour votre nouvelle couleur.
- Cliquez sur Terminé.
Ces étapes sont illustrées dans la vidéo suivante :
Dans les réglages de couleur, juste en dessous de Palette, vous trouverez l’option permettant de modifier la couleur de divers éléments de votre site. Ces éléments sont les suivants :
- Texte : choisissez une couleur à utiliser pour le texte de base normal sur votre site, c’est-à-dire sans les liens, les légendes, le texte des boutons ou les en-têtes.
- Arrière-plan : choisissez une couleur unie ou un dégradé pour l’arrière-plan de votre site. Pour en savoir plus, consultez notre guide Modifier l’arrière-plan de votre site.
- Lien : choisissez une couleur pour tous les liens de votre site. Ici, vous pouvez choisir la couleur par défaut qui s’affiche pour tous les liens, ainsi que la couleur de pointage qui s’affiche lorsqu’une personne place son curseur sur un lien :
- Légendes : choisissez la couleur du texte utilisé dans les légendes du bloc Image.
- Boutons : définissez la couleur utilisée dans les blocs Boutons. Vous pouvez choisir la couleur du texte et définir une couleur unie ou un dégradé pour l’arrière-plan des boutons.
- Le contrôle de la couleur de pointage des boutons n’est pas disponible actuellement. Il est possible d’utiliser du code CSS pour appliquer une couleur de pointage à un bouton.
- Titres : définissez une couleur pour les blocs Titre sur le site. Vous pouvez choisir la couleur du texte et définir une couleur unie ou un dégradé pour l’arrière-plan des titres.
- Pour choisir une couleur différente pour chacun des niveaux de titre (H1 à H6), cliquez sur les trois points à côté de Couleur pour développer les options et cliquez sur le niveau de titre souhaité. Une coche apparaît à côté du niveau de titre. Vous pouvez ensuite fermer les options pour accéder aux réglages de couleur de ce niveau de titre.
Si vous souhaitez remplacer la couleur d’un texte spécifique uniquement (plutôt que de tous les éléments), vous pouvez définir une couleur différente dans les réglages de couleur du bloc de l’article ou de la page spécifique.