Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment modifier la couleur du texte dans WordPress (4 méthodes faciles)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous modifier la couleur du texte dans WordPress ?

La couleur peut attirer l’attention sur le contenu le plus important d’une page et renforcer la marque de votre site. Modifier la couleur du texte peut également faciliter la lecture de votre site, en particulier pour les personnes ayant des problèmes de vue.

Dans ce guide, nous allons vous afficher comment modifier facilement la couleur du texte sur votre site WordPress.

How to change the text color in WordPress

Pourquoi modifier la couleur du texte dans WordPress ?

Il y a beaucoup de raisons pour lesquelles vous pourriez vouloir modifier la couleur du texte dans WordPress. Peut-être aimeriez-vous mettre en évidence un appel à l’action sur une page d’atterrissage, ou peut-être voulez-vous utiliser des sous-titres colorés sur votre site.

Parfois, vous pouvez même souhaiter modifier la couleur du texte sur l’ensemble d’un site. Par exemple, votre thème WordPress utilise peut-être une couleur de police grise, mais vous préféreriez utiliser du noir pour un meilleur contraste avec la couleur de votre arrière-plan.

Vous pouvez également utiliser la couleur pour susciter une émotion chez vos internautes. Par exemple, de nombreuses personnes pensent que le bleu crée un sentiment de confiance et de fiabilité. Pour en savoir plus, veuillez consulter notre guide sur la façon de choisir un jeu de couleurs parfait pour votre site WordPress.

Ceci étant dit, voyons comment vous pouvez modifier la couleur du texte dans WordPress. Il vous suffit d’utiliser les liens ci-dessous pour passer à la méthode que vous préférez :

Méthode 1 : Utilisation de l’éditeur/éditrices de blocs (idéal pour les petits montants de texte)

Si vous souhaitez simplement modifier quelques mots, un paragraphe ou un Titre à l’intérieur d’une publication, vous pouvez utiliser l’éditeur/éditrices de contenu de WordPress.

Pour Premiers pas, ouvrez la publication ou la page où vous souhaitez modifier la couleur du texte ou créez une nouvelle page.

Si ce n’est pas déjà fait, tapez le texte que vous souhaitez personnaliser. En fonction du texte, vous devrez peut-être ajouter un Paragraphe, un Titre ou un autre bloc qui accepte du texte. Pour obtenir de l’aide à ce sujet, consultez notre guide sur l’utilisation de l’éditeur de blocs de WordPress.

Dès que vous avez du texte, vous êtes prêt à en modifier la couleur.

Modification de la couleur du texte d’un bloc

Pour ce premier exemple, nous allons modifier la couleur du texte pour un bloc entier. C’est un bon moyen de mettre en évidence une section entière de contenu, comme un paragraphe entier.

Il suffit de cliquer sur le bloc et de sélectionner l’onglet « Blocage » dans le menu de droite.

Changing the text color of a WordPress block

Une fois que vous avez fait cela, trouvez la section « Couleur » et cliquez sur « Texte ».

L’éditeur visuel affiche maintenant quelques couleurs qui complètent votre thème WordPress. Vous pouvez simplement cliquer sur n’importe quelle couleur pour modifier tout le texte à l’intérieur de ce bloc.

Choosing a color from your WordPress theme

Pour utiliser une autre couleur, il suffit de cliquer sur la case située en haut de la fenêtre surgissante.

Cela ouvre un sélecteur dans lequel vous pouvez choisir une nouvelle couleur de police.

Customizing your text using the color picker

Une autre option consiste à saisir un code hexadécimal, c’est-à-dire le code HTML d’une couleur particulière. Cette option est utile si vous souhaitez utiliser une couleur très spécifique, comme la nuance exacte de rouge du logo de votre site.

Si vous n’êtes pas sûr du code hexadécimal à utiliser, il peut être utile de consulter un site tel que HTML color codes. Vous pouvez y explorer différentes couleurs et obtenir leurs codes hexadécimaux.

Une fois que vous avez obtenu un code, collez-le ou tapez-le dans la case « Hex ».

