Structurer ave le bloc « Titre »

Il est là pour hiérarchiser et prioriser la lecture. Les titres sont très souvent pour marquer des étapes éditoriales avec des textes impactants et mémorables pour les internautes.

Parmi tous les blocs natifs que propose Gutenberg, c’est celui qui va structurer votre contenu, voyons ensemble ce qu’il a dans le ventre.

Quand choisir d’utiliser des titres ?

Avant de foncer tête baissée, on vous propose de réfléchir quelques instants aux moments opportuns pour utiliser des titres, comme par exemple :

  • Annoncer un nouveau sujet, une nouvelle section
  • Structurer son contenu aux yeux des moteurs de recherche
  • Établir une feuille de route lors de la rédaction
  • Faciliter la compréhension au lecteur en un coup d’œil depuis un sommaire

Comment ajouter un bloc titre dans l’éditeur de WordPress ?

Depuis la bibliothèque des blocs dans Gutenberg :

  • Cliquez sur le bouton « + » que vous trouverez dans votre interface d’édition ;
  • En recherchant « titre » dans la barre de recherche vous trouverez votre bonheur.

Quelles options sont disponibles avec le bloc « titre » ?

Les alignements de titres

Ça parait évident mais il s’agit de positionner le texte à gauche, au centre ou à droite.

En fonction des mises en page choisies, il peut être judicieux de centrer certains titres pour les mettre en valeur et marquer les esprits.

Les réglages de couleurs

Tout comme les blocs paragraphes, les titres peuvent être stylisés avec de la couleur. On ne le répèteras jamais assez, mais, méfiez vous du syndrome sapin de Noël !

L’idée ce n’est pas d’avoir le plus de couleur variées sur son site mais plutôt de laisser le thème gérer vos styles, comme ça pas de surprise, et on garde une cohérence pendant toute la durée de vie de votre site.

Les réglages avancé

Finissons-en avec les réglages de la barre latérale de droite avec l’onglet « Avancé« . Destiné à un public averti, ce réglage permet d’appliquer une classe à votre bloc, afin d’en manipuler le style CSS via la feuille de styles de votre thème. Vous ne comprenez rien ? tant mieux, c’est que vous n’avez pas besoin de toucher à ce réglage !

Comprendre les niveaux de titre

Remettez-vous sur les bancs de l’école lorsque vous adoriez (ou pas…) aller en cours de français ou toutes les semaines, vous deviez analyser des textes, faire des dissertations, etc.

En réalité sans le savoir vous faisiez déjà de bons exercices pour optimiser vos contenus pour les moteurs de recherche.

Commencez par construire votre contenu en pensant le plan que vous détaillerez par la suite. Vous rédigerez le plus gros de votre contenu plus tard, en fonction de cette structure. Dans ce cadre, les titres sont des points de repères essentiels pour vous donner des repères au fil de votre rédaction, mais aussi pour votre lecteur, qui pourra rapidement comprendre l’organisation de votre contenu.

Respectez la hiérarchie des titres dans un contenu : sur le web, les titres ont des statuts selon leur niveau d’importance. Un <h1> est le titre principal, celui qui en général s’affiche en haut de page. Dans votre corps de texte, les titres secondaires ont un statut de <h2>, et les sous-titres celui de <h3>, <h4>, <h5>, etc en fonction de leur niveau dans la hiérarchie.

Pour la compréhension des moteurs de recherche, assurez vous que chaque niveau de titre est bien à sa place : par exemple, un <h3> ne peut être présent que comme sous-titre d’un <h2>. Par conséquent, si vous n’avez pas de <h2>, n’intégrez pas de <h3>, et niveaux suivants, ou les moteurs de recherche ne comprendront pas la logique de votre structure, et estimeront que votre contenu est de mauvaise qualité. si vous annoncez une nouvelle partie alors il est inutile de sauté 2 niveaux de titres d’un coup.

Enregistrer des styles de blocs pour les titres

On vous voit venir, si la problématique est visuelle et que vous voulez un <h2> qui soit écrit en petit avec l’apparence d’un <h5>, tout en respectant la sémantique et la logique du déroulement de votre page, il faudra user d’un peu de malice.

Par exemple vous pouvez prévoir des styles dans votre code CSS qui utilisent les mêmes tailles de polices que vos niveaux de titres et ainsi dire je veux un <h2> (pour respecter la sémantique) qui aura le style d’un titre de niveau 5 (car c’est l’apparence qui convient le mieux à mon contenu). En résumé, on peut séparer le statut du titre de son apparence en suivant les indications suivantes.

On vous conseille d’abord d’enregistrer de nouveaux styles de blocs. Pour bien faire créer un thème enfant.

Dans votre fichier functions.php ajoutez ces quelques lignes de PHP pour déclarer nos nouveaux styles.

PHP
theme-enfant/functions.php

Pour faire simple, je choisis les $blocks pour lesquels on souhaite avoir cette combinaison de styles.

À la ligne 5, paragraph et heading correspondent à vos types de blocs paragraphes et titres pour lesquels vous souhaitez ajouter vos styles.

Dans les coulisses WordPress génère en réalité des classes du genre .is-style-h1 ou .is-style-h2 qu’on va pouvoir utiliser et mettre en forme en CSS comme on le souhaite.

Direction le fichier style.css de votre thème parent.

Identifiez les lignes qui permettent de styliser les titres en faisant une recherche d’un niveau de titre par exemple h1.

CSS
theme-parent/style.css

Les valeurs peuvent bien entendu changer en fonction du thème que vous avez activé.

Ajoutez les styles aux classes dont on parlait un peu plus haut dans votre thème enfant. Vous aurez sans doute à la fin quelque chose qui ressemble à ça :

CSS
theme-enfant/style.css

Ainsi vous verrez apparaître pour vos blocs, les différentes typo et tailles de police que chacun utilisent.

Pour aller plus loin

Maintenant que vous êtes à l’aise avec les titres je vous conseille de commencer à jouer avec les blocs de mises en page comme le bloc « colonnes » ou le bloc « media et texte ».

Colonnes

La plupart du temps les utilisateurs de WordPress choisissait un Page Builder pour gérer des colonnes dans une page… plus besoin !

Média & texte

Rythmer vos contenus avec des images

Voici d’autres blocs qui auront une utilité dans votre boîte à outil :

Bloc Gutenberg - Paragraphe

Citation

Rendez à César ce qui lui appartient. Lorsque vous citez un auteur, un orateur ou une source extérieure à votre site, utilisez le bloc citation.

Bannière

La bannière permet de superposer du texte avec une image. C’est pratique pour mettre en avant du texte et de l’habiller avec un fond.