Webflow CMS: как сделать блог или каталог

Короткий ответ

Webflow CMS работает по простой схеме:

1. Коллекция — тип контента: статьи, товары, кейсы.
2. Поля — из чего состоит каждая запись: заголовок, обложка, текст, цена.
3. Шаблонная страница — один макет, по которому Webflow генерирует страницу для каждой записи.
4. Collection List — блок, который выводит записи на любой странице: в ленте блога, на главной, в каталоге.

Дизайн вы делаете один раз, дальше контент-менеджер просто добавляет записи.

Шаг 1. Спроектируйте структуру

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

• Статьи — заголовок, slug, обложка, краткое описание, текст, дата, автор, категория.
• Категории — название, slug, описание.
• Авторы — имя, фото, должность.

Для каталога: Товары, Категории, иногда Бренды. Выносите в отдельную коллекцию всё, что повторяется и может иметь свою страницу. Это избавит от переделок, когда записей станет много.

Шаг 2. Создайте коллекцию и поля

В панели CMS нажмите создание новой коллекции, задайте название в единственном и множественном числе и базовый адрес (например, /blog). Поля Name и Slug создаются автоматически.

Основные типы полей:

Отмечайте обязательные поля как required и добавляйте подсказки (help text) — это сильно снижает число ошибок у редакторов.

Шаг 3. Оформите шаблон записи

У каждой коллекции есть Collection Template Page. Сверстайте её как обычную страницу, а затем привяжите элементы к полям: заголовок — к Name, картинку — к обложке, текстовый блок Rich text — к телу статьи. В настройках элемента это делается через привязку к полю коллекции.

Не забудьте про SEO-настройки шаблона: title и description тоже можно собирать из полей записи, например из заголовка и краткого описания.

Шаг 4. Выведите записи через Collection List

Добавьте на страницу элемент Collection List, выберите коллекцию и оформите одну карточку — остальные повторятся автоматически. В настройках списка доступны:

• сортировка — по дате, названию, любому полю;
• лимит и смещение — например, показать три последние статьи на главной;
• пагинация — для длинных лент;
• фильтры — какие записи показывать.

Фильтрация и поля-ссылки

Фильтры в Collection List задаются в редакторе: «Избранное включено», «Категория равна X», «Дата позже текущей». На шаблонной странице можно выбрать фильтр по текущей записи — так строятся блоки «Другие статьи этой категории» или «Похожие товары».

Поле Reference связывает запись с одной записью другой коллекции (статья → автор), Multi-reference — с несколькими (товар → несколько тегов). Благодаря связям у категории появляется своя страница со списком статей, а внутри списка можно выводить данные связанной записи — имя автора, название категории.

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

Лимиты тарифов

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

Доступ для контент-менеджеров

Редакторам не нужен доступ к дизайну. В Webflow для них есть ограниченные роли: можно добавлять и редактировать записи CMS и тексты на страницах, сохранять черновики и планировать публикацию, но нельзя сломать вёрстку и стили. Количество мест для редакторов зависит от тарифа.

Записи можно импортировать из CSV, а для синхронизации с внешними системами есть CMS API.

Частые ошибки

• Складывать всё в одно Rich text поле вместо отдельных полей — потом невозможно сделать фильтры и карточки.
• Хранить категорию как текст, а не как Reference, — опечатки дробят категории.
• Не задать alt-тексты и SEO-поля в шаблоне.
• Не проверить лимиты тарифа до наполнения каталога.