Чтобы сделать таймер обратного отсчёта в Тильде с любым дизайном, поставьте на страницу стандартный блок-таймер T415 и задайте дату окончания, спрячьте его через CSS ([data-record-type="415"]{display:none}), а в Zero Block добавьте текстовое поле под цифры. Затем вставьте скрипт, который каждую секунду читает значения T415 и выводит их в это поле — логика отсчёта остаётся тильдовской, а оформление цифр целиком ваше.
Мы в студии vakas.ru постоянно собираем лендинги вебинаров и акций на Тильде, и запрос «сделай таймер как в макете, а не как умеет Тильда» приходит регулярно. Однажды пришёл макет с витиеватым фоном, на котором стандартный таймер выглядел чужеродно: цифры не той гарнитуры, подписи разъезжаются, фон не растягивается. Решение — вынести вывод таймера в Zero Block. Как это сделать — дальше.
Коротко
- В Тильде есть готовый блок таймера (T415) — указали дату окончания, опубликовали. Для простых задач этого хватает.
- Стандартный блок почти не настраивается: свой шрифт не задать, фон тянется сам, выравнивание — только по центру.
- Решение «как в макете»: скрытый T415 тикает «под капотом», а скрипт каждую секунду переносит его цифры в текстовое поле Zero Block.
- Тогда шрифт, цвет, позиция и адаптив — целиком ваши, а логика отсчёта остаётся надёжной, тильдовской.
Какой таймер есть в Тильде из коробки и почему его не хватает
В Тильде уже есть готовый блок обратного отсчёта (в каталоге блоков — раздел «Другое», блок таймера T415). Вы задаёте дату и время окончания, и блок сам тикает: дни, часы, минуты, секунды. Для простого случая этого достаточно — поставил, указал дедлайн, опубликовал.
Проблемы начинаются, когда таймер должен попасть в дизайн. Стандартный блок-таймер почти не настраивается:
- нельзя сменить шрифт (гарнитуру) цифр — можно поменять только цвет;
- фон под таймером растягивается так, как решит Тильда, а не так, как нужно по макету;
- подписи и заголовки нельзя поставить в произвольное место — раскладка фиксированная;
- таймер выравнивается только по центру блока;
- на сложном фоне цифры и текст часто плохо читаются, обводку или подложку не добавить.
Если дизайн строгий и таймер обязан выглядеть «как в макете», стандартного блока не хватит. Тогда его прячут, а цифры выводят в Zero Block — там верстается что угодно.
Стандартный блок T415
Меняется только цвет цифр. Шрифт, точная позиция и подложка недоступны, выравнивание — по центру, фон тянется сам. На сложном макете смотрится чужеродно.
Цифры в Zero Block
Любой шрифт, размер, цвет, обводка, позиция и адаптив под каждое разрешение. Логика отсчёта при этом всё равно берётся из надёжного штатного T415.
Как добавить стандартный таймер обратного отсчёта в Тильде
Если хватает базового блока и подгонять под макет не нужно, всё делается за минуту:
Найдите блок таймера
Откройте страницу в редакторе, нажмите «+» и в библиотеке блоков найдите таймер обратного отсчёта (раздел «Другое»).
Добавьте блок на страницу
Перетащите его в нужное место страницы.
Задайте дату и время окончания
В настройках контента укажите дедлайн отсчёта.
Выберите формат вывода
Какие единицы показывать (дни, часы, минуты, секунды) и подписи к ним.
Настройте стиль и опубликуйте
В настройках стиля задайте цвет цифр и фон, сохраните и опубликуйте.
Когда дедлайн наступит, таймер обнулится. Для повторяющихся акций удобнее динамическая дата — про автосмену расскажем ниже. А если базовый вид не устраивает, переходим к Zero Block.
Что такое Zero Block и зачем переносить таймер в него
Zero Block — это блок Тильды с индивидуальным дизайном: вы свободно расставляете элементы по сетке, задаёте свои шрифты, цвета, отступы, позиционирование и адаптив под каждое разрешение. Обычные блоки Тильды собраны из готовых шаблонов; Zero Block — пустой холст, где вёрстка целиком ваша.
Чтобы добавить Zero Block: на странице нажмите «+», выберите «Zero Block», откройте редактор кнопкой «Edit Block». Внутри добавляйте текстовые элементы (T-Text), фигуры и картинки.
Сам по себе Zero Block считать секунды не умеет — это просто холст. Логика обратного отсчёта остаётся тильдовской, а внешний вид — полностью вашим.
Поэтому идея такая: стандартный блок-таймер тикает «под капотом» (мы его спрячем), а его значения каждую секунду переносятся в текстовое поле Zero Block.
Как подружить таймер и Zero Block: пошаговая инструкция
Это ядро статьи. Идея простая: стандартный таймер работает невидимо и служит «двигателем», а скрипт каждую секунду берёт его цифры и выводит в текстовое поле внутри Zero Block. Дизайн вы рисуете в Zero Block, а отсчёт берётся из надёжного штатного блока.
Шаг 1. Добавляем стандартный блок с таймером на страницу
Поставьте на страницу обычный блок обратного отсчёта (T415) и задайте в нём дату и время окончания. Это источник данных — именно он будет тикать. Позже мы скроем его стилем, но удалять нельзя: пропадёт сам отсчёт.
Внимание. Блок T415 нельзя удалять — только скрыть стилем. Это «двигатель» отсчёта: без него скрипту неоткуда брать дни, часы, минуты и секунды.
Шаг 2. В Zero Block размещаем текстовые поля под цифры и подписи
Откройте Zero Block и добавьте текстовый элемент, куда выведутся цифры — например «До нового года осталось 05 : 10 : 25 : 30». Оформите его как нужно: ваш шрифт, размер, цвет, позиция. Ниже добавьте второе текстовое поле с подписями «дней : часов : минут : секунд», чтобы было понятно, что означают цифры. Текст-заглушку оставьте любую — скрипт всё равно заменит её живыми значениями (по умолчанию выводит их через разделитель « : », как «05 : 10 : 25 : 30»).
Шаг 3. Узнаём id текстового блока (field="tn_text_…")
Скрипту нужно знать, в какое именно поле писать цифры. У каждого текстового элемента Zero Block есть служебный атрибут вида field="tn_text_1547302526090". Найти его так:
Опубликуйте и откройте страницу
Откройте опубликованную страницу в браузере.
Откройте код элемента
Нажмите правой кнопкой на текст с цифрами таймера и выберите «Просмотреть код» (Inspect).
Скопируйте значение field
В HTML найдите ваш текстовый элемент и скопируйте значение атрибута field — это и есть id, например tn_text_1547302526090.
Важно. У вашего поля число в tn_text_… будет своим — обязательно замените им значение в коде, иначе таймер не свяжется с нужным текстом.
Шаг 4. Вставляем скрипт синхронизации в блок «Другое → HTML»
На страницу (вне Zero Block) добавьте блок «Другое → HTML» и вставьте в него два фрагмента кода. Первый прячет стандартный блок-таймер, чтобы на странице остались только красивые цифры из Zero Block:
<style>
/*Скрываем блок с таймером*/
[data-record-type="415"] {
display:none;
}
</style>Здесь [data-record-type="415"] — это и есть стандартный блок обратного отсчёта; правило display:none убирает его с экрана, при этом он продолжает считать в фоне.
Второй фрагмент — сам скрипт синхронизации. Он каждую секунду читает значения из скрытого таймера и переписывает их в текстовое поле Zero Block:
<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 = zeroDays+' : '+zeroHours+' : '+zeroMinutes+' : '+zeroSeconds ;
//Выводим таймер в текстовом поле ZeroBlock
$('[field="tn_text_1547302526090"]').text(timeTitle);
};
ZeroTimer();
var timeinterval = setInterval(ZeroTimer,1000);
});
</script>Разберём по строкам, что он делает:
$( document ).ready(...)— запускаем код после полной загрузки страницы;$('.t415__days').html(),.t415__hours,.t415__minutes,.t415__seconds— берём текущие значения дней, часов, минут и секунд из скрытого стандартного таймера T415;var timeTitle = zeroDays + ' : ' + ...— собираем их в одну строку вида «05 : 10 : 25 : 30»;$('[field="tn_text_1547302526090"]').text(timeTitle)— выводим эту строку в ваше текстовое поле Zero Block. Здесь подставьте свой id из шага 3 вместоtn_text_1547302526090;setInterval(ZeroTimer, 1000)— повторяем обновление каждую секунду, чтобы цифры «тикали».
Совет. Сохраните, опубликуйте страницу — и в Zero Block побегут цифры обратного отсчёта в вашем оформлении. Это рабочее решение, которое мы используем на проектах; при необходимости дорабатываем его под формат вывода и несколько таймеров на странице.
Как настроить таймер под себя
Главный плюс связки с Zero Block — внешний вид целиком в ваших руках:
Шрифт и размер
Выделите текстовое поле в Zero Block и задайте любую гарнитуру и кегль — то, чего нельзя в стандартном блоке.
Цвет и фон
Цвет цифр, обводку, тень и подложку настраиваете как у обычного текста; фон Zero Block тянется ровно по сетке.
Позиция
Двигайте поле с цифрами и подписи куда нужно — слева, справа, поверх картинки.
Подписи
«дней : часов : минут : секунд» — отдельный текстовый элемент, его можно оформить мельче и спокойнее, чем сами цифры.
Адаптив
В Zero Block для каждого разрешения (десктоп, планшет, мобайл) задайте свой размер и положение, чтобы на телефоне таймер не уезжал и не наезжал на соседние элементы.
Счётчик и обратный отсчёт: частые сценарии
Под «таймером» и «счётчиком» на сайте обычно имеют в виду одно — обратный отсчёт до события. Вот где он на Тильде нужен чаще всего:
- Вебинар. Счётчик до начала эфира на странице регистрации — повышает доходимость. Для регулярных вебинаров дату удобно менять автоматически (см. ссылку ниже);
- Акция и распродажа. Таймер до конца скидки создаёт ощущение дедлайна и подталкивает к покупке;
- Закрытие набора на курс. Обратный отсчёт до закрытия записи или повышения цены;
- Старт продаж / предзаказ. Счётчик «до открытия» подогревает ожидание.
Технически все эти случаи — один и тот же блок таймера T415; меняется только дата окончания и оформление. Если нужен счётчик на сайт Тильды с нестандартным дизайном — связка с Zero Block из этой статьи закрывает любой макет.
Частые проблемы и как их решить
Таймер не синхронизируется с Zero Block. Чаще всего неверный id в скрипте. Проверьте, что field="tn_text_…" в коде точно совпадает с id вашего текстового поля (шаг 3) — число должно быть вашим, а не из примера.
Цифры не обновляются (висит заглушка). Убедитесь, что на странице есть стандартный блок T415 и он не удалён, а только скрыт стилем. Без него скрипту неоткуда брать значения.
- Неправильное время. В Тильде дата окончания задаётся по часовому поясу проекта. Если цифры «врут», проверьте указанное время и пояс в настройках стандартного таймера;
- Таймер сразу обнулён. Значит, дата окончания уже в прошлом. Поставьте будущую дату; для повторяющихся событий используйте автосмену даты;
- Таймер не виден или съезжает на мобильной версии. Настройте размер и позицию текстового поля отдельно для мобильного разрешения в Zero Block — десктопные настройки на телефон не переносятся автоматически;
- Несколько таймеров на странице конфликтуют. Один скрипт рассчитан на одну пару «стандартный таймер → поле Zero Block». Для второго таймера нужен свой стандартный блок, своё поле и отдельная копия скрипта со своим id и своими классами.
Частые вопросы (FAQ)
Как сделать таймер обратного отсчёта в Тильде?
Простой вариант: добавьте на страницу стандартный блок таймера (раздел «Другое»), задайте дату и время окончания и формат вывода. Гибкий вариант: спрячьте стандартный таймер стилем и выведите его цифры в текстовое поле Zero Block через скрипт синхронизации — тогда дизайн будет полностью вашим.
Чем стандартный таймер Тильды отличается от таймера в Zero Block?
В стандартном блоке можно поменять только цвет, выравнивание — по центру, фон тянется сам. В Zero Block вы задаёте любой шрифт, размер, позицию, фон и адаптив. Логика отсчёта в обоих случаях берётся из штатного блока T415.
Почему таймер не синхронизируется с текстом в Zero Block?
Обычно из-за неверного id поля. Значение field="tn_text_…" в скрипте должно точно совпадать с id вашего текстового элемента в Zero Block. Также проверьте, что стандартный блок T415 присутствует на странице и только скрыт стилем, а не удалён.
Как узнать id текстового блока (field="tn_text_…") для скрипта?
Опубликуйте страницу, откройте её в браузере, нажмите правой кнопкой на текст с цифрами и выберите «Просмотреть код». В HTML у текстового элемента найдите атрибут field и скопируйте его значение — это и есть нужный id.
Можно ли поменять шрифт и цвет таймера в Тильде?
В стандартном блоке — только цвет. Чтобы сменить и шрифт, и размер, и оформление, выводите цифры в Zero Block: там текстовое поле настраивается как обычный текст.
Как поставить несколько таймеров на одной странице Тильды?
Для каждого таймера нужен свой стандартный блок-источник, своё текстовое поле в Zero Block и отдельная копия скрипта с уникальным id поля. Один общий скрипт несколько таймеров корректно не разведёт.
Почему таймер показывает неправильное время или сразу обнуляется?
Неправильное время — проверьте дату и часовой пояс в настройках стандартного таймера. Мгновенное обнуление означает, что заданная дата окончания уже в прошлом: поставьте будущую дату.
Как добавить таймер обратного отсчёта на лендинг вебинара или акции?
Так же, как на любой странице: добавляете блок таймера и указываете дату и время начала вебинара или конца акции. Для регулярных вебинаров дату стоит обновлять автоматически, чтобы счётчик не приходилось править вручную перед каждым эфиром.
Будет ли таймер корректно работать на мобильных устройствах?
Да. Сам отсчёт идёт одинаково на всех устройствах. На мобайле важно отдельно настроить размер и позицию текстового поля в Zero Block, иначе крупные цифры могут не помещаться или наезжать на соседние блоки.
Что такое Zero Block в Тильде и зачем переносить в него таймер?
Zero Block — блок с индивидуальным дизайном, пустой холст для свободной вёрстки. Таймер переносят в него, когда стандартного блока не хватает по дизайну: нужны свой шрифт, точная позиция и фон под конкретный макет.
Итог и помощь с настройкой
Стандартного таймера Тильды хватает для простых задач; когда нужен таймер «как в макете» — связываете скрытый блок T415 с текстовым полем Zero Block, и дизайн становится полностью вашим. По теме полезно: автосмена даты и времени вебинара на Тильде, эффекты анимации для кнопок в Тильде, а также что нужно для сайта вебинара. Если собираете лендинг с вебинаром или продажами — пригодятся интеграция Bizon365 и Tilda: одна форма регистрации на вебинар и интеграция Tilda и GetCourse.
