Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Nous savons tous que les curseurs sont parfaits pour maximiser la zone saillante de votre site Web. Ils sont étonnants! Les utilisateurs sont accueillis avec plusieurs CTA et des fonctionnalités clés qui apparaissent sans jamais 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 curseur Divi afin que seuls certains éléments soient modifiés à chaque transition de diapositive. Cela vous permet de conserver la cohérence du contenu principal et des composants de conception de votre curseur tout en ne modifiant qu’un élément spécifique (tel qu’un seul mot ou un bouton) avec chaque diapositive. Les visiteurs peuvent facilement traiter le changement et comprendre clairement votre appel à l’action.

Plongeons-nous!

Aperçu du curseur Divi

Hear est un aperçu de la conception et des fonctionnalités du curseur Divi que nous allons créer dans le didacticiel d’aujourd’hui.

Notez que cela ne modifie qu’un seul mot dans le corps du texte de chaque diapositive.

curseur sauvage

Notez que dans cet exemple, le mot de texte et les couleurs des boutons et du point changent à chaque diapositive.

curseur sauvage

Le concept de base expliqué

Par défaut, le curseur Divi anime le texte de description à chaque transition vers une nouvelle diapositive, qui est estompée et le contenu se déplace légèrement vers le haut.

curseur sauvage

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 du texte principal), un seul mot changera avec chaque diapositive.

curseur sauvage

Avec ce concept, vous ne pouvez modifier que certains textes, boutons ou couleurs, tandis que le reste des éléments de conception restent dans le jeu avec chaque diapositive.

A débuté

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, vous n’avez besoin que du thème Divi installé et actif. Nous allons créer notre curseur Divi à partir de zéro en utilisant le Divi Builder sur le front-end.

Tout d’abord, créez une nouvelle page et donnez un titre à votre page. Cliquez ensuite pour utiliser Divi Builder et sélectionnez l’option « Construire à partir de zéro ». Cliquez ensuite sur le bouton pour construire sur le front-end.

Vous pouvez maintenant commencer à concevoir.

Configurer le contenu du Divi Slider

Dans cet exemple, j’utiliserai 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 et un module de curseur pleine largeur à votre page.

curseur sauvage

Pour que nous puissions voir le contenu de notre curseur changer, ajoutons temporairement une couleur d’arrière-plan sombre à la section pleine largeur en premier. Ouvrez les paramètres de la section et donnez-lui une couleur de fond noir (# 222222).

curseur sauvage

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

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 la diapositive.

curseur sauvage

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

Titre: « Des sites Web qui vous offrent 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)

curseur sauvage

Enregistrer les paramètres.

Maintenant, dupliquez la diapositive deux fois pour avoir trois diapositives au total.

curseur sauvage

Ouvrez les paramètres de la deuxième diapositive. Sous «Contenu», remplacez simplement le mot «entreprise» par «argent», en laissant le reste du code HTML, de l’en-tête et du bouton inchangé. Nous voulons simplement changer ce mot sur chaque diapositive. Enregistrez ensuite les paramètres.

curseur sauvage

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

curseur sauvage

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

Optimisation de l’animation du texte de description

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

animation-name: none;

curseur sauvage

Dans cet exemple, il est logique de rendre notre animation de curseur automatique et d’augmenter la vitesse de l’animation afin que les utilisateurs puissent voir le mot changer plus rapidement sur 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

curseur sauvage

Maintenant, regardez le résultat jusqu’à présent. Vous ne devriez voir qu’un seul mot dans le contenu de chaque changement de curseur sans l’animation vers le haut.

curseur sauvage

Concevoir le curseur

Grâce à notre contenu et à nos fonctionnalités, 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:

Alignement du texte: gauche
Police du titre: Lato
Poids de la police du titre: Léger
Taille du texte du titre: 32px
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 standard)

curseur sauvage

Police du corps: Lato
Taille du corps du texte: 5vw (bureau), 50px (tablette), 40px (smartphone)
Hauteur de la ligne du corps: 1.6em
Body Text Shadow: voir capture d’écran
Force de flou de l’ombre du corps du texte: 0em (cela supprime essentiellement l’ombre du texte par défaut)

curseur sauvage

Taille du texte du bouton: 16px
Couleur d’arrière-plan du bouton: # ee164d
Largeur du cadre du bouton: 8px
Couleur du cadre du bouton: # ee164d
Rayon du bord du bouton: 0px
Espacement des lettres clés: 1px
Police du clavier: Lato
Alignement des touches: correct

Largeur: 70% (bureau), 100% (tablette), 100% (smartphone)
Orientation du module: centre

Rembourrage personnalisé (bureau): 19 VW ci-dessus, 8 VW ci-dessous
Rembourrage personnalisé (tablette): 19 VW ci-dessus, 4 VW ci-dessous. 0px à gauche, 0px à droite
Sellerie personnalisée (smartphone): 30 VW ci-dessus, 4 VW ci-dessous, 0 pixels à gauche, 0 pixels à droite

curseur sauvage

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: 60px
Couleur de l’ombre de la boîte: rgba (0,16,17,0,7)

curseur sauvage

Et pour une dernière étape, désactivons nos éléments de curseur afin de ne pas voir les flèches ou les commandes du curseur.

curseur sauvage

Cela prend soin de notre conception de curseur Divi!

Personnalisez les styles de section

Le reste du design sera ajouté à notre section, y compris notre fond d’écran qui servira de fond statique pour toutes nos diapositives. L’ajout d’une image d’arrière-plan à la section est préférable pour cette utilisation car vous ne verrez pas de légères transitions d’une image à une autre comme vous le feriez si vous ajoutiez 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 de fond: [insert image around 1920px by 800px]
Dégradé de fond Couleur gauche: rgba (0,16,17,0,45)
Couleur de fond dégradé droit: rgba (0,16,17,0,92)
Position de départ: 34%
Position finale: 0%
Placez le dégradé sur l’image d’arrière-plan: OUI

curseur sauvage

Ensuite, donnez à votre section une marge droite:

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

curseur sauvage

Et enfin, donnez à votre section une ombre de boîte pour équilibrer le cadre du dessin.

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 curseur Divi personnalisé.

curseur sauvage

Et voici la fonctionnalité des diapositives. Notez qu’un seul mot change avec chaque diapositive.

curseur sauvage

Conception finale des téléphones portables

tablette

Téléphone intelligent

Expérimentez avec le changement d’autres éléments

Vous pouvez tester chaque diapositive pour modifier d’autres éléments afin d’obtenir des conceptions et des fonctionnalités plus créatives. Par exemple, vous pouvez attribuer une couleur différente à chacun de vos boutons de diapositive 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.

curseur sauvage

Vous pouvez même étudier la modification de la couleur de l’ombre de la boîte de diapositive ou de tout autre élément de conception. Les possibilités sont infinies!

Dernières pensées

Cette conception personnalisée et la fonctionnalité du curseur Divi constituent une belle alternative aux 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 vous pouvez tester si cela peut augmenter les conversions!

Faites-moi savoir ce que vous pensez dans les commentaires ci-dessous.

De bas en haut!





Source link

Recent Posts