Comment personnaliser votre Divi Slider pour modifier des éléments spécifiques à chaque diapositive

Nous savons tous que les curseurs sont parfaits pour maximiser la section au-dessus de la ligne de flottaison de votre site Web. Ils sont grands! Les utilisateurs sont accueillis avec plusieurs CTA et des fonctionnalités importantes qui s'affichent sans jamais avoir à faire défiler la page. Mais parfois, trop de changements dans la conception et le contenu d'une diapositive à l'autre peuvent distraire ou submerger les visiteurs. C'est pourquoi dans ce tutoriel, je vais vous montrer comment personnaliser votre slider Divi pour ne changer que des éléments spécifiques à chaque transition de diapositive. Cela vous permet de conserver la cohérence du contenu de base et des composants de conception de votre curseur tout en ne modifiant qu'un élément spécifique (comme un seul mot ou bouton) avec chaque diapositive. Les visiteurs pourront facilement traiter le changement et comprendre clairement votre appel à l'action.

Plongeons dedans !

Aperçu du curseur Divi

Écoutez un aperçu de la conception et des fonctionnalités du curseur Divi que nous allons construire dans le tutoriel d'aujourd'hui.

Remarquez comment cela ne change qu'un seul mot dans le corps du texte sur chaque diapositive.

Remarquez comment, avec cet exemple, le corps du texte et les couleurs des boutons et du point changent à chaque diapositive.

Le concept de base expliqué

Par défaut, le curseur Divi animera le texte de description à chaque transition vers une nouvelle diapositive qui apparaît en fondu et déplace légèrement le contenu vers le haut en place.

Mais, avec une simple ligne de CSS personnalisé, nous pouvons désactiver cette animation ascendante du texte. Et, si nous dupliquons la diapositive, supprimons l'arrière-plan et modifions un seul des éléments (comme le mot dans le corps du texte), vous ne verrez qu'un seul mot changer à chaque diapositive.

Vous pouvez utiliser ce concept pour modifier uniquement du texte, des boutons ou des couleurs spécifiques tout en gardant le reste des éléments de conception en jeu avec chaque diapositive.

Commencer

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, tout ce dont vous aurez besoin est le thème Divi installé et actif. Nous allons construire notre curseur Divi à partir de zéro en utilisant le constructeur Divi sur le front-end.

Pour commencer, créez une nouvelle page et donnez un titre à votre page. Cliquez ensuite pour utiliser le Divi Builder et sélectionnez l'option « Créer à partir de zéro ». Cliquez ensuite sur le bouton « Construire sur le front-end ».

Vous êtes maintenant prêt à commencer la conception.

Configurer le contenu du Divi Slider

Pour cet exemple, je vais utiliser un module de curseur pleine largeur, mais ce didacticiel s'applique également aux modules de curseur standard. Commençons par ajouter une section pleine largeur avec un module de curseur pleine largeur à votre page.

Pour que nous puissions voir les modifications apportées au contenu de notre curseur, ajoutons d'abord temporairement une couleur d'arrière-plan sombre à la section pleine largeur. Ouvrez les paramètres de la section et attribuez-lui une couleur de fond noire (#222222).

Vous ne pourrez pas encore le voir car la couleur d'arrière-plan du curseur par défaut le recouvre. Nous reviendrons en arrière pour terminer la conception de l'arrière-plan de la section plus tard dans le didacticiel.

Passons maintenant aux paramètres du curseur pleine largeur et supprimons l'une des diapositives par défaut, en n'en laissant qu'une. Ensuite, ouvrez les paramètres de diapositive.

Mettez à jour les paramètres de diapositive comme suit :

Rubrique : « Des sites Web qui vous en donnent plus… »
Texte du bouton : « Commencer »

Sous Contenu, ajoutez le code html suivant :

Business<span style="color: #EE164D;">.</span>

(Cela ajoute une couleur personnalisée au point (ou au point) après le mot.)

Couleur d'arrière-plan : rgba(255,255,255,0)

Enregistrer les paramètres.

Maintenant, dupliquez la diapositive deux fois pour obtenir un total de trois diapositives.

Ouvrez les paramètres de la deuxième diapositive. Sous Contenu, remplacez uniquement le mot « Entreprise » par « Argent » en conservant le reste du code HTML, de l'en-tête et du texte du bouton. Nous voulons seulement changer ce mot sur chaque diapositive. Ensuite, enregistrez les paramètres.

Ensuite, ouvrez les paramètres de la troisième diapositive. Sous Contenu, remplacez le mot « Entreprise » par « Succès » et enregistrez les paramètres.

Terminé! Cela prend soin de notre contenu de curseur.

Optimisation de l'animation du texte de description

Une fois le contenu de notre curseur en place, nous devons désactiver notre animation afin que notre texte ne saute pas à chaque diapositive. Pour ce faire, accédez aux paramètres du curseur pleine largeur et ajoutez le CSS personnalisé suivant sous Description de la diapositive :

animation-name: none;

Pour cet exemple, il est logique de rendre notre animation de curseur automatique et d'augmenter la vitesse d'animation afin que les utilisateurs puissent voir le mot changer plus rapidement dans chaque diapositive. Pour ce faire, accédez à l'onglet conception et mettez à jour les éléments suivants :

Animation automatique : ON
Vitesse d'animation automatique (en ms) : 3000

Maintenant, vérifiez le résultat jusqu'à présent. Vous ne devriez voir qu'un seul mot dans le contenu de chaque curseur changer sans l'animation ascendante.

Conception du curseur

Avec notre contenu et nos fonctionnalités en place, nous pouvons commencer à styliser notre curseur avec un beau design élégant.

Ouvrez les paramètres du curseur pleine largeur et mettez à jour les éléments suivants :

Orientation du texte : à gauche
Police du titre : Lato
Poids de la police du titre : léger
Taille du texte du titre : 32 px
Ombre du texte du titre : voir capture d'écran
Intensité du flou de l'ombre du texte du titre : 0em (cela supprime essentiellement l'ombre du texte par défaut)

