NLM211 • Время настройки: 5 минут
Расширяющиеся карточки в Zero Block на Тильде?
Модификация позволяет «растягивать» изображение при нажатии на него. Можно добавить собственные иконки и текст к каждой карточке, а также задать необходимые настройки для элементов.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Инструкция
Эта модификация позволяет создать в Zero Block эффект интерактивных карточек с фоновым изображением, которые раскрываются при клике, показывая дополнительную информацию (иконку, заголовок и описание).
Шаг 1. Подготовьте Zero Block
Вам понадобится создать один Zero Block и подготовить в нем элемент, который станет контейнером для ваших будущих раскрывающихся карточек.
Теперь перейдите в ваш Генератор модификации и заполните следующие поля, определяя внешний вид и поведение карточек:
Используйте этот блок для добавления информации для каждой отдельной карточки-слайда. Нажмите «Добавить карточку» столько раз, сколько карточек вам нужно.
Вставляем галерею GL12 и загружаем в неё изображение, сохраняем блок, открываем снова, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;
Для 7 карточек, где открытая — 300 px, закрытая — 100 px, отступы между ними — 10 px (6 промежутков):
300 + (6×100) + (6×10) = 300 + 600 + 60 = 960 px. Ширина шейпа должна быть 960 px.
Шаг 1. Подготовьте Zero Block
Вам понадобится создать один Zero Block и подготовить в нем элемент, который станет контейнером для ваших будущих раскрывающихся карточек.
- Создайте новый Zero Block или откройте существующий на нужной странице.
- Добавьте в этот Zero Block один элемент «Шейп» (Shape). Этот Шейп будет служить главным контейнером, внутри которого будут располагаться и анимироваться все карточки.
- Важно! В поле «CSS Class Name» (Имя CSS класса) задайте уникальный класс (например, my-cards-container). Вам нужно будет ввести точно такое же имя в генераторе кода.
- Задайте этому Шейпу-контейнеру нужные размеры и позицию в Zero Block. Именно его размеры будут определять общую область, которую займет ваш блок с раскрывающимися карточками.
- Убедитесь, что Шейп-контейнер пустой внутри. Не добавляйте в него другие элементы Tilda (тексты, изображения, другие шейпы). Скрипт сам создаст и разместит содержимое карточек.
Теперь перейдите в ваш Генератор модификации и заполните следующие поля, определяя внешний вид и поведение карточек:
- Класс шейпа в зеро блоке: Введите точно такой же CSS класс, который вы присвоили Шейпу-контейнеру на Шаге 1.
- Скругление углов карточек (рх): Укажите значение в пикселях для радиуса скругления углов каждой карточки.
- Выберите тип шрифта: Выберите, какой из шрифтов вашего сайта (основной для заголовков или основной для описаний, заданные в Настройках Сайта -> Шрифты) будет использоваться как базовый стиль для текста внутри карточек.
- Цвет заголовка: Выберите цвет текста для Заголовка карточки, когда она находится в активном (раскрытом) состоянии.
- Цвет описания: Выберите цвет текста для Описания карточки, когда она находится в активном (раскрытом) состоянии.
- Растояние между слайдами (рх): Укажите промежуток в пикселях между соседними карточками.
- Ширина открытого слайда (рх): Задайте ширину, которую будет занимать активная (раскрытая) карточка в пикселях.
- Ширина закрытого слайда (рх): Задайте ширину, которую будут занимать неактивные (свернутые) карточки в пикселях.
- Размер заголовка (рх): Укажите размер шрифта заголовка в пикселях, когда карточка активна.
- Размер описания (рх): Укажите размер шрифта описания в пикселях, когда карточка активна.
- Расположение контента внутри слайда: Определяет вертикальное расположение блока с иконкой и текстом внутри карточки (например, вверху или внизу).
- Отступ снизу/сверху (рх): Определяет расстояние до нижней или верхней границы карточек.
- Отступ слева (рх): Определяет расстояние от левой границы карточек.
- Ширина иконок (рх): Укажите ширину иконки рядом с текстом в пикселях.
- Высота иконок (рх): Укажите высоту иконки рядом с текстом в пикселях.
Используйте этот блок для добавления информации для каждой отдельной карточки-слайда. Нажмите «Добавить карточку» столько раз, сколько карточек вам нужно.
- Ссылка на изображение: Вставьте полный URL фонового изображения для этой конкретной карточки.
Вставляем галерею GL12 и загружаем в неё изображение, сохраняем блок, открываем снова, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;
- Заголовок: Введите текст заголовка для этой карточки.
- Описание: Введите текст описания для этой карточки.
- Ссылка на иконку: Вставьте полный URL изображения для небольшой иконки, которая будет отображаться рядом с текстом этой карточки.
- Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.
- Если блок не работает или отображается некорректно, убедитесь, что класс Шейпа-контейнера в Zero Block точно совпадает с классом, указанным в генераторе, и что этот Шейп пустой внутри.
- Чтобы модификация работала корректно, нужно правильно рассчитать ширину шейпа с учетом: количества карточек; расстояния между слайдами; ширины раскрытого слайда; ширины закрытого слайда.
Для 7 карточек, где открытая — 300 px, закрытая — 100 px, отступы между ними — 10 px (6 промежутков):
300 + (6×100) + (6×10) = 300 + 600 + 60 = 960 px. Ширина шейпа должна быть 960 px.
Смотрите, как быстро установить модификацию
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Расширяющиеся карточки в Zero Block — как собрать раскрывающиеся карточки
Модификация NLM211 помогает сделать в Zero Block интерактивный блок с карточками, которые раскрываются по клику. В закрытом состоянии карточки занимают меньше места, а активная карточка становится шире и показывает больше информации: фоновое изображение, иконку, заголовок и описание.
Такой формат удобно использовать там, где нужно показать несколько направлений, услуг, проектов или объектов в одном компактном блоке. Пользователь видит всю подборку сразу и сам выбирает карточку, которую хочет раскрыть.
Такой формат удобно использовать там, где нужно показать несколько направлений, услуг, проектов или объектов в одном компактном блоке. Пользователь видит всю подборку сразу и сам выбирает карточку, которую хочет раскрыть.
Как подготовить блок
Сначала создай или открой нужный Zero Block и добавь в него Shape. Он будет контейнером для будущих карточек. В поле CSS Class Name задай уникальный класс, например `my-cards-container`, и потом укажи его в генераторе Nolim.
Контейнер-шейп должен быть пустым. Не добавляй внутрь тексты, изображения или другие элементы Tilda: модификация сама создаст карточки и разместит их внутри контейнера. Размер шейпа лучше сразу задать с запасом, потому что именно он определяет область, в которой будет работать аккордеон.
Контейнер-шейп должен быть пустым. Не добавляй внутрь тексты, изображения или другие элементы Tilda: модификация сама создаст карточки и разместит их внутри контейнера. Размер шейпа лучше сразу задать с запасом, потому что именно он определяет область, в которой будет работать аккордеон.
Что настраивается в генераторе
В генераторе указывается класс шейпа, скругление карточек, шрифт, цвет заголовка и описания. Для разных экранов можно настроить расстояние между карточками, ширину открытого и закрытого слайда, размер текста, положение контента, отступы и размеры иконок.
Карточки добавляются отдельно: для каждой нужно указать ссылку на фоновое изображение, заголовок, описание и ссылку на иконку. Если нужна ссылка на изображение из Tilda, можно загрузить файл в галерею GL12, сохранить блок, открыть его снова и скопировать ссылку на файл.
Карточки добавляются отдельно: для каждой нужно указать ссылку на фоновое изображение, заголовок, описание и ссылку на иконку. Если нужна ссылка на изображение из Tilda, можно загрузить файл в галерею GL12, сохранить блок, открыть его снова и скопировать ссылку на файл.
Где использовать такой аккордеон
Слайдер-аккордеон подходит для портфолио, страниц услуг, подборок объектов, направлений обучения, карточек команды, интерьерных проектов, недвижимости и визуальных кейсов. Он помогает показать несколько вариантов в одном блоке без длинной галереи и лишнего скролла.
Лучше всего работают изображения с понятным главным объектом. Если фотография слишком детальная, в закрытом состоянии важные элементы могут обрезаться. Для карточек с текстом заранее продумай, где будет стоять заголовок и сколько места займёт описание.
Лучше всего работают изображения с понятным главным объектом. Если фотография слишком детальная, в закрытом состоянии важные элементы могут обрезаться. Для карточек с текстом заранее продумай, где будет стоять заголовок и сколько места займёт описание.
Как рассчитать ширину контейнера
Перед публикацией проверь ширину шейпа-контейнера. Она должна учитывать открытую карточку, закрытые карточки и расстояния между ними. Например, если открытая карточка занимает 300 px, шесть закрытых карточек по 100 px, а между семью карточками шесть промежутков по 10 px, общая ширина будет 960 px.
Если контейнер получится уже нужной ширины, карточки могут сжаться, наехать друг на друга или выйти за границы блока. Поэтому сначала лучше посчитать размеры, а затем уже подгонять композицию в Zero Block.
Если контейнер получится уже нужной ширины, карточки могут сжаться, наехать друг на друга или выйти за границы блока. Поэтому сначала лучше посчитать размеры, а затем уже подгонять композицию в Zero Block.
Что проверить после установки
Когда настройки готовы, скопируй HTML-код из генератора, вставь его в блок T123 и опубликуй страницу. После публикации проверь, что класс шейпа в Zero Block точно совпадает с классом в генераторе, а сам шейп остался пустым.
Отдельно посмотри адаптивы. На разных экранах карточки могут требовать разной ширины, отступов и размера текста. Если на мобильной версии аккордеон выглядит тесно, уменьши ширину открытого слайда, сократи описание или сделай изображения проще по композиции.
Отдельно посмотри адаптивы. На разных экранах карточки могут требовать разной ширины, отступов и размера текста. Если на мобильной версии аккордеон выглядит тесно, уменьши ширину открытого слайда, сократи описание или сделай изображения проще по композиции.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Используй модификацию Nolim для горизонтального аккордеона. Добавь несколько изображений в Zero Block, сгенерируй код через генератор и вставь в блок «HTML-код». При клике на картинку она расширяется по горизонтали, остальные сжимаются.
Обычный слайдер переключает слайды по очереди. Аккордеон в зеро блоке — все изображения видны одновременно, но активное занимает 60−70% ширины. Это создаёт эффект «живого» галерейного просмотра без скролла.
Да. Модификация поддерживает тач-события. На телефоне пользователь нажимает пальцем на нужную картинку — она расширяется. Количество видимых панелей настраивается отдельно для мобильных устройств.
Было: фотограф показывал работы стандартной галереей GL11 — каждое фото одинакового размера.
Стало: после установки горизонтального аккордеона Тильды главные работы «раскрываются» при наведении. Запросов на съёмку пришло на 35% больше за первые две недели.
Стало: после установки горизонтального аккордеона Тильды главные работы «раскрываются» при наведении. Запросов на съёмку пришло на 35% больше за первые две недели.