Fiche de référence n°1e

Les blocs de l'éditeur Gutenberg V
6 exemples de mise en page complémentaires

Après le tuto pas à pas, 6 nouveaux modèles prêts à réutiliser : bandeau d'appel à l'action, grille Bento, statistiques, témoignages, FAQ et timeline.

I — Blocs texte & média II — Blocs Design (mise en page) III — Tuto pas à pas IV — Tuto avancé V — Tuto avancé

Les blocs de l'éditeur - Partie V : Exemples de mise en page complémentaires

Après avoir vu 6 modèles de mise en page avancés, voici 6 exemples supplémentaires tout aussi utiles pour construire vos pages : un bandeau d'appel à l'action, une grille Bento, une rangée de statistiques, des témoignages, une FAQ en accordéon et une timeline. Chaque étape montre ce que vous faites dans l'éditeur et le résultat visible par vos visiteurs.

Au programme de cette page :

07

Bandeau CTA pleine largeur — Groupe + Empilement

Groupe AlignFull Empilement
Groupe — fond pleine largeur

Prêt à donner vie à votre projet ?

Parlons de votre site en 20 minutes, sans engagement.

Prendre rendez-vous Voir nos réalisations

Étapes dans l'éditeur

  • 1
    Insérer un bloc Groupe → barre d'outils → Largeur totale
  • 2
    Barre latérale → Styles → Arrière-plan → couleur ou dégradé d'accent · Couleur de texte → clair
  • 3
    Barre latérale → Dimensions → Padding → 3 à 4rem, contenu centré
  • 4
    Insérer un Titre + un Paragraphe d'accroche dans le Groupe
  • 5
    Insérer un bloc Boutons avec 2 boutons : un plein (couleur claire) et un en Contour
Réservez ce bandeau à un seul message par page (fin d'article, bas de page d'accueil) : trop de CTA dilue l'attention de vos visiteurs.
08

Grille Bento — Grille avec fusions mixtes

Groupe Grille Fusions colonnes / lignes
🎨
Nos services
Conception, refonte, référencement
🤝
Accompagnement
Formation incluse
📈
Visibilité
⚡
Rapide à mettre en place
Livraison en 2 à 4 semaines
🔒
Sécurité

Étapes dans l'éditeur

  • 1
    Insérer un bloc Grille → barre latérale → Colonnes → 4
  • 2
    Barre latérale → Dimensions → Espacement des blocs → .5–1rem
  • 3
    Insérer les cellules (Groupe icône + Titre + Paragraphe) une à une dans la Grille
  • 4
    Sélectionner une cellule à mettre en avant → Dimensions → Fusions colonnes / Fusions lignes → 2
  • 5
    Répéter sur 1 ou 2 autres cellules pour varier les tailles et créer l'effet "Bento"
Limitez-vous à 5-6 cellules maximum : au-delà, la grille Bento devient difficile à lire, surtout sur mobile où elle repasse en une seule colonne.
09

Rangée de statistiques — Groupe + Rangée

Groupe Rangée
98%
Clients satisfaits
+150
Sites livrés
10 ans
D'expérience
24h
Délai de réponse

Étapes dans l'éditeur

  • 1
    Insérer un Groupe → Styles → Arrière-plan → couleur sombre, Couleur de texte → clair
  • 2
    Insérer une Rangée dans le Groupe → Justification → Espace autour
  • 3
    Insérer 4 Empilements dans la Rangée (un par statistique)
  • 4
    Dans chaque Empilement : un Titre (le chiffre, grande taille) + un Paragraphe (la légende, petite taille, centré)
10

Témoignages — Rangée + Empilements

Rangée Empilement × N
« Un accompagnement au top, du premier rendez-vous à la mise en ligne. »
Camille D.
Dirigeante
« Enfin un site qui me ressemble, et que je peux modifier moi-même ! »
Marc L.
Artisan

Étapes dans l'éditeur

  • 1
    Insérer un Groupe → Rangée → activer Retour à la ligne
  • 2
    Insérer un Empilement par témoignage, avec flex:1 pour une largeur égale
  • 3
    Dans chaque Empilement : un Paragraphe (citation, style italique) puis une Rangée (avatar + nom/fonction)
  • 4
    Pour l'avatar : bloc Image réglé en cercle (barre latérale → Rayon de bordure → 9999px)
  • 5
    Dupliquer l'Empilement autant de fois que de témoignages
11

FAQ en accordéon — Blocs Détails empilés

Groupe Détails
Combien de temps pour un site vitrine ? ⌄
Comptez en moyenne 3 à 5 semaines, de la maquette à la mise en ligne.
Le référencement est-il inclus ? ⌄
Puis-je modifier le contenu moi-même ? ⌄

Étapes dans l'éditeur

  • 1
    Insérer un bloc Détails → taper la question dans l'étiquette (résumé)
  • 2
    Taper la réponse dans le contenu du bloc Détails
  • 3
    Dupliquer le bloc Détails autant de fois que de questions, les regrouper dans un Groupe
  • 4
    Optionnel : cocher Ouvert par défaut sur la première question
Le bloc Détails s'appuie sur les éléments HTML natifs <details>/<summary> : accessible au clavier et aux lecteurs d'écran, sans aucun JavaScript.
12

Timeline — Rangée + Empilements numérotés

Rangée Empilement × N
1
Prise de contact
Échange sur vos besoins
2
Maquette
Proposition visuelle
3
Développement
Intégration sur WordPress
4
Mise en ligne
Et formation incluse

Étapes dans l'éditeur

  • 1
    Insérer un Groupe → Rangée → désactiver le Retour à la ligne
  • 2
    Insérer un Empilement par étape (4 dans cet exemple)
  • 3
    Dans chaque Empilement : un Groupe rond avec le numéro (Paragraphe centré) + un Titre + un Paragraphe
  • 4
    Optionnel : ajouter une Séparation horizontale derrière la Rangée pour relier visuellement les étapes
🧭

Quel exemple choisir ? Un CTA en fin de page pour convertir, une grille Bento pour présenter vos services d'un coup d'œil, des statistiques pour rassurer, des témoignages pour construire la confiance, une FAQ pour lever les objections, et une timeline pour expliquer votre processus. Combinez-les selon les besoins de chaque page, sans surcharger.

← Tuto mises en page avancées Les actions de WordPress →
Retour haut de page Haut