Comment mettre du texte en surbrillance dans WordPress

Vos visiteurs aiment votre site Web pour votre contenu – meilleur est votre contenu, plus grande est la satisfaction de vos visiteurs. Si une grande partie de votre contenu est textuel, certains de vos visiteurs peuvent se sentir un peu rebutés – les murs de texte sont notoirement peu attrayants. Vous pouvez recourir à l’ajout d’images, mais ce n’est qu’un des outils de votre boîte à outils.

Vous pouvez également rendre votre texte un peu moins effrayant en en soulignant les bits importants et attirer l’attention de vos visiteurs sur une offre spéciale, une remise, une donnée surprenante ou autre. Non seulement cela : le texte en surbrillance est plus facile à analyser, à condition que la surbrillance soit utilisée avec parcimonie et correctement. La surbrillance est également utilisée pour créer du contenu numérisable. Il n’est pas très difficile de surligner du texte dans WordPress, et il existe plusieurs façons de le faire. Voici ce que nous allons vous montrer :

Comment mettre du texte en surbrillance dans WordPress avec les modules complémentaires Qi pour Elementor

Cette solution, cela va sans dire, est destinée aux utilisateurs d’Elementor. Elementor est l’un des constructeurs de pages les plus utilisés, et pour une bonne raison – c’est polyvalent, rapide, intuitif, visuel et totalement gratuit, au moins dans sa version de base, ce qui est encore suffisant pour construire un site Web à partir de zéro.

Si vous utilisez Elementor comme éditeur de page, vous avez de la chance : notre plugin propriétaire, Qi Addons pour Elementor, est plein de widgets utiles et flexibles qui améliorent considérablement l’ensemble par défaut d’Elementor. Parmi les 60 éléments avancés que le plugin a à offrir, vous trouverez la fonctionnalité de texte en surbrillance.

Tout ce que vous avez à faire est d’installer et d’activer le dernier Elementor (la version gratuite fera l’affaire), puis installer et activer les modules complémentaires Qi pour Elementor comme vous le feriez avec n’importe quel autre plugin. Qi Addons For Elementor est entièrement gratuit.

Comme avec les 59 autres widgets du pack, vous pouvez configurer votre texte en surbrillance comme vous l’aimez en quelques minutes, comme le montre notre didacticiel vidéo pratique :

Mais si vous le préférez, nous pouvons vous y emmener étape par étape.

L’ajout d’une section avec du texte en surbrillance fonctionne de la même manière que l’ajout de tout autre widget Elementor : faites défiler vers le bas ou commencez à taper son nom pour le trouver, puis faites-le simplement glisser vers la position souhaitée dans le menu de gauche.

Faites glisser et déposez le texte en surbrillance

Vous constaterez qu’il est configuré avec une version de Lorem ipsum, avec des morceaux déjà mis en évidence. Par défaut également, le Général l’onglet doit être ouvert. Vous y trouverez le Classe personnalisée terrain, dont nous n’avons pas besoin pour cette démonstration. Vous trouverez également le Texte champ, dans lequel vous devez saisir tout le corps des parties de texte que vous souhaitez mettre en évidence, et le Mettre en surbrillance la position du texte contrôles, ce qui est essentiel : c’est ici que vous sélectionnez les mots qui seront mis en évidence.

En relation :  Conseils pour créer des permaliens personnalisés dans WordPress

Le formatage de ce champ est simple. Si tu veux surligner un seul mot, mettez simplement son numéro de position. Si vous voulez une plage, mettez le numéros des mots séparés par un tiret. Et s’il y a plus d’un endroit que vous souhaitez mettre en évidence, séparez toutes ces valeurs par une virgule, comme dans l’exemple d’espace réservé.

Et, bien sûr, ce que vous voyez est la version par défaut des paramètres de couleur. Ce qui signifie que nous ne faisons qu’effleurer la surface.

Texte surligné Général

Pour vous montrer ce que ce widget peut vraiment faire, nous avons remplacé le texte de l’espace réservé, défini la plage des mots en surbrillance comme 3-7, puis sommes passés au Style onglet pour personnaliser l’apparence.

Onglet Style de texte en surbrillance

Ici, vous pouvez modifier l’alignement de tout votre corps de texte. Nous l’avons déplacé vers le centre réglage.

le Balise de texte le contrôle est là si vous voulez changer le statut de votre texte par défaut P (pour paragraphe; le texte « normal ») à un titre, de H1 à H6. Nous sommes allés audacieux avec H1 ici. Notez que, pour des raisons d’accessibilité, il ne s’agit pas d’un paramètre de taille, bien que la modification de la taille des polices dans WordPress ne soit pas non plus un problème. le Couleur du texte et Typographie de texte les paramètres sont ce que vous devez regarder si vous voulez changer des choses comme la police Famille, Police de caractère Taille, Poids (épaisseur ou audace), Style (italique ou oblique) et Décoration (souligné, barré et similaire). Vous pouvez également modifier Hauteur de la ligne et L’espacement des lettres dans cette section. Nous laisserons tous les contrôles à leurs valeurs par défaut pour les besoins de cette démonstration.

