Améliorer l'expérience utilisateur : Comment ajuster facilement l'espacement des lignes dans WordPress

Bien que l'espacement des lignes puisse sembler un petit détail dans la conception d'un site web, il a un impact considérable sur l'expérience de l'utilisateur. C'est particulièrement vrai dans le cas d'une page web qui présente les éléments suivantsbasé sur le texteSur un site web, l'espacement des lignes est directement lié à l'expérience de lecture du lecteur, à l'absorption des informations et à l'esthétique générale du site. Un interlignage approprié peut améliorer la lisibilité et l'attrait visuel d'un site web, ce qui influe sur la compréhension du contenu du site par les visiteurs et sur la durée de leur séjour.

Ensuite, nous examinerons en détail pourquoi l'espacement des lignes est si important dans la conception d'un site web WordPress et nous vous proposerons quelques façons différentes d'ajuster l'espacement des lignes.

Pourquoi l'espacement des lignes est-il si important ?

L'espacement des lignes est très important dans la conception d'un site web car il affecte directement l'expérience de lecture de l'utilisateur. Un interlignage correct facilite la lecture du contenu, réduit la fatigue oculaire et aide les lecteurs à mieux comprendre le contenu de l'article. Il améliore également l'esthétique générale du site web et renforce le caractère professionnel de la marque. Un interlignage trop faible rendra la page surchargée et difficile à lire, tandis qu'un interlignage trop important risque de perturber la mise en page et d'affecter la hiérarchie du contenu.

Si vous souhaitez en savoir plus sur la manière d'optimiser l'expérience utilisateur de votre site web grâce à l'espacement des lignes, nous vous recommandons de lire les articles suivantsLisibilité des pagesrépondre en chantantConception de l'expérience utilisateurdes informations telles queNe me faites pas réfléchir.Ce livre propose de nombreux conseils utiles en matière de conception.

Comment modifier l'espacement des lignes dans WordPress ?

Il existe de nombreuses façons d'ajuster l'espacement des lignes dans WordPress. Voici quelques-unes des principales façons de le faire.

1. Via l'éditeur Gutenberg

Gutenberg est l'éditeur de blocs par défaut de WordPress, et il fournit quelques ajustements de base de l'espacement des lignes dans les paramètres du paragraphe. Voici les étapes pour modifier l'espacement des lignes en utilisant l'éditeur Gutenberg :

Ajustez l'espacement des lignes à l'aide des paramètres de paragraphe :

1. Sélectionnez un paragraphe: Ouvrez WordPress page webpeut-êtreécritsSélectionnez le paragraphe que vous souhaitez ajuster.

2. Rechercher les paramètres de typographie: sur le côté droit de l'éditeurblocsDans la colonne Paramètres, recherchez "typographique".

3. Réglage de la hauteur de la rangée: Cherchez "votre taille (honorifique)L'option "espacement". Ajustez l'interligne en ajoutant, en soustrayant ou en saisissant des valeurs spécifiques.

De cette manière, il est possible d'apporter des ajustements simples à l'espacement de certains paragraphes. Si un contrôle plus précis est nécessaire, il est possible de le réaliser en personnalisant le code HTML.

En personnalisant HTML Ajustez l'espacement des lignes :

