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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

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

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