Un texte dense et surchargé décourage les visiteurs avant même qu'ils aient fini de lire le premier paragraphe. Ajuster l'interligne est l'un des moyens les plus rapides d'améliorer la lisibilité de votre contenu sans avoir à refondre l'intégralité de votre site.
Ce guide présente quatre méthodes pour modifier l'interligne dans WordPress, de l'éditeur de blocs au CSS personnalisé, afin que vous puissiez choisir l'approche qui convient le mieux à votre configuration.
Vous pouvez modifier l'interligne dans WordPress via les paramètres de typographie de l'éditeur de blocs Gutenberg, le menu déroulant Format de l'éditeur classique ou le CSS en ligne, la section CSS additionnelle du personnalisateur de thème, ou encore une extension d'espacement. Un interligne compris entre 1,5 et 1,8 convient à la plupart des sites WordPress et offre un texte confortable et lisible sur tous les appareils.
Importance de l'interligne dans WordPress
L'interligne détermine l'espace vertical entre chaque ligne de texte. Un interligne trop faible rend le texte compact et difficile à lire. Un interligne trop important nuit à la cohérence du texte et le rend décousu.
Un interlignage adapté assure une lecture fluide et sans accroc. Il est également gage de professionnalisme. Une page bien aérée paraît soignée et propre. À l'inverse, une page mal aérée donne une impression d'inachevé, aussi bon soit le texte.
Pour la plupart des sites WordPress, une hauteur de ligne comprise entre 1,5 et 1,8 produit un texte confortable et lisible sur les écrans de bureau et mobiles.
Améliorez la mise en page de votre site web pour une meilleure expérience utilisateur
Corrigez les problèmes d'espacement, de typographie et de mise en page pour améliorer la lisibilité et créer une expérience utilisateur fluide sur votre site WordPress.
Comment modifier l'interligne dans WordPress ?
WordPress propose plusieurs méthodes pour ajuster l'interligne, selon votre éditeur, votre thème et votre niveau de maîtrise du code. Choisissez la méthode qui convient le mieux à votre configuration.
Méthode 1 : Modifier l’interligne dans WordPress à l’aide de l’éditeur classique
Si vous utilisez encore l'éditeur classique, deux options s'offrent à vous pour ajuster l'interligne. Le menu déroulant Format est la plus rapide. L'éditeur de texte, quant à lui, offre un contrôle plus précis grâce au CSS intégré.
Utiliser le menu déroulant « Format »
- Étape 1: Accédez à votre article ou page WordPress et sélectionnez le texte que vous souhaitez modifier.
- Étape 2: Cliquez sur le menu déroulant Format dans la barre d'outils de l'éditeur classique.
- Étape 3: Sélectionnez la hauteur de ligne si votre thème le prend en charge et choisissez une valeur prédéfinie comme 1,5 ou 2,0.
Utilisation de l’éditeur « Texte »
L'éditeur classique vous permet de basculer entre l'édition « visuelle » et l'édition « texte » (HTML). Voici comment personnaliser l'interligne à l'aide de l'éditeur « texte » :
- Étape 1: Dans le coin supérieur droit de l'éditeur classique, cliquez sur l'onglet « Texte » pour passer en mode HTML.
- Étape 2: Vous pouvez maintenant ajouter du CSS en ligne directement à vos balises de paragraphe pour contrôler l'espacement des lignes.
Par exemple:
<p style="line-height: 1.7;">Ce paragraphe a une hauteur de ligne de 1,7.</p>Tout comme dans Gutenberg, la propriété line-height peut ici utiliser des nombres, des valeurs de longueur, des pourcentages ou des mots-clés pour définir l'espacement.
Méthode 2 : Utiliser l’éditeur Gutenberg pour modifier l’interligne
L'éditeur de blocs Gutenberg intègre des commandes typographiques permettant d'ajuster l'interligne sans modifier le code. Pour un contrôle plus précis, il est également possible de modifier directement le code HTML du bloc.
Réglage de l'interligne via les paramètres de paragraphe
- Étape 1: Dans votre article ou page WordPress , sélectionnez le paragraphe que vous souhaitez modifier.
- Étape 2 : Accédez à la barre latérale des paramètres du bloc, à droite. Recherchez la section intitulée « Typographie » ou « Paramètres du texte ».
- Étape 3: Cliquez sur le menu à trois points à côté de Typographie, et vous verrez l'option « Hauteur de ligne ».
- Étape 4 : Il ne vous reste plus qu’à ajuster l’interligne à votre convenance. C’est aussi simple que ça !
Personnaliser l'interligne avec HTML
Si vous souhaitez un contrôle plus précis, l' HTML est là pour vous.
Voici comment procéder :
- Étape 1 : Sélectionnez le bloc de paragraphe que vous souhaitez modifier. Cliquez sur l’icône « p », puis passez en mode « Code ».
- Étape 2 : Cliquez à nouveau sur l’icône de code, puis choisissez « HTML personnalisé ». Votre paragraphe sera alors transformé en code HTML modifiable.
- Étape 3 : Ajoutez maintenant l’extrait de code suivant avec le contenu souhaité :
<p style="line-height: 1.8em;">Votre texte ici.</p>La propriété line-height contrôle l'espace entre les lignes de texte.
Voici comment vous pouvez le configurer :
- Nombre : Un multiplicateur de la taille de la police (par exemple, 1,5 signifie 1,5 fois la taille de la police).
- Valeur de longueur : Par exemple, 20px pour un espacement de 20 pixels.
- Pourcentage : 150 % pour l’espacement, soit 150 % de la taille de la police.
- Mot-clé : Par exemple, la valeur normale (qui est généralement d’environ 1,2).
Remarque : Les modifications apportées aux paramètres du bloc ne s’appliqueront qu’à ce paragraphe spécifique, mais l’utilisation du bloc « HTML personnalisé » avec CSS en ligne vous offre plus de flexibilité, vous permettant de styliser plusieurs paragraphes ou éléments exactement comme vous le souhaitez.
Méthode 3 : Ajuster l’interligne à l’aide du personnalisateur de thème
L'outil de personnalisation du thème vous permet de modifier l'interligne de l'ensemble du site sans avoir à modifier les blocs ou les articles individuellement. Les options disponibles dépendent de votre thème, mais la plupart des thèmes modernes incluent des commandes de typographie.
Étape 1 : Accédez à votre d’administration WordPress et allez dans Apparence > Personnaliser. Cela ouvre l’outil de personnalisation du thème.
Étape 2 : Une fois dans l’outil de personnalisation, recherchez les sections intitulées « Typographie », « Contenu » ou « Global ». Le nom et l’emplacement exacts peuvent varier en fonction de votre thème.
Étape 3 : Repérez maintenant les commandes de hauteur de ligne. Selon votre thème, vous trouverez peut-être l’une des options suivantes :
- Curseur : Il suffit de le faire glisser pour ajuster l’espacement.
- Champ de saisie numérique : Entrez une valeur de hauteur de ligne spécifique, par exemple 1,5.
- Options prédéfinies : Choisissez des paramètres de hauteur de ligne prédéfinis.
Étape 4 : Une fois vos modifications effectuées, cliquez sur le bouton « Publier » pour les enregistrer. Le plus intéressant ? Vous obtenez un aperçu en direct de l’effet des modifications sur votre site et vous pouvez ainsi constater les résultats instantanément !
Comment utiliser du CSS supplémentaire pour l'espacement des lignes ?
Si votre thème ne propose pas de contrôle intégré de l'interligne, utilisez la section CSS additionnelle du personnalisateur. Ajoutez le code suivant pour ajuster l'interligne de tous les paragraphes de votre site.
Pour cibler une zone de contenu spécifique, ajustez le sélecteur en fonction de la classe de contenu de votre thème. Vous pouvez utiliser des valeurs en px, em, rem ou sans unité, selon votre préférence.
Méthode 4 : Utiliser des plugins WordPress pour ajuster l’interligne
Pour ajuster l'espacement sans modifier le code ni l'outil de personnalisation, l'utilisation d'une extension est la solution la plus simple. L'extension Spacer ajoute un bloc d'espacement dédié à l'éditeur Gutenberg, permettant de contrôler la hauteur entre les éléments à l'aide d'un curseur ou d'un champ numérique.
Installez et activez Spacer depuis le répertoire des extensions WordPress. Un nouveau bloc Spacer apparaît dans votre outil d'insertion de blocs. Insérez-le entre deux blocs, définissez la hauteur souhaitée, prévisualisez le résultat, puis publiez ou mettez à jour votre page.
Conclusion
L'interligne est un petit changement qui influence considérablement la lisibilité de votre contenu et le temps que les visiteurs passent sur votre page. Commencez par les paramètres de typographie de Gutenberg si vous souhaitez une correction rapide sur des blocs individuels.
Utilisez la section CSS additionnelle du personnalisateur de thème pour ajuster l'espacement sur l'ensemble de votre site. Une hauteur de ligne comprise entre 1,5 et 1,8 convient à la plupart des sites WordPress et constitue un bon point de départ avant d'effectuer des ajustements plus précis en fonction de votre police et de votre design.
FAQ sur la modification de l'interligne dans WordPress
Comment modifier l'interligne dans WordPress ?
Utilisez les paramètres de typographie de l'éditeur Gutenberg pour ajuster la hauteur de ligne des blocs individuellement. Pour des modifications globales, ajoutez du CSS dans la section CSS additionnelle du personnalisateur de thème. Pour une solution sans code, utilisez l'extension Spacer.
Quelle est la différence entre la hauteur de ligne et l'espacement des paragraphes ?
La hauteur de ligne détermine l'espace entre les lignes d'un paragraphe. L'espacement des paragraphes détermine l'écart entre les paragraphes. Ces deux paramètres influent sur la lisibilité, mais se règlent via des propriétés CSS différentes.
Est-il possible de modifier l'espacement dans WordPress sans coder ?
Oui. Les paramètres de typographie de l'éditeur Gutenberg et le personnalisateur de thème permettent tous deux de régler l'interligne sans écrire une seule ligne de code. L'extension Spacer est une autre solution sans code pour ajouter de l'espace entre les blocs.
Pourquoi l'interligne est-il important pour la lisibilité ?
Un interlignage adéquat permet à chaque ligne de texte d'aérer suffisamment pour une lecture confortable. Un texte dense fatigue rapidement les lecteurs et augmente le taux de rebond sur les pages riches en contenu.
Quelle est la valeur idéale de la hauteur de ligne dans WordPress ?
Une hauteur de ligne comprise entre 1,5 et 1,8 convient à la plupart des sites WordPress. Commencez par 1,6 et ajustez-la en fonction de la taille de votre police et de votre design jusqu'à ce que le texte soit lisible sur les écrans les plus courants.
