Section et rangée pleine largeur pour un look moderne !
Dans ce nouveau tuto WordPress Divi, je vous montre comment réaliser une section avec une rangée pleine largeur. Vous verrez dans le tutoriel que dans certains cas cela peut apporter un vrai look moderne à votre page quand vous créez un site web, surtout quand la rangée intègre un module Divi image. Pour créer cette composition intéressante en web design, nous utiliserons le thème Divi d’Elegant Theme avec son excellent Visual Builder.
Modifier la rangée et la section
Nous partirons d’une section normale avec une couleur de fond et une rangée par défaut à 2 colonnes. La colonne de gauche contenant un module Image et la colonne de droite contenant 2 module : 1 module Résumé et 1 module bouton.
1- Travail sur la section
Nous allons tout d’abord supprimer les marges internes de la section. Pour cela, rendez-vous dans les paramètres de la section (îcone engrenage). Puis dans l’onglet Style et Espacement, entrer 0 pixels en marge interne (sommet, bas, gauche, droite).
2- Travail sur la rangée
Rendez-vous maintenant dans les paramètres de la rangée.
a) Dans l’onglet Style, aller dans « Dimensionnement ». Activer l’interrupeur « utilisation personnalisée largeur de gouttière ».
b) Dans « Espacement de colonnes », passer à 1.
c) Activer également l’interrupeur « Harmoniser les hauteurs des colonnes ».
d) Dans « Largeur maximale » les 2, inscrire 100% (cela va rendre la rangée pleine largeur).
e) Finissons le travail sur cette rangée en supprimant les marges interne en haut et en bas afin que l’image « épouse » parfaitement les limites de la section. Toujours dans les paramètres de la section, aller « Espacement » puis entrer 0 pixels en marge inerne, Sommet et Bas.
3- Centrer verticalement des modules dans la colonne
Pour centrer verticalement les modules de la colonne, nous allons ajouter une ligne de code CSS. Aller dans l’onglet « Avancé » puis choisir « Personnaliser CSS » et dans la fenêtre « Elément principal » écrire le code align-items: center;
Vous disposez maintenant d’une section avec une rangée pleine largeur au design moderne ! 🙂
