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 импорта.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Гибкая настройка контролов
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
Аккордион на базе обычных групп
Автовысота ZeroBlock
Несколько открытых карточек
Настройка цвета фона активной секции
Компоновка за счет визуальной позици
ZeroBlock id:
i9whiw8vhdr2st1mmfen
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с настраиваемыми заголовками
Автовысота ZeroBlock
Настройка цвета разделителя
Гибкая настройка контролов
Гибкая настройка состояния заголовка
ZeroBlock id:
oi805mmvu6r6v86bentl
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Вложенные элементы
ZeroBlock id:
tdqu4e355qodsz2jnxoho
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Горизонтальный аккордеон
Одна открытая карточка
Вложенные элементы
В мобайле вертикальный
ZeroBlock id:
y48j372jmwbtezriqkbd5d
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Скрипт аккордеона
id: 1
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 3
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 4
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Вложенное меню на базе аккордеонов
Вложенные аккордеоны
Горизонтальный и вертикальный
ZeroBlock id:
67055xw9xsnaftfydlti8h
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