Webflow CMS: Функционал и юзабилити.
Всем привет! Сегодня поделюсь своим личным опытом о взаимодействии с CMS Collection Webflow и каким образом это может сэкономить вам уйму времени при вёрстки сайта, особенно если речь идёт о множестве шаблонных страниц!
Начну с того, что CMS-коллекции на Webflow, доступны даже на бесплатном тарифе, но конечно, ограничены в количестве. Одна коллекция может содержать не более 30 полей с содержимым которое вы выберете из списка.
Какие поля может содержать CMS коллекция?
- Plain Text - просто обычный текст тот же параграф {тег p)
- Rich Text - изображение с текстом
- image - изображение
- Multi - Image - несколько изображений
- Video link - ссылка на видео
- Link - ссылка
- Email - Емаил
- Phone - номер телефона
- Number - порядковый номер
- Data Time - Время и дата (имеется небольшой нюанс в поле ввода даты: формат её ввода несколько непривычен "ММ/ДД/ГГ" не ошибитесь иначе Webflow выдаст ошибку)
- Switch - переключатель (удобная функция, для того чтобы к примеру отделить проекты которые будут отображаться на главной странице, а какие нет)
- Color - цвет (Можно сделать как цвет фона так и цвет текста)
- Option - опции: (Представьте, что вы создаете сайт с фотографиями котиков. В Webflow CMS есть специальный инструмент - "Поле опций". С его помощью вы можете создать список пород котиков: "Сиамская", "Шотландская", "Персидская" и т.д. Когда вы добавляете новую фотографию котика на сайт, вы можете выбрать одну из этих пород из списка. В результате, на сайте будут отображаться только те котики, которые относятся к выбранной породе. Например, если вы выбрали "Шотландскую", то на сайте будут показаны только шотландские котики. Также, вы можете использовать "Поле опций" для того, чтобы скрыть или показать определенные элементы на сайте. Например, если вы выберете "Шотландская", то на сайте появится дополнительная информация про эту породу.)
- File - добавление файлов (поддерживает следующие типы файлов:
Изображения:
PNG, JPEG, JPG, GIF, BMP, SVG, WebPВы также можете загрузить шесть типов документов:
PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV, ODT, ODS, ODP - Reference - Представьте, что вы создаете сайт с рецептами. В Webflow CMS есть "Reference field", поле которое позволяет "связать" рецепт с автором.
Вы можете создать отдельную коллекцию с информацией о авторах, а затем, добавляя рецепты, выбрать нужного автора из этой коллекции.
Если вы обновите информацию об авторе (например, измените его фотографию), то эти изменения автоматически отразится на всех рецептах, которые связаны с этим автором. - Multi Reference - Представьте, что вы создаете сайт с картинками животных. У вас есть две коллекции: "Животные" и "Категории".
"Поле Multi Reference" позволяет вам привязать одну картинку животного к нескольким категориям сразу. Например, картинка кошки может быть привязана к категориям "Домашние животные", "Млекопитающие" и "Кошки".
Когда вы создаете список животных на сайте, вы можете отфильтровать его по категориям, и увидеть только животных, принадлежащих к выбранной категории. Это очень удобно, когда вы хотите разделить всех животных по группам или сделать на сайте разные разделы.
Добавление новых проектов для создания страниц
При нажатии на созданную вами CMS коллекцию вы можете добавлять новые "проекты" наполнение которых будет использоваться при создание структуры страниц.
При создании нового "проекта" открывается окно с полями которые вы выбрали при создании cms коллекции. Заполняем и публикуем изменения.
Как создать страницу с использованием созданной cms коллекции?
У каждой созданной cms коллекции есть своя страница. Её мы можем увидеть в списке страниц.
Выбираем нужную нам страницу и добавляем необходимые нам элементы: блоки, заголовки, текста картинки и нажатием на шестерёнку выбранного элемента подключаем нужную cms коллекцию и нужный пункт из которого необходимо подгружать контент .
Итог:
Как вы могли увидеть разобраться с CMS коллекциями на Webflow не так сложно как кажется на первый взгляд. Надеюсь данная статья была для вас полезна!
Напишите в комментариях, какими CMS вы пользуетесь и как динамический контент помогает в разработке ваших сайтов?
Начать дискуссию