fbpx
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 intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence ! 💗
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 » 💗
👉 Amelia : Le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -10% avec le code Promo « E96DB94C » ! 💗
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : L’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

 

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *