Une avancée qui transforme votre manière de designer
Divi 5 franchit un cap majeur : les modules deviennent enfin imbriquables. Une évolution qui transforme complètement la façon de construire une page, en offrant une liberté de création totale. Menus enrichis, sliders personnalisés, grilles intelligentes, composants réutilisables… tout devient possible, et surtout beaucoup plus rapide à réaliser. Cette mise à jour marque le début d’une nouvelle ère pour les designers, intégrateurs et créateurs qui veulent aller plus loin sans coder.
Divi 5 : une évolution majeure qui transforme la façon de construire vos pages
Divi 5 introduit désormais la possibilité d’imbriquer des modules entre eux, une avancée majeure pour la création de pages WordPress.
Cette nouveauté, qui peut sembler technique, transforme en réalité la structure du builder : chaque élément devient un véritable conteneur. Il est désormais possible d’insérer des modules à l’intérieur d’autres modules, sans limite de profondeur.
Cette évolution offre une liberté de création nettement plus large, permettant de concevoir facilement des menus enrichis, des sliders personnalisés, des grilles d’articles ou encore des formulaires d’inscription. Cette fonctionnalité réduit le besoin de CSS personnalisé, Une mise à jour essentielle pour optimiser la création de sites WordPress avec Divi 5.
Image générée avec seelab.ai
Tous les bénéfices des Modules imbriqués Divi 5 pour vos mises en page
Plutôt que de jongler entre plusieurs zones distinctes ou d’employer des hacks pour obtenir un rendu précis, Divi 5 introduit une nouvelle approche : chaque module dispose désormais des mêmes contrôles de mise en page que les rangées et les colonnes.
Cela inclut des options flex et grid complètes pour organiser facilement les éléments enfants et créer des mises en page modulaires sur WordPress.
Quelques exemples pour se projeter :
- Ajouter un bouton directement dans un menu pour créer des appels à l’action visibles et cohérents.
- Insérer un formulaire d’opt-in au sein d’une grille d’articles pour augmenter les conversions sans casser la structure de la page.
- Construire une mise en page personnalisée à l’intérieur d’un slider, d’un onglet ou d’un accordéon pour des sections interactives riches et modulaires.
Comment fonctionnent les modules imbriqués dans la nouvelle mise à jour Divi 5
Chaque module peut désormais contenir des éléments enfants. Les contrôles de flex et de grid sont accessibles pour ces modules, ce qui permet de :
- Définir la direction (row ou column) pour organiser les éléments (par exemple, image à gauche et texte à droite).
- Utiliser des largeurs de colonne prédéfinies quand l’élément est dans un conteneur flex, sans avoir à calculer manuellement les pourcentages et les gaps.
- Appliquer les mêmes réglages de style aux contenus natifs du module via ses options de mise en page.
Construisez des mises en page personnalisées à l’intérieur de sliders, onglets, accordéons et tout le reste.
Des options pour travailler plus vite et en confiance
Les développeurs ont pensé à l’expérience d’édition pour que le nesting reste simple et intuitif.
- Ajout et collage via clic droit : ajouter ou coller un élément au-dessus, en dessous ou à l’intérieur d’un autre élément directement depuis l’éditeur.
- Liste triable des éléments dans le panneau d’options pour avoir une vue rapide des enfants d’un module et les réorganiser facilement.
- Drag and drop amélioré permettant de déposer des éléments à l’intérieur d’un module lors du glisser-déposer.
Capture d’écran de la vidéo « Big Update! Nested Modules For Divi 5 »
L’importance du Flex et Grid dans la nouvelle version de divi 5
Même les modules qui n’étaient pas conçus à l’origine pour contenir d’autres modules disposent maintenant d’un ensemble complet d’options de mise en page.
Cela signifie que Divi 5 traite la structure sémantique (rangées, colonnes, modules) avec une logique unifiée : tout élément peut être un conteneur. Les avantages sont multiples :
- Uniformité des règles de mise en page entre tous les éléments.
- Moins de CSS personnalisé à écrire, car les réglages natifs couvrent la plupart des besoins.
- Plus grande rapidité pour prototyper des sections complexes.
Capture d’écran de la vidéo « Big Update! Nested Modules For Divi 5 »
Créer facilement des grilles équilibrées avec les colonnes Flexbox de Divi 5
Pour les interfaces en flex, Elegant Themes ajoute des options de largeur de colonne prêtes à l’emploi. Cela facilite la création de structures équilibrées en quelques clics, sans calculer les tailles ni ajuster les espaces.
Manipuler facilement les structures imbriquées avec les nouvelles fonctionnalités
Au-delà des capacités techniques, Elegant Themes a amélioré les outils d’édition pour rendre la manipulation des structures imbriquées naturelle :
- Raccourcis contextuels via clic droit pour insérer rapidement des éléments.
- Vue hiérarchique et triable des enfants dans le panneau d’options, idéale pour les structures profondes.
- Drag and drop qui respecte la logique d’imbriquement, pour déplacer un module d’un endroit à un autre sans perdre sa structure interne.
Capture d’écran de la vidéo « Big Update! Nested Modules For Divi 5 »
Idées et cas d’usage pour des mises en page créatives
Voici quelques mises en situation qui illustrent la puissance des modules imbriqués :
- Header interactif : intégrer un mini-formulaire d’inscription et un bouton d’action dans le même module de navigation pour augmenter les inscriptions directement depuis l’entête.
- Landing pages dynamiques : combiner sliders, grilles et sections de témoignages avec des contrôles fins pour chaque enfant, sans dupliquer les styles.
- Contenu modulaire réutilisable : créer des composants complexes (carte produit, bloc équipe, appel à l’action) et les réutiliser dans plusieurs emplacements.
Un inspecteur inspiré des outils de design modernes
En complément, l’inspecteur est désormais disponible et s’inspire d’outils de design modernes. Il offre une vue synthétique des attributs essentiels d’un élément, y compris tous ses enfants, et permet de modifier couleurs, polices, tailles et presets depuis une interface centralisée. C’est un accélérateur d’itération pour affiner rapidement un design sans naviguer entre plusieurs panneaux.
Conclusion
Les modules imbriqués de Divi 5 représentent une avancée majeure pour la création de sites WordPress, en rendant les pages plus faciles à construire, flexibles et rapides à personnaliser.
Ils permettent de créer des composants riches et réutilisables tout en conservant une interface intuitive pour les designers et développeurs.
Pour exploiter pleinement ces fonctionnalités, il est recommandé de commencer par expérimenter sur une page test et de construire une bibliothèque de composants réutilisables, standardisant ainsi la création de pages cohérentes, performantes et faciles à maintenir.
En adoptant dès maintenant les modules imbriqués et le nouvel inspecteur de Divi 5, il devient possible de repenser les templates, d’accélérer le flux de production et de rendre la création web plus fluide, créative et efficace.
Nous sommes une agence spécialisée dans la création de sites web et proposons des services complets pour vous accompagner dans la réalisation de votre projet. N’hésitez pas à nous contacter pour toute demande d’assistance.