NLM033 • Время настройки: 2 минуты
Кастомный аккордеон в Тильде — блоки TX16N и TX16N2
Модификация может заменить иконку открытия и закрытия карточки, цвет фона активной карточки и заголовка.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Установи ее в один клик прямо внутри Тильды — без копирования кода. Плюс еще 200 модификаций, инструменты для Zero Block и генератор CSS-стилей в привычном интерфейсе
Эта модификация есть в нашем расширении
4,7•20 000+ пользователей
Chrome Web Store•1,32 MB• бесплатно
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
У нас есть оперативная техподдержка, которая поможет решить любые вопросы с установкой, настройкой или конфликтами нашего кода. Мы работаем без выходных с 11:00 до 19:00.
Мы уделяем особое внимание стабильности и надежности: все модификации проходят тестирование и корректно работают на Тильде, даже после крупных обновлений платформы. Регулярно добавляем новые эффекты и дорабатываем существующие, чтобы вы всегда могли реализовать дизайнерские идеи без перебоев.
Нет, все модификации доступны по подписке — вы получаете полный доступ к нашей библиотеке из более чем 200 модификаций и эффектов, а также ко всем новым обновлениям без доплат.
В каталоге есть фильтры по задачам и подробные описания с примерами. Если не уверены — напишите нам, мы подскажем оптимальное решение под ваш проект.
Мы постоянно расширяем каталог, дорабатываем функционал текущих модификаций и учитываем пожелания пользователей. У нас есть публичный роадмеп, и самые востребованные решения мы добавляем в библиотеку в первую очередь — расскажите о своей задаче, и, возможно, она появится в ближайших обновлениях.
Смотрите, как быстро установить модификацию
Инструкция
1. Чтобы в блоке разместить свою иконку, необходимо добавить на страницу галерею GL12 и загрузить в неё необходимый файл (рекомендуем использовать формат svg). Далее копируешь его ссылку и вставляешь в генератор. По умолчанию стоит наша иконка;
2. Кастомизируешь блок, настраивая параметры в полях:
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:
- «Тип блока» — указываем тип блока, который необходимо кастомизировать
- «Ссылка на иконку» — Добавляешь ссылку на иконку (ссылку нужной иконки ты можешь копировать из галереи GL12);
- «Ссылка на активную иконку» — Добавляешь ссылку на иконку, которая будет отображаться в раскрытом блоке;
- «Оставить стандартную иконку» — Если хочешь оставить стандартную иконку, нажимаешь в этом поле галочку;
2. Кастомизируешь блок, настраивая параметры в полях:
- «Цвет иконки»
- «Цвет активной иконки»
- «Толщина бордера»
- «Стиль бордера»
- «Радиус бордера»
- «Цвет бордера»
- «Цвет фона иконки»
- «Цвет фона активной иконки»
- «Цвет текста активной вкладки»
- «Раcположить список в две колонки» (рекомендуем применять настройку для блока шириной в 12 колонок). На мобильных устройствах можно отключить список в две колонки.
- «Горизонтальный отступ между колонками на экранах более 640px»
- «Вертикальный отступ между колонками на экранах более 640px»
- Дополнительно можешь кастомизировать блок для экранов менее 640рх
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:
- В настройках блока выключаешь галочку «Аккордеон. Отображать только одну раскрытую карточку».
- Настраиваешь «Стили карточки» -> «Отступ слева и справа внутри блока».
- Размер загруженной иконки будет 24х24 px.
- Если используешь модификацию вместе с NLM122, загляни в инструкцию к модификации NLM122 — там объясняется, как настроить отступы в блоках TX16N и TX16N2, а также как раcположить список в две колонки без модификации NLM033.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Аккордеон в Тильде — как настроить TX16N и TX16N2 под дизайн сайта
Стандартные блоки TX16N и TX16N2 удобны для FAQ, программы курса, списка услуг или характеристик товара. Проблема появляется на этапе дизайна: стандартная иконка, фон активной карточки и базовые стили не всегда подходят под визуальный стиль страницы.
Модификация NLM033 помогает аккуратно доработать аккордеон в Тильде: заменить иконку открытия и закрытия, настроить цвет активного пункта, фон, бордеры, скругления и отображение списка в две колонки.
Модификация NLM033 помогает аккуратно доработать аккордеон в Тильде: заменить иконку открытия и закрытия, настроить цвет активного пункта, фон, бордеры, скругления и отображение списка в две колонки.
Как подготовить иконки
Для своей иконки можно добавить на страницу галерею GL12 и загрузить туда SVG-файл. После сохранения блока открой его снова, скопируй ссылку на файл и вставь её в генератор Nolim.
Можно указать отдельные ссылки для обычной и активной иконки. Например, в закрытом состоянии использовать плюс, а в раскрытом — минус или стрелку. Если кастомная иконка не нужна, в генераторе можно оставить стандартную.
Можно указать отдельные ссылки для обычной и активной иконки. Например, в закрытом состоянии использовать плюс, а в раскрытом — минус или стрелку. Если кастомная иконка не нужна, в генераторе можно оставить стандартную.
Что можно настроить
В генераторе настраиваются цвет иконки, цвет активной иконки, толщина и стиль бордера, радиус, цвет фона иконки, фон активной иконки, цвет текста активной вкладки и фон активной карточки.
Если в аккордеоне много пунктов, список можно разложить в две колонки. Для этого лучше использовать блок шириной 12 колонок и отдельно настроить горизонтальные и вертикальные отступы. На мобильной версии двухколоночный список можно отключить, чтобы пункты читались проще.
Если в аккордеоне много пунктов, список можно разложить в две колонки. Для этого лучше использовать блок шириной 12 колонок и отдельно настроить горизонтальные и вертикальные отступы. На мобильной версии двухколоночный список можно отключить, чтобы пункты читались проще.
Что проверить в настройках блока
Перед установкой проверь сам TX16N или TX16N2. В настройках блока нужно выключить опцию «Аккордеон. Отображать только одну раскрытую карточку», если по сценарию несколько пунктов должны оставаться открытыми.
Также стоит проверить внутренние отступы карточек. Если текст или иконка стоят слишком близко к краю, аккордеон будет выглядеть тесно даже с хорошими цветами и иконками. Отступы лучше настроить до вставки кода, а потом уже подгонять стили через генератор.
Также стоит проверить внутренние отступы карточек. Если текст или иконка стоят слишком близко к краю, аккордеон будет выглядеть тесно даже с хорошими цветами и иконками. Отступы лучше настроить до вставки кода, а потом уже подгонять стили через генератор.
Куда вставлять код
После настройки скопируй сгенерированный HTML-код и вставь его в блок T123 на странице. Перед публикацией убедись, что на сайте подключён jQuery: это делается в настройках сайта.
После публикации проверь аккордеон на десктопе и телефоне. Иконки должны меняться корректно, активная карточка должна выделяться, а список в две колонки не должен ломать текст на узких экранах.
После публикации проверь аккордеон на десктопе и телефоне. Иконки должны меняться корректно, активная карточка должна выделяться, а список в две колонки не должен ломать текст на узких экранах.
Когда пригодится такая кастомизация
Кастомный аккордеон полезен на страницах услуг, тарифов, курсов, FAQ, карточках товаров и длинных лендингах. Он помогает сохранить привычную механику Тильды, но привести внешний вид блока к дизайну страницы.
Если сайт собран в спокойной минималистичной стилистике, достаточно заменить иконку и цвет активного пункта. Если страница более акцентная, можно добавить фон активной карточки, скругления и аккуратные бордеры. Главное — не перегружать блок: аккордеон должен помогать читать информацию, а не спорить с основным контентом.
Если сайт собран в спокойной минималистичной стилистике, достаточно заменить иконку и цвет активного пункта. Если страница более акцентная, можно добавить фон активной карточки, скругления и аккуратные бордеры. Главное — не перегружать блок: аккордеон должен помогать читать информацию, а не спорить с основным контентом.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Открой nolim.cc/custom-tx16n2-tilda, настрой параметры в генераторе: иконку открытия/закрытия (SVG), цвет фона активной карточки, цвет заголовка. Скопируй код и вставь его в блок «HTML-код».
TX16N — базовый аккордеон Tilda, где одновременно открыт только один пункт. TX16N2 позволяет держать несколько пунктов открытыми одновременно. Модификация Nolim работает с обоими блоками и позволяет стилизовать их одинаково.
Да. Генератор Nolim принимает SVG-файл иконки — ты вставляешь свой вариант, и иконка появится вместо стандартного плюса или стрелки. Размер, цвет и поведение (вращение при открытии) тоже настраиваются через параметры.
Было: агентство недвижимости использовало стандартный TX16N с дефолтным плюсом — страница выглядела как шаблонный сайт.
Стало: после установки модификации Nolim поменяли иконку на фирменную стрелку, сделали активную карточку светло-бежевой — аккордеон в Тильде вписался в общий стиль. Время просмотра страницы услуг выросло на 28%.
Стало: после установки модификации Nolim поменяли иконку на фирменную стрелку, сделали активную карточку светло-бежевой — аккордеон в Тильде вписался в общий стиль. Время просмотра страницы услуг выросло на 28%.