Comment surligner du texte dans WordPress (Guide pour débutants)

Vous souvenez-vous d'avoir utilisé un surligneur jaune pour marquer les passages importants dans vos manuels ? L'équivalent numérique dans WordPress est tout aussi utile pour faire ressortir les informations clés sur votre site web.

Mais de nombreux débutants ne réalisent pas à quel point il est facile d'ajouter ce formatage à leur contenu.

Tout au long de notre expérience avec WPBeginner, nous avons remarqué que des techniques simples comme le surlignage de texte font souvent la plus grande différence dans la façon dont les lecteurs interagissent avec le contenu.

Utilisé stratégiquement, le texte surligné peut guider les visiteurs vers vos points les plus importants et améliorer la rétention des messages.

Dans ce guide, nous vous montrerons plusieurs méthodes faciles pour surligner du texte dans WordPress.

Pourquoi surligner du texte dans WordPress

Surligner du texte dans WordPress vous aide à attirer l'attention sur les parties les plus importantes de votre contenu.

Cela rend les informations clés plus faciles à repérer, améliore la lisibilité et offre un soutien en matière d'accessibilité aux utilisateurs qui pourraient avoir des difficultés visuelles ou de lecture.

Voici les principaux avantages du surlignage de texte :

• Améliore la visibilité des informations clés : Il aide les détails importants comme les réductions, les offres ou les avertissements à ressortir afin que les lecteurs ne les manquent pas.
• Augmente les conversions : En surlignant les appels à l'action ou les offres spéciales, vous pouvez guider plus facilement les utilisateurs vers la prochaine étape.
• Améliore la lisibilité : Il rend le contenu long plus facile à parcourir, aidant les lecteurs à trouver rapidement les points les plus pertinents.
• Soutient l'accessibilité : Il peut aider les utilisateurs malvoyants ou ayant des difficultés de lecture à mieux comprendre et naviguer dans votre contenu.
• Améliore l'attrait visuel : Utilisé correctement, le surlignage peut rendre votre contenu plus structuré et attrayant.

Meilleures pratiques pour un surlignage de texte efficace

Maintenant que vous savez pourquoi le surlignage de texte est utile, il est important de l'utiliser de la bonne manière.

Lorsqu'il est fait correctement, il améliore la lisibilité et l'engagement, mais une utilisation excessive peut avoir l'effet inverse.

Cela dit, examinons comment surligner facilement du texte dans WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :

Méthode 1 : Surligner du texte dans WordPress à l'aide de l'éditeur de blocs

Cette méthode est pour vous si vous souhaitez facilement mettre en surbrillance du texte dans WordPress en utilisant l'éditeur de blocs (Gutenberg).

Tout d'abord, vous devrez ouvrir un article existant ou nouveau dans l'éditeur de contenu depuis la barre latérale d'administration de WordPress.

Une fois là, sélectionnez simplement le texte que vous souhaitez surligner. Ensuite, cliquez sur l'icône de flèche vers le bas dans la barre d'outils du bloc pour afficher plus d'options.

Cela ouvrira un menu déroulant où vous devrez choisir l'option « Surligner » dans la liste.

Un outil de sélection de couleur s'ouvrira alors sur votre écran. À partir d'ici, vous devrez choisir l'option de couleur « Arrière-plan ».

Après cela, choisissez une couleur de surlignage par défaut parmi les options proposées.

Vous pouvez également sélectionner une couleur personnalisée pour surligner du texte en cliquant sur l'option « Personnalisé » pour lancer le sélecteur de couleur complet.

Enfin, n'oubliez pas de cliquer sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre blog WordPress pour découvrir le texte surligné en action.

Si vous souhaitez supprimer le surlignage, sélectionnez à nouveau le texte surligné dans l'éditeur de blocs, cliquez sur l'icône de flèche vers le bas et choisissez « Surligner ».

Sélectionnez ensuite l'option « Effacer » dans le sélecteur de couleur.

Méthode 2 : Surligner du texte dans WordPress à l'aide de WPCode (Recommandé)

Si vous souhaitez utiliser systématiquement une couleur spécifique pour surligner du texte sur l'ensemble de votre site Web WordPress, alors cette méthode est faite pour vous.

