Si vous commencez à utiliser Divi 5, vous avez peut-être remarqué un élément appelé Group parmi les modules disponibles.
Et forcément, une question se pose : à quoi sert un Group dans Divi 5 ?
Après tout, Divi possède déjà des Sections, des Rows (lignes), des Columns (colonnes) et des Modules. Alors pourquoi ajouter encore un nouvel élément ?
Le Group Module est en réalité un conteneur qui permet de rassembler plusieurs éléments pour pouvoir ensuite les organiser, les déplacer ou les styliser comme un seul ensemble.
Dans ce tutoriel, nous allons voir simplement :
-
ce qu’est un Group dans Divi 5 ;
-
où il se place dans la structure d’une page ;
-
comment créer votre premier Group ;
-
ce que vous pouvez mettre à l’intérieur ;
-
dans quelles situations l’utiliser ;
-
et quelques exemples concrets.
Pas besoin de connaître le code ou le CSS pour suivre ce tutoriel.
C’est quoi un Group dans Divi 5 ?
Un Group est un conteneur que vous pouvez ajouter à l’intérieur d’une colonne.
Il permet ensuite de rassembler plusieurs modules ou éléments à l’intérieur d’un même bloc.
Prenons un exemple très simple.
Vous souhaitez créer une carte présentant l’un de vos services avec :
-
une image ;
-
un titre ;
-
une description ;
-
un bouton.
Vous pourriez placer ces quatre éléments les uns à la suite des autres dans votre colonne.
Mais avec Divi 5, vous pouvez également les placer à l’intérieur d’un Group.
La structure ressemblerait alors à ceci :
SECTION
└── ROW
└── COLUMN
└── GROUP
├── IMAGE
├── HEADING
├── TEXT
└── BUTTON
Votre image, votre titre, votre texte et votre bouton font maintenant partie d’un même ensemble.
💡 À retenir : le Group ne remplace pas vos modules. Il sert de conteneur pour réunir plusieurs éléments qui appartiennent logiquement au même bloc.
Où se place un Group dans la structure de Divi 5 ?
Pour bien comprendre l’intérêt des Groups, il faut d’abord comprendre la hiérarchie utilisée par Divi.
Une structure simple peut être représentée ainsi :
Section → Row → Column → Group → Modules
La Section
La Section représente une grande zone de votre page.
Vous pouvez par exemple avoir une section pour votre introduction, une autre pour vos services et une autre pour vos témoignages.
La Row
À l’intérieur de la Section, vous pouvez ajouter une Row, c’est-à-dire une ligne.
La Row permet notamment d’organiser votre mise en page et vos colonnes.
La Column
Les Columns se trouvent dans vos Rows et accueillent votre contenu.
Le Group
C’est ici qu’intervient notre nouvel élément.
Le Group se place à l’intérieur d’une Column et peut contenir plusieurs éléments.
Les Modules
Enfin, les modules correspondent au contenu de votre site :
-
texte ;
-
image ;
-
titre ;
-
bouton ;
-
icône ;
-
formulaire ;
-
etc.
Le Group ajoute donc un niveau supplémentaire permettant d’organiser plus facilement plusieurs éléments liés entre eux.
Comment ajouter un Group dans Divi 5 ?
Passons maintenant à la pratique.
Étape 1 : ouvrez le Visual Builder
Ouvrez la page que vous souhaitez modifier avec le Visual Builder de Divi 5.
Divi ajoute automatiquement une Section lorsque vous commencez à construire votre mise en page.
Étape 2 : ajoutez une Row
Cliquez sur le bouton + vert pour ajouter une nouvelle Row.
Choisissez ensuite la structure de colonnes dont vous avez besoin.
Pour notre premier exemple, une seule colonne suffit.
Étape 3 : ajoutez le module Group
À l’intérieur de votre Row, cliquez sur le bouton + gris permettant d’ajouter un nouvel élément.
Dans la liste des modules disponibles, recherchez :
Group
Vous pouvez également utiliser le champ de recherche pour le retrouver plus rapidement.
Cliquez sur Group pour l’ajouter.
Vous venez de créer votre premier Group !
Une autre méthode très pratique pour créer un Group
Divi 5 permet également de créer un Group à partir de modules qui existent déjà sur votre page.
Sélectionnez plusieurs modules puis utilisez le raccourci :
CTRL + G sur Windows
ou
CMD + G sur Mac
Divi crée alors automatiquement un Group contenant les éléments sélectionnés.
Cette méthode est particulièrement pratique lorsque vous avez déjà construit une partie de votre page et que vous réalisez ensuite que plusieurs éléments devraient être regroupés.
Que peut-on mettre dans un Group ?
Un Group ne sert pas uniquement à rassembler quelques modules Texte ou Bouton.
Vous pouvez y placer différents modules Divi comme :
-
Heading ;
-
Text ;
-
Image ;
-
Button ;
-
Icon ;
-
Divider ;
-
etc.
Mais Divi 5 permet également d’intégrer des Nested Rows à l’intérieur d’un Group.
Cela permet de créer des composants beaucoup plus élaborés.
Vous pourriez par exemple construire une carte avec :
GROUP
│
├── NESTED ROW
│ ├── IMAGE
│ └── HEADING
│
├── TEXT
│
└── BUTTON
Vous conservez ensuite tout cet ensemble dans un seul Group.
C’est particulièrement intéressant lorsque vous commencez à créer des composants plus complexes.
Pourquoi utiliser les Groups dans Divi 5 ?
L’intérêt principal est de pouvoir considérer plusieurs éléments comme un seul ensemble logique.
Une fois votre Group créé, vous pouvez notamment :
-
déplacer l’ensemble ;
-
le dupliquer ;
-
appliquer un arrière-plan au Group ;
-
gérer ses espacements ;
-
ajouter des bordures ;
-
appliquer différents styles au conteneur ;
-
enregistrer et réutiliser votre composition.
Vous évitez ainsi de devoir manipuler séparément chaque élément.
Prenons un exemple
Imaginons une carte composée de :
FORMATION DIVI 5
Apprenez à créer votre site avec Divi 5 étape par étape.
[ DÉCOUVRIR LA FORMATION ]
Le titre, le texte et le bouton appartiennent tous à la même carte.
Il est donc logique de les réunir dans un Group.
Vous pouvez ensuite appliquer au Group :
-
un fond ;
-
des coins arrondis ;
-
une bordure ;
-
une ombre ;
-
un espacement intérieur.
Votre Group devient alors le conteneur de votre carte.
Group, Row et Column : quelle différence ?
C’est probablement l’une des principales difficultés lorsque l’on découvre les Groups.
Voici une manière simple de retenir le rôle de chaque élément.
| Élément | Son rôle |
|---|---|
| Section | Créer une grande zone de la page |
| Row | Structurer le contenu à l’intérieur d’une Section |
| Column | Répartir le contenu à l’intérieur d’une Row |
| Group | Regrouper plusieurs éléments appartenant au même ensemble |
| Module | Afficher le contenu : texte, image, bouton, etc. |
Le Group ne vient donc pas remplacer les Rows ou les Columns.
Il apporte un niveau supplémentaire d’organisation.
Un exemple concret : créer une carte avec un Group
Prenons maintenant un exemple que vous rencontrerez très souvent lors de la création d’un site internet.
Nous souhaitons présenter trois services.
Chaque service possède :
-
une icône ;
-
un titre ;
-
une description ;
-
un bouton.
Nous pourrions créer trois colonnes.
Dans chaque colonne, nous ajoutons ensuite un Group :
ROW
│
├── COLUMN
│ └── GROUP
│ ├── ICON
│ ├── HEADING
│ ├── TEXT
│ └── BUTTON
│
├── COLUMN
│ └── GROUP
│ ├── ICON
│ ├── HEADING
│ ├── TEXT
│ └── BUTTON
│
└── COLUMN
└── GROUP
├── ICON
├── HEADING
├── TEXT
└── BUTTON
Chaque Group représente alors une carte de service complète.
Vous pouvez créer la première carte, la styliser puis la dupliquer pour créer les suivantes.
Il ne reste plus qu’à modifier leur contenu.
Utiliser les Groups avec Flexbox dans Divi 5
Les Groups deviennent encore plus intéressants avec les possibilités de mise en page de Flexbox dans Divi 5.
Flexbox permet notamment de contrôler la disposition, l’alignement et l’espacement des éléments à l’intérieur d’un conteneur.
Prenons un Group contenant :
Formation Divi 5 — 199 € — Découvrir
Vous pourriez choisir d’afficher ces différents éléments horizontalement sur ordinateur, puis d’adapter leur disposition pour les écrans plus petits.
C’est l’un des grands avantages de la nouvelle logique de construction de Divi 5 : les Groups ne servent pas uniquement à ranger vos éléments, ils peuvent véritablement participer à la construction de vos mises en page.
👉 Nous verrons Flexbox beaucoup plus en détail dans un prochain tutoriel consacré entièrement à cette fonctionnalité.
5 exemples où les Groups sont particulièrement utiles
Maintenant que vous avez compris leur fonctionnement, voici quelques situations concrètes dans lesquelles vous pouvez utiliser un Group.
1. Créer une carte de service
Regroupez :
Icône + Titre + Description + Bouton
Vous pouvez ensuite appliquer le fond, les bordures et les espacements directement au Group.
2. Créer une carte tarifaire personnalisée
Regroupez :
Nom de l’offre + Prix + Fonctionnalités + Bouton
Vous pouvez ainsi construire votre propre présentation tarifaire plutôt que de dépendre d’une structure prédéfinie.
3. Créer un témoignage personnalisé
Vous pourriez réunir :
Photo + Étoiles + Témoignage + Nom du client
Tous ces éléments constituent un seul composant logique : le témoignage.
4. Créer un appel à l’action
Par exemple :
Une question ?
Besoin d’aide pour votre projet ?
[ CONTACTEZ-MOI ]
Placez ces éléments dans un Group puis appliquez votre arrière-plan et vos espacements au Group.
5. Créer un bloc auteur
Regroupez :
Photo + Nom + Présentation + Réseaux sociaux
Vous pourrez ensuite déplacer ou réutiliser facilement l’ensemble.
Peut-on réutiliser un Group ?
Oui, et c’est justement l’un des intérêts de cette fonctionnalité.
Une fois votre composition créée, vous pouvez notamment la dupliquer ou l’enregistrer afin de la réutiliser.
Un Group peut également être transformé en élément global.
Cela devient particulièrement pratique pour les composants que vous utilisez régulièrement sur votre site.
Vous pourriez par exemple créer un Group contenant votre appel à l’action et le réutiliser sur différentes pages.
Peut-on mettre un Group dans un Group ?
Oui !
Divi 5 permet d’imbriquer les Groups.
Un Group peut donc contenir un autre Group.
Cette possibilité offre énormément de liberté pour construire des composants complexes.
Mais attention : ce n’est pas parce que Divi permet de créer des structures très imbriquées qu’il faut nécessairement le faire partout.
Pour un site facile à maintenir, essayez de conserver une structure aussi logique et lisible que possible.
Faut-il utiliser des Groups partout ?
Non.
C’est probablement le conseil le plus important de ce tutoriel.
N’ajoutez pas un Group autour de chaque module simplement parce que Divi vous permet de le faire.
Posez-vous plutôt cette question :
Ces différents éléments constituent-ils ensemble un même composant ?
Si la réponse est oui, un Group peut être pertinent.
Par exemple :
Image + titre + texte + bouton
qui forment ensemble une carte de service : oui.
Un simple titre isolé au milieu d’une page : probablement non.
Votre structure Divi doit rester compréhensible lorsque vous revenez modifier votre site plusieurs mois plus tard.
Ce qu’il faut retenir sur les Groups de Divi 5
Les Groups de Divi 5 permettent de rassembler plusieurs modules et éléments dans un même conteneur.
Ils s’intègrent dans la structure de Divi :
Section → Row → Column → Group → Modules
Ils permettent notamment de créer plus facilement des composants comme :
-
des cartes ;
-
des appels à l’action ;
-
des témoignages ;
-
des tarifs ;
-
des blocs auteurs ;
-
ou des compositions personnalisées.
Vous pouvez ensuite déplacer, dupliquer et styliser votre Group comme un ensemble.
Si vous débutez avec Divi 5, inutile d’en placer partout.
Commencez simplement à les utiliser lorsque plusieurs éléments de votre page appartiennent logiquement au même composant.
Une fois ce principe compris, les Groups deviennent beaucoup plus naturels à utiliser.
🎓 Apprendre Divi 5 avec IASOE
Ce tutoriel fait partie de ma série gratuite consacrée à Divi 5 en français.
L’objectif : vous aider à comprendre les nouvelles fonctionnalités de Divi et surtout à savoir quand et comment les utiliser, sans jargon inutile.
Prochain tutoriel : comprendre la structure de Divi 5 — Sections, Rows, Columns, Groups et Modules.