Webflow

Webflow — онлайн-сервис, в котором сайт верстают мышью, но по тем же правилам, по которым это делают разработчики. Компания Webflow Inc. развивает его с 2013 года. Вы расставляете на странице контейнеры, задаёте им отступы, выравнивание и поведение на разных экранах, а сервис сам превращает это в обычную веб-страницу.

Главное отличие от простых конструкторов вроде Tilda — вы работаете не с готовыми полосами-блоками, а с устройством страницы: контейнерами, их вложенностью, классами оформления. Поэтому Webflow даёт почти ту же свободу, что и ручная вёрстка, и поэтому же он заметно сложнее: без представления о том, как устроены веб-страницы, первые часы в редакторе проходят тяжело. Это инструмент скорее для дизайнера и веб-студии, чем для владельца небольшого бизнеса, который хочет сайт за вечер.

Что умеет Webflow

• Визуальный редактор вёрстки — элементы складываются в структуру, у каждого есть панель с размерами, отступами, шрифтами и цветами. Изменения видно сразу, а панель структуры показывает, что во что вложено.
• Классы оформления — набор настроек можно сохранить как класс и применить к десяткам элементов. Поправили класс — изменились все элементы разом, как в обычной вёрстке.
• Отдельный вид для каждого экрана — для планшета и телефона задаются свои размеры шрифтов и расположение блоков, причём правки наследуются от широкого экрана к узкому.
• CMS-коллекции — свой набор записей: статьи блога, проекты портфолио, товары, сотрудники. Вы описываете поля один раз, делаете шаблон страницы, а дальше записи добавляются как в таблице.
• Анимации и взаимодействия — появление блоков при прокрутке, реакция на наведение, последовательные движения элементов. Настраивается в редакторе, без написания скриптов.
• Магазин — каталог товаров, корзина и оформление заказа на платных торговых тарифах.
• Хостинг и домен — опубликованный сайт лежит на серверах сервиса, защищённое соединение и ускорение раздачи включены; домен покупается отдельно и привязывается в настройках.
• Экспорт кода — на части платных тарифов готовую вёрстку можно выгрузить файлами и разместить на своём хостинге. Сайты с CMS-коллекциями так не выгружаются целиком.
• Совместная работа — к проекту приглашают коллег и клиентов; для правок текста есть отдельный упрощённый режим, где нельзя случайно сломать вёрстку.

Кому подходит

• Дизайнерам, которые нарисовали макет и хотят сами собрать по нему рабочий сайт.
• Небольшим студиям и фрилансерам, делающим сайты клиентам под ключ, с передачей правок текста заказчику.
• Компаниям с нестандартным дизайном, который не ложится в готовые блоки обычного конструктора.
• Авторам портфолио и сайтов-презентаций, где нужны аккуратная анимация и необычная сетка.
• Тем, кто изучает вёрстку: в редакторе хорошо видно, как устроены отступы, выравнивание и поведение блоков.

Не подойдёт Webflow тем, кому нужен сайт быстро и без изучения инструмента: здесь нет кнопки «собрать визитку за час», и даже простая страница требует понимания структуры. Плохо подходит он и для российского бизнеса: интерфейс и поддержка только на английском, подписку картой российского банка не оплатить, а данные посетителей лежат на зарубежных серверах. Крупному магазину с обменом данными с учётной системой тоже разумнее смотреть на другие решения.

Сколько стоит

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

Платные тарифы делятся на две группы. Одни привязаны к конкретному сайту и позволяют опубликовать его на своём домене, добавить CMS-коллекции или магазин. Другие привязаны к аккаунту и нужны командам: доступ нескольким людям, режим правки текста для клиента, передача проектов. Суммы зависят от набора возможностей и от того, платите вы помесячно или за год; смотрите их на webflow.com. Для пользователя из России решающее ограничение не в цене: карты российских банков сервис не принимает.

Как начать пользоваться

1. Откройте webflow.com и зарегистрируйтесь по адресу электронной почты, подтвердите его по ссылке из письма.
2. Создайте проект: пустой или из готового шаблона. Для первого знакомства лучше взять шаблон и разобрать, как он собран.
3. Пройдите встроенные уроки — сервис предлагает их при первом входе, и они экономят много времени.
4. Соберите главную страницу: контейнеры, заголовки, картинки, кнопки. Сохраняйте настройки как классы, а не правьте каждый элемент отдельно.
5. Проверьте вид на узких экранах и опубликуйте проект на служебный адрес, чтобы посмотреть результат в обычном браузере.

Частые вопросы