Tildify Elements
Таймер для Zero Block
Универсальный таймер для Tilda ZeroBlock.
Обратный отсчет до даты, таймер на заданное время, режим часов и расписание по датам и дням недели. Гибкая настройка показа и скрытия элементов по состоянию таймера.
Прогресс-бар с изменением ширины или высоты, текстовый вывод процентов. Поддержка нескольких таймеров в одном блоке. Сохранение состояния для каждого посетителя и режимы перезапуска: по времени, при обновлении страницы, после закрытия вкладки или каждый день.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Обратный отсчет до даты, таймер на заданное время, режим часов и расписание по датам и дням недели. Гибкая настройка показа и скрытия элементов по состоянию таймера.
Прогресс-бар с изменением ширины или высоты, текстовый вывод процентов. Поддержка нескольких таймеров в одном блоке. Сохранение состояния для каждого посетителя и режимы перезапуска: по времени, при обновлении страницы, после закрытия вкладки или каждый день.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Для использования элементов в Tilda ZeroBlock необходимо установить расширение для Google Chrome Tildify, если нужен импорт из Figma также потребуется плагин для Figma Tildify Validator
Для работы библиотеки необходима платная подписка Tilda, так как в бесплатной недоступно использование скриптов
Ниже приведены примеры использования таймера. Вы можете использовать ZeroBlock id для импорта в ваш проект примера таймера, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
Таймер обратного отсчета
Автоматическая лексика
События скрытия/показа элементов
ZeroBlock id:
nw7vk896wnace8qk1dhqrl
До начала акции
88
дней
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Таймер отсчета с выбранной даты
Автоматическая лексика
Использование метрик: года и месяцы
ZeroBlock id:
hgloctxttal6f35701r36b
Работаем с вами уже
88
лет
88
месяцев
88
дней
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Таймер фиксированного обратного отсчета
Автоматическая лексика
Интервал задается в секундах
Настройка интервала сброса таймера
Старт сразу или при появлении
Старт по событию
ZeroBlock id:
8hhe0oov4limy6fdz7mm7r
На выполнение задачи осталось
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Показ элементов по активности таймера
Автоматическая лексика
Показать при активном таймере
Показать при истечении времени
Старт/пауза по клику
ZeroBlock id:
z4u2ixl1yujjv69cwlbqti
Запустить таймер
А часики то тикают...
88
секунд
Время
Автоматическая лексика
Режим вывода времени
Часовые пояса
ZeroBlock id:
ld0mnjvrv27iivvwe7atf
Московское время
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Показ элементов с элементами прогресса
Автоматическая лексика
Показать при активном таймере
Показать при истечении времени
Старт/пауза по клику
Прогрессбар и проценты
ZeroBlock id:
gp03m9zocrm77w2h3nikag
Запустить таймер
Скоро конец...
88
секунд
Осталось
66
Прошло
66
Осталось
66
Прошло
66
Таймер в тексте по шаблону
Автоматическая лексика
Шаблоны токенов времени в тексте
ZeroBlock id:
fwsubzgbk388w50kt2al2m
Еще совсем не много, всего {{seconds}} {{secondsLabel}},
и я улечу навсегда…
и я улечу навсегда…
Вот и всё...
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Таймера
Сборка своего таймера в Тильде
- Для вывода одной строкой создай текстовый слой с классом tf_timer-value. Внутри текста можно использовать шаблон с токенами: {{days}} {{daysLabel}} {{hours}} {{hoursLabel}} и тд.
- Если нужен раздельный вывод по ячейкам, используй отдельные текстовые слои с классами tf_timer-days, tf_timer-hours, tf_timer-minutes, tf_timer-seconds и при необходимости отдельные подписи tf_timer-days-label и другие.
- Если нужен прогресс-бар, задай элементу класс tf_timer-progress или укажи свои классы в настройке Классы фигур. Для текста процентов используй tf_timer-percent.
- Если нужен ручной запуск, выбери в настройке Поведение запуска вариант По клику и укажи классы элементов для запуска и паузы.
- Если нужно показывать разные элементы до старта, во время работы и после завершения, используй настройки Показывать когда активно и Показывать когда неактивно.
- Если в одном блоке несколько таймеров, используй один и тот же id у всех связанных классов: tf_timer-value-sale, tf_timer-progress-sale, tf_timer-percent-sale.
- Добавь в Zero Block элемент Конфига таймера из Tildify Elements или вставь готовый пример с демо-страницы (должно быть установлено расширение для браузера Tildify).
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements
Если нужен раздельный вывод по ячейкам, используй отдельные текстовые слои с классами tf_timer-hours, tf_timer-minutes, и при необходимости отдельные подписи tf_timer-days-label и другие.
Классы значений
tf_timer-years
tf_timer-months
tf_timer-days
tf_timer-hours
tf_timer-minutes
tf_timer-seconds
tf_timer-months
tf_timer-days
tf_timer-hours
tf_timer-minutes
tf_timer-seconds
годы
месяцы
дни
часы
минуты
секунды
месяцы
дни
часы
минуты
секунды
Классы подписей
tf_timer-years-label
tf_timer-months-label
tf_timer-days-label
tf_timer-hours-label
tf_timer-minutes-label
tf_timer-seconds-label
tf_timer-months-label
tf_timer-days-label
tf_timer-hours-label
tf_timer-minutes-label
tf_timer-seconds-label
годы
месяцы
дни
часы
минуты
секунды
месяцы
дни
часы
минуты
секунды
Для вывода одной строкой создай текстовый слой с классом tf_timer-value. Внутри текста можно использовать шаблон с токенами: {{hours}} {{hoursLabel}}, то есть просто внутри текстовой строки указывать наблоны значений.
Шаблоны значений
{{years}}
{{months}}
{{days}}
{{hours}}
{{minutes}}
{{seconds}}
{{months}}
{{days}}
{{hours}}
{{minutes}}
{{seconds}}
годы
месяцы
дни
часы
минуты
секунды
месяцы
дни
часы
минуты
секунды
Шаблоны подписей
{{yearsLabel}}
{{monthsLabel}}
{{daysLabel}}
{{hoursLabel}}
{{minutesLabel}}
{{secondsLabel}}
{{monthsLabel}}
{{daysLabel}}
{{hoursLabel}}
{{minutesLabel}}
{{secondsLabel}}
годы
месяцы
дни
часы
минуты
секунды
месяцы
дни
часы
минуты
секунды
Пример текстовой строки: До запуска магазина остается {{days}} {{daysLabel}}
Прогресс
Если нужен прогресс-бар, задай элементу прогресс-бара класс tf_timer-progress или укажи свои классы в настройке Классы фигур. Для текста процентов используй tf_timer-percent.