Comment intégrer un décompte sur Webflow ?

Aperçu 📚

Vous avez une offre limitée dans le temps ou bien un projet incroyable pour lequel un décompte peut être un moyen de teaser votre communauté ?

Voici une solution simple pour intégrer un compte à rebours dans vos projets Webflow. Codepen original de Matt Smith

Pour l'ajouter à votre projet, suivez les étapes simples et ajoutez le code personnalisé dans les paramètres de votre projet ou de votre page.

Instructions ✍️

1. Ajoutez le code personnalisé à votre page.

Accédez à la zone des paramètres de votre projet ou de votre page et ajoutez le code personnalisé dans la zone before </body> tag.

Vous pouvez voir que ce code fait référence à quelques #IDs, ce sont les jours, heures, minutes et secondes assignable aux éléments de votre page

    <script> 
    // Original Pen by Matt Smith 
    const second = 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;

    let countDown = new Date('Oct 09, 2023 00:00:00').getTime(),
        x = setInterval(function() {

          let now = new Date().getTime(),
              distance = countDown - now;

          document.getElementById('days').innerText = Math.floor(distance / (day)),
            document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
            document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
            document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

          //do something later when date is reached

        }, second)
    </script>

‍

2. Ajoutez des éléments de texte pour afficher les minutes, les jours, les mois,

Ajoutez des éléments de texte à votre page selon vos besoins : jours, heures, minutes, secondes. Dans ce cas, vous ajouterez 4 éléments de texte à votre page, en oubliant pas par la suite d’assigner les bons ID aux bons éléments de texte.

‍

‍

3. Ajouter #ID pour les jours, heures, minutes, secondes

Lorsque votre élément de texte est sélectionné, accédez au panneau des paramètres et ajoutez les ID correspondant au type d'élément de compte à rebours dont vous avez besoin.

Comme mentionné, ces #ID sont

• jours
• heures
• minutes
• secondes

Vous pouvez voir comment nous faisons la même chose pendant des heures.

4. Publier et tester

C'est tout, vous pouvez le publier et tester qu'il fonctionne comme prévu.

‍