Dans Divi 5, le système CSS Grid est entièrement intégré à l’éditeur visuel, ce qui vous permet de concevoir des mises en page bidimensionnelles (lignes et colonnes) sans écrire une seule ligne de CSS. Ce tutoriel étape par étape explique comment construire une barre latérale “sticky” (fixe lors du scroll) qui reste fluide et responsive sur desktop, tablette et mobile.
Qu’est-ce que CSS Grid dans Divi 5 ?
CSS Grid est un système de mise en page à deux axes qui donne un contrôle total sur les lignes et les colonnes d’un conteneur. Contrairement à des méthodes plus anciennes, il permet de placer précisément chaque élément, offrant des structures complexes tout en conservant un rendu fluide et propre. Dans Divi 5, CSS Grid est disponible directement dans l’éditeur visuel, sans besoin de toucher à une feuille de style.
Avantages de CSS Grid dans Divi 5
Création visuelle sans code :
Vous pouvez concevoir des grilles sophistiquées comme un pro sans écrire de CSS.
Gains de temps :
L’élaboration de structures qui prenaient des heures se fait désormais en quelques minutes.
Liberté créative :
Créez des modèles uniques, des zones de contenu imbriquées ou des galeries complexes directement dans l’interface.
Responsive intégré :
Divi 5 vous permet d’adapter chaque zone pour tablette et mobile grâce à des points de rupture personnalisables.
Tutoriel : Construire une Barre Latérale Sticky avec CSS Grid
Voici les grandes étapes expliquées dans l’article :
- Créer la Structure de la Grille:
Ajoutez une nouvelle section dans Divi 5.
Ajoutez une ligne qui servira de grille principale.
Dans la ligne, créez deux colonnes : une première pour la barre latérale (1/4 de largeur), et une seconde pour le contenu principal (3/4).
- Ajouter le Contenu dans la Barre Latérale:
Ajoutez une image/logo et un menu de navigation.
Placez des liens d’ancrage pour permettre des sauts vers les sections principales.
Ajoutez éventuellement des modules sociaux.
- Rendre la Barre Latérale Sticky
Dans les paramètres de la colonne de la barre latérale, activez l’option “Stick to Top” (fixer en haut lors du scroll).
- Configurer la Colonne de Contenu
Ajoutez une nouvelle rangée interne et sélectionnez “Grid” pour le style de mise en page.
Ajoutez vos titres, textes, boutons et images dans la grille.
- Ajuster pour les Points de Rupture (Responsive)
Passez en mode tablette et mobile.
Ajustez les largeurs des colonnes et les spans pour que le contenu et la barre latérale s’affichent correctement sur tous les écrans.
- Responsive Sans Effort
Un des plus gros avantages de Divi 5 est la capacité de gérer les points de rupture responsive via l’éditeur visuel. Ainsi, vous pouvez :
Passer d’un affichage à deux colonnes sur desktop à une seule colonne sur mobile.
Modifier les espacements et largeur des zones sans écrire de code.
Garantir une expérience utilisateur fluide sur tous les appareils.
