4 boutons de défilement animés pour la section Hero de votre site Divi (et comment les créer)
Publié: 2019-08-08Les boutons de défilement animés ont un travail simple mais important d'attirer l'attention des utilisateurs et de les diriger vers votre page Web. Ces types de boutons se trouvent normalement au-dessus du pli afin qu'un visiteur puisse simplement cliquer sur le bouton sans avoir à faire défiler jusqu'à la prochaine section importante de la page Web. En fait, Divi intègre cette fonction de bouton de défilement au module d'en-tête pleine largeur.
Dans ce tutoriel, je vais vous montrer comment créer des boutons de défilement animés entièrement personnalisés dans Divi. Donc, si vous recherchez une alternative créative au bouton de défilement intégré de Divi dans le module d'en-tête pleine largeur, ces conceptions de boutons de défilement animés vous aideront à vous orienter dans la bonne direction (littéralement).
Aperçu
Voici un aperçu des conceptions que nous allons construire ensemble.
Téléchargez GRATUITEMENT la mise en page des boutons de défilement animés
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Abonnez-vous à notre chaîne Youtube
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Images à utiliser pour le contenu fictif
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création de la section d'en-tête
Avant de commencer à concevoir les boutons de défilement animés, nous devons configurer notre section d'en-tête fictive. Puisque nous allons nous concentrer davantage sur la conception des boutons de défilement animés, nous allons garder la conception de l'en-tête simple avec un arrière-plan sombre. Une fois cela fait, nous pouvons dupliquer la section pour aborder chaque nouvelle conception de bouton de défilement.
Pour commencer, créez une section régulière avec une ligne à une colonne.
Ensuite, avant d'ajouter un module, ouvrez les paramètres de la section et ajoutez un arrière-plan sombre comme suit :
Couleur d'arrière-plan : #222222
Tout fond sombre fonctionnera.
Ajouter le texte d'en-tête
Pour créer le texte d'en-tête fictif, ajoutez un nouveau module de texte à la ligne d'une colonne.
Mettez ensuite à jour le contenu du corps avec un en-tête h1 juste au-dessus du texte de paragraphe par défaut.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Mettez ensuite à jour les paramètres de conception comme suit :
Police du texte : Karla
Texte Alignement du texte : Centre
en-tête Taille du texte: 5vw
Couleur du texte : clair
Ce sera la conception de section de base que nous utiliserons pour nos différents boutons de défilement animés.
Conception de bouton de défilement animé n ° 1: texte vertical avec animation de rebond lent
Avec notre conception de section de base en place, nous sommes prêts à ajouter notre premier bouton de défilement animé. Ce bouton de défilement se compose d'un module de présentation qui aura une icône sur le côté droit. Ensuite, le texte et l'icône seront pivotés verticalement de sorte que l'icône de la flèche pointe vers le bas. Après cela, nous ajouterons l'animation de rebond avec une durée lente.
Voici comment procéder.
Tout d'abord, ajoutez une nouvelle ligne à une colonne juste en dessous de notre ligne contenant le texte de l'en-tête.
Ajoutez ensuite un module de présentation à la ligne.
Sous les paramètres du texte de présentation, supprimez le contenu du corps par défaut et ajoutez les éléments suivants :
Titre : faire défiler
Utiliser l'icône : OUI
Icône : flèche droite (voir capture d'écran)
Mettez ensuite à jour les paramètres de conception comme suit :
Couleur de l'icône : #ffffff
Placement des images/icônes : à gauche
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 50px
Style de police du titre : TT
Couleur du texte du titre : #ffffff
Taille du texte du titre : 14 px
Espacement des lettres du titre : 3px
Hauteur de la ligne de titre : 50px (identique à la taille de la police de l'icône)
Ensuite, nous devons donner à notre texte de présentation une largeur définie et le faire pivoter verticalement comme suit :
largeur: 132px
Alignement du module : centre
Transformer Rotation Axe Z : 90 degrés
Maintenant, tout ce que nous avons à faire est d'inverser l'ordre du contenu du texte de présentation de sorte que l'icône en forme de flèche se trouve à droite du texte de présentation au lieu de la gauche. Cela fera apparaître la flèche sous le texte vertical comme prévu. Pour ce faire, nous devons ajouter le CSS personnalisé suivant à l'élément principal :
direction: rtl;
Ajout de l'animation d'impulsion lente
Pour ajouter l'animation, mettez à jour les éléments suivants :
Style d'animation : Rebond
Direction de l'animation : vers le bas
Durée de l'animation : 5000 ms
Délai d'animation : 400 ms
Image/Icône Animation : de gauche à droite
Résultat final
Voyons maintenant le résultat final pour le design #1.
Conception de bouton de défilement animé n ° 2: Animation de texte de chapiteau vertical
Cette prochaine conception s'appuie sur la conception n ° 1 en ce sens que nous conserverons le bouton de défilement de texte vertical créé à l'aide du module de présentation. La différence sera l'animation. Pour cette conception, nous allons ajouter une animation de diapositive qui commence par le bouton de défilement masqué au-dessus du conteneur de lignes, puis se termine par le bouton masqué sous la ligne. Avec l'animation en boucle, cela créera un effet d'animation de texte qui attirera l'attention de l'utilisateur.
Voici comment procéder.
Dupliquez d'abord toute la section du dessin #1.
Mettre à jour les paramètres de la ligne 2
Ensuite, mettez à jour la ligne de section contenant le module de présentation/bouton de défilement comme suit :
Débordement horizontal : masqué
Débordement vertical : masqué
Mettre à jour les paramètres du module Blurb
Afin de créer l'animation de sélection, nous devons d'abord utiliser transform translate pour déplacer le texte de présentation sous le conteneur de lignes (caché de la vue). Ce sera la position du texte à la fin de l'animation. Mettez à jour les éléments suivants :
Transformer Traduire l'axe Y : 115px
Ensuite, ajoutez les paramètres d'animation suivants :
Style d'animation : diapositive
Direction de l'animation : vers le bas
Durée de l'animation : 4000 ms
Intensité de l'animation : 195 %
Opacité de démarrage de l'animation : 100 %
Courbe de vitesse d'animation : Linéaire
Répétition de l'animation : boucle
Résultat final
Voyons maintenant le résultat final pour le design #3.
Conception de bouton de défilement animé n ° 3: onglet flèche avec animation de glissement vers le bas retardé
Pour cette prochaine conception, nous allons combiner un module de texte et un module de présentation pour créer une conception d'onglet flèche unique.
Pour cette conception, nous commencerons par la conception de base de la section d'en-tête. Vous pouvez donc dupliquer la section 3 du design en double, puis supprimer le module de présentation de la ligne 2.
Ajoutez ensuite un module de texte à la ligne d'une colonne directement sous la première ligne.
Mettez ensuite à jour le contenu du corps avec le mot « scroll ».
Mettez ensuite à jour les paramètres de conception comme suit :
Couleur d'arrière-plan : #ffffff
Texte Couleur du texte : #222222
Alignement du texte : au centre
Largeur : 50px
Alignement du module : centre
Marge : 0px en bas
Rembourrage : 20 pixels en haut, 20 pixels en bas
Coins arrondis 5px en bas à gauche, 5px en bas à droite
Ajouter l'icône de présentation
Maintenant que le module de texte est en place, nous devons créer l'icône de présentation juste en dessous pour terminer la conception de l'onglet flèche. Pour ce faire, ajoutez un nouveau module de présentation sous le module de texte.
Supprimez ensuite le titre et le corps du texte par défaut. Ajoutez ensuite la mise à jour suivante :
Utiliser l'icône : OUI
Icône : triangle de la flèche du bas (voir capture d'écran)
Ensuite, mettez à jour les paramètres comme suit :
Couleur de l'icône : #ffffff
Marge : -36px en haut, 0px en bas
Cette marge négative attachera la flèche au module de texte pour une belle conception d'onglet de flèche.
Ajoutez ensuite le css suivant à l'image de présentation pour supprimer une marge inutile sous l'icône.
CSS de l'image de présentation :
margin-bottom: 0px;
Paramètres et animation de la ligne 2
Puisque nous voulons ajouter la même animation aux deux modules qui composent la conception du bouton de défilement, nous devrons ajouter l'animation à la ligne qui les contient. Mettez à jour le paramètre de la ligne comme suit :
Largeur maximale : 100 pixels
Remplissage : 0px en haut, 0px en bas
Style d'animation : diapositive
Direction de l'animation : vers le bas
Durée de l'animation : 1200 ms
Couleur d'arrière-plan de la rangée 1 et ombre de la boîte
La touche finale de cette conception consiste à ajouter une couleur d'arrière-plan à la première rangée directement au-dessus de la rangée de boutons de défilement. Et en mettant à jour l'index Z de cette ligne, nous permettrons à l'animation du bouton de défilement d'apparaître comme si elle sortait de l'en-tête.
Ouvrez les paramètres de la ligne 1 comme suit :
Couleur d'arrière-plan : #222222
Indice Z : 10
Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 80px
Force du flou d'ombre de la boîte: 22px
Force de propagation de l'ombre de la boîte : -70px
Couleur de l'ombre : #222222 (assurez-vous que cela correspond à la couleur d'arrière-plan)
Résultat final
Découvrez maintenant le résultat final.
Conception de bouton de défilement animé n ° 4: Animation de défilement de la souris
Pour ce dernier bouton de défilement animé, nous allons créer une animation de défilement de souris en combinant un module de texte et un module de présentation.
Voici comment procéder.
Pour commencer, vous pouvez utiliser la section d'en-tête de base. Ajoutez ensuite une nouvelle ligne sous la ligne 1.
Ajouter le module Blurb
Ensuite, ajoutez un module de présentation à la ligne. Supprimez ensuite le titre et le corps du texte par défaut.
Après cela, mettez à jour l'icône comme suit :
Utiliser l'icône : OUI
Icône : cercle (voir capture d'écran)
Mettez ensuite à jour les paramètres de conception du texte de présentation comme suit :
Couleur de l'icône : #ffffff
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 15 px
Style d'animation : diapositive
Direction de l'animation : vers le bas
Durée de l'animation : 1200 ms
Répétition de l'animation : boucle
Animation d'image/icône : pas d'animation
Ajoutez ensuite le CSS personnalisé suivant à l'image Blurb :
margin-bottom: 0px;
Ajouter le module de texte
Ensuite, ajoutez un nouveau module de texte directement sous le module de présentation. Ensuite, mettez à jour le corps du texte avec le mot "scroll".
Mettez ensuite à jour les paramètres de texte suivants :
Texte Couleur du texte : #ffffff
Alignement du texte : au centre
Largeur : 90px
Marge : 10px en haut, -30px à gauche
Mettre à jour les paramètres de la ligne 2
Mettez maintenant à jour les paramètres de ligne comme suit :
Largeur: 30px
Hauteur : 60px
Coins arrondis : 16px
Largeur de la bordure : 1px
Couleur de la bordure : #ffffff
Style de bordure : solide
Débordement horizontal : visible
Débordement vertical : visible
Le résultat final
Voyons maintenant le résultat final :
Ajout de la fonctionnalité de lien d'ancrage
Les liens d'ancrage sont ces liens qui renvoient à différentes sections d'une page. Ils sont souvent utilisés dans les sites Web d'une page. Nous pouvons utiliser le même concept pour ajouter un lien d'ancrage à nos boutons de défilement afin qu'ils descendent de la page jusqu'à la section souhaitée. Pour ajouter la fonctionnalité de lien d'ancrage à vos boutons de défilement animés, vous devez faire deux choses principales.
- Vous devez ajouter un identifiant CSS à la section ou à la ligne à laquelle vous souhaitez accéder
- Vous devez ajouter un lien d'ancrage avec le même identifiant CSS à votre bouton de défilement
Voici comment cela fonctionnerait. Tout d'abord, créez une nouvelle section sous la section d'en-tête contenant le bouton de défilement. Donnez ensuite un identifiant CSS à la nouvelle section sous l'onglet avancé.
Recherchez ensuite l'élément/le bouton de défilement que vous souhaitez transformer en lien d'ancrage et ajoutez une URL qui commence par un hashtag (ou un symbole dièse) et est immédiatement suivie de l'ID CSS de l'élément auquel vous accédez.
Par exemple, si l'ID CSS de la section est « section-2 », vous devez alors ajouter « #section-2 » comme URL du lien.
N'oubliez pas que Divi vous permet d'ajouter des URL de liens à chaque élément de Divi, alors n'hésitez pas à ajouter des liens à toute la ligne contenant le bouton de défilement animé.
Pour plus d'informations, découvrez des choses intéressantes que vous pouvez faire avec des liens d'ancrage.
Faire preuve de créativité!
N'ayez pas peur de combiner différents modules et de les animer de différentes manières. En fait, alors que j'explorais de nouvelles façons de concevoir des boutons de défilement avec Divi, j'ai créé une animation de défilement au pouce amusante qui pourrait être utilisée pour mobile. Je l'ai inclus dans le téléchargement gratuit ci-dessus au cas où vous voudriez le vérifier.
Dernières pensées
Des boutons de défilement animés comme ceux-ci sont faciles à construire avec Divi. Et ils peuvent être utilisés à plus d'endroits que l'en-tête si vous les traitez comme des liens d'ancrage. J'espère que ces conceptions vous inspireront pour créer un tout nouveau bouton de défilement pour votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!