skip to Main Content

Comment ajouter un compteur animé au défilement sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Les compteurs de nombres animés sont populaires sur le Web comme moyen d’afficher des données numériques pour mettre en évidence la valeur des services, des études de cas, etc. Divi possède un module de compteur de numéros dédié qui peut être utilisé pour générer facilement des compteurs de numéros animés.

Cependant, dans ce tutoriel, nous allons vous montrer comment créer des compteurs numériques qui s’animent en défilement à l’aide de Divi. En utilisant les options de position et les effets de défilement de Divi, nous allons concevoir une mise en page simple pour afficher une date avec des nombres en défilement.

Partie 1: Création de la section de titre

Dans cette première partie, nous allons créer un titre simple pour la mise en page.

Tout d’abord, ajoutez une ligne d’une colonne à la section.

Enregistrer un module section divi

Ajoutez ensuite un nouveau module de texte à la ligne.

Mettez à jour le contenu du module de texte avec les éléments suivants:

<h2>Retenez la date<h2>
Retenez la date 1

Mettez ensuite à jour le style de texte de l’en-tête comme suit:

  • Heading 2 Font: Prata
  • Rubrique 2 Taille du texte: 130 px (ordinateur de bureau), 70 px (tablette), 40 px (téléphone)
Modification titre divi

Partie 2: Création des compteurs avec animation de défilement

Dans cette prochaine partie, nous allons créer les trois compteurs qui animeront les nombres sur défilement jusqu’à ce qu’ils s’arrêtent pour afficher une date (mois, jour et année). Chaque compteur sera construit en utilisant un total de 5 modules de texte et un module de séparation. Le premier module de texte servira d’étiquette du compteur (c’est-à-dire mois, jour, année). Les quatre prochains modules de texte contiendront chacun un nombre différent (en progression) qui sera animé sur défilement en utilisant les décalages de mouvement vertical dans Divi. Le module de séparation inférieur aidera à masquer le débordement des nombres.

Voici comment procéder.

Ajouter une deuxième ligne

Sous la ligne existante, ajoutez une autre ligne à une colonne.

Paramètres de ligne

Avant d’ajouter un module, mettez à jour les paramètres de ligne comme suit:

  • Largeur de gouttière: 1
  • Rembourrage: 0px haut, 0px bas
Configuration bordures divi

Paramètres de colonne

Ouvrez ensuite les paramètres de la colonne et mettez à jour le remplissage comme suit:

  • Rembourrage (bureau): 100px bas
  • Rembourrage (tablette et téléphone): 0px bas
Configuration espacement colonne divi

Ajouter un module de texte

Ajoutez ensuite un module de texte à la colonne.

Ajouter un module texte divi

Contenu / étiquette

Pour le contenu du module de texte, ajoutez le mot «mois».

Specifier le mois divi

Paramètres de conception de texte

Une fois le contenu ajouté, mettez à jour les paramètres de conception comme suit:

  • Couleur d’arrière-plan: #ffffff
  • Police du texte: Talk
  • Taille du texte: 40px
  • Hauteur de la ligne de texte: 2em
  • Largeur: 100%
  • Rembourrage: 20 pixels en haut, 20 pixels en bas, 20 pixels à gauche, 20 pixels à droite
  • Largeur de bordure inférieure: 5px
  • Couleur de la bordure inférieure: #eeeeee
Position

Ensuite, sous l’onglet avancé, mettez à jour les options de position comme suit:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Position: Relative
  • Index Z 1
Prata wordpress module

Ajouter un module de texte pour le premier numéro

Une fois le premier module de texte en place, nous pouvons commencer à ajouter les chiffres qui se déplaceront sur le défilement. Pour ajouter le premier numéro, ajoutez un nouveau module de texte sous le module de texte «Mois» existant.

Ajouter module texte conteur

Ajouter un numéro / contenu

Then update the text module label to read “num1” for easier reference. Then update the content with the number “01”.

Ajouter module nombre divi

Design Settings for Number

Under the design tab, update the following:

  • Text Font: Prata
  • Text Text Color: #8ab2d3
  • Text Text Size: 70px
  • Text Letter Spacing: 4px
  • Text Line Height: 1.5em
  • Padding: 20px left
Configuration couleur divi

NOTE: The numbers have a text size of 70px and a line-height of 1.5em, which means the total height of the text module will be close to 100px. This is important to keep in mind whenever we start adding the vertical motion offsets. For example, adding a vertical offset of “1” to the text module will move the text module exactly 100px which is the height of the text module.

Scroll Effects for First Number

Add the following scroll effects to the text module.

Under the Vertical Motion Tab, update the following:

  • Enable Vertical Motion: YES
  • Décalage de départ: 1 (à 10%)
  • Décalage moyen: 0 (à 20%)
  • Décalage de fin: -1 (à 30%)

Sous l’onglet Fondu entrant et sortant, mettez à jour les éléments suivants:

  • Activer le fondu entrant et sortant: OUI
  • Opacité de départ: 0% (à 10%)
  • Opacité moyenne: 100% (à 20%)
  • Opacité de fin: 0% (à 30%)

Assurez-vous de définir le déclencheur de l’effet de mouvement en haut de l’élément:

  • Déclenchement d’effet de mouvement: haut de l’élément