Customizing text using a hex code

Si vous changez d’avis et souhaitez rétablir la couleur de texte par défaut, il vous suffit de cliquer sur le bouton en pointillé dans le menu de droite.

Les modifications proposées varient selon que vous avez ou non modifié la couleur d’arrière-plan du bloc. Il se peut donc que vous deviez cliquer sur « Texte » ou « Tout réinitialiser ».

Restoring the theme's default text color

Modification de la couleur de texte d’un mot ou d’une phrase

Parfois, vous souhaitez uniquement modifier la couleur d’un mot, d’une expression ou d’une phrase en particulier, comme l’appel à l’action sur votre page de vente.

Pour ce faire, il suffit de mettre en évidence le mot ou la phrase que vous souhaitez modifier dans l’éditeur de blocs de WordPress. Ensuite, cliquez sur la petite flèche vers le bas dans la barre d’outils de l’éditeur de contenu et cliquez sur  » Surligner « .

Changing the text color for specific words in WordPress

Une fenêtre surgissante affiche des couleurs qui s’harmonisent avec votre thème actuel.

Vous pouvez également choisir une couleur manuellement ou même utiliser un code hexagonal en suivant le même processus décrit ci-dessus.

How to change the text color in WordPress

Méthode 2 : Utiliser l’Outil de personnalisation du thème (pour les thèmes classiques uniquement)

La couleur peut attirer l’attention sur le contenu le plus important d’une page, mais un grand nombre de couleurs différentes peut devenir écrasant. C’est pourquoi il est préférable d’utiliser la même couleur de texte sur la majeure partie de votre site WordPress.

Modifier chaque page et chaque publication manuellement à l’aide de l’éditeur de blocs prendrait beaucoup de temps, c’est pourquoi nous recommandons plutôt de modifier le thème lui-même à l’aide du client/cliente/éditrices de personnalisation du thème.

Pour Premiers pas, allez dans Apparence  » Personnaliser.

The WordPress theme customizer

Vous devez maintenant trouver les Réglages de texte du thème. Chaque thème est différent, mais vous devrez généralement rechercher une option « Typographie ».

Dans nos images, nous utilisons OceanWP.

The theme customizer Typography settings

Allez-y et cliquez sur le réglage  » Typographie  » ou un réglage similaire. À ce stade, vous verrez généralement tous les différents types de texte utilisés dans le thème, tels que Titre 1 et Titre de la page.

Pour modifier le texte à l’intérieur de vos publications et de vos pages, cliquez sur la section « Corps » ou une section similaire.

Changing the body text color using the WordPress theme customizer

Pour personnaliser la couleur du texte, trouvez la section « Couleur de la police ».

Cliquez ensuite sur « Sélectionné ».

The font color selector

Le sélecteur s’ouvre. Vous pouvez soit utiliser l’une des couleurs prêtes à l’emploi, soit choisir une nouvelle couleur à l’aide des Réglages, soit saisir un code hexagonal.

Si vous souhaitez rétablir la couleur par défaut du thème à n’importe quel moment, il vous suffit de cliquer sur  » Défaut « .

The color picker settings in the theme customizer

Vous pouvez également utiliser ces réglages pour modifier la taille et le style de la police, l’espacement des lettres, etc.

Lorsque vous êtes satisfait de l’aspect du texte, cliquez sur le bouton « Publier » en haut de l’écran.

Méthode 3 : Utilisation de l’éditeur de blocs (uniquement pour les thèmes)

Si vous utilisez un thème basé sur des blocs, comme ThemeIsle Hestia Pro ou Twenty Twenty-Three, le processus de modification de la couleur du texte du thème est légèrement différent.

Pour personnaliser le texte à l’aide de l’éditeur du site complet, allez dans Thèmes «  Éditeur « .

Selecting the Full-Site Editor from the WordPress admin panel

Vous verrez maintenant plusieurs menus permettant de personnaliser l’apparence de votre site.

Sélectionnez « Sélectionné ». Cette section définit les couleurs globales, la typographie et la mise en page de votre site.

Choosing Styles in the Full Site Editor

Sur l’écran suivant, vous pourrez choisir parmi plusieurs combinaisons de styles. Si vous souhaitez modifier complètement l’apparence de votre thème de bloc, vous pouvez choisir l’une des options disponibles.

Mais pour les besoins de la démonstration, nous allons cliquer sur le bouton « Modifier les styles ».

Clicking Edit Styles in Full Site Editor

Vous arrivez alors dans l’éditeur/éditrices de site complet et l’onglet Styles est ouvert.

Cliquons sur « Couleurs ».

Selecting Colors in the Full Site Editor

La colonne latérale affiche certains éléments dont vous pouvez modifier les réglages de couleur, comme le texte, les liens, les légendes, les boutons et les titres.

Chacun d’entre eux aura des réglages de couleur différents, alors n’hésitez pas à les explorer pour voir ce qu’ils peuvent faire.

Elements whose color you can change in the WordPress Full Site Editor

Prenons un exemple en cliquant sur « Titre ».

Pour modifier la couleur du Titre, vous pouvez soit sélectionner l’une des couleurs prédéfinies du thème, soit en utiliser une personnalisée en cliquant sur le sélecteur de couleurs.

How to change the heading text color in the WordPress Full Site Editor

Une fois que vous êtes satisfait de l’aspect des couleurs de votre texte, il vous suffit de cliquer sur le bouton « Enregistrer ». Toutes les modifications apportées seront alors appliquées à l’ensemble de vos pages et publications.

En savoir plus, consultez notre guide du débutant sur la modification complète d’un site WordPress.

Méthode 4 : Modifier la couleur du texte à l’aide du code CSS (recommandé)

Selon votre thème, il n’est peut-être pas possible de modifier le texte sur l’ensemble de votre site à l’aide des menus du personnalisateur. Une option consiste à modifier chaque élément de texte manuellement à l’aide de l’une des méthodes présentées dans cette publication. Cependant, cela prendrait beaucoup de temps et d’efforts.

La bonne nouvelle, c’est que vous pouvez personnaliser le texte sur l’ensemble d’un site en ajoutant une feuille de style CSS personnalisée. Mieux encore, cette méthode vous permet de définir des couleurs différentes pour des types de texte spécifiques, tels que le Titre 1 (h1) ou le texte de paragraphe (p).

Comme la modification et la personnalisation des thèmes WordPress peuvent changer d’un thème à l’autre, nous vous recommandons d’utiliser WPCode pour modifier le CSS personnalisé de votre site.

WPCode est la meilleure extension d’extraits de code utilisée par plus d’un million de sites WordPress. Elle facilite l’ajout de CSS, PHP, HTML et autres éléments personnalisés sans avoir à modifier les fichiers du cœur de WordPress.

La première chose à faire est d’installer et d’activer l’extension gratuite WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous dans la rubrique Extraits de code  » Ajouter un extrait.

How to add custom CSS to your site using WPCode

Consultez cette page pour découvrir tous les extraits WPCode prêts à l’emploi que vous pouvez ajouter à votre site. Il s’agit notamment d’un extrait qui vous permet de désactiver complètement les commentaires, de téléverser des types de fichiers que WordPress ne supporte généralement pas, de désactiver les pages de fichiers joints, et bien plus encore.

Il vous suffit de survoler la rubrique « Ajouter votre code personnalisé » et de sélectionner « Utiliser l’extrait » lorsqu’elle s’affiche.

Adding a custom snippet to WordPress

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier l’extrait dans le Tableau de bord WordPress.

Ensuite, ouvrez le menu déroulant « Type de code » et sélectionnez « Sélectionné CSS ».

Adding custom CSS to WordPress

Ensuite, vous pouvez ajouter le CSS personnalisé dans le petit éditeur de code. Vous devrez saisir le sélecteur du type de texte que vous personnalisez, suivi du code hexadécimal de la couleur que vous souhaitez utiliser.

Par exemple, vous pouvez modifier la couleur du texte du paragraphe en ajoutant ce qui suit :

