fbpx
Créer une bannière Slider pleine largeur avec Divi | Tutoriel WordPress débutant

Comment créer une bannière Slider pleine largeur pour votre site Internet WordPress ?

Dans ce tuto Divi, je vous apprends à créer une bannière Slider pleine largeur pour votre site web WordPress. Ce slider sera placé juste sous votre entête de page (header) pour un impact visuel maximal. Dans cette mini formation WordPress, nous utiliserons Divi d’Elegant Themes et son visual builder qui nous permettra de créer facilement ce Slider au design poussé.

.

Etapes pour créer votre Slider pleine largeur

1) Préparez les images de votre Slider (au moins 1920 pixels de largeur, pour la hauteur dans le tuto j’ai choisi 1035 pixels pour la hauteur).
Pensez à optimiser le poids de vos images pour ne pas pénaliser la vitesse de chargement de votre page. Vous pouvez le faire un ligne ici sur le site TinyPNG ou sinon installez le plugin ou un autre.

2) Créez une nouvelle section et choisissez l’option de droite « Plein écran »

3) Dans la fenêtre « Insérer un module » qui s’ouvre, choisissez « Curseur de défilement plein écran » (« Fullwidth Slider » version anglaise)

Paramètres Module Slider Divi

4) Dans la fenêtre des paramètres du module « Curseur de défilement plein écran »
2 diapos, 2 éléments sont déjà présents. Ajoutez le nombre de diapos souhaité (limitez-vous à 3 pour ne pas pénaliser le poids de votre page). Cliquez sur l’engrenage de la diapo 1.

5) Dans l’onglet contenu, entrez votre contenu souhaité : Titre, texte, bouton éventuellement. Si vous placez un bouton, toujours dans contenu, n’oubliez pas de le lier (dans lien) à la page souhaitée.
Toujours dans contenu, allez sur « Fond » et choisissez une image de fond pour cette première diapo.

6) Allez ensuite sur l’onglet « Style » et apportez le style souhaité à votre 1ère diapo.

7) Cliquez ensuite sur la flèche « Retour » en haut à gauche de la fenêtre des paramètres du module « Curseur de défilement plein écran ». Cliquez sur les 3 petits points à droite de la diapo 1 à côté de la poubelle et choisissez « Etendre les styles d’élément » 
Choisissez ensuite d’appliquer cela à la section. Maintenant le même style, s’est appliqué à tous vos éléments. Il ne vous reste plus qu’à aller dans les paramètres des autres éléments (des autres diapos) pour modifier et ajouter le contenu souhaité.

MalerLite
Paramétrage Slider flèches

8) Pour paramétrer des flèches cliquables aux extrémités du Slider.
Dans la fenêtre principale du module Slider, choisissez « Eléments », il vous est possible ici de les activer ou de les désactiver. De même pour les petits points au bas du Slider représentant les diapos. Dans Style vous pouvez en modifier l’apparence.

9) Pour activer une rotation automatique des diapos du Slider, rendez-vous toujours dans la même fenêtre mais dans l’onglet Style à la partie « Animation » (tout en bas).
Ici vous pourrez activer la tirette animation automatique et choisir le temps de rotation automatique de votre élément diapo selon la longueur de votre contenu.

 

Temps rotation Slider Divi

Où et comment installer votre site WordPress ?

Si vous êtes débutant et que vous ne savez ni comment ni où installer votre site WordPress, pas de panique j’ai réalisé ici un tutoriel qui vous guidera pas à pas. :)

 

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 »
👉 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 *