Le principal avantage de cette méthode est le contrôle global. Si vous décidez un jour de changer la couleur de surlignage, vous n'avez qu'à mettre à jour le extrait de code une seule fois. La couleur de surlignage sera automatiquement mise à jour sur l'ensemble de votre site.

Vous pouvez facilement mettre du texte en surbrillance dans WordPress en ajoutant du code CSS à vos fichiers de thème. Cependant, la moindre erreur lors de la saisie du code pourrait casser votre site Web, le rendant inaccessible.

C'est pourquoi nous recommandons d'utiliser WPCode, qui est le meilleur plugin d'extraits de code WordPress du marché. Il compte plus de 3 millions d'installations actives et une note de 4,9/5 étoiles sur WordPress.org.

Après des tests approfondis, nous avons constaté que c'est le moyen le plus simple et le plus sûr d'ajouter du code à votre site Web sans modifier directement les fichiers de votre thème. Tout cela grâce à sa validation de code intelligente, sa gestion des erreurs intégrée et son environnement d'exécution sécurisé.

Pour plus de détails, consultez notre évaluation de WPCode.

Étape 1 : Installer et configurer WPCode

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

Étape 2 : Créer un extrait de code CSS personnalisé

Après l'activation, rendez-vous sur la page Snippets de code » + Ajouter un snippet depuis la barre latérale d'administration de WordPress.

Ensuite, cliquez simplement sur le bouton « + Ajouter un snippet personnalisé » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».

Ensuite, vous devez sélectionner un type de code. Pour ce tutoriel, sélectionnez l'option « Snippet CSS ».

Après cela, ajoutez un nom approprié pour votre snippet de code.

Cela vous mènera à la page « Créer un snippet personnalisé », où vous pourrez commencer par taper un nom pour votre snippet de code.

Le nom est uniquement pour votre référence et peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.

Étape 3 : Ajouter votre code personnalisé

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

mark {
background-color: #ffd4a1;
}

Une fois que vous avez fait cela, ajoutez le code hexadécimal de votre couleur de surbrillance préférée à côté de la ligne background-color dans le code.

Dans notre exemple, nous utilisons #ffd4a1, qui est une couleur brun clair.

Étape 4 : Activer l'insertion automatique et enregistrer

Après cela, faites défiler vers le bas jusqu'à la section « Insertion ».

À partir de là, sélectionnez la méthode « Insertion automatique » pour exécuter le code après activation.

Ensuite, rendez-vous en haut de la page et basculez le commutateur « Inactif » sur « Actif ».

Enfin, cliquez sur le bouton « Enregistrer le snippet » pour enregistrer vos modifications.

Étape 5 : Modifier l'article en mode HTML

Maintenant que l'extrait CSS a été activé, nous devons appliquer le formatage. Comme il s'agit d'un style personnalisé, nous passerons brièvement à la vue HTML pour un bloc spécifique afin d'encapsuler le texte.

Tout d'abord, ouvrez un article existant ou nouveau dans l'éditeur de blocs WordPress.

À partir de là, cliquez sur l'icône « Plus d'options » (trois points verticaux) dans la barre d'outils du bloc sélectionné. Cela ouvrira un nouveau menu déroulant où vous devrez sélectionner l'option « Modifier en HTML ».

Étape 6 : Encadrer le texte avec des balises <mark>

Vous verrez maintenant le contenu du bloc au format HTML.

Ici, il suffit d'envelopper le texte que vous souhaitez mettre en surbrillance entre les balises <mark> </mark> comme ceci :

<mark>highlighted-text</mark>

Cela mettra en surbrillance le texte dans la couleur hexadécimale que vous avez choisie dans votre extrait WPCode.

Après cela, cliquez sur l'option « Modifier visuellement » dans la barre d'outils du bloc pour revenir à l'éditeur visuel.

Étape 7 : Enregistrer et publier votre article

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web pour voir le texte mis en surbrillance en action.

Bonus : Utilisez SeedProd pour mettre en évidence les pages importantes de votre site Web