Configuration animation module divi texte

Créer le module de texte pour le deuxième numéro

Dupliquer le premier numéro

Une fois le premier numéro créé, dupliquez-le pour créer le module de texte du deuxième numéro. Mettez ensuite à jour l’étiquette dans la vue des couches pour une meilleure référence.

Dupliquer module texte divi 1

Numéro / contenu de mise à jour

Ouvrez les paramètres du deuxième module de texte numérique et mettez à jour le contenu avec le numéro «02».

Enregistrer numero 2 divi

Mettre à jour la position

Mettez ensuite à jour les options de position comme suit:

  • Position: Absolute
  • Décalage vertical: 126px
Modification position module texte divi

Mettre à jour les effets de défilement

Mettez ensuite à jour les effets de défilement comme suit:

Sous l’onglet Mouvement vertical, mettez à jour les éléments suivants:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Décalage de départ: 1 (à 20%)
  • Décalage moyen: 0 (à 30%)
  • Décalage de fin: -1 (à 40%)

Sous l’onglet Fondu entrant et sortant, mettez à jour les éléments suivants:

  • Opacité de départ: 0% (à 20%)
  • Opacité moyenne: 100% (à 30%)
  • Opacité de fin: 0% (à 40%)
Animation scroll effect divi

Créer un module de texte pour le troisième numéro

Dupliquer le deuxième numéro

Pour créer le module de texte pour le troisième numéro, dupliquez le module de texte pour le deuxième numéro.

Dupliquer module texte numero 3

Numéro / contenu de mise à jour

Mettez à jour le contenu avec le numéro «03».

Modifier module texte divi

Mettre à jour les effets de défilement

Mettez ensuite à jour les effets de défilement:

Sous l’onglet Mouvement vertical, mettez à jour les éléments suivants:

  • Décalage de départ: 1 (à 30%)
  • Décalage moyen: 0 (à 40%)
  • Décalage de fin: -1 (à 50%)

Sous l’onglet Fondu entrant et sortant, mettez à jour les éléments suivants:

  • Opacité de départ: 0% (à 30%)
  • Opacité moyenne: 100% (à 40%)
  • Opacité de fin: 0% (à 50%)
Modifier animation module texte

Créer un module de texte pour le quatrième numéro

Troisième numéro en double

Pour créer le quatrième numéro pour le compteur de défilement, dupliquez le module de texte pour le troisième numéro.

Dupliquer module texte divi numero 4

Numéro / contenu de mise à jour

Mettez à jour le contenu avec le numéro «04».

Configurer valeur module texte divi

Mettre à jour les effets de défilement

Mettez ensuite à jour les effets de défilement:

Sous l’onglet Mouvement vertical, mettez à jour les éléments suivants:

  • Décalage de départ: 1 (à 40%)
  • Décalage moyen: 0 (à 50%)
  • Décalage de fin: 0 (à 60%)

Sous l’onglet Fondu entrant et sortant, mettez à jour les éléments suivants:

  • Opacité de départ: 0% (à 40%)
  • Opacité moyenne: 100% (à 50%)
  • Opacité de fin: 100% (à 60%)
Configuration animation module 4 divi

Ajouter un séparateur inférieur

Sous le dernier module de texte, ajoutez un nouveau module de séparation. Cela sera utilisé pour masquer le débordement inférieur du texte qui défilera en vue.

Ajouter module separateur divi

Sélectionnez ensuite NON pour afficher le séparateur.

Ne pas afficher le separateur divi

Paramètres de style et de position

Mettez à jour la conception du séparateur comme suit:

  • Couleur d’arrière-plan: #ffffff
  • Largeur: 100%
  • Hauteur: 100px
  • Largeur de bordure supérieure: 5px

Sous l’onglet avancé, mettez à jour les éléments suivants:

  • Désactiver sur: téléphone et tablette
  • Position: Absolute
  • Emplacement: en bas à gauche

IMPORTANT: l’espace que le séparateur occupera a été créé plus tôt en ajoutant un remplissage inférieur de 100 pixels à la colonne. Si vous n’ajoutez pas ce rembourrage, le séparateur chevauchera les chiffres.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Création de compteurs et de colonnes supplémentaires

Dupliquer la colonne 1 et mettre à jour le contenu

Pour créer un nouveau compteur, dupliquez la colonne 1. Cela créera une deuxième colonne avec tous les éléments en place automatiquement.

Ensuite, tout ce que vous devez faire est de mettre à jour le contenu de tous les modules de texte avec de nouveaux textes et numéros.

Dupliquer colonne entiere divi

Dupliquer la colonne 2 et mettre à jour le contenu

Une fois le contenu de tous les modules de texte mis à jour dans la colonne 2, dupliquez la colonne 2 pour créer un troisième compteur pour l’année. Mettez ensuite à jour le contenu de chaque module de texte selon vos besoins.

Résultat final

Voici le résultat final.

Autres Ressources

Dernières pensées

Cette mise en page simple avec des compteurs de nombres animés par défilement devrait être utile pour afficher des données numériques d’une manière nouvelle et unique. N’hésitez pas à abandonner le concept de date et à utiliser les compteurs pour tout ce dont vous pouvez rêver!

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer