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 et quand surligner du texte dans WordPress

Le surlignage de texte est un moyen facile de mettre en évidence les informations importantes dans votre contenu. Il attire l'attention de l'utilisateur sur les détails que vous ne voulez pas qu'il manque.

Par exemple, surligner une offre de réduction sur votre site web WordPress avec une couleur différente attirera l'attention du lecteur, vous aidant ainsi à générer plus de ventes.

Voici un exemple de ce à quoi peut ressembler le surlignage de texte dans un article de blog :

Surligner du texte dans une couleur différente peut également aider les utilisateurs malvoyants ou ayant des difficultés de lecture à naviguer et à comprendre le contenu plus facilement. Cela peut même améliorer l'apparence de votre contenu et le rendre plus attrayant visuellement.

Cependant, surligner trop de texte sur votre page peut être distrayant et réduire son efficacité. C'est pourquoi nous vous recommandons de ne surligner que les informations importantes, comme les appels à l'action, les avertissements et autres détails auxquels les lecteurs doivent prêter attention.

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
• Method 2: Highlight Text in WordPress Using WPCode (Recommended)
• Bonus : Utilisez SeedProd pour mettre en évidence les pages importantes de votre site Web

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

Cette méthode est pour vous si vous souhaitez surligner facilement 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 maintenant sur votre écran. À partir de là, vous devrez d'abord passer à l'onglet « 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 un outil « Pipette ».

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.

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 sur le marché.

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 vos fichiers de thème. Pour plus de détails, consultez notre avis sur WPCode.

Créer un extrait de code avec 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.

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.

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.

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.

Mettre en surbrillance du texte dans l'éditeur de blocs

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 d'ici, cliquez sur l'icône « Options » dans la barre d'outils du bloc en haut. Cela ouvrira un nouveau menu déroulant où vous devrez sélectionner l'option « Modifier en HTML ».

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.

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é qui est livré avec un constructeur par glisser-déposer, plus de 350 modèles préconçus et plus de 90 blocs.

Several of our partner brands have created their entire websites with it, and they’ve had great experiences. For details, see our SeedProd review.

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.

Other than that, you can also use SeedProd to create custom themes, coming soon pages, maintenance pages, and so much more.

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

Nous espérons que ce guide vous a aidé à apprendre comment mettre en surbrillance du texte dans WordPress. Vous voudrez peut-être aussi 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 cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.