Nous avons discuté de la façon de formater des mots spécifiques dans votre contenu. Cependant, parfois, vous voudrez peut-être surligner des sections entières ou des pages sur votre site, comme un formulaire de contact ou un coupon cadeau.

Par exemple, si vous avez une boutique en ligne et que vous venez de lancer une vente saisonnière, vous voudrez peut-être mettre en évidence cette offre sur votre site Web.

Vous pouvez mettre en surbrillance ces sections en créant des pages de destination pour elles. Ce sont des pages autonomes sur votre site Web conçues pour générer des prospects.

Pour créer des pages de destination visuellement attrayantes pour votre site Web, nous vous recommandons d'utiliser SeedProd. C'est le meilleur constructeur de pages de destination WordPress du marché, approuvé par plus d'un million de sites Web et constamment noté 4,9/5 étoiles sur WordPress.org.

SeedProd est livré avec un constructeur par glisser-déposer, plus de 350 modèles prédéfinis et plus de 90 blocs.

Nous avons vu de nombreuses entreprises, y compris des boutiques de commerce électronique et des agences de marketing, obtenir d'excellents résultats avec SeedProd, signalant souvent des améliorations significatives en matière de génération de prospects et de conversions.

Pour plus de détails, consultez notre avis sur SeedProd.

The plugin makes it easy to create attractive landing pages that highlight important sections of your website like a contact form, sale announcement, giveaways, testimonials, optin forms, login pages, and more.

En dehors de cela, vous pouvez également utiliser SeedProd pour créer des thèmes personnalisés, des pages « bientôt disponible », des pages de maintenance, et bien plus encore.

Pour plus de détails, vous pouvez consulter notre tutoriel sur la création d’une page de destination dans WordPress.

Questions fréquemment posées sur le surlignage de texte dans WordPress

Voici quelques questions que nos lecteurs se sont fréquemment posées sur la mise en surbrillance de texte dans WordPress :

Comment changer la couleur du texte dans WordPress ?

Vous pouvez changer la couleur du texte dans WordPress en utilisant l'éditeur de blocs en sélectionnant votre texte et en ajustant les paramètres de couleur dans l'option « Couleur du texte » du bloc. Cela vous permet de styliser rapidement votre contenu sans codage.

Pour plus d'informations, consultez notre guide sur la modification de la couleur du texte dans WordPress.

Comment mettre en surbrillance du texte avec HTML dans WordPress ?

Vous pouvez mettre en surbrillance du texte avec HTML dans WordPress en l'encadrant avec une balise <mark> ou en utilisant des styles CSS en ligne. Cela vous donne plus de contrôle sur l'apparence de la mise en surbrillance.

Si vous préférez une option plus simple, vous pouvez également utiliser un plugin comme WPCode pour ajouter et gérer des extraits CSS personnalisés dans votre tableau de bord WordPress.

Quelle touche Ctrl est utilisée pour mettre en surbrillance du texte dans WordPress ?

Il n'y a pas de raccourci clavier Ctrl spécifique dans WordPress pour mettre directement en surbrillance du texte. La mise en surbrillance se fait généralement manuellement en sélectionnant le texte avec votre souris ou votre trackpad.

Cependant, vous pouvez utiliser Ctrl + A (Cmd + A sur Mac) pour sélectionner tout le texte d'un bloc ou d'un éditeur, ce qui facilite l'application ultérieure de formats comme la mise en surbrillance ou les changements de couleur.

Comment changer la couleur des liens dans WordPress ?

Vous pouvez changer la couleur des liens dans WordPress en utilisant les paramètres de personnalisation de votre thème ou du CSS personnalisé. Cela vous permet de faire correspondre les styles des liens à la conception de votre site Web pour un aspect cohérent.

Pour des instructions étape par étape, consultez notre tutoriel sur la façon de changer la couleur des liens dans WordPress.

Nous espérons que ce guide vous a aidé à apprendre comment mettre en surbrillance du texte dans WordPress. Vous voudrez peut-être également consulter notre guide étape par étape sur comment personnaliser les couleurs dans WordPress pour rendre votre site Web plus esthétique et notre comparaison des meilleurs constructeurs de sites Web IA pour 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.