{"id":4741,"date":"2025-02-12T08:22:18","date_gmt":"2025-02-12T13:22:18","guid":{"rendered":"https:\/\/adonato.dectim.ca\/agencetim\/?p=4741"},"modified":"2026-02-08T13:37:48","modified_gmt":"2026-02-08T18:37:48","slug":"wordpress-blocs-structure","status":"publish","type":"post","link":"https:\/\/adonato.dectim.ca\/agencetim\/wordpress-blocs-structure\/","title":{"rendered":"WordPress – Fonctionnement des les blocs de mise en page (groupe, stack, rang\u00e9e, colonnes, grille) avec exemples"},"content":{"rendered":"\n
Fonction<\/th>GROUPE<\/th>STACK<\/th>RANG\u00c9E<\/th>COLONNES<\/th>GRILLE<\/th><\/tr><\/thead>
Disposition<\/strong><\/td>Horizontal & Vertical<\/td>Forc\u00e9 en Vertical<\/td>Forc\u00e9 en Horizontal<\/td>Plusieurs colonnes c\u00f4te \u00e0 c\u00f4te<\/td>Organisation sous forme de grille avec un nombre d\u00e9fini de colonnes et de lignes<\/td><\/tr>
Exemples concrets d’utilisation<\/strong><\/td>\u2705 Hero section<\/strong> avec une image de fond, un titre et un bouton d\u2019appel \u00e0 l\u2019action.
\u2705 Banni\u00e8re promotionnelle<\/strong> avec texte et image align\u00e9s.
\u2705 Encadr\u00e9 avec un fond color\u00e9<\/strong> pour mettre en avant du contenu.<\/td>		\u2705 Liste de t\u00e9moignages<\/strong> empil\u00e9s verticalement avec une mise en page homog\u00e8ne.
\u2705 \u00c9tapes d’un processus<\/strong> (ex : \u00e9tapes d’inscription) bien espac\u00e9es.
\u2705 Liste de services<\/strong> affich\u00e9e de mani\u00e8re lisible.<\/td>		\u2705 Menu de navigation<\/strong> avec des liens align\u00e9s horizontalement.
\u2705 Boutons call-to-action<\/strong> align\u00e9s c\u00f4te \u00e0 c\u00f4te.
\u2705 Liste d\u2019ic\u00f4nes avec l\u00e9gendes<\/strong> affich\u00e9es sur une ligne.<\/td>		\u2705 Article avec une image \u00e0 gauche et du texte \u00e0 droite<\/strong>.
\u2705 Mise en page en deux ou trois colonnes<\/strong> pour un blog ou une page d\u2019accueil.
\u2705 Comparaison de produits<\/strong> avec des sections c\u00f4te \u00e0 c\u00f4te.<\/td>		\u2705 Galerie d\u2019images en grille<\/strong> (portfolio, t\u00e9moignages clients).
\u2705 Liste d’articles de blog en mode carte<\/strong>.
\u2705 Mise en page d’une boutique e-commerce<\/strong> avec affichage des produits en grille.<\/td><\/tr>
Possibilit\u00e9s d’imbrication<\/strong><\/td>\u2705 Peut contenir tous types de blocs<\/strong> (y compris d\u2019autres Groupes, Stacks, Colonnes et Grilles).
\u2705 Peut \u00eatre imbriqu\u00e9 dans un autre Groupe<\/strong> pour cr\u00e9er des structures complexes.
\u274c \u00c9viter trop de niveaux d\u2019imbrication<\/strong>, car cela alourdit le code et impacte les performances.<\/td>		\u2705 Peut contenir tous types de blocs<\/strong> mais seulement en disposition verticale<\/strong>.
\u2705 Peut \u00eatre imbriqu\u00e9 dans un Groupe ou une Colonne<\/strong>.
\u274c Ne peut pas \u00eatre configur\u00e9 pour un alignement horizontal<\/strong> (il faut utiliser une Rang\u00e9e pour cela).<\/td>		\u2705 Peut contenir plusieurs blocs, mais align\u00e9s horizontalement<\/strong>.
\u2705 Peut \u00eatre plac\u00e9 dans un Groupe ou une Colonne<\/strong>.
\u274c Ne peut pas contenir des Groupes, Stacks ou Grilles<\/strong>.<\/td>		\u2705 Chaque colonne peut contenir plusieurs blocs (y compris des Groupes, Stacks ou Rang\u00e9es)<\/strong>.
\u2705 Peut \u00eatre imbriqu\u00e9 dans un Groupe pour organiser une section<\/strong>.
\u274c Ne peut pas \u00eatre imbriqu\u00e9 dans une Rang\u00e9e (structure rigide)<\/strong>.<\/td>		\u2705 Chaque cellule de la grille peut contenir un bloc unique (texte, image, bouton, etc.)<\/strong>.
\u2705 Peut \u00eatre imbriqu\u00e9 dans un Groupe ou une Colonne pour cr\u00e9er des structures complexes<\/strong>.
\u274c Ne peut pas contenir d’autres Grilles (pas d\u2019imbrication directe de Grilles dans Grilles)<\/strong>.<\/td><\/tr>
Options de personnalisation<\/strong><\/td>\u2705 Peut avoir une couleur de fond, marges, paddings, bordures<\/strong>.
\u2705 Alignement vertical ou horizontal des blocs<\/strong>.
\u274c Ne peut pas ajuster directement l\u2019espacement entre les blocs internes<\/strong> (utiliser un Stack pour cela).<\/td>		\u2705 Peut ajuster l\u2019espacement vertical entre les blocs<\/strong>.
\u2705 G\u00e8re bien l\u2019alignement des blocs dans une colonne<\/strong>.
\u274c Impossible d\u2019aligner horizontalement des blocs (oblig\u00e9 d\u2019empiler en colonne)<\/strong>.<\/td>		\u2705 Peut ajuster l\u2019alignement horizontal et la distribution des blocs<\/strong> (espacement uniforme, alignement \u00e0 gauche\/droite).
\u274c Ne peut pas modifier les marges internes individuellement<\/strong> (seulement via CSS).<\/td>		\u2705 Largeur des colonnes ajustable<\/strong> (fixe ou % dynamique).
\u2705 Espacement entre les colonnes r\u00e9glable<\/strong>.
\u274c Ne peut pas d\u00e9finir un fond par colonne (sauf avec un Groupe imbriqu\u00e9)<\/strong>.<\/td>		\u2705 Peut ajuster le nombre de colonnes et l\u2019espacement des cellules<\/strong>.
\u2705 Peut g\u00e9rer le redimensionnement automatique sur mobile<\/strong>.
\u274c Ne permet pas de contr\u00f4ler individuellement la hauteur des cellules<\/strong> (elles s\u2019adaptent au contenu).<\/td><\/tr>
\u00c9quivalent HTML\/CSS<\/strong><\/td><div><\/code> avec display: flex<\/code> ou grid<\/code><\/td><div><\/code> avec display: flex; flex-direction: column;<\/code><\/td><div class=\"row\"><\/code> avec display: flex; flex-wrap: nowrap;<\/code><\/td><div class=\"columns\"><\/code> avec plusieurs <div class=\"column\"><\/code><\/td><div class=\"grid\"><\/code> avec display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));<\/code><\/td><\/tr>
Gestion du responsive<\/strong><\/td>Peut \u00eatre r\u00e9gl\u00e9 pour s\u2019adapter en colonne ou en ligne selon la taille d\u2019\u00e9cran<\/td>Automatique, toujours en colonne<\/td>Peut poser probl\u00e8me sur mobile si trop d\u2019\u00e9l\u00e9ments sont forc\u00e9s sur une seule ligne<\/td>S\u2019adapte, mais difficilement lors qu’il y a 3 colonnes et plus….<\/td>Flexible, s\u2019adapte automatiquement aux \u00e9crans plus petits en r\u00e9duisant le nombre de colonnes<\/td><\/tr>
Performance et optimisation<\/strong><\/td>Un exc\u00e8s de blocs imbriqu\u00e9s peut ralentir la page<\/td>L\u00e9ger et optimis\u00e9<\/td>Tr\u00e8s l\u00e9ger, mais attention aux longues listes d\u2019\u00e9l\u00e9ments<\/td>Peut alourdir la page si mal configur\u00e9<\/td>Optimis\u00e9 si bien utilis\u00e9, mais peut \u00eatre lourd si trop d\u2019\u00e9l\u00e9ments charg\u00e9s simultan\u00e9ment<\/td><\/tr>
Complexit\u00e9 d’utilisation<\/strong><\/td>\ud83d\udfe2 Facile<\/td>\ud83d\udfe2 Facile<\/td>\ud83d\udfe2 Facile<\/td>\ud83d\udfe0 Interm\u00e9diaire (demande des ajustements CSS)<\/td>\ud83d\udd34 Avanc\u00e9 (n\u00e9cessite de bien comprendre le fonctionnement des grilles)<\/td><\/tr>
Bonnes pratiques et erreurs \u00e0 \u00e9viter<\/strong><\/td>\u2705 Ne pas empiler trop de Groupes imbriqu\u00e9s (ralentit le site).
\u2705 Utiliser un arri\u00e8re-plan et des espacements pour am\u00e9liorer la lisibilit\u00e9.<\/td>		\u2705 Utiliser un bon espacement entre les blocs pour la lisibilit\u00e9.
\u2705 Ne pas surcharger avec trop de contenu.<\/td>		\u274c Ne pas mettre trop d\u2019\u00e9l\u00e9ments dans une seule Rang\u00e9e (affichage cass\u00e9 en mobile).
\u2705 V\u00e9rifier l\u2019alignement et l\u2019espacement des blocs.<\/td>		\u2705 Tester en mobile pour \u00e9viter des colonnes trop serr\u00e9es.
\u2705 S\u2019assurer que les colonnes sont bien \u00e9quilibr\u00e9es en taille.<\/td>		\u2705 Ne pas charger trop d’\u00e9l\u00e9ments pour \u00e9viter les ralentissements.
\u2705 Optimiser les images et le CSS pour de meilleures performances.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n
\n

Bloc \u00ab\u00a0Groupe\u00a0\u00bb avec Titre, Sous-titre, Listes \u00e0 puces et Galerie <\/h2>\n\n\n\n

Id\u00e9ale pour des mises en page simples<\/h4>\n<\/div>\n\n\n\n