1. Passer en mode codeAprès avoir sélectionné le bloc de paragraphe, dans la barre d'outils en haut de l'écran ou dans le menu à droite, trouvez "trois points verticaux"ou le menu Options (Plus d'options).

2. Dans ce menu, sélectionnez "Modifier en HTML"Le bloc de texte passe en mode code, ce qui vous permet de modifier directement le code HTML du bloc.

3. Ajout d'un code de hauteur de ligneDans les balises de paragraphe, ajoutez le code suivant pour contrôler l'affichage de l'image.votre taille (honorifique): :

<p style="line-height: 1.8em;">Votre texte ici.</p>

hauteur de ligne est utilisée pour contrôler l'espacement des lignes. Différentes unités peuvent être utilisées (par ex. émetpx peut-être%) pour définir l'espacement des lignes et vous assurer que votre contenu est conforme aux attentes.

2. Par le biais de l'éditeur classique

Si vous utilisez la fonctionÉditeur classiqueIl y a deux façons de régler l'espacement des lignes.

via le menu déroulant "Format" :

1. Sélectionnez un paragraphe: Sélectionnez le paragraphe pour lequel vous souhaitez modifier l'interligne.
2. Utilisation du menu Format: Dans la barre d'outils, trouvez le fichier intitulé "mise en formeMenu déroulant ". Par défaut, il n'y a pas d'options intégrées pour ajuster la hauteur de la ligne.thématiqueLa différence peut être constatée dans la rubrique "votre taille (honorifique)L'option "Hauteur de ligne". Sélectionnez une hauteur de ligne prédéfinie (par exemple 1,5, 2,0) à appliquer au paragraphe sélectionné.

Par l'intermédiaire de l'éditeur "Texte" :

1. Passer en mode textePour passer à la vue HTML, cliquez sur l'onglet Texte dans le coin supérieur droit de l'éditeur classique.

12. Ajouter le code CSSAjouter des balises de paragraphe hauteur de ligne qui fonctionne de la même manière que Gutenberg :

<p style="line-height: 1.7;">Ce paragraphe a une hauteur de ligne de 1,7.</p>

Cette approche permet un contrôle plus précis de l'interligne du texte et convient aux scénarios nécessitant des mises en page plus complexes.

3. Via le personnalisateur de thème

De nombreux thèmes WordPress offrent la possibilité d'ajuster l'espacement des lignes via le personnalisateur de thème, ce qui peut être fait sans modifier le code. Voici les étapes à suivre pour modifier l'espacement des lignes via le personnalisateur de thème :

1. Personnalisateur de thème ouvertPour ce faire, vous devez vous rendre dans l'interface d'administration de WordPress et naviguer jusqu'à l'adresse suivante Apparence > PersonnalisationOuvrez le personnalisateur de thème.

2. Rechercher les paramètres de typographieDans l'écran du Customiser, trouvez le lien vers "typographique"ou"situation en matière de sécurité"Les paramètres connexes, dont la dénomination exacte varie d'un thème à l'autre.

3. Ajustement du style :Recherchez Typographie, activez le guide de style et sélectionnez le bloc de page à modifier.

4. Réglage de la hauteur de la rangéeLa hauteur de la ligne : Réglez la hauteur de la ligne à l'aide des curseurs, des boîtes de saisie numérique ou des options prédéfinies, et lorsque vous avez terminé, cliquez sur " ".poste"pour enregistrer les modifications.

Également disponible sur "CSS personnalisé"Ajouter un code dans la section qui s'applique à laTout le site webde l'espacement des paragraphes, par exemple :

p {
  hauteur de ligne : 1.6 ;
}

Il peut également être utilisé pour une page ou une zone de contenu spécifique :

.content-area p {
  hauteur de ligne : 1.8 ;
}

Par exemple, supposons que l'ID de la page soit 25 et que vous souhaitiez définir un espacement différent pour tous les paragraphes de cette page, vous pouvez utiliser la feuille de style CSS suivante

.page-id-25 p {
    hauteur de ligne : 1.8 ;
}

.page-id-25: Il s'agit d'une classe que WordPress génère automatiquement pour chaque page, dans laquelle l'élément 25 est l'ID de la page, ce qui signifie que cette règle de style ne sera appliquée qu'aux pages dont l'ID est 25.p: sélectionne tous les éléments de paragraphe de cette page.

4. Utilisation du plugin WordPress

Si vousVous ne voulez pas le faire manuellement.Le plugin WordPress est également une bonne option pour modifier les feuilles de style CSS ou utiliser l'éditeur intégré.Entretoise Le plugin est un outil simple qui vous permet d'ajuster facilement l'espacement entre les paragraphes et les éléments.

Une fois installé et activé, le Éditeur GutenbergTrouvez le site dédié "Entretoise"Bloc pourglisser (opération de la souris) (informatique)Ajustez l'espacement des lignes.

Ajout de blocs d'espacement: :

• Dans l'éditeur Gutenberg, cliquez sur le coin supérieur gauche de la page/article "+"pour ajouter un nouveau bloc.
• Rechercher "Entretoise"et cliquez sur Ajouter le bloc à la page.

Le bloc Interligne est utilisé pour créer une zone vierge sur la page, qui peut être insérée à tout endroit où vous devez ajuster l'interligne, par exempleParagraphe à paragrapheetEntre images et textesetc.

• ajustement par glisser-déposerCliquez sur le bloc d'espacement et utilisez la poignée de déplacement (généralement une flèche vers le haut ou une flèche à double sens) pour ajuster la hauteur en temps réel dans l'éditeur.

• Aperçu en temps réelL'éditeur Gutenberg permet une prévisualisation en temps réel, ce qui vous permet de voir immédiatement l'effet des ajustements de l'espacement des lignes.

Avec le plugin, vous pouvez effectuer des ajustements typographiques complexes sans avoir à connaître le code CSS.

résumés

Modifier l'espacement des lignes dans WordPress peut sembler simple, mais cela peut avoir un effet profond sur la lisibilité d'un site web, l'expérience utilisateur, le style de la marque et l'accessibilité. Selon vos besoins, il existe différentes façons d'ajuster l'espacement des lignes dans WordPress - que ce soit via l'éditeur Gutenberg, l'éditeur classique, le personnalisateur de thème ou un plugin.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.