Comment personnaliser les couleurs de votre site WordPress

Les couleurs jouent un rôle important pour rendre votre site Web visuellement attrayant et établir son identité de marque. Heureusement, WordPress facilite grandement la personnalisation des couleurs sur l'ensemble de votre site.

Ceci est essentiel pour créer un look unique et assurer la cohérence et la clarté.

Nous avons utilisé avec succès la couleur pour bâtir une identité de marque forte sur nos sites Web. Par exemple, la couleur orange est devenue une partie essentielle de la marque WPBeginner. Elle rend notre site mémorable pour les lecteurs tout en créant un design esthétiquement agréable.

Cette utilisation réfléchie de la couleur contribue à garantir que notre marque est facilement reconnaissable, améliorant ainsi l'expérience utilisateur et la fidélité à la marque.

Dans cet article, nous vous montrerons comment personnaliser facilement les couleurs de votre site Web WordPress, y compris les couleurs d'arrière-plan, d'en-tête, de texte et de liens.

Qu'est-ce que la théorie des couleurs ?

Avant de pouvoir commencer à personnaliser les couleurs de votre site Web WordPress, il est important de comprendre la théorie des couleurs.

La théorie des couleurs est l'étude des couleurs et de leur interaction. Elle aide les concepteurs à créer des combinaisons de couleurs qui se complètent mutuellement.

Lors de la conception d'un site web, vous devez choisir des couleurs qui s'harmonisent. Cela rendra votre site plus attrayant pour vos visiteurs, ce qui peut améliorer l'expérience utilisateur et augmenter l'engagement.

Différentes couleurs peuvent provoquer différentes émotions et sentiments chez les gens, et la théorie des couleurs peut vous aider à choisir la bonne combinaison pour votre site Web.

Par exemple, le rouge est souvent utilisé pour représenter la nourriture et les restaurants. D'autre part, le bleu est généralement utilisé sur les sites web bancaires et financiers.

C'est parce que le rouge peut créer des sentiments de chaleur, d'énergie et de passion, tandis que le bleu signifie la confiance, la sécurité et le calme.

En plus de compléter les couleurs, vous pouvez également utiliser le contraste des couleurs pour attirer l'attention sur les zones importantes de votre blog WordPress.

Cela vous permet de rendre votre contenu plus lisible, d'établir une identité de marque forte et de créer une ambiance spécifique sur le site Web.

Que sont les thèmes WordPress et pouvez-vous changer les couleurs des thèmes ?

Les thèmes WordPress contrôlent l'apparence de votre site web pour l'utilisateur. Un thème WordPress typique est un ensemble de modèles prédéfinis que vous installez sur votre site web pour en modifier l'apparence et la mise en page.

Les thèmes rendent votre site Web plus attrayant, plus facile à utiliser et augmentent l'engagement.

Vous pouvez également créer vos propres conceptions de thèmes personnalisés en utilisant des plugins comme SeedProd et le Thrive Theme Builder.

Avec WordPress, vous pouvez facilement personnaliser les thèmes et changer leur arrière-plan, leurs polices, leurs boutons et les couleurs des liens.

Cependant, gardez à l'esprit que certains thèmes sont livrés avec des choix de couleurs prédéfinis, tandis que d'autres offrent plus de flexibilité pour choisir les vôtres.

Cela dit, voyons comment vous pouvez facilement personnaliser les couleurs dans WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder aux différentes parties de notre tutoriel :

Comment personnaliser les couleurs dans WordPress

Vous pouvez personnaliser les couleurs dans WordPress en utilisant de nombreuses méthodes différentes, notamment le personnaliseur de thème, l'éditeur de site complet, le CSS personnalisé, les plugins de constructeur de pages, et plus encore.

Avec plusieurs méthodes disponibles pour personnaliser les couleurs, le choix de la bonne dépend du type de votre thème, de votre aisance technique et du niveau de contrôle souhaité.

Développez le bloc ci-dessous pour voir une comparaison rapide qui peut vous aider à décider :

Changer les couleurs à l'aide du personnaliseur de thème

Il est très facile de changer les couleurs à l'aide du personnaliseur de thème WordPress intégré.

Tout d'abord, visitez la page Apparence » Personnaliser depuis la barre latérale d'administration.

Pour ce tutoriel, nous utiliserons le thème par défaut Twenty Twenty-One.

N'oubliez pas que le personnaliseur de thème peut sembler différent selon le thème que vous utilisez actuellement.

