Les blocs de l'éditeur Gutenberg IV
Créer des élèments de mise en page élaborés

Les étapes dans l'éditeur

• 1
  Insérer un bloc Groupe
• 2
  Barre d'outils → icône d'alignement → Pleine largeur (full width)
• 3
  Barre latérale → Onglet Réglages →Activer le toggle "Les blocs internes utilisent la largeur du contenu"
• 4
  Barre latérale → Onglet Styles → Arrière-plan → choisir une couleur sombre (ou une image)
• 5
  Barre latérale → Dimensions → Marges internes (padding) → ajouter 5–8rem en haut et en bas
• 6
  Insérer un bloc Groupe à l'intérieur → le transformer en Empilement
• 7
  Barre latérale de l'Empilement → Alignement  (justification des blocs)→ Centre (align-items: center)
• 8
  Barre latérale → Dimensions → Gap (Espacement des blocs) → 1.2rem
• 9
  Insérer dans l'Empilement : Paragraphe (surtitre) + Titre H1 + Paragraphe + Boutons
• 10
  Barre latérale → Texte → choisir une couleur claire (blanc) pour les paragraphes et le titre 
• 11
  Centrer chaque bloc enfant (barre d'outils → alignement centre)

Étapes dans l'éditeur

• 1
  Insérer un bloc Groupe
• 2
  Barre latérale → onglet Réglages → Avancé → Élément HTML → choisir header
• 3
  Barre latérale → onglet Réglages → Emplacement → sélectionner Épinglé (sticky)
• 4
  Insérer dans le groupe : un bloc Image (logo) + un bloc Navigation + un bloc Boutons
• 5
  Barre d'outils du Groupe → icône Transformer en Rangée
• 6
  Barre latérale → onglet Réglages → Justification → Répartir les blocs (space-between)
• 7
  Barre latérale → Alignement vertical → Centre
• 8
  Barre latérale → Styles → Couleur d'arrière-plan + Padding vertical (ex. 0,75rem)
• 9
  Barre latérale → Styles → Couleur texte → blanc
• 10
  Barre latérale → Avancé → Classes CSS → ajouter z-index ou classe custom si nécessaire

Étapes dans l'éditeur pour une carte

• 1
  Insérer un bloc Groupe → Choisir la mise en page Rangée
• 2
  Barre d'outils → Alignement au milieu → Centre
• 3
  Barre latérale → Onglet Styles → Section Dimensions → Espacement des blocs (Gap) → 1.5–2rem
• 4
  Insérer un bloc Image dans la Rangée → barre latérale → → Résolution : miniature
• 5
  Barre latérale → → Proportion de taille : carré 1:1
• 6
  Insérer un bloc Groupe à droite → le transformer en Empilement
• 7
  Barre latérale → → Dimensions → Espacement des blocs → 0.75rem
• 8
  Insérer dans l'Empilement : Paragraphe (tag) + Titre H3 + Paragraphe + Lien
• 9
  Pour alterner image droite/gauche : sélectionner le bloc Image → glisser après l'Empilement dans la Vue en liste
• 9
  Optionnel : ajouter la classe CSS row-reverse + définir le style dans le CSS du thème pour l'alternance automatique

Étapes dans l'éditeur

• 1
  Insérer un bloc Empilement (conteneur de section) (ou Insérer un bloc Groupe et le transformer en Empilement)
• 2
  Insérer un Titre H2 (Nos services) dans l'Empilement → centrer via la barre d'outils
• 3
  Insérer un second bloc Rangée dans l'Empilement (ou Insérer un bloc Groupe et le transformer en Rangée)
• 4
  Barre latérale de la Rangée → activer "Autoriser le retour à la ligne" (flex-wrap)
• 5
  Barre latérale → Dimensions → Espacement entre les blocs → 1.5rem
• 6
  Dans la Rangée, insérer un bloc Empilement (= 1 carte) (ou insérer un bloc Groupe et transformer le en Empilement)
• 7
  Barre latérale de la carte → Dimensions → largeur minimale 200px , flex:1 via Classes CSS
• 8
  Insérer dans la carte : Image + Titre H3 + Paragraphe + Lien
• 9
  Sélectionner la carte complète → Options → Dupliquer autant de fois que nécessaire
• 10
  Optionnel : barre latérale du Groupe carte → Styles → Bordure + Border-radius pour délimiter chaque carte

Étapes dans l'éditeur — grille régulière

• 1
  Insérer un bloc Grille (ou Insérer un bloc Groupe et le transformer en Grille)
• 2
  Barre latérale → Colonnes → définir le nombre (ex. 4)
• 3
  Barre latérale → Dimensions → Espacement des blocs → 1–1.5rem
• 4
  Insérer les blocs enfants dans la Grille — ils se répartissent automatiquement dans les cellules
• 5
  Optionnel : barre latérale → Largeur minimale de colonne → active auto-fill pour un responsive automatique

Étapes dans l'éditeur — cellules mixtes (WP 6.6+)

• 1
  Même setup qu'une grille régulière (3 colonnes, gap 1rem)
• 2
  Sélectionner la cellule à étendre en hauteur puis :
  • - Soit → barre latérale → Dimensions → Fusions colonnes → saisir 2 ; Fusions Lignes → saisir 2
  • - Soit étirer la cellule avec la souris à partir des petits ronds bleus à droite et en bas de la cellule
• 4
  Réorganiser l'ordre des blocs dans la Vue en liste pour ajuster le placement dans la grille

Étapes dans l'éditeur

• 1
  Insérer un bloc Groupe → barre latérale → Avancé → Élément HTML → footer
• 2
  Barre d'outils → Largeur totale (alignfull)
• 3
  Barre latérale → Styles → Arrière-plan → couleur sombre + Couleur de texte → clair
• 4
  Transformer ce Groupe en Empilement (conteneur principal haut + bas)
• 5
  Barre latérale → Dimensions → Gap → 2rem · Padding → 3rem tous côtés
• 6
  Insérer un Groupe → Rangée dans l'Empilement (section supérieure)
• 7
  Barre latérale de la Rangée → Alignement vertical → Début (flex-start) · activer Retour à la ligne
• 8
  Insérer dans la Rangée : un Groupe Empilement pour la marque (logo + description) avec flex:1.5
• 9
  Insérer 3 autres Groupes Empilements pour les colonnes de liens — dans chaque : Paragraphe (titre) + autant de Liens que nécessaire
• 10
  Ajouter un second blocEmpilement dans l'Empilement principal (barre basse) → Justification : Espace entre → insérer Paragraphe (copyright) à gauche et Navigation à droite
• 11
  Optionnel : barre latérale de la barre basse → Bordure → Haut → 1px solid rgba(255,255,255,.1)