Инструкция для первого знакомства с Webflow. Она не сделает из вас верстальщика за час, но проведёт через путь от пустого проекта до опубликованной страницы и объяснит, на что смотреть в редакторе. Работайте на компьютере с большим экраном: в редакторе одновременно открыты структура страницы, сама страница и панель настроек, на ноутбуке с маленькой диагональю тесно.
Зарегистрируйтесь и создайте проект
Откройте webflow.com, заведите аккаунт по адресу электронной почты и подтвердите его по ссылке из письма. В личном кабинете создайте новый проект. На выбор дают пустой холст или шаблон; для учёбы полезнее взять шаблон и разобрать, из чего он собран, а свой сайт потом начать с чистого листа.
Пройдите встроенные уроки
Сервис предлагает серию коротких уроков прямо в редакторе: как добавить блок, как работают отступы, что такое класс. Не пропускайте их. Полчаса здесь экономят несколько вечеров борьбы с тем, почему картинка не встаёт туда, куда нужно.
Соберите структуру страницы
Страница в Webflow — это вложенные контейнеры. Сначала расставьте крупные части сверху вниз, и только потом наполняйте их текстом и картинками. Для простой страницы услуги хватит такого набора:
- Шапка — логотип и меню из двух-трёх пунктов.
- Обложка — заголовок, одна поясняющая фраза и кнопка действия.
- Услуги — ряд из трёх карточек: заголовок, описание, цена.
- О себе или о компании — текст и фотография в две колонки.
- Контакты — телефон, почта, форма заявки.
- Подвал — копирайт и ссылка на политику обработки персональных данных.
Следите за панелью структуры слева: там видно, какой блок лежит внутри какого. Большая часть ошибок новичка — элемент оказался не в том контейнере, и потому отступы ведут себя странно.
Вынесите оформление в классы
Настроив первую карточку услуги, сохраните её оформление как класс с понятным именем и примените этот же класс к остальным карточкам. Дальше достаточно поправить класс один раз — изменятся все карточки сразу. Если каждый элемент настраивать отдельно, уже через неделю в проекте будет не разобраться.
Настройте вид на узких экранах
Вверху редактора переключайтесь между видами для компьютера, планшета и телефона. Правки, сделанные на широком экране, наследуются на узкие, а правки на узком — только вниз по цепочке. Поэтому сначала доводите до ума компьютерную версию, затем планшет, затем телефон. На телефоне обычно нужно уменьшить заголовки, превратить ряды карточек в столбик и убрать лишние отступы.
Заполните данные страницы
В настройках страницы задайте её адрес латиницей, заголовок и описание для поисковиков и картинку для ссылок в мессенджерах. Проверьте, что у всех изображений заполнено текстовое описание: это нужно и для поиска, и для людей, которые пользуются чтением с экрана.
Опубликуйте черновик и проверьте его
Нажмите публикацию и выберите служебный адрес сервиса. Откройте получившуюся ссылку в обычном браузере и на телефоне: в редакторе страница иногда выглядит иначе, чем в жизни. Пройдите по всем ссылкам и кнопкам, отправьте пробную заявку через форму.
Публикация на свой домен доступна после оплаты тарифа, а картами российских банков сервис не платят. Если домен подключить не получается, черновик на служебном адресе остаётся рабочим способом показать макет заказчику.
Если что-то пошло не так
Блок не встаёт туда, куда нужно.
Почти всегда дело во вложенности. Откройте панель структуры и проверьте, в каком контейнере лежит элемент. Перетащите его в нужный прямо в этой панели — так точнее, чем мышью по странице.
Правка поломала весь сайт сразу.
Вы изменили класс, который применён во многих местах. Отмените действие сочетанием клавиш отмены. Если нужно другое оформление только для одного элемента, создайте для него дополнительный класс, а не правьте общий.
На телефоне текст налезает друг на друга.
Переключитесь в вид для телефона и уменьшите размеры шрифтов и отступы именно там. Помните про наследование: правка на широком экране уйдёт и на узкий, а наоборот — нет.
Изменения не видны по опубликованной ссылке.
После каждой правки публикацию нужно нажимать заново. Если нажали, обновите страницу в браузере с очисткой кэша.
Не получается оплатить тариф.
Карты российских банков сервис не принимает, и обойти это в рамках правил нельзя. Для сайта, который должен работать на своём домене и приносить заявки, выбирайте площадку с оплатой в рублях.
Комментарии · 0
Комментариев пока нет — задайте вопрос первым.