Tildify Elements
Таймер для Zero Block
Универсальный таймер для Tilda ZeroBlock.
Обратный отсчет до даты, таймер на заданное время, режим часов и расписание по датам и дням недели. Гибкая настройка показа и скрытия элементов по состоянию таймера.
Прогресс-бар с изменением ширины или высоты, текстовый вывод процентов. Поддержка нескольких таймеров в одном блоке. Сохранение состояния для каждого посетителя и режимы перезапуска: по времени, при обновлении страницы, после закрытия вкладки или каждый день.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Обратный отсчет до даты, таймер на заданное время, режим часов и расписание по датам и дням недели. Гибкая настройка показа и скрытия элементов по состоянию таймера.
Прогресс-бар с изменением ширины или высоты, текстовый вывод процентов. Поддержка нескольких таймеров в одном блоке. Сохранение состояния для каждого посетителя и режимы перезапуска: по времени, при обновлении страницы, после закрытия вкладки или каждый день.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Ниже приведены примеры аккордеонов. Вы можете использовать ZeroBlock id для импорта в ваш проект примера аккордеона, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
Таймер обратного отсчета
Автоматическая лексика
События скрытия/показа элементов
ZeroBlock id:
9c6xrohd5rij8jmjce0l
До начала акции
88
дней
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Таймер отсчета с выбранной даты
Автоматическая лексика
Использование метрик: года и месяцы
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Работаем с вами уже
88
лет
88
месяцев
88
дней
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Таймер фиксированного обратного отсчета
Автоматическая лексика
Интервал задается в секундах
Настройка интервала сброса таймера
Старт сразу или при появлении
Старт по событию
ZeroBlock id:
9c6xrohd5rij8jmjce0l
На выполнение задачи осталось
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Показ элементов по активности таймера
Автоматическая лексика
Показать при активном таймере
Показать при истечении времени
Старт/пауза по клику
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Запустить таймер
Пауза...
88
секунд
Время
Автоматическая лексика
Режим вывода времени
Часовые пояса
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Московское время
88
часов
88
минут
88
секунд
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Скрипт таймера
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки таймера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент таймера, кнопка настроек появится на панели инструментов справа.
Показ элементов по активности таймера
Автоматическая лексика
Показать при активном таймере
Показать при истечении времени
Старт/пауза по клику
Прогрессбар и проценты
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Запустить таймер
Пауза...
88
секунд
Осталось
66
Прошло
66
Осталось
66
Прошло
66
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Аккордеона
Сборка своего аккордеона в Тильде
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Создайте секции аккордеона: для каждой секции объедините заголовок и контент в отдельные группы типа Object.
- Заголовку секции задайте класс tf_accordion-header.
- Контенту секции задайте класс tf_accordion-content.
- При желании можно дополнительно объединить заголовок и контент одной секции в общую группу. Это позволяет задать общий фон для секции для неактивного (за счет дизайна) и активного (в настройках аккордеона) состояния.
- Объедините все секции в одну общую группу типа Object, задайте ей свойство Autolayout (не обязательно )и присвойте класс tf_accordion.
- Настроив направление Autolayout, можно сделать вертикальный или горизонтальный аккордеон. Горизонтальный аккордеон работает только с flex-структурой.
- Внутри заголовка можно размещать любые элементы: текст, иконки, кнопки, номера, декоративные элементы. Кнопки будут менять свой стиль на Hover при открытой вкладке.
- Если хотите явно задать кнопку или иконку раскрытия, можно использовать классы tf_accordion-button и tf_accordion-icon. Если не задавать их явно, аккордеон постарается определить нужные элементы автоматически.
- Внутри tf_accordion-content можно размещать любой контент: текст, карточки, кнопки, вложенные группы, а также вложенные слайдеры и вложенные аккордеоны.
- Если в одном ZeroBlock больше чем один аккордеон, последующим аккордеонам задавайте имя: tf_accordion-1. Для второго/третьего аккордеона: tf_accordion-2, tf_accordion-3 и т.д.
- Разместите конфиг аккордеона, добавив его из меню элементов ZeroBlock выбрав пункт TIldify Elements (должно быть установлено расширение для браузера Tildify).
- Настройте параметры аккордеона в HTML-блоке, или выделите HTML-блок и нажмите кнопку настроек аккордеона в боковом меню Tildify Elements, чтобы редактировать параметры через интерфейс настроек.
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements
Инструкция для Аккордеона
Сборка и экспорт аккордеона из Figma
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Создай отдельную группу или фрейм для заголовка пункта.
- Создай отдельную группу или фрейм для контента этого же пункта.
- Если хочешь, чтобы у открытого пункта был свой цвет фона, дополнительно заверни такой контейнер в отдельную группу или фрейм.
- Собери все такие контейнеры в один общий контейнер аккордеона.
- На общий контейнер поставь тег [accordion].
- Теги [accordion-header] и [accordion-content] тоже можно поставить вручную, но это необязательно: при корректной структуре валидатор обычно назначает их сам.
- Если нужна стрелка, размести ее внутри заголовка и задай тег [accordion-arrow]. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку, в данном случае тег [accordion-arrow] можно не задавать.
- Лучше собирать общий контейнер, пары и внутренние блоки через AutoLayout, чтобы структура была ровной и проще редактировалась.
- Если на странице несколько аккордеонов, используй id, например [accordion|id=faq].
- Экспортируй аккордеон в Tilda. Плагин автоматически создаст управляющие скрипты для его работы.
- После импорта в Tilda используй панель Tildify Elements для настройки свойств аккордеона. Для этого выдели элементы аккордеона или конфиг аккордеона (блок с кодом и инструкцией), панель управления появится справа на панели настроек Zero Block.
Конфиг аккордеона появится над артбордом после импорта из Figma
Панель настроек Tildify Elements