Две колонки потоков на телефоне в Tilda: сетка и оформление карточек

Одна крупная карточка на всю ширину телефона не всегда удобна для длинного списка публикаций. Иногда две компактные колонки помогают быстрее просмотреть обложки и найти нужную тему.

Этот мод меняет сетку стандартных списков и сеток потоков, включая новые CMS-блоки. Он не предназначен для слайдера или каталога, свёрстанного в Zero Block. Разберём выбор блока и проверку читаемости узких карточек.

Подготовьте стандартный список или сетку потоков. В конструкторе выберите нужный FD- или CMS-блок, затем укажите его ID. Для нескольких блоков можно использовать общий CSS-класс.

Один ID относится к одному блоку. Не подставляйте в это поле список разных идентификаторов в надежде настроить всю страницу сразу. Слайдеры и Zero Block не поддерживаются. Сам факт, что карточки получают данные из CMS, ещё не делает любую их вёрстку подходящей: важно, каким блоком они выводятся на странице. Шаблон отдельной статьи при этом остаётся другой частью настройки.

Укажите максимальную ширину, до которой применяется оформление. Порог включается в диапазон: на экране ровно такой ширины мод ещё работает. Выше него остаётся исходная сетка Tilda.

Затем выберите количество колонок и промежутки. Две колонки — распространённый сценарий, но не обязательное значение. В этом конструкторе нет независимых режимов для телефона и планшета: выбранная настройка действует на всех экранах до заданного порога. Поэтому проверять нужно и самый узкий телефон, и область ближе к верхней границе включения.

Настройте фон, углы и нужные текстовые свойства в разделе карточки. Расстояние фотографии до края и до текста задаётся в разделе фотографии. Эти значения заменяют соответствующие внутренние отступы Tilda.

Если одновременно оставить много воздуха вокруг картинки и текста, в узкой колонке почти не останется места для содержимого. Начните со спокойной компактной карточки, затем примеряйте оформление на настоящих публикациях. Сравните карточку с коротким названием и материал с длинным заголовком. Они должны оставаться понятными без ручной подгонки каждого поста.

Отдельно проверьте фотографии, заголовки, описания, даты и категории. В двух колонках длинная строка начинает переноситься намного чаще. Не уменьшайте все надписи только ради того, чтобы карточки выглядели одинаковыми по высоте.

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

Вставьте полученный код в T123 после потоков и опубликуйте страницу. Если мод уже стоял раньше, замените прежнюю версию, чтобы один и тот же блок не оформлялся двумя разными наборами правил.

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

Откройте телефонную ширину, сам заданный порог и экран чуть шире него. Затем измените размер окна в обе стороны без перезагрузки.

• До порога применяется выбранное число колонок.
• Выше порога возвращается исходная сетка Tilda.
• Названия и даты читаются на самом узком экране.
• После загрузки дополнительных записей стиль не меняется.
• Нажатие на карточку открывает нужную публикацию.

Если список с двумя колонками неудобен для вашего содержания, одна хорошо оформленная колонка будет полезнее тесной сетки.

Читайте также: Сторис из потоков Tilda: как собрать ленту из готовых публикаций · Фильтр по дате в потоках Tilda: календарь и диапазон дней.