Webflow Crash Course

Explore

Модуль 2, Урок 1: Webflow CMS, динамічний контент та налаштування SEO

Цей урок присвячений Webflow CMS та розгляду можливостей. Ми розглянемо, як створювати та налаштовувати колекції, використовувати їх на веб-сторінках та налаштовувати шаблони сторінок колекцій. Крім того, ми розглянемо різні типи взаємодії з колекціями, такі як фільтрування або сортування.

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

Нарешті, ми розглянемо конфігурацію SEO та встановлення GTM скриптів для покращення видимості веб-сайту в пошукових системах.

Вступ до Webflow CMS:

Почніть з пояснення поняття системи управління контентом (CMS) та її значущості у веб-розробці використовуючи Webflow.

Обговоріть переваги використання CMS як для розробників, так і для клієнтів.

Створення та налаштування колекцій:

Покажіть студентам процес створення колекцій у Webflow.

Поясніть, як визначити поля колекції та їх типи даних.

Демонструйте, як налаштувати параметри колекції, включаючи можливості сортування та фільтрації. (Sort order using numbers input)

Використання колекцій на веб-сторінках:

Покажіть студентам, як додавати динамічний контент на веб-сторінки за допомогою колекцій.

Надайте приклади того, як динамічний контент може бути використаний для блогів, портфоліо та списків продуктів.

Налаштування шаблонів сторінок колекцій:

Поясніть поняття шаблонів сторінок колекцій та їх роль у відображенні окремих елементів колекції.

Покажіть, як проектувати та налаштовувати шаблони сторінок колекцій.

Підкресліть гнучкість шаблонів сторінок колекцій для різних типів контенту. (Condition state for cms items on the collection item page)

Дослідження різних типів інтеракції з колекціями:

Представте студентам розширені можливості взаємодії з колекціями. (Multi Reference)

Заохочуйте експериментувати з цими функціями, щоб створювати більш інтерактивні веб-сайти.

Вступ до режиму редактора для клієнтів:

Поясніть переваги режиму редактора Webflow для клієнтів та редакторів контенту.

Покажіть, як налаштувати доступ до редактора та дозволи.

Надайте огляд режиму редактора, включаючи редагування та публікацію контенту.

Налаштування SEO, мета даних та встановлення скриптів GTM:

Обговоріть важливість SEO (оптимізація для пошукових систем).

Поясніть, як додати GTM на проєкт Webflow.

Розгляньте налаштування сторінки.

Домашнє завдання:

Відкрийте проєкт Webflow над яким ви працюєте;

Відкрийте панель колекцій

Створіть нову колекцію з категоріями блогу і додайте категорії котрі є у фігмі

Створіть нову колекцію додаючи наступні поля:

Date

Image // Card

Image // Hero

Main Content

Reference, using Blog Categories

Number – Sort Order

Додавши нову сторінку додайте навігацію, футер і секцію з майбутнім блогом

В новоствореній секції додайте Collection List елемент, повторюючи для кожної категорії

Використовуючи Filters налаштуйте для кожної категорії відображеня обʼєктів

Додайте майбутній темлпейт картки використовуючи дизайн в фігмі

Привяжіть елементи картки до колекції (Наприкдад назва до Name, картинка до Image // Card) в тому числі додайте посилання на сторінку обєкту

Зайдіть на темплейт сторінки блогу

Додайте навігацію, футер і секцію з майбутнім контентом

В новоствореній секції додайте елементи пикористоуючи дизайн в фігмі

Звяжіть елементи з колекцією

Використовуючи панель пристроїв налаштуйте відображення контенту для Tablet / Mobile

Підготуйте Гугл Документ для клієнта – Як взаємодіяти з проєктом Webflow

Критерії перевірки:

У проєкті створена колекція та налаштована у відповідності з ТЗ

Дизайн загальної сторінки яка містить колекцію відповідає файлу Figma та елементи колекції звʼязані з полями колекції

Дизайн обʼєкту колекції відповідає файлу Figma та елементи обʼєкту звʼязані з полями колекції

Дизайн сторінок адаптований під мобільне розширення

Якщо виникають складності – надається посилання на готову сторінку проєкту Webflow другої ітерації та сторінку Webflow Preview.

Розділ – Елементи

Collection List: Collection List (список колекцій) - це компонент в Webflow CMS, який дозволяє відображати динамічний контент з колекцій даних. Він дозволяє веб-розробникам створювати повторювані блоки або списки, що базуються на даних з колекцій, таких як блоги, товари, елементи портфоліо тощо. Кожен елемент списку автоматично оновлюється, коли дані в колекції змінюються.

Розділ – Основні поняття

Webflow CMS: Webflow CMS - це система управління контентом, яка використовується в Webflow. Вона дозволяє веб-розробникам та дизайнерам створювати, редагувати та публікувати веб-сторінки з динамічним контентом, таким як блоги, портфоліо, новини тощо, без потреби в програмуванні.

Condition State: Condition State (стан умови) - це властивість або стан елемента, який залежить від певних умов або параметрів. Він може використовуватися для керування відображенням, стилем або функціональністю елемента в залежності від певних умов.

Designer Mode: Designer Mode (режим дизайнера) - це режим роботи в Webflow, який дозволяє користувачам створювати та редагувати дизайн веб-сторінок. У режимі дизайнера можна налаштовувати макети, стилі, взаємодії та інші аспекти дизайну без потреби в програмуванні.

Editor Mode: Editor Mode (режим редактора) - це режим роботи в Webflow, який дозволяє користувачам редагувати вміст веб-сторінок, створених у режимі дизайнера. У режимі редактора можна змінювати текст, зображення, вміст форм та інші елементи на веб-сторінці без потреби в програмуванні.

SEO: SEO (Search Engine Optimization) - це процес оптимізації веб-сторінок для покращення їх видимості та рейтингування на пошукових системах. Включає в себе використання ключових слів, метатегів, які описують вміст сторінки, збільшення швидкості завантаження сторінок та інші техніки для покращення органічного трафіку на веб-сайті.

Meta Title: Meta Title (мета-заголовок) - це HTML-етикетка, яка використовується для визначення заголовка сторінки, що відображається у результатах пошуку. Він також може використовуватися як заголовок вкладки браузера. Мета-заголовок повинен бути зрозумілим, змістовним та містити ключові слова, що відповідають вмісту сторінки.

Meta Description: Meta Description (мета-опис) - це HTML-етикетка, яка використовується для визначення короткого опису сторінки, що відображається у результатах пошуку. Мета-опис повинен чітко і змістовно описувати вміст сторінки, зацікавлювати користувачів та містити ключові слова, що відповідають тематиці сторінки.

OpenGraph Image: OpenGraph Image (зображення OpenGraph) - це зображення, яке використовується для представлення сторінки під час поширення на соціальних мережах, таких як Facebook, Twitter, LinkedIn і т.д. Це зображення встановлюється за допомогою мета-тегу OpenGraph і повинно бути відповідним розміром та якістю для оптимального відображення у спільноті.

Favicon: Favicon (фавікон) - це невелике іконка, яка використовується для ідентифікації веб-сайту. Вона зазвичай відображається в адресному рядку браузера, в закладках та на пошукових сторінках. Фавікон може бути зображенням, логотипом або символом, який відповідає бренду або тематиці веб-сайту. Використання фавікону допомагає підвищити впізнаваність та професійний вигляд веб-сайту.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.