Découvrez les bons plans & les réductions Alpa14

Tutoriel Divi : Section & Rangée pleine largeur

Alpa14 les tutoriels faciles !

Catégories

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é par les articles suivants :

Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus
Un menu hamburger ? en vue ordinateur : site WordPress Divi

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus
Créer un site WordPress parfaitement responsive

Créer un site WordPress parfaitement responsive

Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.

lire plus