authwebTILDA LAB / 02NATIVE CARD GRID

МОДИФИКАЦИЯ ДЛЯ TILDA

Карточки.
В вашем ритме.

Колонки, отступы и акцентная карточка.
Одна система для четырёх родных блоков.
Контент остаётся в Tilda.

CL49 · TE220 · SV402 · TM102Без библиотек

Как установить

01 / НАСТРОЙКАНастоящие блоки. Общий язык сетки.

Блок для настройкиВ этой сессии каждый пример помнит свои параметры. Меняется только выбранный блок ниже.

Начните со стиля

Класс или ID для вашего кодаОбщий класс = общие параметры. Для одного блока укажите его #recID.

Сетка по ширине контейнераНе ширина экрана: измеряется доступное место для карточек внутри блока.

1200+Колонки, 1200 px и ширеПо горизонтали, 1200 px и ширеПо вертикали, 1200 px и шире

960–1199Колонки, 960–1199 pxПо горизонтали, 960–1199 pxПо вертикали, 960–1199 px

640–959Колонки, 640–959 pxПо горизонтали, 640–959 pxПо вертикали, 640–959 px

480–639Колонки, 480–639 pxПо горизонтали, 480–639 pxПо вертикали, 480–639 px

До 480Колонки, Меньше 480 pxПо горизонтали, Меньше 480 pxПо вертикали, Меньше 480 px

Максимальная ширина 1200 pxВнешний отступ 20 px

Акцент#7256dfКарточка#ffffffГраница#dedee6

Скругление 18 pxВнутренний отступ 20 pxПервая карточка крупнееКонтейнер от 640 px, 2+ колонки. Фото — 16:9.Одинаковая высотаКарточки в пределах одной строкиКнопки по нижнему краюВ блоках с нативными кнопками

Предпросмотр

TE220 · родная разметка Tilda

LIVE

ИЗМЕРЯЕМ КОНТЕЙНЕР

3 карточки2 колонки · 16 / 16 pxК живому блоку ↓

ГОТОВО К УСТАНОВКЕ

Ваш код уже собран.

Применяем параметры к выбранному нативному блоку.

Что скопировать

Посмотреть готовый код АВТОНОМНЫЙ JS + ПАРАМЕТРЫ

Полный код для блока T123

Один готовый скрипт. Тот же движок, что в предпросмотре, без интерфейса конфигуратора.

02 / УСТАНОВКАТри шага в редакторе Tilda

Контент — в Tilda.
Ритм — под вашим контролем.

01
Добавьте родной блок
CL49, TE220, SV402 или TM102. Тексты, фото, ссылки и кнопки редактируйте в его «Контенте» как обычно.
02
Выберите точную цель
В настройках блока → CSS Class Name укажите aw-grid, если префикс uc- уже показан. Итоговый класс: uc-aw-grid.
03
Вставьте и опубликуйте
Добавьте T123 после карточек, вставьте код целиком и опубликуйте. Проверьте ширину контейнера, длинные тексты и работу ссылок.

В Tilda уже есть нативные сетки. Эта модификация добавляет общий набор адаптивных параметров для четырёх проверенных структур, независимые настройки блоков и увеличенную первую карточку. Без переноса контента в HTML.

ПРОВЕРЕННЫЕ СТРУКТУРЫ

Четыре блока.
Один принцип.

CL49 / t822TE220 / t772SV402 / t853TM102 / t537

Поддержка проверяется по реальному DOM, не только по названию. Магазин, CMS / Потоки, слайдеры и Zero Block с autoscale не поддерживаются в этой версии. Autoscale должен быть выключен и у стандартных блоков.

Не меняйте служебные классы t…, data-атрибуты и механизм запуска. Для разных сеток используйте отдельные классы, ID или overrides. Изменения контента в Tilda подхватываются после публикации и перезагрузки. Динамическая вставка карточек скриптом требует интеграции API: сохраните возвращённый контроллер и вызовите его refresh().

03 / ЖИВЫЕ БЛОКИИсходный контент в редакторе

Та же механика.
На настоящей странице.

Ниже — четыре штатных блока, добавленных в редакторе Tilda. Выберите семейство в конфигураторе: изменения получит только соответствующий блок. Остальные сохранят свои настройки. Тексты и изображения — исходный контент блоков, а не отдельная HTML-демонстрация.

Идея и структура

Сетка помогает расставить акценты. Первая карточка может занимать две колонки, а остальные сохраняют естественный порядок.
Длинный заголовок: проверка переноса без обрезки текста

Карточки сохраняют весь контент. Короткий абзац и подробное описание могут соседствовать в одной строке: высота выравнивается, текст переносится естественно, а содержимое редактируется в стандартной панели Tilda. Этот пример специально длиннее остальных.
Нативный контент

Меняйте текст в Tilda. Модификация отвечает за сетку и оформление.
Проверка новой карточки

Этот элемент добавлен через штатную панель. Сетка подхватит его после публикации без правки кода.

Our Best Products

It is not sufficient to see and to know the beauty of a piece. We must feel it and be affected by it.

Product 1

It is a form of solution-based thinking with the intent of producing a constructive future result

Подробнее

Настроить

Product 2

Graphic design is the process of visual communication and problem-solving

Предпросмотр

Ваш код уже собран.

Контент — в Tilda.Ритм — под вашим контролем.

Добавьте родной блок

Выберите точную цель

Вставьте и опубликуйте

Четыре блока.Один принцип.

Та же механика.На настоящей странице.

Контент — в Tilda.
Ритм — под вашим контролем.

Четыре блока.
Один принцип.

Та же механика.
На настоящей странице.