p { color:#990000; }

Si vous souhaitez utiliser une couleur différente pour les titres de votre site, vous devez utiliser les sélecteurs h1, h2, h3 ou similaires.

Vous pouvez le voir dans l’image ci-dessous.

Changing the text color using custom code

Si vous n’êtes pas sûr du code hexagonal à utiliser, vous pouvez utiliser un site tel que HTML color codes.

Lorsque vous êtes satisfait de l’extrait, défilez jusqu’à la section  » Insertion « . WPCode peut ajouter le CSS à différents Emplacements, par exemple après chaque publication, dans l’interface publique uniquement ou dans l’interface d’administration uniquement.

Pour modifier le texte sur l’ensemble de votre blog WordPress, cliquez sur « Insertion automatique » s’il n’est pas déjà sélectionné. Ouvrez ensuite le menu déroulant « Emplacement » et choisissez « En-tête du site ».

How to add custom CSS across your entire website

Une fois cela fait, défilez vers le haut de l’écran et cliquez sur le permutateur « Inactif » pour qu’il se modifie en « Actif ».

Enfin, cliquez sur « Enregistrer l’extrait » pour mettre en direct l’extrait CSS.

How to change the text color using WPCode

Maintenant, si vous visitez votre site, vous verrez le texte personnalisé en direct.

Si vous souhaitez utiliser une couleur de texte différente à un moment donné ou simplement ajouter plus de CSS à cet extrait, il vous suffit d’aller dans Extraits de code «  Extra its de code. Survolez l’extrait que vous venez de créer et cliquez sur « Modifier » lorsqu’il apparaît.

Editing a code snippet in WordPress

Vous pouvez maintenant modifier l’extrait de code pour utiliser la nouvelle couleur, puis cliquer sur « Enregistrer l’extrait » pour appliquer la modification à votre site.

Outre la couleur du texte, vous pouvez également utiliser le WPCode pour modifier la couleur par défaut lorsque vous sélectionnez un texte ou pour activer la mise en évidence du texte sur une page et dans le contenu d’une publication.

Souvent, vous voudrez que vos pages d’atterrissage et vos pages de vente aient un aspect différent du reste de votre site. Elles se démarqueront ainsi du reste de votre site, ce qui vous permettra d’augmenter le nombre de conversions.

Si vous souhaitez modifier la couleur du texte pour une page d’atterrissage ou de vente, alors nous vous recommandons d’utiliser SeedProd. C’est la meilleure extension de page d’atterrissage pour WordPress et elle dispose d’un constructeur de page par glisser-déposer facile à utiliser.

SeedProd est livré avec plus de 90 blocs que vous pouvez simplement faire glisser et déposer sur votre page. Vous pouvez ensuite affiner ces blocs de nombreuses modifications, y compris la modification de la couleur du texte.

Si vous utilisez une page personnalisée pour obtenir plus de conversions, alors SeedProd fonctionne avec de nombreux outils tiers populaires que vous utilisez peut-être déjà pour gérer les conversions.

Il s’agit notamment des meilleurs services de marketing e-mail, de WooCommerce, de Google Analytics, et bien plus encore.

Tout d’abord, vous devez installer et activer SeedProd. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Note : Il existe également une version gratuite de SeedProd qui vous permet de créer des pages d’accueil personnalisées, des pages d’atterrissage et bien plus encore. Cependant, pour ce guide, nous utiliserons SeedProd Pro car il a beaucoup plus de modèles et de blocs avancés.

Après avoir activé l’extension, SeedProd vous demandera votre clé de licence.

Adding the license key to SeedProd

Vous pouvez trouver cette information dans votre compte sur le site de SeedProd. Après avoir saisi/saisie la clé de licence, cliquez sur le bouton « Vérifier la clé ».

Ensuite, vous devez vous rendre sur SeedProd  » Pages et cliquer sur le bouton  » Ajouter une nouvelle page d’atterrissage « .

How to create a new landing page in SeedProd

Ensuite, il est temps de choisir un modèle. SeedProd dispose de plus de 300+ modèles professionnellement conçus que vous pouvez personnaliser avec vos propres images, textes, couleurs, et plus encore.

Pour sélectionner un modèle, il suffit de survoler le modèle avec la souris et de cliquer sur l’icône « Coche ».

Choosing a SeedProd template

Nous utilisons le modèle « Juicy Sales Page » dans toutes nos images, mais vous pouvez utiliser n’importe quel modèle.

Ensuite, allez de l’avant et tapez un nom pour la page personnalisée. SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez modifier cette URL comme vous le souhaitez.

Pour aider les moteurs de recherche à comprendre le sujet de la page, vous pouvez ajouter quelques mots-clés pertinents. Cela peut améliorer le référencement de WordPress.

Lorsque vous êtes satisfait des modifications saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Adding relevant keywords to a page URL

Ensuite, vous serez dirigé vers le constructeur de page par drag-and-drop de SeedProd, où vous pourrez personnaliser votre Modèle.

L’éditeur SeedProd affiche une Prévisualisation directe de votre dessin à droite et quelques Réglages de blocs à gauche.

The SeedProd drag and drop page builder

Le menu de gauche propose également des blocs que vous pouvez faire glisser sur votre mise en page.

Par exemple, vous pouvez faire glisser et déposer des blocs standard tels que des boutons et des images ou utiliser des blocs avancés tels que des comptes à rebours, des titres animés, des boutons de partage social, etc.

Adding a social sharing block to a custom page

SeedProd est également livré avec des  » sections « , qui sont des collections de blocs qui sont souvent utilisés ensemble. Par exemple, SeedProd dispose d’un en-tête, d’une image bannière, d’un appel à l’action, de témoignages, d’un formulaire de contact, d’une FAQ, de fonctionnalités, de sections de pied de page, et plus encore. Cela peut vous aider à créer rapidement une page au design professionnel.

Pour consulter les différentes sections, il suffit de cliquer sur l’onglet « Sections ». Pour prévisualiser une section, survolez-la avec votre souris, puis cliquez sur l’icône de la loupe.

The SeedProd ready-made sections

Pour ajouter le module à votre dessin ou modèle, il vous suffit de cliquer sur « Choisir ce module ».

Cela ajoutera la section au bas de votre page.

Adding a ready-made section to your website

Vous pouvez déplacer des sections et des blocs dans votre mise en page par glisser-déposer.

Pour personnaliser un bloc, il suffit de cliquer pour le sélectionner dans votre Mise en page. Le menu de gauche affiche alors tous les réglages que vous pouvez utiliser pour configurer ce bloc.

Customizing SeedProd blocks on a landing page

Pour modifier la couleur du texte, il suffit de cliquer sur n’importe quel bloc contenant du texte.

Dans le menu de gauche, sélectionnez l’onglet « Sélectionné ». Sous « Styles », cliquez sur « Couleur ».

Changing the text color using SeedProd

Une fenêtre surgissante s’ouvre, dans laquelle vous pouvez choisir une nouvelle couleur de texte.

Une autre option consiste à saisir un code hexagonal dans le champ « Hex ».

Customizing the text color using a page builder plugin

Vous pouvez maintenant modifier la couleur du texte de n’importe quel autre bloc en suivant la même procédure que celle décrite ci-dessus.

Lorsque vous êtes satisfait de l’aspect de la page, il est temps de la publier en cliquant sur le bouton « Enregistrer ». Choisissez ensuite « Publier ».

Publishing a page with custom text colors

Si vous visitez votre boutique en ligne, votre blog ou votre site, vous verrez la nouvelle page en action, avec les couleurs de texte personnalisées.

Nous espérons que ce tutoriel vous a aidé à apprendre comment modifier la couleur du texte sur WordPress. Vous aimerez peut-être aussi notre tutoriel sur la façon d’augmenter le trafic de votre blog et notre choix d’experts des meilleurs services de marketing e-mail.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

16 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Administrateur

    • Jiří Vaněk says

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  2. Kayla says

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

  3. Ekta says

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

  4. Bob Wood says

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

  5. Tunde Sanusi (Tuham) says

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.