WordPress, séance 4 : construire une page avec les blocs

Le bloc, la structure d’une page, les motifs réutilisables

Pourquoi cette séance existe

Vous avez décidé la structure. Il faut maintenant produire les contenus, et c’est là que la plupart des projets perdent leur temps.

Deux heures, sur poste, pour un seul objectif : que vous sachiez construire une page qui tienne debout, sans dépendre de personne, et sans passer trois heures dessus.

L’enjeu n’est pas de savoir cliquer. Il est de comprendre ce qu’est devenu un contenu web : plus un texte que l’on met en forme, mais un assemblage de blocs indépendants, dont chacun peut être déplacé, dupliqué, réutilisé. Ce changement de nature a des conséquences directes sur la manière dont une équipe marketing travaille, et sur ce que vous pouvez déléguer.

Ce que vous saurez à la fin de cette séance

• Ce qu’est un bloc, et pourquoi cette notion a remplacé celle de mise en forme
• Construire une page structurée : titres, colonnes, groupes, images
• Utiliser les motifs pour ne pas refaire deux fois la même chose
• Reconnaître les trois erreurs de mise en page qui trahissent un contenu bricolé

1. Le bloc, et ce qu’il change

1.1 Avant, un contenu était un texte

Jusqu’à fin 2018, l’éditeur de WordPress ressemblait à un traitement de texte : une grande zone, du texte, quelques boutons de mise en forme. Tout le contenu d’une page tenait dans un seul bloc de code, produit à la main ou par des boutons, et modifié par la même personne du début à la fin.

L’éditeur de blocs, arrivé avec WordPress 5.0¹, a changé la nature de l’objet. Une page n’est plus un texte : c’est une suite de blocs, chacun typé et autonome. Un paragraphe est un bloc. Un titre est un bloc. Une image, une galerie, un bouton, un tableau, une colonne, une vidéo : autant de blocs.

1.2 Ce que cela change pour une équipe marketing

Trois conséquences, et aucune n’est technique.

Le contenu devient modulaire. Un bloc se déplace sans toucher au reste, se duplique, se supprime. Réorganiser une page ne demande plus de tout reprendre. Concrètement : une page produit dont l’argumentaire change d’ordre après un test se réorganise en trente secondes.

Le contenu devient partageable. Un ensemble de blocs peut être enregistré comme motif et réutilisé sur toutes les pages du site. Votre bloc d’appel à l’action, votre encart de réassurance, votre pied de page produit : écrits une fois, réutilisés partout.

Le contenu devient délégable. C’est la conséquence la plus importante pour vous. Un stagiaire peut remplir une page à partir d’un motif existant sans casser la mise en page, parce que la structure est portée par les blocs et non par une mise en forme manuelle. Vous ne déléguez plus « faire une page », vous déléguez « remplir cette structure ».

À retenir. Le passage du texte au bloc n’est pas un changement d’interface, c’est un changement de nature du contenu. Il rend le contenu modulaire, réutilisable et délégable. C’est ce qui permet à une équipe marketing de produire sans repasser par un prestataire à chaque page.

1.3 Les trois gestes qui suffisent

L’éditeur est vaste et vous n’en utiliserez qu’une petite partie. Trois gestes couvrent quatre-vingt-dix pour cent du travail réel.

Insérer un bloc. Le bouton d’insertion, en haut à gauche, ou la barre oblique tapée directement dans un paragraphe vide, qui ouvre la recherche de blocs. La seconde méthode est deux fois plus rapide et personne ne la découvre seul.

Sélectionner le bon niveau. C’est là que tout le monde se trompe au début. Un bloc peut en contenir d’autres : une colonne contient des paragraphes, un groupe contient des colonnes. La barre d’outils affiche une icône permettant de remonter au bloc parent, et la vue en liste, accessible depuis la barre supérieure, montre l’arborescence complète de la page. Ouvrez cette vue en liste dès le début : elle transforme une page opaque en structure lisible.

Régler dans le panneau de droite. Chaque bloc a ses propres réglages, séparés en deux onglets : les réglages de contenu et ceux de style. Un réglage introuvable est presque toujours un mauvais bloc sélectionné, pas un réglage absent.

Atelier 1, reproduire une structure

Individuellement, sur votre site. Créez une page nommée « Nos services » et reproduisez la structure suivante, sans vous préoccuper de l’apparence :

1. Un titre de niveau 1 : le nom de la page.
2. Un paragraphe d’introduction de trois lignes.
3. Un bloc de trois colonnes, chacune contenant un titre de niveau 3, un paragraphe et un bouton.
4. Un titre de niveau 2 : « Comment nous travaillons ».
5. Une liste numérotée de quatre étapes.
6. Un bloc bouton, centré, avec un appel à l’action.

Trois contraintes, qui sont l’objet réel de l’atelier :

• Utilisez la vue en liste pour vérifier votre structure avant de publier.
• N’utilisez aucun retour à la ligne manuel pour créer de l’espacement.
• Vos titres doivent descendre dans l’ordre : un titre de niveau 3 ne précède jamais son niveau 2.

Nous corrigerons la troisième contrainte ensemble : c’est celle que tout le monde rate, et c’est la seule qui a des conséquences.

2. Structurer une page : ce qui se voit et ce qui compte

2.1 La hiérarchie des titres n’est pas une question de taille

Un titre de niveau 2 n’est pas « un titre un peu plus petit ». C’est une information de structure, lue par trois destinataires qui ne regardent pas la page : les lecteurs d’écran, qui permettent de naviguer de titre en titre ; les moteurs de recherche, qui en déduisent le plan du document ; et les outils d’extraction automatique, dont les modèles de langage que vous étudierez plus tard dans l’année.