Par exemple, le thème Twenty Twenty-One est livré avec un panneau « Couleurs et mode sombre » qui permet aux utilisateurs de sélectionner une couleur d'arrière-plan et de personnaliser le mode sombre.

Après avoir ouvert le panneau, cliquez simplement sur l'option « Sélectionner la couleur ». Cela ouvrira le sélecteur de couleurs, où vous pourrez choisir votre couleur d'arrière-plan préférée.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Publier » en haut pour enregistrer vos modifications et les rendre visibles sur votre site Web.

Changer les couleurs dans l'éditeur de site complet

Si vous utilisez un thème bloc, vous n’aurez pas accès à l’outil de personnalisation du thème. Cependant, vous pouvez utiliser l’éditeur complet du site (FSE) pour modifier les styles globaux et les palettes de couleurs de votre site web.

Tout d’abord, rendez-vous dans l’écran Apparence » Éditeur depuis la barre latérale d’administration pour lancer l’éditeur complet du site. Maintenant, vous devez cliquer sur l’icône « Styles » dans le coin supérieur droit de l’écran.

Cela ouvrira la colonne « Styles », où vous devrez cliquer sur le panneau « Couleurs ».

À partir d’ici, vous pouvez définir les couleurs d’arrière-plan globales, de texte, de liens, de titres et de boutons de votre thème, établissant ainsi une identité visuelle cohérente sur l’ensemble de votre site.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Modifier les couleurs à l'aide de CSS personnalisé

CSS est un langage de programmation que vous pouvez utiliser pour modifier l'apparence visuelle de votre site web, y compris ses couleurs. Vous pouvez enregistrer du CSS personnalisé dans les paramètres de votre thème pour appliquer vos personnalisations à l'ensemble de votre site.

Cependant, si vous ajoutez du CSS personnalisé directement dans les fichiers de votre thème, ces modifications pourraient être perdues si vous changez de thème ou mettez à jour votre thème actuel. C’est pourquoi nous recommandons d’utiliser un plugin comme WPCode.

C’est le moyen le plus simple d’ajouter du code CSS personnalisé, et cela vous permettra de personnaliser en toute sécurité les couleurs de votre site WordPress.

Tout d'abord, vous devrez installer et activer le plugin WPCode. Pour plus d'instructions, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Après activation, visitez la page Extraits de code » + Ajouter un extrait dans la barre latérale d'administration de WordPress.

Ici, cliquez simplement sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Une fois sur la page « Créer un extrait personnalisé », vous pouvez commencer par taper un nom pour votre code.

Après cela, sélectionnez simplement « Extrait CSS » comme « Type de code » dans le menu déroulant.

Pour cette section, nous ajoutons du code CSS personnalisé qui change la couleur du texte sur le site web :

