Блог дизайнера · Tilda

Разбираю новые Потоки в Tilda на живом примере: как подключить CMS, настроить свои поля, вывести каталог в готовый блок и собрать карточки в Zero Block на автолейауте. Внутри — видео, скриншоты и настройки, которыми я пользуюсь сам.

Потоки — это встроенная CMS Тильды: в админке вы заполняете каталог, а на сайте он выводится в готовый блок или в Zero Block. Так удобно вести:

• блог и новости;
• вакансии;
• команду и экспертов;
• примеры работ и кейсы;
• каталог услуг, мероприятий и отзывов.

Для товаров Потоки я пока не советую: у Tilda есть полноценный магазин с корзиной и оплатой, а для товарного каталога в Потоках, скорее всего, появятся отдельные функции. О возможностях магазина я подробно писал в статье «Интернет-магазин на Tilda: плюсы и минусы».

Главное отличие Потоков 2.0 от старой версии — свои поля с типами данных и вывод в Zero Block. По сути это уже полноценная система управления контентом, поэтому в меню она так и называется: «CMS и Потоки».

Создание потока: для новых возможностей выбирайте тип «Настраиваемый (CMS)»

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

Откройте поток. Если в меню слева есть пункт «Поля», вы в Потоках 2.0. Нет такого пункта — это старая версия.

Поток «Вакансии» из шаблона: шесть записей и пункт «Поля» в меню слева

В разделе «Поля» вы сами собираете структуру записи: заголовок, описание, изображение, текст с форматированием, выпадающий список, цвет и другие типы. У вакансии это, например, тип занятости, формат работы и город, а у сотрудника — должность и экспертиза. Каждое поле настраивается отдельно: у выпадающего списка задаются варианты, у текста — формат.

Настройка полей: у каждого свой тип данных. Потоков в проекте может быть сколько угодно, со своей структурой у каждого

Самый быстрый способ: создайте страницу и откройте Все блоки → Потоки и CMS. Там есть готовые блоки под разные задачи, например для команды или вакансий.

Категория «Потоки и CMS» в библиотеке блоков

Дальше всё как в обычных блоках Tilda: на вкладке «Контент» — что выводить, на вкладке «Настройки» — как это выглядит.

• В поле «Выводить поток» выберите свой поток.
• Сопоставьте поля. Восклицательный знак рядом с карточкой или подробной страницей значит, что поле для вывода не найдено. Например, в описание карточки выведите поле «Описание», а в подзаголовок поп-апа — тип занятости.
• В настройках меняйте вид списка, число карточек в ряду и оформление подробной страницы, которая открывается по клику.

Вкладка «Контент»: выбор потока и полей для карточки и подробной страницы

Самое интересное: в Zero Block карточки можно оформить как угодно, а данные подтянутся из базы сами. Вывод работает на автолейауте — это режим, в котором элементы сами выстраиваются в контейнере по заданным правилам. Вы настраиваете одну карточку, а изменения применяются ко всем остальным. Это сильно ускоряет работу, особенно адаптивную вёрстку.

1. Откройте Zero Block и удалите лишнее.
2. В меню добавления элементов выберите Feeds и нужный поток.
3. Откройте панель слоёв: Cmd+L на Mac или Ctrl+L на Windows.
4. Внутри плитки с постами работайте с первым постом: всё, что вы в нём поменяете, применится ко всем.

Например, если задать фото в первой карточке высоту 320 px, она станет такой у всех. А ширина поста 260 px при контейнере 1160 px даёт ровно четыре карточки в ряд.

Поток «Команда» в Zero Block: карточки собраны на автолейауте, слева — панель слоёв

Лимит в настройках — сколько записей выводить. Ширину контейнера можно сделать меньше, например 720 px, если рядом стоит форма. По высоте я оставляю режим Hug (контейнер обнимает содержимое), по ширине — фиксированное значение. Если задать фиксированную высоту, пригодится параметр Overflow: лишнее можно скрыть или прокручивать. У самого Zero Block тоже включите автоматическую высоту — тогда он всегда будет ровно по контенту.

Сортировка вывода: по имени, фото, любому полю или дате