D’où la règle, qui n’a rien d’esthétique : les niveaux se suivent sans en sauter. Un niveau 1 par page, qui est son titre. Des niveaux 2 pour les grandes parties, des niveaux 3 à l’intérieur. Jamais un niveau 4 directement sous un niveau 2.

L’erreur classique consiste à choisir un niveau de titre parce que sa taille plaît. Si un niveau 2 vous semble trop gros, changez sa taille dans les réglages de style : la structure et l’apparence sont deux décisions séparées, exactement comme vu à la séance précédente.

2.2 Le groupe, le bloc que personne n’utilise et qui règle tout

Le bloc Groupe ne produit rien de visible. Il enveloppe plusieurs blocs pour les traiter comme un seul.

Son intérêt est triple : appliquer une couleur de fond ou une largeur à un ensemble d’un coup, déplacer cet ensemble d’un seul geste, et l’enregistrer comme motif réutilisable.

C’est le bloc qui sépare une page bricolée d’une page construite. Sans lui, on obtient une suite de blocs à plat, dont chacun doit être réglé séparément, et qu’il est impossible de déplacer ensemble.

2.3 L’espacement se règle, il ne se fabrique pas

Trois erreurs de mise en page trahissent immédiatement un contenu produit sans méthode. Elles sont toutes les trois faciles à éviter.

Les paragraphes vides pour créer de l’espace. Ils produisent un espacement qui varie selon l’écran, invisible sur ordinateur et énorme sur téléphone. L’espacement se règle dans le panneau de droite, ou avec le bloc Espacement, qui est fait pour cela.

Les retours à la ligne manuels pour aligner du texte. Même problème : ce qui tombe bien sur votre écran tombe mal sur celui du visiteur.

Les images insérées à leur taille d’origine. Vu à la séance précédente : c’est la première cause de lenteur d’un site, et c’est le marketing qui téléverse.

Le piège. Testez systématiquement vos pages en affichage mobile avant de publier. L’éditeur propose un aperçu par format. Plus de la moitié du trafic web se fait sur téléphone, et une page construite avec des espacements manuels ne survit jamais au passage sur petit écran.

2.4 Les motifs : écrire une fois, utiliser partout

Un motif est un ensemble de blocs enregistré sous un nom, réutilisable sur n’importe quelle page.

Deux formes, et la différence compte. Un motif simple insère une copie : vous la modifiez ensuite librement, et les autres copies ne bougent pas. Un motif synchronisé insère une référence : modifiez-la à un endroit, elle change partout.

Le choix se fait sur une question : le contenu doit-il rester identique partout ? Un encart « Nous contacter » avec votre numéro de téléphone : synchronisé, parce que le jour où le numéro change, vous ne voulez pas le corriger sur quarante pages. Un bloc d’introduction de page produit : simple, parce que chaque page a son texte.

C’est un raisonnement de responsable, pas de technicien : vous arbitrez entre cohérence et liberté d’édition, et vous décidez ce que vos équipes pourront modifier sans vous.

Atelier 2, votre page d’accueil

Individuellement. Construisez la page d’accueil de votre site, en réutilisant ce que vous venez d’apprendre.

Le contenu porte sur votre entreprise d’accueil, ou sur un projet fictif si vous préférez ne pas exposer le vôtre.

Attendu :

1. Un bloc de couverture ou un groupe avec fond en tête de page, contenant un titre et une phrase de positionnement.
2. Trois colonnes présentant trois offres, trois arguments ou trois publics.
3. Un groupe contenant un appel à l’action, enregistré comme motif synchronisé sous un nom explicite.
4. La page définie comme page d’accueil du site, dans Réglages puis Lecture.

Vérification avant de lever la main : ouvrez la vue en liste, vos titres se suivent-ils dans l’ordre ? Passez en aperçu mobile, la page tient-elle ?

Synthèse

Le bloc. Un contenu n’est plus un texte mis en forme, c’est un assemblage de blocs typés. Cette modularité rend le contenu déplaçable, réutilisable et délégable : c’est ce qui permet à une équipe de produire sans prestataire.

La structure. La hiérarchie des titres est une information lue par les lecteurs d’écran, les moteurs et les outils automatiques. Elle se décide sur le plan, jamais sur la taille du texte.

Le groupe. Le bloc invisible qui permet de traiter plusieurs blocs comme un seul : fond, largeur, déplacement, enregistrement en motif. Son absence produit des pages à plat, impossibles à maintenir.

Les motifs. Simple pour ce qui varie, synchronisé pour ce qui doit rester identique partout. C’est un arbitrage entre cohérence et autonomie des équipes.

Les trois erreurs qui trahissent un contenu bricolé : les paragraphes vides en guise d’espacement, les retours à la ligne pour aligner, les images téléversées à leur taille d’origine.

Pour la séance suivante

Terminez votre page d’accueil si elle n’est pas finie, et ajoutez au moins une page de second niveau sous une page parente, pour vérifier que l’adresse reflète bien la hiérarchie.

Repérez, sur le site de votre entreprise d’accueil, un élément qui se répète sur plusieurs pages et qui gagnerait à être un motif synchronisé. Nous en parlerons.

Sources

Notes

• L’éditeur de blocs, développé sous le nom de projet Gutenberg, devient l’éditeur par défaut de WordPress avec la version 5.0, publiée fin 2018. Il est étendu à l’ensemble du site, en-tête et pied compris, avec la version 5.9, début 2022. Historique des versions : wordpress.org/documentation/article/wordpress-versions/. Vérifié le 11 août 2026. Revenir au texte

À lire aussi sur le site

• Les blocs Spectra indispensables : huit blocs et leurs réglages responsive, quand les blocs natifs ne suffisent plus.