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

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

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

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

В конструкторе укажите ID блока со статьями или общий класс нескольких блоков. Поддерживаются Потоки, новая CMS и статьи Zero. Откройте каждую историю и сравните её с исходной публикацией, особенно если недавно меняли адреса.

Каждая статья может быть отдельной миниатюрой. Если нужна одна обложка на раздел, включите «Объединять истории по разделам». Названия разделов берутся из Tilda, поэтому сначала приведите их в понятный порядок.

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

Режим загруженных карточек использует текущую выдачу и добавляет истории после «Показать ещё». Режим всех статей источника загружает доступный поток независимо от выбранной рубрики.

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

По умолчанию миниатюры появляются над публикациями. Для своего места в Zero добавьте шейп без заливки с CSS Class Name stories-feed и выберите размещение в шейпе. Шейп и статьи должны находиться в одном выбранном блоке.

Задайте достаточно ширины и высоты на нужных адаптивах. Окно просмотра открывается поверх страницы. Лента миниатюр и само окно — разные части, поэтому проверяйте положение обложек отдельно от размеров открытой истории.

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

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

1. Выберите источник, группировку и состав историй.
2. Настройте размещение ленты и вид окна.
3. Проверьте размеры, внешние отступы и управление на адаптивах.
4. Вставьте код в T123 после блоков статей и опубликуйте страницу.
5. Откройте истории, перейдите к статье и проверьте подгрузку карточек.

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

Читайте также: Меню в Tilda: Zero Block, фиксация и Atelier · Галерея как в Pinterest на Tilda: сетка и увеличение фото.