Варианты пагинации: кнопка «Загрузить ещё» или бесконечная прокрутка

Здесь есть тонкость: в контейнере потока лежит всего один дочерний элемент — плитка с постами. Поэтому настраивать автолейаут нужно у неё, а не у самого контейнера.

• Направление: в строку с переносом (самый ходовой вариант), в одну строку без переноса или столбиком.
• Gap — отступы между карточками. По вертикали удобно ставить чуть больше, чем по горизонтали.
• Padding — внутренние отступы контейнера, нужны, если у плитки есть фон.
• Выравнивание — по левому краю, центру, правому краю или равномерно. На практике почти всегда хватает левого края.

При клике выделяется верхний слой. Чтобы провалиться внутрь, кликните дважды, как в Figma, или выберите элемент в слоях.

Настройки автолейаута у плитки с постами: направление, отступы, выравнивание

Ширину поста лучше делать фиксированной, а высоту — Hug. Тогда, если у кого-то имя займёт две строки, высота пересчитается сама, а отступ между рядами останется ровным. С фиксированной высотой длинный текст просто вывалится за карточку.

Каждый элемент внутри поста связан с полем из базы: фото — с изображением, текст — с именем, должностью или экспертизой. Добавьте текст, перетащите его внутрь поста — и он появится во всех карточках. Тексту внутри поста ставьте ширину Fill, чтобы он занимал всю ширину карточки.

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

Поле «Экспертиза» выведено в карточку и скрыто на мобильной версии

Мне хотелось, чтобы должности отличались цветом: тестировщики одного, руководители другого, разработчики третьего. Для этого:

1. В потоке добавьте поле с типом «Цвет», например «Цвет должности», и задайте у каждой записи мягкий оттенок, на котором хорошо читается тёмный текст.
2. В карточку добавьте текст и выведите в него должность.
3. Оберните текст в группу (Cmd+G), включите у неё автолейаут и выберите фон из поля «Цвет должности».
4. Добавьте плашке небольшие отступы и скругление.

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

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

Переключитесь на мобильный брейкпоинт и поменяйте ширину поста, например на 300 px, отступы и размеры текста. Всё применится ко всем карточкам сразу, поэтому мобильная вёрстка каталога занимает минуты, а не часы. Проверьте, что у поста стоит высота Hug, а отступы контейнера выровнены по краям экрана.

Мобильная версия: меняем ширину одного поста — перестраиваются все

После публикации проверьте каталог на реальных устройствах. Как это сделать быстро, я расписал в чек-листе тестирования сайта перед запуском.

Функция новая, и на момент записи видео я столкнулся с такими моментами:

• часть изменений применяется только к первой карточке, пока не обновишь плитку;
• настройки высоты иногда слетают после сохранения;
• анимация по наведению срабатывает сразу на всех карточках, а не на той, на которую навели. Из-за этого не получается эффект, когда чёрно-белое фото при наведении становится цветным. Я отправил в Tilda баг-репорт.

Если хотите разобраться в Zero Block и автолейауте с нуля, загляните в мой курс по Tilda, а живые примеры сайтов смотрите в портфолио.

Чем Потоки 2.0 отличаются от старых Потоков?
В новых Потоках можно создавать свои поля с разными типами данных и выводить каталог в Zero Block. Старые потоки остаются информационными: новости и блог с фиксированным набором полей.

Можно ли перенести старый поток в Потоки 2.0?
Да: выгрузите записи в CSV или XML и загрузите их в новый настраиваемый поток.

Подходят ли Потоки для каталога товаров?
Пока лучше использовать встроенный магазин Tilda: в нём есть корзина, оплата, остатки и выгрузка на маркетплейсы.

Как вывести поток в Zero Block?
Откройте Zero Block, добавьте элемент Feeds и выберите поток. Дальше настраивайте первую карточку — изменения применятся ко всем.

Можно ли скрыть поле только на мобильной версии?
Да. Переключитесь на мобильный брейкпоинт и в разделе Visibility выберите Hide у нужного элемента.

Хотите делать такие сайты сами?

Базу Tilda, Zero Block и автолейаут можно освоить на моём курсе. А если времени нет — сделаю сайт за вас.