Comment personnaliser le curseur Divi pour éditer des éléments spécifiques à chaque diapo

Comme nous le savons tous, les curseurs sont très utiles pour maximiser la partie principale au – dessus de l’effondrement du site. Ils sont gros! L’utilisateur peut voir plus de CTA et de fonctionnalités importantes, et il n’a pas besoin de faire défiler la page pour défiler dans la vue. Mais parfois, trop de changements dans la conception et le contenu d’une diapositive à l’autre peuvent distraire ou submerger le public. C’est pourquoi dans ce tutoriel, je vais vous montrer comment personnaliser le curseur Divi pour ne changer que des éléments spécifiques dans chaque transition de diapositives. Cela vous permet de maintenir la cohérence entre le contenu principal du curseur et les composants de conception, tout en ne changeant qu’un seul élément spécifique (par exemple, un seul mot ou un seul bouton) dans chaque diapositive. Les visiteurs seront en mesure de gérer facilement les changements et de comprendre clairement vos exigences en matière d’action.
Plongeons! Divi Slider skeek PEEK hear est un aperçu de la conception et des fonctionnalités de Divi Slider que nous allons construire dans le tutoriel d’aujourd’hui. Notez que cela ne change qu’un seul mot dans le corps de chaque diapositive. Notez que, comme dans cet exemple, le texte du corps, les boutons et les couleurs des points changent avec chaque diapositive. Par défaut, le curseur Divi anime le texte de description, chaque fois qu’il est converti en une nouvelle diapositive qui explose et déplace légèrement le contenu vers le haut. Cependant, avec une simple ligne de CSS personnalisé, nous pouvons désactiver l’animation vers le haut du texte. De plus, si nous copions des diapositives, supprimons l’arrière – plan et ne modifions qu’un seul élément (comme un seul mot dans le corps du texte), vous ne verrez qu’un seul mot changer avec chaque diapositive. Vous pouvez utiliser ce concept pour n’éditer que du texte, des boutons ou des couleurs spécifiques afin que les éléments de conception restants correspondent à chaque diapositive. Commencez à vous abonner à nos canaux
YouTube pour ce tutoriel, il suffit d’installer et d’activer le thème Divi. Nous allons construire le curseur Divi à partir de zéro en utilisant le générateur Divi à l’avant.
Pour commencer, créez une nouvelle page et spécifiez un titre pour la page. Cliquez ensuite pour utiliser Divi Builder et sélectionnez l’option construire à partir de zéro. Puis cliquez sur le bouton créer à l’avant. Maintenant, vous pouvez commencer à concevoir. Configuration du contenu du curseur Divi dans cet exemple, je vais utiliser le module de curseur pleine largeur, mais ce tutoriel s’applique également aux modules de curseur normaux. Commençons par ajouter une section pleine largeur à la page en utilisant le module de défilement pleine largeur. Pour voir les changements dans le contenu du curseur, nous ajoutons d’abord une couleur de fond foncée à la largeur totale. Ouvrez les paramètres partiels et spécifiez une couleur de fond noire (# 22222). Vous ne pouvez pas encore le voir parce que la couleur de fond du curseur par défaut l’écrase. Nous reviendrons plus loin dans ce tutoriel pour compléter la conception de fond de cette section. Maintenant, passons à la configuration du curseur plein coin, en supprimant une des diapositives par défaut et en laissant une seule. Puis ouvrez les paramètres de la diapo. Mettre à jour les paramètres de la diapositive comme suit: Titre: « vous fournir le plus Texte du bouton: démarrer ajouter le HTML suivant sous contenu: . (Ceci ajoute une couleur personnalisée au point (ou au point) après le mot.)
Couleur de fond: rgba (255255255,0) Enregistrer les paramètres. Maintenant copiez les diapositives deux fois, ce qui fait un total de trois diapositives. Ouvrez les paramètres de la deuxième diapositive. Dans le contenu, remplacer seulement le mot « affaires » par « argent », tout en laissant le reste du HTML, du titre et du texte du bouton inchangé. On essaie juste de changer.
Le mot est sur chaque diapositive. Puis enregistrez les paramètres. Ensuite, ouvrez les paramètres de la troisième diapositive. Dans le contenu, remplacer Business par success et enregistrer les paramètres. Tout est fait! Ceci traitera du contenu du curseur. Après avoir optimisé le contenu du curseur d’animation de texte descriptif en place, nous devons désactiver l’animation afin que le texte ne saute pas sur chaque diapositive. Pour ce faire, allez à la configuration du curseur pleine largeur et sous description de la diapositive, ajoutez le CSS personnalisé suivant: nom de l’animation: aucun; Par exemple, il est nécessaire d’automatiser et d’accélérer l’animation de nos curseurs afin que les utilisateurs puissent voir les changements de mots plus rapidement sur chaque diapositive. Pour ce faire, allez à l’onglet conception et mettez à jour ce qui suit:
Animation automatique: activer la vitesse d’animation automatique (MS): 3000 Vérifiez maintenant les résultats actuels. Sans animation vers le haut, vous ne devriez voir qu’un seul mot dans chaque changement de curseur. En utilisant nos curseurs de conception de contenu et de fonctionnalité, nous pouvons commencer à modéliser les curseurs avec un beau design élégant. Ouvrir et mettre à jour la largeur totale du curseur comme suit: direction du texte: caractère de titre gauche: poids de police de titre latéral: taille de texte de titre léger: 32px titre ombrage texte: voir capture d’écran titre ombrage texte intensité de flou: 0em (supprimer essentiellement l’ombre de texte par défaut) Caractères du corps: taille du corps du texte latéral: 5vw (bureau), 50px (tablette), 40px (smartphone) hauteur de la ligne du corps: 1,6 emtext Body Shadow: seescreenshot Body Shadow force Blur: 0em (basically remove default text Shadow) Un centime.