Sale - 5%
00 : 00 : 00 : 00
ден : час : мин : сек
изменится через
Our Website is Almost Ready
Launch a targeted campaign.
Scale your infrastructure with our simple service.
Days
Hours
Minutes
Seconds
Learn more
Библиотека кодовых модификаций Tilda

Хватит копировать чужие сайты! Создаем уникальный стиль в Тильде с помощью HTML кода.

Коллекция нестандартных решений и модификаций, которые добавят сайту дорогой и индивидуальный вид. Разбираем код для смелых дизайнеров.
бесплатные модификаторы tilda
Как вставить таймер обратного отчета в ZeroBlock Tilda
Чтобы реализовать таймер на странице, следуйте этой пошаговой инструкции:

  1. Подготовка ZeroBlock: Создайте на странице ZeroBlock.
  2. Создание макета: Добавьте в ZeroBlock элемент «Текст» и напишите в нем пример отображения времени, например: 73 : 10 : 44 : 16. Присвойте этому тексту класс zero-timer
  3. Подписи значений (! не обязательно): Ниже добавьте еще четыре текстовых элемента, которые будут обозначать единицы измерения: Дни : Час : Мин : Сек
  4. Вставка скрипта таймера: Разместите стандартный блок CR35. В настройках блока CR35 пропишите класс: uc-timer-block.
  5. Активация скриптов: Финальный шаг — добавьте в ZeroBlock скрипт, отвечающий за работу таймера . Для этого используйте функцию HTML внутри ZeroBlock, вставьте в него код скрипт. Далее опубликуйте.
<!-- Как вставить таймер обратного отсчета в ZeroBlock Tilda tbmsc.ru-->

<script>
document.addEventListener('DOMContentLoaded', () => {

  const SETTINGS = {
    showDays: true,
    showHours: true,
    showMinutes: true,
    showSeconds: true,
    separator: ' • '
  };

  const SOURCE_BLOCK_CLASS = '.uc-timer-block';
  const OUTPUT_SELECTOR = '.zero-timer .tn-atom';

  const getValue = (container, selector) => {
    const el = container.querySelector(selector);
    return el ? el.textContent.trim() : '00';
  };

  const buildTimeString = (data) => {
    const parts = [];

    if (SETTINGS.showDays) parts.push(data.days);
    if (SETTINGS.showHours) parts.push(data.hours);
    if (SETTINGS.showMinutes) parts.push(data.minutes);
    if (SETTINGS.showSeconds) parts.push(data.seconds);

    return parts.join(SETTINGS.separator);
  };

  const updateZeroBlockTimer = () => {
    const source = document.querySelector(SOURCE_BLOCK_CLASS);
    if (!source) return;

    const timeData = {
      days: getValue(source, '.t415__days'),
      hours: getValue(source, '.t415__hours'),
      minutes: getValue(source, '.t415__minutes'),
      seconds: getValue(source, '.t415__seconds')
    };

    const formattedTime = buildTimeString(timeData);
    const targets = document.querySelectorAll(OUTPUT_SELECTOR);

    targets.forEach(node => {
      node.textContent = formattedTime;
    });

    const isFinished = Object.values(timeData).every(v => v === '00' || v === '0');
    if (isFinished) {
      clearInterval(timerInterval);
    }
  };

  updateZeroBlockTimer();
  const timerInterval = setInterval(updateZeroBlockTimer, 1000);

});
</script>

<style>
/* Скрываем стандартный блок таймера Tilda */
[data-record-type="415"] {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
</style>
Made on
Tilda