Tildify Elements
Табы для Zero Block
Универсальные табы для Tilda ZeroBlock.
Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров.
Поддержка импорта и автогенерации табов из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров.
Поддержка импорта и автогенерации табов из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Для использования элементов в Tilda ZeroBlock необходимо установить расширение для Google Chrome Tildify, если нужен импорт из Figma также потребуется плагин для Figma Tildify Validator
Для работы библиотеки необходима платная подписка Tilda, так как в бесплатной недоступно использование скриптов
Ниже приведены примеры табов. Вы можете использовать ZeroBlock id для импорта в ваш проект примера табов, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Табы на базе обычных групп
Автовысота ZeroBlock
Переключатель
Гибкая настройка кнопок табов
Разные виды анимации
ZeroBlock id:
92jjzqw8mnhrexjrxzigdb
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп
Автопереключение
Переключение при наведении
Гибкая настройка кнопок табов
Разные виды анимации
Настройка позиции и анимации линии кнопок
ZeroBlock id:
17elr7izwbczuytvvokuym
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
Вложенные слайдеры и аккордеоны
ZeroBlock id:
spz0a05x2mfc86ayp2bs58
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
1
/
1
Новые возможности
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Всё под рукой
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Лёгкий старт
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
/
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
Вложенные слайдеры и аккордеоны
ZeroBlock id:
ij44huboku88hlvlmz56r
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
/
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Комбинация Табов и Аккордеона на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
Вложенные слайдеры и аккордеоны
ZeroBlock id:
6p7p8092u43xie3dy0cc1
Откройте для себя простой и удобный способ решать повседневные задачи
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Все необходимые функции в одном месте — быстро и без лишних действий
С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Начните использовать сервис за пару минут без сложных настроек
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Продуманный дизайн помогает сосредоточиться на главном
С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Создавайте визуальный стиль, который усиливает бренд и повышает конверсию на каждом этапе взаимодействия
Проектируйте дизайн-системы, которые работают на результат: от первого касания до финального действия пользователя благодаря продуманной структуре, визуальной иерархии и UX-логике
Улучшайте пользовательский опыт и увеличивайте удержание за счет продуманного интерфейсного дизайна
Создавайте интерфейсы, которые интуитивно понятны и приятны в использовании, сокращают путь пользователя и повышают удовлетворенность продуктом благодаря UX-исследованиям и тестированию
Разрабатывайте дизайн, который не просто выглядит красиво, а решает бизнес-задачи и приносит результат
Объединяйте эстетику и аналитику, чтобы каждый элемент интерфейса работал на достижение целей — от повышения доверия до роста продаж и усиления визуальной коммуникации
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Табов
Сборка своих табов в Тильде
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Создай кнопки табов: для каждой вкладки объедини содержимое кнопки в отдельную группу типа Object.
- Кнопке таба задай класс tf_tabs-button-<id>.
- Панели табов создай отдельно: для каждой вкладки объедини контент панели в отдельную группу типа Object и задай ей класс tf_tabs-panel-<id>. Что такое <id>: У каждой пары tf_tabs-button и tf_tabs-panel должен быть одинаковый ID. Пример для трёх вкладок внутри одного tabs-элемента: первая кнопка tf_tabs-button-1 → первая панель tf_tabs-panel-1, вторая кнопка tf_tabs-button-2 → вторая панель tf_tabs-panel-2, третья кнопка tf_tabs-button-3 → третья панель tf_tabs-panel-3.
- Объедини кнопки и панели в одну общую группу типа Object, и присвой класс tf_tabs.
- Внутри tf_tabs-button можно размещать любые элементы: текст, иконки, номера, кнопки, декоративные элементы. Если внутри кнопки используется Tilda Button, активная вкладка может применять стиль Hover как активное состояние.
- Внутри tf_tabs-panel можно размещать любой контент: текст, карточки, кнопки, вложенные группы, изображения, а также вложенные слайдеры, аккордеоны.
- Если нужны кнопки переключения между вкладками, можно добавить элементы с классами tf_tabs-prev и tf_tabs-next.
- Если нужны счётчики текущей и общей вкладки, можно добавить текстовые элементы с классами tf_tabs-current и tf_tabs-total.
- Если в одном ZeroBlock больше чем один tabs-элемент, последующим табам задавай уникальное имя: tf_tabs-1 для первого набора, tf_tabs-2, tf_tabs-3 и так далее для следующих.
- Связанные элементы внутри конкретного набора табов должны использовать тот же идентификатор: tf_tab-button-2, tf_tab-panel-2, tf_tabs-prev-2, tf_tabs-next-2, tf_tabs-current-2, tf_tabs-total-2.
- Размести конфиг табов, добавив его из меню элементов ZeroBlock: выбери пункт TIldify Elements (должно быть установлено расширение для браузера Tildify).
- Настрой параметры табов для этого выбери код вставки с инструкцией или элемент табов и нажми кнопку настроек в боковом меню Tildify Elements, чтобы редактировать параметры через интерфейс настроек.
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements
Инструкция для Табов
Сборка и экспорт табов в Figma
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
- Подготовь кнопки табов. Для удобства можно собрать их в один ряд.
- Подготовь панели с контентом. На каждый таб должна быть своя панель, и каждая панель должна быть отдельной группой или frame.
- Количество кнопок и панелей должно совпадать.
- Объедини кнопки и панели в один общий контейнер табов и собери его как frame или группу.
- Поставь тег [tabs] на общий контейнер табов.
- Поставь тег [tabs-button] на каждую кнопку таба. Если хочешь явно связать кнопку с конкретной панелью, используй id, например [tabs-button|id=1].
- Поставь тег [tabs-panel] на каждую панель. Панель лучше делать отдельным контейнером. Для явной связки с кнопкой задай такой же id, например [tabs-panel|id=1]. Если id не заданы, валидатор и импорт соберут структуру по геометрическому порядку кнопок и панелей.
- Если нужны кнопки переключения, добавь элементы назад и вперед и задай им теги [tabs-prev] и [tabs-next].
- Если нужен нумератор, подготовь текстовые элементы и задай им теги [tabs-current] и [tabs-total].
- Если на странице несколько блоков табов, задай корневому контейнеру свой id, например [tabs|id=pricing]. Такой же id потом используй у управляющих элементов.
- Для удобного нейминга тегов можно использовать Таггер в плагине.
- Экспортируй табы в Tilda. Плагин автоматически создаст управляющие скрипты для их работы.
- После импорта в Tilda используй панель Tildify Elements для настройки свойств табов. Для этого выдели элементы табов или конфиг табов (блок с кодом и инструкцией), панель управления появится справа на панели настроек Zero Block.
Конфиг табов появится над артбордом после импорта из Figma
Панель настроек Tildify Elements