Как добавить таймер обратного отсчета в Zero Block Tilda

Узнайте, как легко добавить таймер обратного отсчета на сайт, созданный в конструкторе Tilda, используя гибкий редактор Zero Block. Пошаговая инструкция с примерами кода поможет вам создать привлекательный и функциональный таймер для повышения конверсии.
Как добавить таймер обратного отсчета в Zero Block Tilda
  1. Добавляем блок CR35. Удаляем обложку и все наполнение кроме даты, времени и пояса.
  2. В настройках ставим галочку «Скрывать дни в таймере» чтобы он обновлялся каждый день. Высоту блока установить 180px.
  3. Год устанавливаем на лет 100 вперед. Время окончания таймера.
  4. Создаем Zero блок.
  5. Добавляем текст и пишем в нем одной строкой таймер формата 00 : 00 : 00.
  6. Публикуем, открываем страницу.
  7. На страницу, кликаем правой кнопкой мыши на сам таймер, выбираем «Просмотреть код». (см. Фото 1). Откроется консоль разработчика.
  8. Находим в коде наш текст и копируем его ID такого формата tn_text_1654620921288. (см. Фото 2).
  9. Заменяем ID в коде ниже: // Записываем id элемента
  10. Готово!

<!--Подключаем библиотеку-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Таймер в Zero-->
<style>
    /*Скрываем блок с таймером*/
[data-record-type="415"] {
    display:none;
}
</style>
<script>
$( document ).ready(function() {
 function ZeroTimer(){
     var zeroDays = $('.t415__days ').html();
     var zeroHours = $('.t415__hours').html();
     var zeroMinutes = $('.t415__minutes').html();
     var zeroSeconds = $('.t415__seconds').html();   
     var timeTitle = ' : '+zeroHours+' : '+zeroMinutes+' : '+zeroSeconds ;
// Записываем id элемента
     $('[field="tn_text_1648032144651"]').text(timeTitle);
    };
    ZeroTimer();
    var timeinterval = setInterval(ZeroTimer,1000);
});   
</script>

Фото 1

Как добавить таймер обратного отсчета в Zero Block Tilda

Фото 2

Как добавить таймер обратного отсчета в Zero Block Tilda
Понравилась запись? Оцените!
Оценок: 0 Среднее: 0
Telegram
WhatsApp
VK
Facebook
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рекомендуем