Police de caractère : Lato
Taille du corps du texte : 5 vw (ordinateur de bureau), 50 px (tablette), 40 px (smartphone)
Hauteur de la ligne du corps : 1,6 em
Ombre du corps du texte : voir capture d'écran
Force du flou de l'ombre du corps du texte : 0em (cela supprime essentiellement l'ombre du texte par défaut)

Taille du texte du bouton : 16px
Couleur d'arrière-plan du bouton : #ee164d
Largeur de la bordure du bouton : 8px
Couleur de la bordure du bouton : #ee164d
Rayon de la bordure du bouton : 0px
Espacement des lettres des boutons : 1px
Police des boutons : Lato
Alignement des boutons : à droite

Largeur : 70 % (ordinateur de bureau), 100 % (tablette), 100 % (smartphone)
Alignement du module : centre

Rembourrage personnalisé (bureau): haut 19vw, bas 8vw
Rembourrage personnalisé (tablette): haut 19vw, bas 4vw. 0px à gauche, 0px à droite
Rembourrage personnalisé (smartphone): 30vw en haut, 4vw en bas, 0px à gauche, 0px à droite

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -190px
Position verticale de l'ombre de la boîte : 60 px
Couleur de l'ombre de la boîte : rgba(0,16,17,0.7)

Et pour une dernière étape, désactivons nos éléments de curseur afin que nous ne voyions pas les flèches ou les contrôles du curseur.

Cela prend en charge la conception de notre slider Divi !

Personnalisation des styles de section

Le reste du design sera ajouté à notre section, y compris notre image d'arrière-plan qui servira d'arrière-plan statique pour toutes nos diapositives. L'ajout d'une image d'arrière-plan à la section est préférable pour cet usage car vous ne verrez pas de légères transitions d'une image à l'autre comme vous le feriez si vous aviez ajouté l'image d'arrière-plan à votre module de curseur.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Image d'arrière-plan : [insérer une image d'environ 1920 px par 800 px]
Couleur d'arrière-plan du dégradé à gauche : rgba(0,16,17,0.45)
Dégradé d'arrière-plan à droite : rgba(0,16,17,0.92)
Position de départ : 34 %
Position finale : 0%
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Ensuite, donnez à votre section une bordure droite comme suit :

Largeur de bordure droite : 5vw
Couleur de la bordure droite : #001011

Et enfin, donnez à votre section une ombre de boîte pour aider à équilibrer le cadre de la conception.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -200px
Position verticale de l'ombre de la boîte : -150px
Couleur de l'ombre de la boîte : rgba(0,16,17,0.74)

C'est ça!

Conception finale du Divi Slider

Voici la conception finale du slider Divi personnalisé.

Et voici la fonctionnalité des diapositives. Remarquez comment un seul mot change à chaque diapositive.

Conception finale sur mobile

Tablette

Téléphone intelligent

Expérimentez avec la modification d'autres éléments

Vous pouvez expérimenter en modifiant d'autres éléments avec chaque diapositive pour des conceptions et des fonctionnalités plus créatives. Par exemple, vous pouvez donner à chacun de vos boutons de diapositive une couleur différente avec chaque diapositive et faire correspondre la couleur de la période avec la nouvelle couleur de bouton sur chaque diapositive.

Voici à quoi cela ressemblerait.

Vous pouvez même explorer la modification de la couleur de l'ombre de la boîte de diapositive ou d'un autre élément de conception. Il y a d'innombrables possibilités !

Dernières pensées

Cette conception et cette fonctionnalité de curseur Divi personnalisées offrent une bonne alternative à ces curseurs traditionnels. Le cœur de la conception ne change pas, ce qui souligne davantage l'aspect important de votre CTA qui change à chaque diapositive. On dirait que cela pourrait être quelque chose que vous pourriez tester pour voir si cela peut augmenter les conversions !

Dites-moi ce que vous en pensez dans les commentaires ci-dessous.

À votre santé!