Comprendre le fonctionnement de l’éditeur de blocs
L’éditeur de blocs de WordPress permet de construire le contenu d’une page en assemblant des éléments indépendants. Un paragraphe, un titre, une image, une galerie, une vidéo, un bouton ou une liste constitue un bloc. Chaque bloc possède ses propres réglages, ce qui évite de modifier directement le code HTML ou les feuilles de style dans la plupart des situations.
Cette approche remplace l’ancien fonctionnement fondé sur une grande zone de texte unique. La page est divisée en composants que l’on peut ajouter, déplacer, dupliquer et configurer. Le contenu reste ainsi plus lisible dans l’interface d’administration et les modifications sont plus ciblées.
L’éditeur de blocs est parfois appelé Gutenberg. Il est intégré à WordPress et s’utilise pour les articles comme pour les pages. Selon le thème installé et les extensions activées, la liste des blocs disponibles peut varier. Les blocs natifs couvrent toutefois les besoins courants d’une page éditoriale ou professionnelle.
Point important : ne pas écrire de code ne signifie pas renoncer à la structure technique. Les choix effectués dans l’éditeur influencent la hiérarchie des titres, le poids des images, l’accessibilité, l’affichage sur mobile et la compréhension de la page par les moteurs de recherche.
Préparer la page avant d’ajouter les blocs
Une page bien construite commence par une intention claire. Avant d’ouvrir l’éditeur, déterminer le rôle de la page : présenter un service, expliquer une procédure, répondre à une question ou guider vers une action. Cette étape permet de sélectionner les blocs nécessaires sans accumuler des éléments décoratifs.
Préparer un plan court avec un titre principal, quelques parties et une conclusion orientée vers l’action. Dans WordPress, le titre de la page est généralement géré séparément du contenu. Il correspond au titre principal affiché par le thème. Le premier titre ajouté dans le corps de la page doit donc être un niveau inférieur, le plus souvent un titre de niveau 2.
Une préparation utile consiste à réunir les ressources avant la mise en page :
- le texte relu et découpé en paragraphes courts ;
- les images recadrées et nommées de manière descriptive ;
- les liens à insérer, avec leur destination vérifiée ;
- les informations qui doivent être mises en évidence ;
- l’action attendue du lecteur en fin de parcours.
Cette organisation limite les allers-retours et réduit le risque d’oublier une section importante. Elle aide aussi à distinguer le contenu indispensable des éléments purement visuels.
Créer la structure avec les blocs essentiels
Pour commencer, ouvrir le tableau de bord WordPress, puis choisir
Pages et
Ajouter une page. Saisir le titre dans le champ prévu à cet effet. La zone de contenu propose ensuite d’ajouter un bloc avec le bouton d’insertion ou avec une commande au clavier.
Le bouton d’ajout ouvre la bibliothèque des blocs. Une recherche permet de trouver un élément par son nom. Après insertion, le bloc sélectionné affiche une barre d’outils contextuelle. Le panneau latéral contient généralement les réglages propres au bloc et, selon le thème, des options de couleur, de dimension ou de typographie.
Une structure éditoriale courante peut être composée ainsi :
- un titre de page précis ;
- un paragraphe d’introduction qui explique la promesse de la page ;
- un titre de niveau 2 pour chaque grande partie ;
- des paragraphes, listes ou images pour développer chaque partie ;
- un bloc d’appel à l’action lorsque le lecteur doit poursuivre une démarche ;
- une conclusion qui rappelle l’information principale.
Pour déplacer un bloc, utiliser les flèches de déplacement ou faire glisser l’élément dans la liste des blocs. Cette liste, souvent appelée vue en liste, donne une représentation hiérarchique de la page. Elle devient particulièrement utile lorsque le contenu contient plusieurs colonnes, groupes ou sections imbriquées.
Les blocs
Groupe et
Empilement servent à réunir plusieurs éléments. Le bloc Groupe permet d’appliquer un arrière-plan ou une largeur à un ensemble cohérent. Le bloc Empilement organise des éléments les uns sous les autres. Le bloc Rangée aligne plusieurs éléments sur une même ligne, mais son affichage doit être contrôlé sur les écrans étroits.
Choisir le bon bloc pour chaque contenu
Le résultat dépend moins du nombre de blocs que de leur adéquation au contenu. Un paragraphe doit rester un paragraphe, même si une couleur ou une taille différente semble visuellement attractive. Utiliser le bloc correspondant à la nature de l’information produit une page plus compréhensible et plus robuste.
| Besoin | Bloc adapté | Vigilance |
|---|
| Présenter une idée ou une explication | Paragraphe | Éviter les lignes trop longues et les blocs de texte compacts |
| Structurer une partie | Titre | Respecter l’ordre des niveaux de titre |
| Énumérer des éléments | Liste | Conserver une formulation parallèle |
| Présenter plusieurs visuels | Galerie | Renseigner les textes alternatifs utiles |
| Mettre en avant une action | Boutons | Employer un libellé explicite |
| Comparer des informations | Tableau | Éviter les tableaux trop larges sur mobile |
Le bloc Citation peut distinguer une phrase attribuée à une source, mais il ne doit pas servir à décorer une opinion ordinaire. Le bloc Séparateur peut marquer une transition, sans remplacer un titre. Le bloc Média et texte associe une image et un contenu, mais il nécessite une vérification attentive sur smartphone.
Pour transformer un bloc, ouvrir son menu d’options puis choisir une transformation compatible. Un paragraphe peut devenir une liste ou un titre, tandis qu’un groupe peut changer de disposition. Avant de transformer un bloc important, vérifier que le contenu n’a pas perdu de mise en forme ou de lien.
Mettre en forme sans alourdir la page
La barre d’outils d’un bloc permet généralement de modifier l’alignement, le style du texte, les liens et certaines options de présentation. Les réglages disponibles dépendent du thème et du bloc choisi. Pour garder une apparence cohérente, privilégier les styles proposés par le thème plutôt que des ajustements différents sur chaque élément.
La mise en forme doit guider la lecture. Quelques principes sont utiles :
- réserver le gras aux termes réellement importants ;
- éviter de souligner du texte qui n’est pas un lien ;
- ne pas utiliser une couleur comme unique moyen de signaler une information ;
- limiter le nombre de tailles et de couleurs ;
- préserver un contraste suffisant entre le texte et l’arrière-plan.
Les réglages de largeur méritent une attention particulière. Une largeur pleine peut convenir à une image ou à une section visuelle, mais elle peut rendre un texte difficile à parcourir. Une largeur de contenu maîtrisée améliore souvent le confort de lecture sur grand écran.
Les blocs de colonnes doivent rester réservés aux informations qui gagnent à être comparées ou présentées côte à côte. Un texte long dans plusieurs colonnes devient rapidement inconfortable, notamment sur mobile. Dans ce cas, une succession de blocs verticaux est souvent plus lisible.
Insérer des images, vidéos et liens avec méthode
Pour ajouter une image, utiliser le bloc Image puis choisir un fichier depuis la médiathèque ou téléverser un nouveau fichier. Sélectionner un format adapté à l’usage réel. Une photographie très grande et lourde ralentit le chargement sans améliorer l’affichage si la zone prévue est étroite.
Le texte alternatif décrit la fonction ou le contenu pertinent de l’image. Une image décorative peut avoir un texte alternatif vide lorsqu’elle ne porte aucune information. En revanche, une capture d’écran destinée à expliquer une procédure doit être décrite avec suffisamment de précision. Le texte alternatif ne doit pas répéter mécaniquement la légende ni accumuler des mots-clés.
Pour ajouter un lien, sélectionner le texte concerné, utiliser l’outil de lien, puis saisir ou rechercher la destination. Le libellé doit indiquer l’action ou le contenu accessible. Une formulation comme consulter la procédure complète est plus informative que cliquez ici lorsque le contexte ne suffit pas.
Avant de publier, vérifier les liens internes et externes, les éventuelles redirections et l’ouverture de la page cible. Pour une vidéo, tenir compte du poids, de la confidentialité du contenu et de la présence de sous-titres. Une vidéo ne doit pas être l’unique moyen d’accéder à une information importante : fournir aussi un résumé ou une transcription lorsque cela est nécessaire.
Rendre la page adaptée au mobile et accessible
L’éditeur permet de composer une page, mais il ne garantit pas que chaque arrangement sera confortable sur tous les écrans. L’aperçu intégré à WordPress aide à vérifier les grandes tendances, tandis qu’un contrôle sur plusieurs tailles d’écran révèle les problèmes de débordement, de texte trop petit ou de boutons trop rapprochés.
Contrôler notamment les points suivants :
- les titres ne sont pas coupés sur un écran étroit ;
- les images restent dans la largeur disponible ;
- les colonnes se réorganisent dans un ordre logique ;
- les tableaux restent consultables sans masquer des informations ;
- les boutons disposent d’un libellé compréhensible ;
- les liens sont identifiables sans dépendre uniquement de la couleur.
La hiérarchie des titres joue un rôle structurel. Le titre principal de la page doit rester unique dans la présentation générale. Les titres de niveau 2 introduisent les grandes parties, puis les titres de niveau 3 peuvent détailler une partie. Ne pas choisir un niveau uniquement parce que sa taille visuelle convient : la hiérarchie sémantique compte davantage que l’apparence.
Les textes alternatifs, les contrastes, les sous-titres vidéo et l’ordre logique de lecture contribuent à l’accessibilité. Une page accessible profite aussi aux personnes qui consultent un écran dans de mauvaises conditions, utilisent un clavier ou disposent d’une connexion limitée.
Utiliser les blocs réutilisables et les compositions
Lorsqu’un même ensemble de blocs revient souvent, l’enregistrer comme élément réutilisable ou comme bloc synchronisé peut réduire les erreurs de mise en page. Un pied de page d’appel à l’action, un encadré d’avertissement ou une présentation standard peuvent ainsi être insérés dans plusieurs pages.
Cette fonction demande une distinction importante. Un élément synchronisé conserve une relation entre ses différentes occurrences : une modification peut se répercuter sur les pages qui l’utilisent. Cet effet est utile pour une information commune, mais inadapté à un contenu qui doit varier d’une page à l’autre.
Avant de modifier un élément partagé, identifier ses occurrences et déterminer si le changement est volontaire partout. Pour une variation ponctuelle, détacher le bloc synchronisé ou créer une copie indépendante selon les options proposées par l’interface.
Les compositions, lorsqu’elles sont disponibles avec le thème, fournissent des agencements préconçus. Elles accélèrent le démarrage, mais leur contenu doit être remplacé et leur structure vérifiée. Supprimer les sections inutiles plutôt que conserver des textes génériques ou des boutons sans destination.
Prévisualiser, enregistrer et publier avec prudence
La publication ne devrait intervenir qu’après une dernière vérification éditoriale et technique. WordPress permet d’enregistrer un brouillon, de prévisualiser la page et, selon la configuration, de planifier sa mise en ligne. Le brouillon est la bonne option lorsque le contenu n’est pas terminé ou doit être relu.
Avant de publier, suivre cette séquence :
- relire le titre, l’introduction et les intertitres ;
- vérifier les liens, les boutons et les médias ;
- contrôler l’affichage sur ordinateur et mobile ;
- examiner les textes alternatifs des images informatives ;
- repérer les blocs vides, les espaces superflus et les doublons ;
- confirmer le statut de visibilité et la date de publication ;
- enregistrer ou publier, puis ouvrir la page comme un visiteur.
La sauvegarde doit être pensée à deux niveaux. WordPress conserve des révisions dans de nombreuses configurations, ce qui permet de revenir à une version antérieure depuis l’éditeur. Cette fonction ne remplace pas une sauvegarde globale du site, comprenant la base de données et les fichiers. Avant une refonte importante, vérifier que cette sauvegarde existe et qu’elle peut être restaurée.
Après publication, consulter la page déconnecté du compte d’administration. Certains éléments peuvent être visibles pour un administrateur mais masqués pour les visiteurs, notamment en raison de règles de visibilité, de cache ou d’extensions.
Résoudre les problèmes courants dans l’éditeur
Un bloc qui ne s’affiche pas correctement peut être affecté par le thème, une extension, un réglage de largeur ou un conflit de styles. Commencer par vérifier les réglages du bloc, puis ceux du groupe ou de la colonne qui le contient. La vue en liste aide à repérer une imbrication inattendue.
Si un contenu semble avoir disparu, consulter l’historique des révisions avant toute nouvelle modification. Éviter de multiplier les changements successifs sans enregistrer une version stable. Lorsqu’un bloc affiche une erreur, copier le texte dans un brouillon séparé avant de tenter une réparation ou une conversion en HTML, si cette option est proposée.
Les symptômes suivants orientent souvent le diagnostic :
- Image trop grande : vérifier sa taille, son alignement et la largeur du conteneur.
- Colonnes qui débordent : réduire le contenu, examiner les dimensions fixes et tester l’affichage mobile.
- Bouton invisible : contrôler la couleur du texte, l’arrière-plan et les styles du thème.
- Espacement inhabituel : rechercher des marges appliquées au bloc, au groupe ou à la section.
- Modification non conservée : enregistrer le brouillon, actualiser l’éditeur et vérifier les droits du compte.
Lorsque le problème apparaît après l’activation d’une extension ou d’un changement de thème, noter précisément le contexte avant toute désactivation. Les tests techniques doivent de préférence être réalisés avec une sauvegarde récente et dans un environnement où une interruption temporaire ne met pas en danger le contenu en production.
FAQ sur l’éditeur de blocs WordPress
Faut-il connaître le HTML pour utiliser l’éditeur de blocs ?
La connaissance du HTML n’est pas nécessaire pour créer une page courante. Elle peut toutefois aider à comprendre une structure, à repérer un balisage incohérent ou à diagnostiquer un problème d’affichage. Les réglages visuels couvrent la majorité des besoins éditoriaux.
Quelle différence entre une page et un article dans l’éditeur ?
L’éditeur de blocs fonctionne de manière proche pour les deux types de contenu. La différence tient surtout à leur organisation dans WordPress. Une page sert généralement à un contenu stable et hiérarchisé, tandis qu’un article s’inscrit plus souvent dans une publication datée ou classée. Le thème et les réglages du site peuvent modifier leur présentation.
Comment éviter une page trop lourde ?
Réduire le poids des images avant leur envoi, limiter les vidéos intégrées, éviter les extensions inutiles et ne pas multiplier les animations. Vérifier ensuite le chargement sur une connexion mobile. La performance dépend aussi de l’hébergement, du thème et de la configuration générale du site.
Peut-on modifier une page sans casser sa mise en page ?
Oui, en travaillant sur une copie ou un brouillon, en enregistrant des versions et en contrôlant les groupes et colonnes qui contiennent les blocs. Pour une page déjà publiée, conserver une sauvegarde récente et vérifier la prévisualisation avant de mettre les changements en ligne.
Pourquoi la page ne ressemble-t-elle pas à l’aperçu de l’éditeur ?
Le thème, les styles chargés en façade, le cache ou une extension peuvent produire un rendu différent. Comparer les réglages du bloc et ceux du thème, vider le cache lorsque cela est pertinent, puis tester la page dans une fenêtre où la session d’administration n’est pas active.
