Point de départ
On a tous connu ce moment : tu es fier de ta mise en page, tout est nickel… jusqu’à ce que tu passes en version mobile. Là, horreur : ton bouton est parti se balader sous ton image, ton texte se retrouve tassé dans un coin, et tu te demandes sérieusement si WordPress n’a pas juré ta perte.
Bonne nouvelle : Divi 5 arrive avec une arme secrète pour nous éviter ces drames du quotidien — Flexbox. Plus besoin de coder comme un ninja CSS, le constructeur visuel prend désormais en charge ce système moderne, directement intégré aux réglages.
Dans cet article, je vais t’expliquer ce qu’est Flexbox, pourquoi Divi 5 en a fait son nouveau moteur, et surtout comment l’utiliser concrètement pour créer des mises en page modernes, fluides et… enfin alignées comme tu veux.
Spoiler : tes boutons vont (enfin) rester bien sages là où tu les mets.
Qu’est-ce que flexbox (expliqué sans jargon)
Flexbox (ou « Flexible Box Layout ») est un modèle de mise en page CSS qui permet de gérer l’arrangement, l’alignement et la répartition des éléments dans une boîte (un conteneur).
En clair : imagine une boîte à œufs. Qu’il y ait 6, 8 ou 12 œufs, les cases s’adaptent toujours, et rien ne roule par terre. C’est ça, Flexbox : tes éléments (les œufs) sont alignés et répartis automatiquement dans leur conteneur (la boîte), quelle que soit la taille de l’écran.
Trois notions à retenir :
- Le conteneur flex : c’est l’élément parent, celui qui décide des règles du jeu.
- Les éléments flex : ce sont les enfants (modules, colonnes, etc.), qui s’adaptent aux règles fixées.
- L’axe principal et l’axe transversal : Flexbox organise tout le long d’un axe principal (horizontal ou vertical), et ajuste ensuite l’alignement sur l’axe transversal.
Avec ça, tu comprends déjà 80 % du système. Le reste, c’est juste jouer avec les options.
Pourquoi Divi 5 a adopté flexbox
Avant Divi 5, le thème utilisait un mélange de systèmes maison : sections spéciales, rangées pleine largeur, float et autres bidouilles. Ça marchait… mais c’était lourd, pas très flexible, et parfois franchement pénible à maintenir.
Avec Divi 5, Elegant Themes a fait table rase :
- Un seul moteur de mise en page : Flexbox.
- Des performances meilleures (moins de code inutile à charger).
- Une compatibilité responsive simplifiée : tout s’adapte plus naturellement, sans mille réglages par breakpoint.
Bref, Flexbox n’est pas juste un gadget : c’est la fondation de toutes les nouvelles mises en page dans Divi 5.
Comment activer flexbox dans Divi 5
La bonne nouvelle, c’est que tu n’as pas besoin de plonger dans du CSS : tout est directement dans le Visual Builder.
- Ouvre une section ou une ligne.
- Clique sur l’onglet Design > Layout.
- Choisis « Flex » (au lieu de « Block »).
Boom. Tu viens de transformer ton conteneur en boîte Flexbox. Tes éléments enfants deviennent des « flex items », et tu peux désormais les aligner comme tu veux, juste avec des options visuelles.
Les paramètres flexbox dans Divi 5 (traduits en humain)
Voici le petit dictionnaire des réglages que tu vas rencontrer :
- Layout direction : aligne les enfants en ligne (row), en colonne (column), ou l’inverse.
- Justify content : gère la répartition horizontale (gauche, centre, droite, espace égal…).
- Align items : contrôle l’alignement vertical (haut, centre, bas, étiré).
- Wrap : permet aux éléments de passer à la ligne si l’espace manque.
- Gap horizontal et vertical : règle les espaces entre colonnes/lignes, sans devoir jouer avec les marges.
👉 Astuce : amuse-toi à cliquer sur les icônes dans Divi. Elles sont très visuelles et te montrent instantanément ce qui change.
Exemples concrets de mises en page avec flexbox
Flexbox devient vraiment intéressant quand tu l’appliques à des cas pratiques. En voici cinq qui parlent à tout le monde :
1. Un header équilibré
Logo à gauche, menu centré, bouton « Contact » à droite : avant, tu aurais transpiré avec des marges et du CSS. Avec Flexbox, une ligne suffit.
2. Une grille de cartes produits
Chaque carte s’adapte automatiquement en hauteur, même si une description est plus longue qu’une autre. Alignement garanti.
3. Une section témoignages
Des colonnes avec texte centré verticalement, sans bricolage. Tes clients sont heureux, et toi aussi.
4. Un footer multi-colonnes
Peu importe le contenu de chaque colonne, tout reste proprement aligné.
5. Une section CTA (Call-to-action)
Texte centré verticalement, bouton aligné parfaitement : ça attire l’œil sans effort.
Flexbox + autres outils Divi 5 : le combo gagnant
Flexbox n’est pas seul dans l’arène. Il fonctionne main dans la main avec d’autres nouveautés de Divi 5 :
- Nested rows (lignes imbriquées) : créer des grilles complexes sans casser la mise en page.
- Groupes de modules : organiser plusieurs modules comme une seule unité.
- Presets & variables : garder un design cohérent sans tout refaire à chaque fois.
- Loop Builder : afficher des contenus dynamiques dans des grilles flexibles.
👉 Résultat : tu peux créer des mises en page sophistiquées sans écrire une seule ligne de CSS.
Erreurs fréquentes (et comment les éviter)
Même avec Flexbox, certains pièges guettent :
- Oublier le wrap : tes modules débordent sur mobile → active le « Wrap ».
- Abuser des marges manuelles : préfère les « gap », plus propres et cohérents.
- Penser que flexbox remplace tout : pour des grilles complexes (magazines, calendriers), CSS Grid reste plus adapté.
- Ne pas tester sur mobile : certains alignements parfaits sur desktop se cassent la figure sur petits écrans.
FAQ : les questions qu’on se pose tous
1. Quelle est la différence entre flexbox et CSS Grid ?
Flexbox est pensé pour l’alignement dans une seule dimension (ligne OU colonne). CSS Grid, lui, gère les deux dimensions (lignes ET colonnes). Pour des layouts simples et adaptatifs → Flexbox. Pour des grilles de magazine → Grid.
2. Dois-je encore utiliser les sections spéciales de Divi 4 ?
Non, elles sont remplacées par les lignes imbriquées et Flexbox. Moins de complexité, plus de flexibilité.
3. Comment gérer des alignements différents entre desktop et mobile ?
Divi 5 te permet de définir des réglages Flexbox par device. Tu peux inverser les colonnes en mobile, centrer ton contenu, etc.
4. Est-ce que flexbox ralentit mon site ?
Au contraire. Divi 5 a été optimisé autour de Flexbox, ce qui allège le code généré et améliore les performances.
5. Puis-je utiliser du CSS perso avec flexbox dans Divi 5 ?
Oui, bien sûr. Tu peux ajouter tes propres règles (ex. align-self, flex-grow) via l’onglet « Avancé > CSS ».
6. Flexbox fonctionne-t-il aussi avec WooCommerce ?
Absolument. Les modules WooCommerce de Divi 5 héritent aussi du système Flexbox. Tu peux aligner tes produits ou tes CTA comme bon te semble.
Ressources utiles pour aller plus loin
Conclusion : lance-toi, flexe un peu !
Flexbox dans Divi 5, c’est comme passer d’une vieille bagnole capricieuse à une voiture moderne avec direction assistée. Tu fais toujours la même route (créer tes pages), mais sans transpirer sur chaque virage (les alignements).
Teste-le dès maintenant, même sur une petite section. Tu verras vite la différence. Et si tu rates ? Pas grave : au pire, tu ajoutes une anecdote croustillante à partager au prochain WordCamp.
Les outils recommandés avec l’icône % indiquent qu’ils génèrent une commission d’affiliation si vous les adoptez, sans aucun coût supplémentaire pour vous. Pour plus de détails, vous pouvez consulter la page complète de clause de transparence.
