Les blocs de l'éditeur - Partie III : Mise en pratique
Après avoir découvert les blocs Texte & Média et les blocs Design de l'éditeur de WordPress, vous aller pourvoir maintenant vous entraîner sur un cas pratique expliqué pas à pas. Suivez ce tutoriel pas à pas pour créer une page complète avec plusieurs blocs. Chaque étape montre ce que vous faites dans l'éditeur et le résultat visible par vos visiteurs.
Créer une nouvelle page et ajouter le titre principal (H1)
🎯 Instructions
- Connectez-vous à votre tableau de bord WordPress
- Créez une nouvelle page : Pages → Ajouter
- L'éditeur Gutenberg s'ouvre automatiquement
- Saisiszez le titre de votre page à la place du texte "Saisissez le titre" : Bienvenue sur notre site
Ajouter le titre de la première section (H2)
Bloc Titre🎯 Instructions
- Cliquez dans la zone de contenu de la page
- Tapez /titre et appuyez sur Entrée
- Saisissez votre titre : « Ce que nous proposons »
- Dans la colonne droite, vérifiez que le niveau est H2
- Cliquez en dehors du bloc pour valider
💡 H2 est le titre principal d'une section. N'utilisez jamais H1 — il est réservé au titre de la page lui-même, géré automatiquement par WordPress.
Créer un bloc Groupe avec fond coloré
Bloc Groupe🎯 Instructions
- Tapez /groupe puis Entrée
- Le bloc Groupe apparaît — c'est un conteneur qui va recevoir d'autres blocs
- Dans la colonne droite → Styles, cliquez sur « Avec fond »
- Toujours dans la colonne droite → Couleur → Fond, choisissez une couleur claire
- Cliquez le + à l'intérieur du groupe pour ajouter un bloc Paragraphe
- Rédigez votre texte d'introduction
💡 Le bloc Groupe est invisible par défaut. C'est en ajoutant un fond dans la colonne droite qu'il devient visible. Pensez aussi à régler le padding (espacement intérieur) pour que le texte ne colle pas aux bords.
Ajouter une liste à puces dans le Groupe
Bloc Liste🎯 Instructions
- Cliquez le + à l'intérieur du bloc Groupe (sous le paragraphe)
- Tapez /liste puis Entrée
- Saisissez le 1er item : « Conception sur-mesure adaptée à votre activité »
- Appuyez sur Entrée → nouvel item
- Saisissez les items suivants de la même façon
- Pour terminer la liste : appuyez deux fois sur Entrée
💡 La liste reste dans le Groupe — elle hérite donc du fond coloré. Vérifiez dans le panneau Structure (colonne gauche) que « Liste » est bien imbriqué sous « Groupe ».
⚠️ Si la liste se crée en dehors du groupe, appuyez sur Ctrl+Z et recommencez en cliquant d'abord à l'intérieur du groupe.
Insérer un séparateur
Bloc Séparateur🎯 Instructions
- Cliquez en dehors du bloc Groupe pour le désélectionner
- Cliquez le + qui apparaît juste après le groupe
- Tapez /separateur puis Entrée
- Dans la colonne droite, choisissez le style (ligne simple recommandée)
- Optionnel : ajustez la largeur à « Pleine largeur »
💡 Le séparateur crée une respiration visuelle entre deux zones de contenu. Si vous voulez juste de l'espace sans trait visible, utilisez plutôt un bloc Espacement.
Deuxième titre de section (H2)
Bloc Titre🎯 Instructions
- Cliquez après le séparateur
- Tapez /titre puis Entrée
- Saisissez : « Comment ça se passe ? »
- Vérifiez que le niveau est H2 dans la colonne droite
💡 Ce H2 introduit la deuxième section, au même niveau que l'étape 2.
Mise en page deux colonnes — image à gauche, texte + bouton à droite
Blocs Colonnes + Image + Bouton🎯 Instructions
- Tapez /colonnes puis Entrée
- Choisissez la disposition « 50 / 50 » (ou « 33 / 66 » si vous voulez plus de texte)
- Colonne gauche : cliquez le + → tapez /image → téléversez ou choisissez une image dans la médiathèque
- Renseignez le texte alternatif de l'image dans la colonne droite
- Colonne droite : cliquez le + → ajoutez un Paragraphe avec votre texte
- Sous le paragraphe, cliquez + → tapez /bouton → saisissez le texte « Prendre contact → »
- Dans les réglages du bouton, collez l'URL de votre page de contact
💡 Pour changer les proportions des colonnes après coup : cliquez sur le bloc Colonnes, puis dans la colonne droite vous pouvez modifier le pourcentage de largeur de chaque colonne.
⚠️ Sur mobile, les colonnes s'empilent : l'image apparaît en premier, puis le texte. Si vous préférez le texte en premier sur mobile, utilisez un bloc Empilement à la place des Colonnes — il offre une option « inverser sur mobile ».
Insérer un séparateur
Bloc Séparateur🎯 Instructions
- Cliquez en dehors du bloc Groupe pour le désélectionner
- Cliquez le + qui apparaît juste après le groupe
- Tapez /separateur puis Entrée
- Dans la colonne droite, choisissez le style (ligne simple recommandée)
- Optionnel : ajustez la largeur à « Pleine largeur »
💡 Le séparateur crée une respiration visuelle entre deux zones de contenu. Si vous voulez juste de l'espace sans trait visible, utilisez plutôt un bloc Espacement.
Troisième titre de section (H2)
Bloc Titre🎯 Instructions
- Cliquez après le séparateur
- Tapez /titre puis Entrée
- Saisissez : « FAQ »
- Vérifiez que le niveau est H2 dans la colonne droite
💡 Ce H2 introduit la troisième section, au même niveau que l'étape 2.
Ajouter un bloc Détails (question/réponse dépliable)
Bloc Détails🎯 Instructions
- Après le bloc Colonnes, tapez /détails puis Entrée
- Dans le champ résumé (la ligne cliquable), saisissez la question : « Combien de temps dure une formation ? »
- Cliquez à l'intérieur du bloc pour y ajouter un Paragraphe avec la réponse
- Répétez l'opération pour ajouter d'autres questions : tapez un nouveau /détails après le premier
- Option : cochez « Ouvert par défaut » dans la colonne droite pour la première question
💡 Ce bloc est parfait pour une mini-FAQ en bas de page. Le visiteur clique sur la question pour voir la réponse — la page reste aérée même avec beaucoup de contenu.
Enregistrer et vérifier le résultat
Publication🎯 Instructions
- Cliquez le bouton bleu « Mettre à jour » (ou « Publier ») en haut à droite
- Cliquez « Voir la page » pour voir le rendu en conditions réelles
- Vérifiez sur mobile : réduisez la fenêtre de votre navigateur ou utilisez les outils développeur (F12)
- Contrôlez que les colonnes s'empilent bien et que le bouton est cliquable
💡 En cas d'erreur, utilisez Ctrl+Z dans l'éditeur pour annuler les dernières modifications. WordPress conserve aussi un historique des révisions : colonne droite → icône d'horloge.
⚠️ Pensez à cliquer Mettre à jour régulièrement pendant votre travail — une coupure internet ou une fermeture accidentelle de l'onglet peut faire perdre des modifications non sauvegardées.