Le bloc « titre »

Il est là pour hiérarchiser et prioriser la lecture. Les titres sont très souvent pour l’éditorial des textes impactant et mémorable par 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 à des moments opportuns d’utiliser des titres, comme par exemple :

  • Pour annoncer un nouveau sujet, une nouvelle section
  • Pour structurer son contenu aux yeux des moteurs de recherche
  • Pour établir une feuille de route lors de la rédaction
  • Pour 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 que t’auras choisies il peut être judicieux de centrer certains titres pour les mettre en valeur et qu’il marque les esprits.

Les réglages de couleurs

Tout comme les blocs paragraphes, les titres peuvent être stylisées 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 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 votre contenu qui sera plus conséquent plus tard.

Respectez la hiérarchie des titres dans un contenu, 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 vois venir, si la problématique est visuelle : c’est à dire que vous voulez un titre de niveau 2 un <h2> pour respecter la sémantique, la logique du déroulement de votre page, mais que visuellement il soit écrit en « petit », il faudra user d’un peu de malinoiserie.

Par exemple vous pouvez prévoir des styles dans votre CSS qui utilise 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 je veux qu’ils ait le même style que ce niveau de titre.

Je te conseille 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.

Identifier 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.