| Fonction | Groupe | Stack | Rangée | Colonnes | Grille |
|---|---|---|---|---|---|
| Disposition | Horizontal & Vertical | Forcé en Vertical | Forcé en Horizontal | Plusieurs colonnes côte à côte | Organisation sous forme de grille avec un nombre défini de colonnes et de lignes |
| Exemples concrets d’utilisation | ✅ Hero section avec une image de fond, un titre et un bouton d’appel à l’action. ✅ Bannière promotionnelle avec texte et image alignés. ✅ Encadré avec un fond coloré pour mettre en avant du contenu. | ✅ Liste de témoignages empilés verticalement avec une mise en page homogène. ✅ Étapes d’un processus (ex : étapes d’inscription) bien espacées. ✅ Liste de services affichée de manière lisible. | ✅ Menu de navigation avec des liens alignés horizontalement. ✅ Boutons call-to-action alignés côte à côte. ✅ Liste d’icônes avec légendes affichées sur une ligne. | ✅ Article avec une image à gauche et du texte à droite. ✅ Mise en page en deux ou trois colonnes pour un blog ou une page d’accueil. ✅ Comparaison de produits avec des sections côte à côte. | ✅ Galerie d’images en grille (portfolio, témoignages clients). ✅ Liste d’articles de blog en mode carte. ✅ Mise en page d’une boutique e-commerce avec affichage des produits en grille. |
| Possibilités d’imbrication | ✅ Peut contenir tous types de blocs (y compris d’autres Groupes, Stacks, Colonnes et Grilles). ✅ Peut être imbriqué dans un autre Groupe pour créer des structures complexes. ❌ Éviter trop de niveaux d’imbrication, car cela alourdit le code et impacte les performances. | ✅ Peut contenir tous types de blocs mais seulement en disposition verticale. ✅ Peut être imbriqué dans un Groupe ou une Colonne. ❌ Ne peut pas être configuré pour un alignement horizontal (il faut utiliser une Rangée pour cela). | ✅ Peut contenir plusieurs blocs, mais alignés horizontalement. ✅ Peut être placé dans un Groupe ou une Colonne. ❌ Ne peut pas contenir des Groupes, Stacks ou Grilles. | ✅ Chaque colonne peut contenir plusieurs blocs (y compris des Groupes, Stacks ou Rangées). ✅ Peut être imbriqué dans un Groupe pour organiser une section. ❌ Ne peut pas être imbriqué dans une Rangée (structure rigide). | ✅ Chaque cellule de la grille peut contenir un bloc unique (texte, image, bouton, etc.). ✅ Peut être imbriqué dans un Groupe ou une Colonne pour créer des structures complexes. ❌ Ne peut pas contenir d’autres Grilles (pas d’imbrication directe de Grilles dans Grilles). |
| Options de personnalisation | ✅ Peut avoir une couleur de fond, marges, paddings, bordures. ✅ Alignement vertical ou horizontal des blocs. ❌ Ne peut pas ajuster directement l’espacement entre les blocs internes (utiliser un Stack pour cela). | ✅ Peut ajuster l’espacement vertical entre les blocs. ✅ Gère bien l’alignement des blocs dans une colonne. ❌ Impossible d’aligner horizontalement des blocs (obligé d’empiler en colonne). | ✅ Peut ajuster l’alignement horizontal et la distribution des blocs (espacement uniforme, alignement à gauche/droite). ❌ Ne peut pas modifier les marges internes individuellement (seulement via CSS). | ✅ Largeur des colonnes ajustable (fixe ou % dynamique). ✅ Espacement entre les colonnes réglable. ❌ Ne peut pas définir un fond par colonne (sauf avec un Groupe imbriqué). | ✅ Peut ajuster le nombre de colonnes et l’espacement des cellules. ✅ Peut gérer le redimensionnement automatique sur mobile. ❌ Ne permet pas de contrôler individuellement la hauteur des cellules (elles s’adaptent au contenu). |
| Équivalent HTML/CSS | <div> avec display: flex ou grid | <div> avec display: flex; flex-direction: column; | <div class="row"> avec display: flex; flex-wrap: nowrap; | <div class="columns"> avec plusieurs <div class="column"> | <div class="grid"> avec display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| Gestion du responsive | Peut être réglé pour s’adapter en colonne ou en ligne selon la taille d’écran | Automatique, toujours en colonne | Peut poser problème sur mobile si trop d’éléments sont forcés sur une seule ligne | S’adapte, mais difficilement lors qu’il y a 3 colonnes et plus…. | Flexible, s’adapte automatiquement aux écrans plus petits en réduisant le nombre de colonnes |
| Performance et optimisation | Un excès de blocs imbriqués peut ralentir la page | Léger et optimisé | Très léger, mais attention aux longues listes d’éléments | Peut alourdir la page si mal configuré | Optimisé si bien utilisé, mais peut être lourd si trop d’éléments chargés simultanément |
| Complexité d’utilisation | 🟢 Facile | 🟢 Facile | 🟢 Facile | 🟠 Intermédiaire (demande des ajustements CSS) | 🔴 Avancé (nécessite de bien comprendre le fonctionnement des grilles) |
| Bonnes pratiques et erreurs à éviter | ✅ Ne pas empiler trop de Groupes imbriqués (ralentit le site). ✅ Utiliser un arrière-plan et des espacements pour améliorer la lisibilité. | ✅ Utiliser un bon espacement entre les blocs pour la lisibilité. ✅ Ne pas surcharger avec trop de contenu. | ❌ Ne pas mettre trop d’éléments dans une seule Rangée (affichage cassé en mobile). ✅ Vérifier l’alignement et l’espacement des blocs. | ✅ Tester en mobile pour éviter des colonnes trop serrées. ✅ S’assurer que les colonnes sont bien équilibrées en taille. | ✅ Ne pas charger trop d’éléments pour éviter les ralentissements. ✅ Optimiser les images et le CSS pour de meilleures performances. |
Bloc « Groupe » avec Titre, Sous-titre, Listes à puces et Galerie
Idéale pour des mises en page simples
- Pour reproduire cette section, vous avez besoun d’un groupe contenant deux Titres, une liste à puces et une galerie d’images
- Ensuite, régler la largeur de ce groupe à « Pleine largeur » et régler la couleur d’arrière plan
- Ensuite créer un « Empiler » avec le titre et le sous-titre pour pouvoir contrôler l’espacement entre ces 2 blocs (onglet Styles)
- Ensuite, fixer la largeur des éléments du groupe à « Aucun »
- Configurer les légendes d’images dans l’onglet Médias de WordPress (dans le champ Légende) avant d’insérer la galerie
- Configurer l’aggrandissement au clic (via l’icône 🔗 dans le menu flottant lors du survol d’une image)
Bloc « Groupe » avec un Titre, Liste à puces, Séparateur et bloc colonnes (2) contenant une Galerie et du texte
- Pour reproduire cette section, vous devez posséder un groupe, réglé en pleine largeur et avec une couleur d’arrière plan définie.
- Le premier élément du groupe est un groupe de niveau inférieur, composé d’un Titre, d’une liste à puces et d’un séparateur
- Le deuxième élément du groupe est un système à 2 colonnes
- La première colonne contient un bloc de type Galerie
- La 2e colonne contient un bloc de type Paragraphe
Mon organisation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus sapien, luctus lacinia diam sed, rutrum euismod libero. In at turpis at ante dictum laoreet. In bibendum iaculis dui quis convallis. Nam tempor mauris tellus, eu aliquet nulla convallis quis. Vestibulum fermentum et dui vitae mattis. Pellentesque rutrum tortor ipsum, volutpat iaculis urna cursus eget. Nullam quis enim quis nisi fermentum tristique. Nullam eleifend sollicitudin dui eu tempus. Donec dapibus odio eu neque ultrices, a finibus lectus egestas. Ut non nisl lectus. Aliquam erat volutpat. Integer mattis laoreet odio, sed pretium lacus. Phasellus interdum est enim, eu pulvinar nisi rhoncus qui
Bloc « Groupe » avec Titre, Liste à puces et bloc Média/Texte
- Pour reproduire cette section, vous avez besoin d’un groupe contenant un Titre, une liste à puces et un bloc Média/texte
- Vous devez régler la largeur du Groupe à Pleine largeur et régler la couleur d’arrière plan
- Ensuite régler la largeur du bloc Média/texte à « Aucun »
- Ensuite. vous pouvez régler la largeur de l’image et le texte s’ajsutera automatiquement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed nulla non nisi aliquam dictum eget in orci. Vestibulum quis nisi sapien. Sed euismod augue ut faucibus venenatis. Praesent in ex leo. Integer laoreet risus quis turpis ornare pulvinar. Nam ullamcorper ultrices elementum. In maximus posuere tellus et accumsan. Maecenas ac ultricies est, ut mattis ligula. Vivamus id libero quis urna mollis fermentum porta placerat ante. Pellentesque blandit tristique luctus. Nunc velit diam, pulvinar eget fermentum quis, sollicitudin sed mauris. Quisque at condimentum magna. Quisque gravida lobortis ipsum, non mollis risus porttitor vitae.
Suspendisse gravida est ut sem dapibus pharetra. Proin eget justo quam. Ut ac lorem sed tellus cursus vehicula quis non metus. Curabitur pretium imperdiet sapien non auctor. Donec justo magna, ornare at molestie vitae, facilisis in mi. Etiam quis congue augue, id placerat risus. Etiam condimentum neque sed sagittis dignissim.
Bloc « Groupe » avec Titre, sous-titre, Liste à puces et Grille
Idéal pour créer des grilles de cartes ou des grilles de produits
- Pour reproduire cette section, vous avez besoun d’un groupe contenant deux Titres, une liste à puces et un bloc Grille
- Ensuite, régler la largeur de ce groupe à « Pleine largeur » et régler la couleur d’arrière plan
- Chacune des cellules de la grille, créer un « Stack » (empiler) avec une image et un autre bloc « Stack » (afin de contrôler l’espace entre ces 2 blocs)
- Dans le deuxière bloc Stack, ajouter 2 blocs titre (nom + fonction), un bloc Icônes de réseaux sociaux et un bloc Bouton (afin de contrôler l’espace entre les blocs)
- Au besoin, ajouter un Top Margin supplémentaire pour distancer le bouton
Baptiste Bidouille
Designer graphique
Baptiste Bidouille
Designer graphique
Baptiste Bidouille
Designer graphique
Baptiste Bidouille
Designer graphique
Baptiste Bidouille
Designer graphique