Créer un slider full screen avec effet de zoom sur Divi

2 Août 2022 | 0 commentaires

8 min de lecture

Les sliders ne sont pas recommandés pour tout type de projet. Aujourd’hui la plupart des webdesigner vous recommanderaient plutôt d’utiliser une image fixe en arrière-plan pour privilégier le chargement rapide de la page. Mais dans certains cas il est plus important de mettre l’accent sur le visuel pour en mettre plein la vue aux visiteur dès la première impression.

Voici comment apporter de l’impact à votre homepage avec une simple animation et sans vidéo.

Créer un diaporama stylé avec divi

Voir le résultat

1 – Structure du slider

Commencez par poser la structure de votre slider en fullscreen, aussi bien sur la largeur que sur la hauteur de l’écran :

1 – Créez une section plein écran.

2 – Ajoutez un module « curseur de défilement plein écran ».

3 – Dans Style > Dimensions, définissez la hauteur sur 100vh pour qu’il occupe tout l’espace vertical de l’écran.

Créer un diaporama pleine largeur avec Divi

2 – Design du slider

1 – Entrez dans la première diapo pour éditer le texte, l’image d’arrière plan et le bouton.

Attention à intégrer l’image en arrière-plan de la diapo et non dans la section « image et vidéo » auquel cas elle se placera à côté du texte et non derrière. Définissez la couleur d’arrière-plan en noir pour un meilleur rendu visuel lors des transitions.

2 – Editez les styles du titre, du texte et du bouton pour l’adapter à votre charte graphique et qu’il soient visibles par dessus l’image.

Pour faciliter la lecture vous pouvez cocher l’option « utiliser le fond en superposition » dans Style > Superposition.

Créer un diaporama stylé avec Divi

3 – Mettez le titre en gras et en H1 si c’est le titre principal de votre page.

4 – Donnez des marges au bouton pour lui donner de l’impact.

5 – Définissez une largeur maximale à 1000px pour que le texte passe sur plusieurs ligne au lieu de prendre toute la largeur de la page, cela en facilitera la lecture sur les grands écrans.

Définissez la largeur du diaporama Divi

6 – Lorsque vous avez terminé la mise en forme de votre premier slider, validez-le. Vous revenez alors sur l’écran principal du module, supprimer le second slide et dupliquez le celui que vous venez de créer en cliquant sur l’icône en forme de double fenêtre à gauche du titre du slide.

7 – Changer simplement l’image d’arrière-plan du slide que vous venez de dupliquer.

8 – Recommencez cette action pour ajouter autant de slide que vous voulez, mais gardez à l’esprit que le visiteur ne va pas passer 2 min à regarder vos slides défiler, 3 ou 4 diapositives sont largement suffisant pour ne pas alourdir la page inutilement.

Vous pouvez selon vos envies, choisir de laisser les éléments de contrôles des slides pour que l’utilisateur puisse faire défiler les diapos. J’ai choisi de les désactiver pour épurer l’ensemble. Vous accédez à ces options dans « Contenu > Eléments > Afficher les flèches / Montrer les controles »

3 – Animation des slides

1 – Toujours dans l’onglet « Style » du module « Curseur de défilement plein écran », allez dans la section « Animation » tout en bas de la liste, puis cochez « Animation automatique » et « Continuer automatique sur le vol stationnaire » pour que les différents slides défilent automatiquement et ne se fige pas au survol de la souris. Vous pouvez également régler la vitesse de défilement des slides, je l’ai fixé à 10000 ms pour afficher chaque image un peu plus longtemps.

Réglages des animations Divi

2 – Allez maintenant dans l’onglet avancé du module puis dans « Personnaliser CSS » ajouter cette ligne de code dans la section « Description de la diapo » :

animation-name: none;

Bloquer l'animation du texte des diaporama Divi

Cela figera le texte de la diapo pour que seules les images soient animées en arrière-plan.

 

4 – Appliquer l’effet de zoom sur les diapos

A présent il ne manque plus qu’à créer l’effet de zoom qui va donner tout l’impact à votre slider.

1 – Retournez sur le back-office et dans le menu « Apparence > Personnaliser > CSS additionnel » ajoutez cette première instruction css pour appliquer l’effet de zoom au premier slide :

.et_pb_slider .et_pb_slide_0 {
background-size:cover;
background-position:center;
animation: shrink 12s infinite reverse steps(200);
}
@keyframes shrink {
0% {
background-size: 100% auto;
}
100% {
background-size: 120% auto;
}
}

Vous pouvez constater que l’effet de zoom s’applique sur votre premier slide.

Le premier slide est sélectionné par la class css « et_pb_slide_0 ». les suivants suivent l’ordre chronologique. Pour appliquer l’animation au aux diapositives suivantes il suffit donc de les ajouter dans la sélection, ce qui donne :

.et_pb_slider .et_pb_slide_0, .et_pb_slider .et_pb_slide_1, .et_pb_slider .et_pb_slide_4, .et_pb_slider .et_pb_slide_3 {
background-size:cover;
background-position:center;
animation: shrink 12s infinite reverse steps(200);
}
@keyframes shrink {
0% {
background-size: 100% auto;
}
100% {
background-size: 120% auto;
}
}

Pour appliquer un effet de dezoom, il suffit de changer le type d’animation « reverse » en « normal », et inverser les valeurs de la taille du background « 100 » et « 120 », ce qui donne :

.et_pb_slider .et_pb_slide_0, .et_pb_slider .et_pb_slide_1, .et_pb_slider .et_pb_slide_4, .et_pb_slider .et_pb_slide_3 {
background-size:cover;
background-position:center;
animation: shrink 12s infinite normal steps(200);
}
@keyframes shrink {
0% {
background-size: 120% auto;
}
100% {
background-size: 100% auto;
}
}

Il est donc possible d’affecter un effet différent à chaque diapositive afin d’enchaîner effet zoom / dezoom !

Voici le code final :

.et_pb_slider .et_pb_slide_0, .et_pb_slider .et_pb_slide_2 {
background-size:cover;
background-position:center;
animation: shrink 12s infinite reverse steps(200);
}

@keyframes shrink {
0% {
background-size: 100% auto;
}
100% {
background-size: 120% auto;
}
}

.et_pb_slider .et_pb_slide_1, .et_pb_slider .et_pb_slide_3 {
background-size:cover;
background-position:center; animation: shrink 12s
infinite normal steps(200);
}
@keyframes shrink {
0% {
background-size: 120% auto;
}
100% {
background-size: 100% auto;
}
}

J’espère que ce petit tutoriel vous a plus et vous aidera à créer des sites aux visuels impactents. N’hésitez pas à laisser un commentaire si vous avez quelconque difficulté ou suggestions d’amélioration.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

1 × 2 =

Divi WordPress Theme

Derniers articles

Créer une lightbox avec n’importe quel module Divi

Dans ce tutoriel nous allons voir comment créer un effet de lightbox avec n'importe quel module de Divi. Cela peut être utile pour optimiser le contenu de la page en gagnant de l'espace et sans ouvrir une autre page. Par exemple vous pouvez insérer votre formulaire de...

Comment créer un site internet professionnel facilement ?

Dirigeants d'entreprise, entrepreneurs ou artisans, pour promouvoir votre activité sur internet il est nécessaire d'avoir un site attrayant, mais aussi fonctionnel pour les utilisateurs et optimisé pour le référencement sur les moteurs de recherche. Créer un site...

Catégories

Ressources

Divi Child Theme

Téléchargez gratuitement le Child Theme pour Divi ou apprenez à construire un theme pour n’importe quel Theme Wordpress.

Articles récents

Créer une lightbox avec n’importe quel module Divi

Créer une lightbox avec n’importe quel module Divi

Dans ce tutoriel nous allons voir comment créer un effet de lightbox avec n'importe quel module de Divi. Cela peut être utile pour optimiser le contenu de la page en gagnant de l'espace et sans ouvrir une autre page. Par exemple vous pouvez insérer votre formulaire de...

Comment créer un site internet professionnel facilement ?

Comment créer un site internet professionnel facilement ?

Dirigeants d'entreprise, entrepreneurs ou artisans, pour promouvoir votre activité sur internet il est nécessaire d'avoir un site attrayant, mais aussi fonctionnel pour les utilisateurs et optimisé pour le référencement sur les moteurs de recherche. Créer un site...

Pin It on Pinterest

Vous aimez cet article ?

Partagez-le avec vos amis !