Курс "Сайт бровиста"

1. Обзор проекта

Рассмотрим какой сайт по функционалу будет собираться в курсе и какие возможности появятся у клиента после подключения его к CMS October

‍

2. Готовим проект к работе

Создадим проект в Webflow, подключим основные цвета и загрузим дизайн в Figma

‍

3. Верстка меню

Создадим проект в Webflow, подключим основные цвета и загрузим дизайн в Figma

‍

4. Верстка секции с заголовком сайта

В этом уроке сверстаем секцию с заголовком сайта. Верстку сделаем при помощи виджета Quick Stack, который понимает CMS October.

‍

5. Верстка секции Преимущества

В этом уроке мы сверстаем блок преимущества. Дополнительно вы научитесь адаптировать графику для ускорения загрузки сайта.

‍

6. Верстка секции Прайс

В этом уроке мы сверстаем прайс услуг мастера-бровиста. Важно, чтобы владелец сайта смог самостоятельно работать с прайсом в CMS October. То есть переставлять услуги местами и дописывать новые. Поэтому все услуги мы сверстаем с использованием вложения в DIV блоки.

‍

7. Верстка секции О мастере

В этом уроке мы сверстаем секцию о мастере-бровисте. В секции присутствует описание возможностей специалиста и мы сего сделаем при помощи виджера rich text. Для работы с большим объемом текста мы разработали для CMS October метку, которая позволяет задействовать редактор. Этим мы и воспользуемся при переносе этого блока.

‍

8. Верстка секции Галерея

В этом уроке мы сверстаем секцию галерея работ мастера. Вы на этом примере сможете изучить верстку нестандартной секции с использованием Quick stack. После переноса в CMS Oсtober, пользователь сайта сможем самостоятельно менять графику в этой секции

‍

9. Верстка секции Акция

В этом уроке мы сверстаем секцию с формой обратной связи. Форма будет в дальнейшем настроена на хостинге непосредственно в CMS October. Пользователь сайта сможет сам менять поведение формы. Например email, на который будут приходить данные. Дополнительно данные с формы будут сохраняться внутри CMS October.

‍

10. Верстка секции Отзывы

В этом уроке мы сверстаем секцию Отзывы. Верстка будет с использованием анимации и когда сайт будет перенесен на CMS October, то пользователь сайта сможет менять отзывы и добавлять новые. При этом анимация на новых блоках будет сохраняться.

‍

11. Верстка секции Конакты

Секция контакты примечательна тем, что мы добавим Яндекс карту при переносе на CMS October с бесплатного аккаунта Webflow. При этом карта будет адаптивная с настройками, которые мы укажем в DIV макете map.

‍

12. Верcтка Footer (подвала)

В этом уроке мы сверстаем footer (подвал) сайта. Элементы подвала и меню однотипно используются на многостраничных сайтах. В будущем обновлении конвертера мы планируем реализовать опции для повторяющихся элементов. В этом курсе мы меню и footer сделаем блоками.

‍

13. Верcтка страницы Политика конфиденциальности

В этом уроке мы сверстаем служебную страницу Политика конфиденциальности. Верстать мы будем в формате rich text, который потом подключим к редактору CMS October. В уроке показываю как настраивать стилистику заголовком и параграфов.

‍

14. Добавляем Favicon

В этом уроке мы создадим в Figma иконку Favicon для сайта и подключим ее. Это позволяет уникализировать сайт и убрать иконку webflow.

‍

15. Расставляем метки для конвертера CMS Octobe

Для того, чтобы конвертер понял как переписать сайт сверстанный в Webflow и подключить поля с настройками в CMS Oсtober, нужно расставить специальные метки. Метки устанавливаются в поле атрибуты внутри Webflow.

‍

16. Переносим сайт на CMS October

Мы расставили метки и теперь по ним конвертер перепишет сайт и подгрузить готовый пакет CMS October для инсталяции на хостинге.

‍

17. Управление сайтом на CMS October

В этом уроке мы настроим SEO параметры сайта и разберемся как происходит управление контентом. Вы попробуете поработать с гибким содержимым сайта.

‍

18. Настройка формы

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