Divi 5 introduit une mise à jour importante du système de mise en page en ajoutant des contrôles de mise en page au niveau de chaque module. Désormais, chaque module dispose d’options de mise en page directement dans l’onglet Design, ce qui permet de gérer l’alignement, l’ordre et l’espacement des éléments internes sans ajouter de lignes ou de colonnes supplémentaires.

Principaux avantages des nouvelles options de mise en page

Structure plus propre et simplifiée Les décisions de mise en page sont désormais faites à l’intérieur du module lui-même, réduisant le besoin de structures complexes autour des modules.

Modules réutilisables Un module avec une mise en page interne configurée peut être utilisé dans différentes sections ou pages sans réajustement manuel.

Contrôle responsive amélioré Changez facilement la direction, l’alignement ou l’ordre des éléments pour différents appareils — bureau, tablette ou mobile — sans dupliquer les modules.

Contrôle visuel sans altérer la sémantique Les options de mise en page n’affectent que l’apparence visuelle : l’ordre HTML, la hiérarchie du contenu et l’accessibilité restent propres et cohérents.

Ces nouvelles options reposent sur les technologies modernes Flexbox et CSS Grid, ce qui rend les alignements, les espacements et les comportements responsive plus prévisibles et intuitifs à gérer.

Comment ces options améliorent réellement la conception

1. Contrôler l’agencement interne d’un module

Un module comme Blurb peut afficher ses éléments côte à côte sur desktop, puis se réorganiser automatiquement en colonne sur mobile, en ajustant simplement la direction du layout à chaque breakpoint.

2. Utiliser « Elements » pour des compositions internes flexibles

Vous pouvez maintenant insérer plusieurs éléments (texte, vidéos, images, boutons, etc.) à l’intérieur d’un module et contrôler leur disposition interne sans ajouter de structure externe. Par exemple, un texte et une vidéo peuvent s’aligner sur le même plan sur desktop, puis se superposer sur mobile.

3. Module Group comme conteneur personnalisable

Les Module Groups permettent de combiner plusieurs modules en un seul ensemble cohésif qui se comporte comme un conteneur flexible. Cela facilite la création de composants réutilisables (ex. carte profil, sections d’appel à l’action) avec une gestion simplifiée des alignements et des espacements sur différents écrans.