Onglet Style de texte en surbrillance

Plus loin dans la partie inférieure du Style onglet, nous arrivons aux options de style de surbrillance. Vous pouvez utiliser le Surligner la couleur du texte pour changer la couleur du texte en surbrillance, mais nous le laisserons tel quel. Ce que nous allons changer, c’est le Mettre en surbrillance la couleur d’arrière-plan du texte du noir au valeur hexadécimale de #b7d4b5 – un vert fougère en sourdine. Notez comment la couleur du texte en surbrillance est passée au blanc pour tirer le meilleur parti possible du contraste. Vous pouvez annuler cela avec le Surligner la couleur du texte contrôle, mais nous le laisserons tel quel.

Onglet Style de texte en surbrillance

Les deux derniers contrôles sont les Mettre en surbrillance le décalage supérieur et le Mettre en surbrillance le décalage inférieur. Ces contrôles régissent la position de la barre de surbrillance par rapport au haut et au bas de la ligne. En les laissant vides, le widget met en évidence toute la hauteur de la ligne. Pour l’effet que vous voyez ci-dessous, nous avons changé le Surligner la couleur du texte contrôle à #000000 (noir), le Mettre en surbrillance le décalage supérieur à 36 et le Mettre en surbrillance le décalage inférieur à 14.

En relation :  Comment augmenter votre CTR dans WordPress
Onglet Style de texte en surbrillance
Texte surligné Final

Ceci, bien sûr, n’est qu’une des possibilités infinies des Qi Addons lorsqu’il s’agit de surligner du texte. Comme nous l’avons montré, les paramètres sont suffisamment polyvalents pour s’adapter à n’importe quelle disposition ou style.

Comment mettre du texte en surbrillance dans les blocs Gutenberg

Elementor n’est pas votre tasse de thé ? Pas de soucis, vous pouvez également utiliser l’éditeur de page par défaut de WordPress, Gutenberg, pour surligner du texte dans un bloc de paragraphe. Nous commencerons par un article et un bloc de paragraphe avec du texte d’espace réservé.

En sélectionnant le bloc de paragraphe, recherchez le Paramètres de couleur dans le menu de droite. En dessous de Couleur de l’arrière plan, sélectionnez une couleur de votre choix dans la sélection, ou entrez un Couleur personnalisée. Nous irons avec du blanc.

Paramètres de couleur de Gutenberg

Maintenant, tout votre bloc a un fond blanc. Cependant, Gutenberg ne permet pas actuellement de surligner des mots spécifiques.

Fond blanc

Ce qu’il permet, c’est de changer la couleur de mots spécifiques. Pour ce faire, sélectionnez simplement les mots dont vous souhaitez changer la couleur, puis sélectionnez Couleur du texte dans le menu déroulant du paragraphe.

Couleur du texte

Ensuite, vous pouvez choisir parmi la sélection qui vous est proposée, ou choisir un Couleur personnalisée du cueilleur. Nous avons opté pour un rouge vif.

Couleur personnalisée

Comme vous pouvez le voir, il n’y a aucun moyen de mettre en surbrillance en arrière-plan des mots individuels dans les paramètres d’un bloc de paragraphe Gutenberg. Néanmoins, vous pouvez utiliser des blocs de paragraphe avec des arrière-plans de différentes couleurs pour mettre en valeur vos paragraphes.

Comment mettre du texte en surbrillance à l’aide de balises HTML

Enfin, il existe un moyen simple de mettre en évidence des mots spécifiques à l’aide de balises HTML. Les balises dont vous avez besoin sont Mots clés. Nous allons commencer avec un bloc de paragraphe simple et ancien. Pour insérer une balise HTML, vous devez éditer le bloc en HTML. Vous pouvez également utiliser cette méthode dans le Classique éditeur, tant que vous éditez dans le Texte voir.

Modifier en HTML

Ensuite, encadrez les mots que vous souhaitez mettre en évidence avec les balises : au début, à la fin de la chaîne.

Ajouter des balises

L’effet exact de ces balises peut varier en fonction du thème et (éventuellement) d’autres paramètres, mais la plupart du temps, cela ressemblera à une surbrillance jaune.

Texte surligné HTML Final

Et voilà, c’est probablement le moyen le plus rapide de mettre du texte en surbrillance dans WordPress, mais sans aucune option de style.

En conclusion

Comme vous pouvez le voir, il existe au moins trois façons simples de surligner du texte dans WordPress. Nous n’avons pas à vous dire lequel est celui que nous préférons – avec Qi Addons for Elementor, vous obtenez de loin le plus grand nombre d’options et de paramètres de style. Vous pouvez mettre du texte en surbrillance même si vous ne souhaitez pas utiliser Elementor ou installer un nouveau logiciel. Le choix de la méthode vous appartient en dernier ressort.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.