p   { color:#990000;  }

Ajoutez simplement le code CSS personnalisé dans la boîte « Aperçu du code ».

Une fois que vous avez fait cela, faites défiler jusqu'à la section « Insertion ».

Ici, vous pouvez choisir l’option « Insertion automatique » si vous souhaitez que le code soit exécuté automatiquement sur l’ensemble de votre site web.

Vous pouvez également ajouter un shortcode à des pages ou des articles WordPress spécifiques.

Une fois que vous avez terminé, faites défiler jusqu'en haut de la page et basculez le commutateur « Inactif » sur « Actif ».

Enfin, vous devez cliquer sur le bouton « Enregistrer le snippet » pour appliquer le code CSS à votre site Web.

Changer les couleurs avec SeedProd

Vous pouvez également personnaliser les couleurs à l'aide du plugin SeedProd.

C'est le meilleur constructeur de pages WordPress du marché, et il vous permet de créer des thèmes à partir de zéro sans utiliser de code.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, vous pouvez lire notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, accédez à la page SeedProd » Theme Builder depuis la barre latérale d'administration de WordPress.

À partir de là, cliquez sur le bouton « Kits de modèles de thème » en haut.

Remarque : Si vous souhaitez créer votre propre design de thème à partir de zéro, vous devrez cliquer sur le bouton « + Ajouter un nouveau modèle de thème » à la place.

Cela vous mènera à la page « Sélecteur de kits de modèles de thème ». Ici, vous pouvez choisir parmi tous les modèles de thèmes préconçus proposés par SeedProd.

Pour plus de détails, consultez notre tutoriel sur comment créer facilement un thème WordPress sans code.

Après avoir choisi un thème, vous serez redirigé vers la page « Modèles de thème ».

Ici, activez le commutateur « Activer le thème SeedProd » sur « Oui » pour activer le thème.

Maintenant, cliquez sur le lien « Modifier le design » sous n'importe quelle page de thème pour ouvrir l'éditeur par glisser-déposer.

Une fois que vous y êtes, cliquez sur l'icône d'engrenage en bas de la colonne de gauche.

Cela vous dirigera vers les paramètres « CSS global ».

À partir de là, vous pouvez personnaliser les couleurs de l'arrière-plan de votre site Web, du texte, des boutons, des liens, et plus encore.

Une fois que vous êtes satisfait de vos choix, cliquez sur le bouton « Enregistrer » pour stocker vos paramètres.

Comment changer la couleur de fond dans WordPress

Tous les thèmes WordPress sont livrés avec une couleur d'arrière-plan par défaut. Cependant, vous pouvez facilement la modifier pour personnaliser votre site Web et améliorer sa lisibilité.

Si vous utilisez un thème de bloc, vous devrez modifier la couleur de l'arrière-plan à l'aide de l'éditeur de site complet.

Tout d'abord, vous devez visiter l'écran Apparence » Éditeur depuis le tableau de bord WordPress.

Cela lancera l'éditeur de site complet, où vous devrez cliquer sur l'icône « Styles » dans le coin supérieur droit de l'écran.

Après cela, cliquez simplement sur le panneau « Couleurs » pour ouvrir des paramètres supplémentaires

Dans ce panneau, vous pouvez maintenant gérer la couleur par défaut de différents éléments de votre site Web.

Ici, vous devez cliquer sur l'option « Arrière-plan » dans la section « Éléments ».

Une fois ce panneau développé, vous pouvez choisir la couleur d'arrière-plan de votre site Web à partir d'ici.

Tous les thèmes WordPress offrent un certain nombre de couleurs de site Web par défaut parmi lesquelles vous pouvez choisir.

Cependant, si vous souhaitez utiliser une couleur personnalisée, vous devez cliquer sur l'outil Couleur personnalisée. Cela ouvrira le sélecteur de couleurs, où vous pourrez sélectionner une couleur de votre choix.

Vous pouvez également utiliser des couleurs dégradées pour l'arrière-plan de votre site Web.

Pour ce faire, vous devrez d'abord passer à l'onglet « Dégradé » en haut.

Ensuite, vous pouvez choisir un dégradé par défaut dans le thème ou sélectionner vos propres couleurs de dégradé à l'aide de l'outil Sélecteur de couleurs.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Vous pouvez également modifier l'arrière-plan de votre site Web en utilisant le personnalisateur de thème, SeedProd et du CSS personnalisé.

Pour des instructions plus détaillées, vous voudrez peut-être consulter notre guide pour débutants sur comment changer la couleur d'arrière-plan dans WordPress.

Comment changer la couleur de l'en-tête dans WordPress

De nombreux thèmes WordPress sont livrés avec un en-tête intégré en haut de la page. Il contient généralement des liens importants de la page, des icônes sociales, des CTA, et plus encore.

Si vous utilisez un thème basé sur des blocs, vous pouvez facilement personnaliser l'en-tête WordPress à l'aide de l'éditeur de site complet.

Tout d'abord, vous devez visiter l'écran Apparence » Éditeur depuis la barre latérale d'administration pour lancer l'éditeur de site complet. Une fois sur place, double-cliquez sur le modèle « En-tête » en haut pour le sélectionner.

Cela ouvrira les paramètres de l'en-tête dans le panneau de blocs à droite. Ici, vous devez faire défiler jusqu'à la section « Couleur » et cliquer sur l'option « Arrière-plan ».

Cela ouvrira une fenêtre contextuelle où vous pourrez choisir une couleur par défaut pour votre en-tête.

Vous pouvez également sélectionner une couleur personnalisée en ouvrant l'outil Sélecteur de couleurs.

Pour personnaliser votre en-tête à l'aide d'un dégradé de couleurs, vous devez passer à l'onglet « Dégradé ».

Après cela, vous pouvez choisir une option de dégradé par défaut ou personnaliser la vôtre à l'aide du Sélecteur de couleurs.

Enfin, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Si vous souhaitez modifier la couleur de l’en-tête à l’aide du personnaliseur de thème ou de CSS supplémentaires, vous voudrez peut-être lire notre guide pour débutants sur comment personnaliser votre en-tête WordPress.

Comment changer la couleur du texte dans WordPress

Changer la couleur du texte peut aider à améliorer la lisibilité de votre blog WordPress.

Si vous utilisez un thème basé sur des blocs, vous devrez changer la couleur du texte à l'aide de l'éditeur de site complet.

Vous pouvez commencer par visiter l'écran Apparence » Éditeur depuis la zone d'administration de WordPress. Cela lancera l'éditeur de site complet, où vous devrez cliquer sur l'icône « Styles » dans le coin supérieur droit.

Ensuite, cliquez sur le panneau « Couleurs » pour accéder aux paramètres supplémentaires.

Une fois que vous y êtes, cliquez sur l'option « Texte » dans la section « Éléments ».

Une fois les paramètres de couleur du texte ouverts, vous verrez un certain nombre de couleurs de texte sous la section « Défaut ».

Alternativement, vous pouvez également utiliser une couleur de texte personnalisée en cliquant sur l'outil Couleur personnalisée et en ouvrant le sélecteur de couleurs.

Une fois que vous avez fait votre choix, cliquez simplement sur le bouton « Enregistrer » pour sauvegarder les modifications.

Astuce bonus : Vous pouvez utiliser l’outil WebAIM Contrast Checker pour vérifier si la couleur de votre arrière-plan et de votre texte fonctionnent bien ensemble. L’outil peut vous aider à améliorer la lisibilité du texte sur votre site Web.

Pour personnaliser la couleur du texte à l’aide de CSS, du personnaliseur de thème ou de SeedProd, vous voudrez peut-être consulter notre guide étape par étape sur comment changer la couleur du texte dans WordPress.

Comment changer la couleur de sélection du texte dans WordPress

Lorsqu'un visiteur sélectionne du texte sur votre site Web, une couleur d'arrière-plan s'affiche. La couleur par défaut est le bleu.

Cependant, parfois, la couleur peut ne pas bien s'harmoniser avec votre thème WordPress, et vous pourriez vouloir la changer.

Vous pouvez changer la couleur de sélection du texte en ajoutant du code CSS personnalisé. Cependant, si vous ajoutez ce code directement dans les fichiers de votre thème, il pourrait être perdu si vous changez de thème ou mettez à jour votre thème actuel.

C’est pourquoi nous recommandons d’utiliser WPCode, qui est le meilleur plugin d’extraits de code WordPress du marché.

Tout d’abord, vous devez installer et activer le plugin WPCode. Pour plus d’instructions, veuillez consulter notre guide sur comment installer un plugin WordPress.

Une fois activé, rendez-vous sur la page Extraits de code » + Ajouter des extraits depuis la barre latérale d'administration.

Ensuite, cliquez simplement sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Une fois sur la page « Créer un extrait personnalisé », vous pouvez commencer par taper un nom pour votre extrait de code.

Après cela, choisissez « Extrait CSS » comme « Type de code » dans le menu déroulant à droite.

Maintenant, copiez et collez le code CSS suivant dans la boîte « Aperçu du code » :

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

Vous pouvez modifier la couleur de sélection du texte en remplaçant le code hexadécimal à côté de background-color dans l'extrait CSS.

Une fois que vous avez ajouté le code, faites défiler vers le bas jusqu'à la section « Insertion ».

Ici, choisissez la méthode « Insertion automatique » pour exécuter le code automatiquement lors de l'activation.

Après cela, faites défiler vers le haut et basculez le commutateur « Inactif » sur « Actif ».

Enfin, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos modifications.

Maintenant, vous pouvez visiter votre site web pour vérifier la couleur de sélection du texte.

Vous pouvez également changer la couleur de sélection du texte en ajoutant le code CSS dans la section « CSS additionnel » de l’outil de personnalisation du thème. Pour plus de détails, veuillez consulter notre tutoriel sur comment changer la couleur de sélection du texte par défaut dans WordPress.

Comment changer la couleur des liens dans WordPress

Vous pouvez facilement changer la couleur des liens dans WordPress en utilisant l'éditeur de site complet ou du CSS personnalisé.

Si vous utilisez un thème basé sur des blocs, rendez-vous sur l'écran Apparence » Éditeur depuis la barre latérale d'administration.

Une fois l'éditeur de site complet ouvert, cliquez sur l'icône « Styles » dans le coin supérieur droit.

Ensuite, cliquez sur le panneau « Couleurs » dans la colonne de droite pour voir les paramètres supplémentaires.

Une fois que vous y êtes, cliquez simplement sur l'onglet « Liens ».

Cela lancera les paramètres de couleur des liens, et vous verrez plusieurs couleurs de liens par défaut affichées dans la colonne de droite.

Cependant, vous pouvez également utiliser une couleur de lien personnalisée en cliquant sur l'outil Couleur personnalisée pour ouvrir le sélecteur de couleurs.

Vous pouvez également modifier la couleur du lien au survol à l'aide du FSE. Cela signifie que la couleur du lien changera lorsque quelqu'un passera sa souris dessus.

Tout d'abord, vous devrez passer à l'onglet « Survol » en haut.

Une fois là, vous pouvez choisir une couleur par défaut ou personnalisée pour modifier la couleur du lien au survol.

Enfin, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Pour des instructions plus détaillées, vous voudrez peut-être consulter notre guide pour débutants sur comment changer la couleur des liens dans WordPress.

Comment changer le schéma de couleurs de l'administrateur dans WordPress

Vous pouvez également modifier le schéma de couleurs de l'administrateur dans WordPress si vous le souhaitez. Cette méthode peut être utile si vous souhaitez que le tableau de bord de l'administrateur corresponde à la marque de votre site Web ou si vous souhaitez utiliser vos couleurs préférées.

Cependant, gardez à l'esprit que la modification du schéma de couleurs du tableau de bord WordPress n'affectera pas la partie visible de votre site Web.

Pour modifier le schéma de couleurs de l'administrateur, visitez simplement la page Utilisateurs » Profil depuis le tableau de bord WordPress.

Ici, vous verrez plusieurs schémas de couleurs à côté de l'option « Schéma de couleurs de l'administrateur ».

Choisissez celui que vous préférez, puis cliquez sur le bouton « Mettre à jour le profil » en bas de la page pour enregistrer vos modifications.

Pour des instructions plus détaillées, veuillez consulter notre guide pour débutants sur comment changer le schéma de couleurs de l’administrateur dans WordPress.

Questions fréquemment posées sur la personnalisation des couleurs dans WordPress

Voici quelques questions que nos lecteurs nous ont fréquemment posées concernant le changement de couleurs dans WordPress :

Comment changer les couleurs primaires dans WordPress ?

Vous pouvez changer les couleurs primaires dans WordPress en utilisant l’outil de personnalisation, l’éditeur complet du site, ou un constructeur de page comme SeedProd. La plupart des thèmes vous permettent également d’ajuster les couleurs globales en quelques clics.

Quelle est la règle des 3 couleurs pour les sites web ?

La règle des 3 couleurs pour les sites web signifie utiliser une couleur principale, une couleur secondaire et une couleur d’accentuation. Cela permet de garder votre design épuré, équilibré et facile à lire.

Comment personnaliser entièrement un thème WordPress ?

Vous pouvez personnaliser entièrement un thème WordPress en utilisant l’éditeur complet du site ou un constructeur de page comme SeedProd. Ces outils vous permettent de modifier les mises en page, les couleurs, les polices et les modèles sans coder.

ChatGPT peut-il m’aider à changer les couleurs dans WordPress ?

ChatGPT peut vous aider à changer les couleurs dans WordPress en vous guidant étape par étape tout au long du processus. Il peut également expliquer quels paramètres ou outils utiliser en fonction de votre thème.

Cependant, ChatGPT ne peut pas apporter directement de modifications à votre site web ou à votre thème. Vous devrez toujours appliquer les modifications manuellement dans WordPress ou à l'aide de votre constructeur de pages choisi.

Comment ajouter des couleurs personnalisées dans WordPress ?

Vous pouvez ajouter des couleurs personnalisées dans WordPress en les définissant dans le personnaliseur, l'éditeur complet du site ou les paramètres du thème. « Définir » une couleur signifie simplement définir et enregistrer les valeurs de couleur choisies afin qu'elles soient disponibles sur l'ensemble de votre site.

De nombreux constructeurs de pages comme SeedProd vous permettent également de créer et d'enregistrer vos propres palettes de couleurs.

Comment ajouter une variation de couleur dans WordPress ?

Vous pouvez ajouter une variation de couleur dans WordPress en utilisant différentes palettes de couleurs pour des sections, des pages ou des éléments. Cela vous aide à créer un contraste visuel tout en maintenant la cohérence de votre conception.

Nous espérons que cet article vous a aidé à apprendre comment personnaliser les couleurs de votre site Web WordPress. Vous voudrez peut-être également consulter notre article sur comment choisir un schéma de couleurs parfait pour votre site Web WordPress et notre guide ultime des éléments de conception WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.