fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Tutoriel Divi : Section & Rangée pleine largeur

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.

Licence Divi
Code Promo Divi Supreme
.

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.

Amelia booking plugin
section normale

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).

 LearnDash créer une formation sur un site WordPress
Travail sur la section

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).

Thinkific un mois gratuit

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.

Travail sur la rangée
modifier la rangée
modifier la rangée 3

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 ! :)

Presto Player lecteur vidéo WordPress
Centrer verticalement des modules dans une colonne

Vous serez peut-être également intéressé par ces articles …

Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Formation WordPress éligible au CPF : Webmyday

Formation WordPress éligible au CPF : Webmyday

Vous souhaitez créer un site Internet WordPress pour votre entreprise ? Vous êtes complètement débutant ? Dans ce tutoriel vidéo, je vous présente Webmyday la formation WordPress Divi qui va vous permettre de réaliser facilement votre site web en étant accompagné d’un coach sympa pendant 2 mois. 😊

lire plus
Offrez-moi un café! Merci :)