Обзор конструктора сайтов Webflow

Webflow – это онлайн-конструктор от американского стартапа, рассчитанный на опытных и продвинутых пользователей, которым нужна максимальная свобода при создании уникальных web-дизайнов. Платформа запущена в 2013 году, основной офис расположен в Сан-Франциско (Калифорния, США).

Свои первые инвестиции компания получила от акселератора стартапов Y-Combinator, а позже – от других частных инвесторов. Сейчас это очень крупный и перспективный игрок рынка, прямой конкурент Wix, Squarespace и Weebly.

Несмотря на то, что конструктор позволяет работать без погружения в HTML-код, он идеально подходит для профессиональных дизайнеров и web-агентств, которые занимаются разработкой небольших типовых сайтов для клиентов: лендинги, корпоративные блоги, малостраничные интернет-магазины, сайты-визитки, портфолио и т.п.

Основные фишки – редактор с возможностями web IDE (программная среда разработки) и полноценный экспорт кода (вы можете создавать здесь вариант дизайна и выгружать его в HTML/JS).

Будет тяжёлым в освоении для новичков. Слабо адаптируется для российского рынка, так как имеющиеся интеграции и поддерживаемые платёжные решения не совместимы с популярными в РФ.

На Webflow действительно не обязательно писать код. Однако разбираться в нём — крайне полезный навык, если вы не хотите забросить конструктор после пары часов изучения. Поэтому мы бы определили Webflow как ПО для создания сайтов для профессиональных дизайнеров, которые прекрасно себя чувствуют в графических редакторах и одновременно знакомы с основами вёрстки.

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

Главное впечатление после работы с Webflow — он представляет собой нечто среднее между конструкторами сайтов типа Wix и мощными движками вроде WordPress. Из этого обзора вы узнаете, какие возможности даёт такая непривычная для SaaS-сервиса функциональность.

Webflow
  • Идеален для профессиональных web-дизайнеров
  • Есть возможность экспортирования кода
  • Огромный выбор готовых профессиональных макетов для быстрого старта

Плюсы и минусы

Конструктор Webflow выглядит шикарно, в нём действительно можно создавать оригинальные (нестандартные) и эффектные современные сайты. Но у всего есть обратная сторона. В данном случае – это сложность.

Ниже — более подробный список всех основных достоинств и недостатков платформы.

Плюсы:
Минусы:
Каталог готовых шаблонов разной тематики и функционала от профессиональных дизайнеров.
Примеры сайтов в сообществе, которые можно скопировать (опять же для быстрого старта).
Внутри конструктора есть комплексные секции и исчерпывающий набор мелких элементов.
Дружелюбное сообщество и обучающие курсы.
Полностью бесплатный тариф для изучения возможностей платформы.
Возможность коллективной работы над сайтом с разделением ролей и согласованием правок.
Встроенный конструктор форм и логики их обработки.
Бесплатные безлимитные бэкапы.
Настраиваемый CMS-функционал – полный контроль над данными и их коллекциями.
Модуль магазина (каталог и корзина, онлайн-платежи).
Модуль для ведения блогов (как часть CMS-функционала).
API для профессионалов.
Защита от DDoS и интеграция с CDN-сетями.
Экспорт кода (выгрузка сайтов).
Специальные функции для web-агентств и фрилансеров (можно управлять сайтами клиентов).
Бесплатные SSL-сертификаты (автоматическая HTTPS-версия сайта).
Генерация SEO-заголовков может производиться по шаблонам (с задействованием переменных).
Возможность загрузки своих файлов шрифтов, интеграция с сервисами Google Fonts и Adobe Fonts.
Простой механизм запуска сплит-тестирования на базе Google Optimize.
Отдельный интерфейс для редакторов, который позволяет править контент без нарушения макетов/вёрстки.
Большой каталог внешних сервисов для интеграции (для подключения дополнительных функций).
Многие профессиональные шаблоны — платные, и цены не самые низкие по рынку.
Скачать можно далеко не все примеры сайтов, а только те, владельцы которых разрешили это делать. Таких немного (обычно это предложения профессиональных дизайнеров, примеры работ).
В онлайн-редактор нельзя обратно загрузить экспортированный HTML-код. Вставка произвольно кода реализована только на уровне отдельных embed-блоков.
Всё на английском языке (интерфейс, документация, видео, техподдержка).
Очень сложная тарификация с разбивкой по функциям для хостинга сайтов, по возможностям управления проектами, плюс, отдельные опции для интернет-магазинов.
Встроенный магазинный модуль не подходит для работы с российскими клиентами (из-за интеграций и поддерживаемых платёжных систем).
Интерфейс редактора сложный и тяжёлый для обучения – он изначально рассчитан на профи.
Много различных технических ограничений по хостингу, причём лимиты зависят от текущего тарифа: объём трафика и количество элементов в базе данных, количество страниц, запросы по API и т.п.
Безлимитных тарифов нет (очень легко упереться в ограничения при высокой посещаемости).
CMS-функционал фактически придётся создавать вручную (есть только базовые наборы данных и логика их обработки).
Блог без профильных знаний запустить будет очень сложно, так как он напрямую связан с CMS-функциями.
Цены максимально высокие по рынку, плюс, расходы суммируются по разным категориям (отдельно Workflow-подписка, отдельно подписки по хостингу для каждого сайта + опции для интернет-магазина + опции по обработке web-форм).
Бесплатный тариф подходит только для тестирования возможностей, запустить на нём рабочий сайт на своём домене нельзя.
Нет мобильных приложений (для удобного управления магазином или для получения оперативных уведомлений с сайта/из форм).
Нет каталога модулей/расширений. То есть нельзя добавить какие-либо маркетинговые функции, редакторы видео и другой дополнительный функционал. Почти все интеграции реализуются за счёт вставки кода или API.
Нет конструктора логотипов.
Сложная настройка мобильной версии сайта.
Нет интеграции с библиотеками изображений/иконок.

Как можно заметить из таблицы, многие минусы связаны со сложностью тарификации и освоения/использования конструктора новичками. Всё это напрямую зависит от особенностей платформы Webflow и от аудитории, на которую она рассчитана. Можно сказать, что такова специфика.

Платформу тяжело будет использовать для создания и ведения проектов под российский сегмент рынка. Но при определённом усердии это возможно (с задействованием API и некоторых других вспомогательных сервисов).

Для кого предназначен

Конструктор Webflow тяжело назвать дружелюбным или удобным для новичков. При этом он будет максимально интересен для профессиональных дизайнеров или web-агентств. Почему? Потому что это и есть целевая аудитория разработчиков данного сервиса.

Здесь всё рассчитано на то, чтобы качественные сайты можно было создавать без промежуточных макетов (например, без использования таких сервисов, как Figma или Canva). Вы формируете нужную вам сетку и расставляете внутри готовые элементы дизайна. Остальное система берёт на себя: генерацию чистого HTML/JS-кода, технический аудит, обеспечение адаптивной версии блоков, генерацию WebP-изображений, бэкапы, версионирование и т.п.

Для кого предназначен

Никаких фронтэнд-программистов, а если правильно настроить CMS-функционал хостинга, то и бэкенд-программисты не понадобятся. Как итог, сайты могут создаваться и обслуживаться только дизайнерами.

Не менее удобно работать в редакторе целой командой. Тогда правки будут согласовываться перед окончательным внедрением в рабочую версию макета.

Так как сайты легко экспортируются, вы сможете выбрать любой подходящий для себя хостинг или вообще переделать дизайн для работы со сторонней CMS-системой (сможете «натянуть» макет на любой движок).

Наличие встроенного хостинга с CDN-интеграцией – это скорее приятный бонус для тех, кому нужно получить качественный и беспроблемный хостинг, на котором можно содержать сайты, созданные для клиентов/заказчиков. Отсюда и такая интересная тарификация подписок конструктора.

Простота использования

С одной стороны, личный кабинет пользователя и общая панель управления Webflow мало чем отличаются от аналогичных решений конкурентов, поэтому никаких проблем здесь возникнуть не должно.

Но с другой стороны, когда вы открываете онлайн-редактор, становится понятно, что без профильных знаний будет очень тяжело разобраться. Внутри конструктора большое количество различных вкладок, а интерфейс с его боковыми панелями сильно напоминает интерфейс приложений от Adobe или профессиональные IDE для web-разработчиков.

Простота использования

Да, здесь есть элементы Drag&Drop, как в более простых и понятных онлайн-конструкторах, но управление конструктором Webflow заметно сложнее. Есть различные менеджеры стилей, навигаторы по элементам, коллекции баз данных, файловый менеджер (для работы с хранилищем изображений и статических файлов) и т.п.

Хотя профи быстро разберутся, что и для чего нужно.

С чего начать

Начать использование платформы нужно с создания аккаунта. Благо, стартовый тариф абсолютно бесплатный и не ограничен по времени использования – это лучшее решение для тестирования возможностей сервиса.

Регистрация осуществляется по стандартным шагам:

  • Вы указываете своё имя и фамилию, email и пароль (используйте сложные комбинации).
  • Обратите внимание, система не требует проверки email сразу, так что убедитесь в том, что вы правильно указали электронную почту. Система всё равно допустит вас к личному кабинету.
  • Код активации email приходит заметно позже.
  • Специальный скрипт задаст вам несколько вопросов и попросит подписаться на рассылки.
  • Одним из последних шагов будет выбор нужного вам типа сайта (блок, портфолио и т.п.). От него будет зависеть стартовый пресет.

Готово!

Частично ускорить и облегчить процедуру можно с помощью имеющегося Google-аккаунта.

С чего начать

Созданный изначально сайт можно легко удалить и пересоздать заново, запустив проект уже на основе:

  • Чистого листа (будет создан полностью пустой проект).
  • Бесплатного пресета (специальные стартовые наборы с дефолтным наполнением и коллекциями данных, если применимо – портфолио, бизнес-сайт, сайт магазина).
  • Платного профессионального шаблона (цены самые разные, есть поиск по тематикам, функционалу и другим техническим особенностям).
  • Бесплатного шаблона (фильтруются и применяются аналогично платным).
  • Шаблона, которым с вами поделились другие пользователи (в том числе профессиональные исполнители, которым вы могли заказать работу через встроенную биржу фрилансеров).
  • Сайта других клиентов, которые разрешили процедуру клонирования (раздел «Сделано в Webflow» / Made in Webflow, фильтр «Cloneable sites only»).

Согласитесь, этого более чем достаточно. Не хватает только возможности полной загрузки своих шаблонов, как в uCoz.

Редактирование

Если вы хотите детально разобраться с тем, как устроены наборы данных, в каком формате и как создаются интернет-магазины и т.д., лучше начать с соответствующего пресета.

После выбора шаблона или пресета вы попадаете внутрь онлайн-редактора. Новым клиентам показываются специальные интерактивные подсказки, но и без них вполне можно обойтись (если вы закрыли подсказки или отказались от их показа, в нижнем левом углу есть ссылка на раздел помощи и ссылка на видеомануалы).

Основные моменты, которые стоит учесть:

  • Вы можете добавлять на страницы отдельные элементы интерфейса или комплексные блоки (из вкладки Layouts).
  • Чтобы не переделывать каждый раз типовой контент в выбранных блоках, можно использовать Символы (Symbols). Это аналог сквозных секций, используемых в некоторых других онлайн-конструкторах.
  • Все остальные элементы, которыми можно воспользоваться при создании конкретной страницы сконцентрированы в боковой панели (это CMS-элементы, модуль и настройки интернет-магазина, навигатор по секциям/блокам, хранилище статических файлов Assets, настройки поиска, бэкапов и электронной почты).
  • Переключение между разными страницами проекта осуществляется в разделе Pages. Тут же можно выбрать главную страницу и определить SEO-заголовки, настройки Open Graph и т.п. Страницы можно распределять по папкам – для удобства при большом количестве элементов списка.
  • Элементы для предпросмотра, определения брейкпоинтов и публикации/экспорта вынесены в верхнюю панель.
  • Детальные опции внешнего вида (включая менеджер стилей, управление триггерами и итерациями) отдельных элементов показываются в правой боковой панели – уже после выбора/выделения конкретного блока.

Редактирование

Как будет выглядеть процесс редактирования:

  1. Вы создаёте новую страницу (или страницы, в соответствии со структурой сайта).
  2. Определяете сетку расположения элементов. Для этого используете блоки Layouts во вкладке Elements: секции, контейнеры, колонки, grid-сетки.
  3. Внутри лейаутов уже можно вставлять другие элементы: Div-блоки, кнопки, картинки, видео, списки, текст, формы и т.п.
  4. Вместо сочетания layout+элемент можно использовать готовые макеты с типовым наполнением, вкладка Layouts: шапки, подвалы, hero-блоки, галереи, слайдеры и т.п.
  5. Контент внутри элементов и блоков заменяется на свой.
  6. Настраиваются SEO-параметры страницы (страниц).
  7. Сайт публикуется.

Изменения отдельно сохранять не нужно, этот процесс полностью автоматизирован.

Публикация

На первый взгляд публикация страниц в Webflow выглядит как везде, но на самом деле есть тут и свои нюансы.

Во-первых, вместо публикации можно воспользоваться инструментом экспорта кода – на выходе вы получите чистый и читаемый HTML-код со всеми CSS-стилями, JS-скриптами и ассетами (изображениями, мелкими файлами и другой статикой).

Во-вторых, при публикации можно настроить ряд специальных опций:

  • Работа SSL (по умолчанию активно, при желании можно отключить).
  • Минификация (сжатие) HTML-кода.
  • Минификация скриптов (сжатие JS).
  • Минификация CSS (таблиц/файлов стилей).
  • Запрет открытия сайта в iframe-блоках.

Всем клиентам доступна публикация на бесплатных поддоменах вида ваше-имя.webflow.io. Но вы можете прикрепить к сайту и свой домен (только в платных подписках хостинга Webflow).

Если проект делался под клиента, его можно не публиковать. Но вы сможете открыть доступ по ссылке или через систему инвайтов (приглашений) – для этого нужно воспользоваться инструментом «Поделиться проектом» (Share project).

Обратите внимание, HTTPS-версию сайта можно организовать на бесплатных SSL-сертификатах, генерируемых платформой автоматически, а можно загрузить свои SSL, в том числе выпущенные профессиональными сервисами (с официальной финансовой гарантией/ответственностью).

Функциональные возможности

Как уже можно было заметить, Webflow – это не просто конструктор. Поэтому и технических возможностей здесь немного больше, чем в платформах для новичков или для малого бизнеса. Особенно это касается работы с дизайном сайта.

Рассмотрим основные особенности по ключевым направлениям.

Создание магазина на Webflow

Запуск интернет-магазина внутри Webflow возможен только с подключением тарифа из специальной линейки – Ecommerce site (о ценах на подписку ниже).

Создание магазина на Webflow

Что даёт этот вид подписки:

  • Возможность добавления специальных CMS-объектов – товаров для каталога (от 500 до 3000 позиций).
  • Инструменты для массового управления категориями и товарами.
  • Управление опциями товаров (до 50 наборов).
  • Возможность создания кастомной страницы чекаута и детальная настройка товарной корзины.
  • Специальные продуктовые поля в электронных письмах.
  • Кастомизация email-шаблонов (цвета, брендирование и т.п.).
  • Приём онлайн-оплаты через платёжные шлюзы PayPal, Stripe, Apple Pay и автоматический расчёт налогов. В стартовом тарифе для коммерции взимается комиссия с продаж – 2% от суммы.
  • Интеграция с системами web-маркетинга – Google Покупки, Facebook+Instagram.
  • Интеграция с Mailchimp (для проведения email-рассылок).
  • Возможность вставки произвольного кода (для более продвинутых интеграций).
  • Создание и управление своими правилами продаж.
  • Аккаунты для сотрудников и для клиентов магазина.
  • Различные способы расчёта стоимости доставки (по весу, фиксированные суммы, по количеству, процент от чека). Можно интегрировать сервис Shippo.
  • Рассылка оперативных уведомлений о важных событиях в магазине (не только владельцу сайта, но и членам команды, а также произвольным контактам, которые вы укажете в настройках).
  • Учёт товарных остатков.
  • Указание старой/новой цены.
  • Система импорта/экспорта элементов (товаров или страниц категорий) в CSV-формате.

Что вы не сможете получить на платформе Webflow:

  • Нельзя создавать вложенные категории (каталог может быть только одноуровневым).
  • В карточке товара нельзя добавить связанные и/или похожие продукты.
  • Нет подавляющего числа необходимых коммерческих сервисов и интеграций, популярных за пределами Европы и США (платёжные шлюзы, сервисы рассылки, CRM-системы, маркетплейсы и т.п.).
  • Нет готового мобильного приложения для управления магазинами (для отслеживания остатков, получения уведомлений, управления заказами и т.п.).

Все эти моменты нужно знать и учитывать, если вы планируете создавать внутри Webflow полноценный интернет-магазин.

Возможностей хватит только для обслуживания небольшого каталога с плоской структурой (не более 3000 позиций).

Если вам не нравятся встроенные возможности Webflow для торговли, вы можете запустить интернет-магазин и без штатного модуля. Только элементов автоматизации будет минимум. Вам придётся переделать все web-формы, при этом заметно усложнится процесс приёма оплаты с выносом чекаута на стороннюю площадку, например, на связку make.com + yoomoney (или другой вариант платёжного шлюза с API).

Алгоритм создания магазина выглядит так же, как в других онлайн-конструкторах:

  1. Активируете функционал магазинного модуля.
  2. Заполняете данные о компании.
  3. Настраиваете приём онлайн-оплаты и расчёт доставки.
  4. Наполняете каталог товарами.
  5. Принимаете заявки.

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

Создание блога на Webflow

Создание блога на Webflow

Блог в этом конструкторе можно запустить двумя способами:

  1. Из статических страниц (каждая новая создаётся в редакторе на основе предыдущих (с сохранением готового макета) или полностью собирается с нуля.
  2. С задействованием CMS-функционала.

Второй способ намного удобнее и логичнее, а ещё так вы сможете разместить заметно больше материалов – до 10 тыс. записей (в зависимости от текущего тарифного плана хостинга). Но он будет сложнее в реализации, так как для работы блога надо будет настроить наборы CMS-данных.

Чтобы немного облегчить процедуру, Webflow предлагает типовой пресет для запуска типового блога (демонстрационные данные будет легко очистить и заменить своими материалами), а также наборы CMS-коллекций – одним из пунктов будет Blog Posts.

Вместо предустановленного набора CMS-данных и полей, вы можете создать свой собственный набор (свою коллекцию данных).

В качестве дополнительных полей к записям блога можно выбрать (имя и URL – обязательные поля):

  • Простой или форматированный текст.
  • Изображение или набор изображений.
  • Ссылка на видео.
  • Дата/время.
  • Переключатели (для активации определённых опций).
  • Email/телефон.
  • Цвет.
  • Файл.
  • Связи (одиночные или множественные).

При формировании или настройке шаблона категорий портов вы можете детально настроить вывод CMS-элементов – на основе своих правил и условий сортировки по основным или по дополнительным полям в наборе. Например, можно создать несколько блоков, в которых будут выводиться:

  • Последние по времени записи блога.
  • Записи, отфильтрованные по признаку Featured (и аналоги).
  • Списки постов в алфавитном порядке.
  • И т.д.

Таким образом, Webflow в применении намного гибче, чем любой другой онлайн-конструктор, а в чём-то даже удобнее, чем профильные CMS-системы (как тот же WordPress), так как в Webflow без программирования можно тонко настроить логику вывода записей и определить свой набор полей.

Когда все макеты готовы, наполнением блога в Webflow можно заниматься в отдельном интерфейсе. Редактору будут доступны для правки только те поля, которые вы определили, что исключает возможность случайной поломки макета недизайнерами.

Процесс создания новых постов будет таким же простым, как и в профильных CMS-системах: например, можно будет вводить только название, текст записи, загружать превью поста и определять теги. Всё – запись готова к публикации.

Если у вас уже был блог на другой платформе, например, на WordPress, посты можно перенести с помощью CSV-импорта/экспорта (для автоматизации выгрузки воспользуйтесь плагином из каталога WordPress – Export any data to XML/CSV).

Создание лендинга на Webflow

Благодаря высокой степени свободы и наличию большого числа типовых элементов, создание посадочных страниц (продающих сайтов) в Webflow будет возможно как профессионалами, так и начинающими специалистами.

Новички смогут задействовать готовые layout’ы (комплексные наборы из более мелких элементов) или готовые шаблоны страниц. А профи могут создавать макеты с нуля – с настройкой всех параметров элементов до мельчайших деталей. Плюс, в Webflow есть возможность создания пошаговых анимаций и действий по триггерам (для конкретных элементов или для всей страницы), наложения визуальных эффектов и применения 2D/3D-трансформаций.

Встроенный конструктор форм очень гибкий и позволяет настроить интеграцию с Zapier (а это несколько тысяч внешних сервисов, с которыми можно настроить обмен данными, включая CRM, email-рассылки и т.п.).

Для сплит-тестирования можно быстро подключить Google Optimize.

Но каких-то специальных готовых инструментов внутри Webflow для работы с лидами нет. Здесь нет встроенной CRM-системы, конструктора email-писем, квиз-форм, онлайн-калькуляторов и т.п.

Конструктор логотипов

У Webflow нет собственного конструктора логотипов. Для разработки лого придётся использовать сторонние сервисы и инструменты.

Работа с изображениями

Несмотря на то, что Webflow поддерживает работу с изображениями в WebP и SVG-формате, а также автоматически создаёт кропы для разных версий сайта (шириной 2500, 2000, 1600, 1080, 800 и 500 пикселей), внутри платформы вы не найдёте каких-либо дополнительных инструментов для редактирования графики.

Более того, здесь даже нет готовых интеграций с платными или бесплатными фотостоками (для быстрого поиска медиаконтента).

Всё, что вы можете сделать с картинками – наложить фильтры (фактически это делается силами JS и CSS).

Автоматическую оптимизацию можно реализовать за счёт подключения внешней интеграции – Pixie App.

Маркетинговые и SEO инструменты Webflow

Из коробки Webflow умеет:

  • Создавать XML-карту сайта.
  • Искать контент по страницам (опция активна не во всех подписках, и нужно вручную определять, что можно искать и индексировать на страницах, а что нет).
  • Вставлять Open Graph-разметку.
  • Генерировать URL на основе шаблонов с переменными (+транслитерировать названия из кириллицы и других языков в латиницу).

А ещё в редакторе вы можете вручную добавлять свои мета-теги, URL страниц и другие важные SEO-атрибуты, включая alt-теги изображений.

Если встроенных возможностей с шаблонами email-уведомлений недостаточно, можно интегрировать сторонние сервисы рассылок.

С учётом скорости загрузки страниц, встроенной интеграции с CDN и автоматических SSL-сертификатов Webflow выглядит для продаж и продвижения в сети весьма неплохо.

По крайней мере, есть вся необходимая база.

Управление доменами

Все клиенты Webflow могут использовать бесплатные поддомены webflow.io. Подключить свои домены можно только при переходе на платную подписку хостинга.

Покупка домена внутри Webflow возможна через следующих провайдеров услуги (официальных регистраторов):

  • Google,
  • GoDaddy.

Если у вас уже есть свой домен, вы можете перенаправить его на хостинг Webflow. DNS-записи можно подсмотреть в официальной документации (например, здесь).

Экспорт кода

Это первая и очень веская причина того, почему многие web-дизайнеры выбирают Webflow для ведения своих проектов. Даже не имея здесь тарифных планов хостинга, вы можете создавать без программирования крутые макеты и страницы, а потом выгружать их в виде HTML и передавать клиентам (заказчикам).

Более того, в процессе работы клиент может отслеживать прогресс и корректировать следующие шаги (при необходимости), давать рекомендации/советы. В этом случае демоверсия сайта будет доступна по специальной ссылке. А для надёжности доступ к проекту можно закрыть паролем.

Конструктор Webflow генерирует очень чистый и хорошо читаемый HTML-код, что не может не радовать профессионалов, ведь в случае ручной правки нужный элемент будет легко найти и отредактировать/заменить (главное — не забыть отключить опции минификации/сжатия).

Вместе с кодом экспортируются все остальные данные по проекту: JavaScript-скрипты, CSS-стили, изображения, документы и т.д.

Но важно помнить, что при экспортировании автоматически становятся недоступны все CMS-возможности.

Встроенное средство аудита

Панель аудита оповещает о найденных наиболее распространённых проблемах внутри вашего проекта: отсутствующие alt-теги, пропущенные уровни заголовка, повторяющиеся идентификаторы элементов и т.п.

Средство аудита позволяет выявлять все мелкие и крупные недочёты непосредственно перед публикацией сайта. Ошибки для удобства распределены по уровню их критичности.

Режим редактора сайта

Это специальная версия панели управления, созданная для работы контент-менеджеров и редакторов. Наполнение сайта и работа с дизайном в Webflow разделяются. И это очень удобно для случаев, когда работает команда – за макеты и дизайн отвечает один сотрудник или отдел, а за контент – другой.

Внутри конструктора вы можете детально определить, какие элементы будут подлежать редактированию, а какие нет.

Тогда контентщики ничего не смогут испортить.

Плюс, в панель редактора вынесены настройки для управления магазином и заказами (удобно для выноса функционала менеджеров магазина), а также функции управления списком страниц и записями блога.

Автоматические бэкапы

Автоматические бэкапы

Система создаёт резервные копии сайта автоматически. На бесплатном тарифе есть возможность восстановления из последних двух бэкапов, а на платных тарифах ограничения отсутствуют – тут полный безлимит.

Единственный нюанс – при восстановлении сайта из резервной копии могут сброситься товарные запасы (если в настройках бэкапа вы не указали опцию их сохранения) и идентификаторы коллекций (для CMS-функционала, они могут участвовать в некоторых API-запросах).

Дизайн и работа с шаблонами

Конструктор Webflow обеспечивает широкий выбор как готовых вариантов дизайна, так и достаточную свободу редактирования интерфейсов.

Готовых шаблонов в официальном каталоге – более 300. Около полусотни шаблонов распространяется полностью бесплатно. Платные варианты обойдутся от 34 до 149 USD.

Дизайн и работа с шаблонами

Макеты можно отфильтровать по нужным вам критериям:

  • Функциональность или тип сайта (CMS-возможности, ecommerce, блог, портфолио).
  • Тематика (категории).
  • Популярность.
  • Стиль.
  • Язык (имеется в виду стартовое наполнение).
  • Опции дизайна (с 3D-трансформациями, с фоновыми видео, с адаптивным слайдером и т.п.).

Можно начать не с шаблона, а сразу с готового тематического сайта. В разделе «Made in Webflow» можно найти доступные для клонирования проекты других авторов.

Многим понравится возможность купить шаблоны для Webflow на популярной коммерческой платформе ThemeForest (где продаётся много классных тем для WordPress). Но нужно понимать, что просто взять и загрузить в Webflow произвольные HTML-шаблоны нельзя (такого функционала у платформы нет).

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

Какие инструменты и возможности вы получаете в Webflow для работы с дизайном:

  • Встроенный редактор сильно напоминает web-IDE (среду разработки). Здесь можно настроить все параметры стилей до мельчайших деталей. Просто вместо написания CSS-стилей вы будете использовать графический интерфейс.
  • Структуру и подчинённость HTML-элементов легко отследить – для этого есть отдельный навигатор.
  • Макеты строятся как из крупных (комплексных) секций, так и из более мелких элементов. Поэтому можно создать интерфейс любой сложности.
  • Чтобы не пересоздавать одинаковые элементы и секции на разных страницах, можно задействовать так называемые Символы (Symbols). Это своеобразный аналог сквозных блоков в других онлайн-конструкторах, но с возможностью замены отдельного контента в разных экземплярах.
  • Контент может подставляться в специальные поля из наборов данных (это CMS-функционал). То есть, создается единый шаблон для записей блога, а затем в него подставляются значения из таблицы для разных страниц. По аналогии работает ecommerce-функционал (интернет-магазин).
  • Все шаблоны изначально поддерживают адаптивность. При этом есть возможность детально настроить точки останова (разрешения экрана, выступающие триггерами для переключения макетов для разных типов устройств: ПК, планшеты, смартфоны и т.п.).
  • Платформа обеспечивает загрузку собственных шрифтов и интеграцию со всеми популярными платформами web-шрифтов.
  • Кастомный HTML/JS-код можно добавить перед тегом , после него и в виде произвольного HTML-блока (embed-код).
  • Возможно создание сложных пошаговых анимаций – Lottie animations.
  • Триггеры переключения стилей можно связать с разными событиями на уровне отдельного HTML-элемента или всей страницы.
  • Для централизованного управления стилями предоставляется специальный инструмент – Style Manager.

Сквозные блоки (Symbols)

С их помощью очень удобно разделять макеты на комплексные, часто повторяющиеся части. Например, это может быть боковая панель для виджетов, подвал сайта, верхнее меню и т.п.

Символы в Webflow можно использовать двумя способами:

  1. С полностью идентичным контентом во всех экземплярах (чтобы можно было редактировать контент в одном месте, а он актуализировался на всех остальных страницах).
  2. С уникальным контентом в каждом отдельном экземпляре, но с общим стилевым оформлением.

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

Можно создавать Символы Webflow из любых доступных элементов редактора.

Инструменты профессиональных дизайнеров

Когда мы говорим о том, что дизайнеры могут настроить любые элементы интерфейса в Webflow до мельчайших деталей, сложно представить о чём речь. Но фактически вы получаете доступ ко всем CSS-свойствам, которые только существуют. Например:

  • отступы,
  • свойства переполнения контейнеров,
  • фиксация позиции,
  • детальная настройка типографики (вплоть до декорации шрифтов и определения отступов между символами),
  • управление фоном (изображения, градиенты и т.п.).
  • рамки/обводки,
  • накладываемые эффекты (прозрачность, тени, фильтры, 2/3D-трансформации).
  • управление внешним видом курсора,
  • выравнивание,
  • привязка кастомных CSS-стилей,
  • и т.п.

Всё, что можно описать с помощью HTML и CSS-кода, настраивается и в редакторе Webflow. Именно поэтому эта платформа так нравится профессиональным дизайнерам.

Вставка своего HTML-кода

Embed-код может быть использован для подключения многих внешних сервисов: web-чатов, сторонних форм ввода, онлайн-калькуляторов и т.п.

Блоки Embed-кода можно переиспользовать в Символах, в них можно добавлять JS-код, они легко сочетаются с CMS-полями и т.д.

Но в эти блоки нельзя добавлять серверные языки программирования: PHP, Perl, Ruby и т.п.

В один HTML-блок нельзя вставить более 10 тыс. символов.

Настройка мобильной версии сайта

Работа с точками останова в Webflow рассчитана на профи. Здесь предполагается разделение экранов на 4 типа устройств: мобильные устройства в портретном режиме, мобильные в горизонтальном положении (landscape-режим), отдельно планшеты (от 768 до 991 пикселя), десктопы (1070 пикселей и более).

Любую точку останова можно переопределить.

Настройка мобильной версии сайта

В настройках каждого блока вы можете задать видимость элемента в разных точках переключения. А также добавить свои CSS-селекторы, которые будут связаны с конкретным типом устройств. Тогда переключение видимости можно будет организовать на уровне CSS и JS-кода. Гибче просто некуда.

Техническая поддержка

Ввиду того, что Webflow создан технарями и для технарей, в нем очень много внимания уделено документации и обучению новичков.

Так, клиентам предлагается:

  • Официальный портал онлайн-университета от Webflow (онлайн-курсы, уроки, специалисты техподдержки и т.п., всё в одном месте).
  • Портал для поиска технических специалистов (встроенная биржа исполнителей – профессиональных партнёров).
  • Активный блог с мануалами, обзорами, анонсами новых функций и т.п.
  • Портал сообщества (здесь можно найти помощь совершенно бесплатно).
  • Документация по API.
  • Официальный форум.
  • Электронные книги.

Обратиться в техподдержку платформы (если вам не нужна помощь платных экспертов) можно только через электронную почту (никаких чатов или звонков по телефону).

Исключение – владельцы Workspace-подписок с уровнем Enterprise. Им предоставляется персональный менеджер техподдержки.

Цена: сколько стоит сайт на Webflow

Ценовая политика – это наиболее сложная часть в понимании работы Webflow.

Всё, что относится к работе непосредственно сайтов – это хостинг.

Тарифы на хостинг Webflow выглядят так:

Хостинг Webflow

  • Starter – полностью бесплатный тариф. По умолчанию подключается всем сайтам внутри платформы. Здесь нельзя привязать свой домен и есть серьёзные ограничения по CMS-функциям (не более 50 элементов в таблицах, не более 20 коллекций). Статических страниц можно создать не более 2, а пропускная способность – всего 1 Гб в месяц (не более 1000 визитов). Отключить копирайт платформы нельзя.
  • Basic – от 12 USD/месяц. Полностью отсутствует CMS-функционал, но статических страниц можно создать уже до 100 штук. Можно привязать свой домен и отключить копирайт. Пропускная способность – 50 Гб/месяц.
  • CMS – от 16 USD/месяц. 2000 CMS-записей, до 1000 отправок форм, 3 гостевых редактора, 200 Гб/месяц трафика.
  • Business – от 36 USD/месяц. 10000 CMS-записей, 400 Гб трафика на месяц, 10 редакторов, до 2,5 тыс. отправок форм, увеличенные лимиты по API-обращениям.

Специальные тарифы для электронной коммерции (это тоже хостинг сайтов, но с приёмом оплаты):

Webflow eCommerce

  • Standard – от 29 USD/месяц. Условия CMS-плана + 500 товаров в каталоге. Комиссия с продаж – 2%. До 3-х аккаунтов сотрудников.
  • Plus – от 74 USD/месяц. До 1000 позиций в каталоге, 0% комиссии с продаж. Электронные письма без брендинга Webflow. До 10 аккаунтов сотрудников.
  • Advanced – от 212 USD/месяц. До 3000 позиций в каталоге и до 15 аккаунтов сотрудников магазина.

Тарифы для рабочих мест (Workspace-планы)

Webflow Workspace

Эти подписки расширяют возможности работы командой и открывают доступ к экспортированию кода.

  • Starter – бесплатно. 1 рабочее место, 2 скрытых (неопубликованных) сайта. Нельзя экспортировать код.
  • Core – от 19 USD/месяц. До 3 рабочих мест, до 10 скрытых сайтов, доступ к экспортированию кода, возможность вставки своего кода.
  • Growth – от 49 USD/месяц. До 9 рабочих мест, любое количество скрытых сайтов.
  • Enterprise – цена обсуждается индивидуально. Любое количество рабочих мест, расширенная производительность, техподдержка и системы безопасности.

Выводы: стоит ли делать сайты на Webflow

Если вы хотите красивый, качественный и современный сайт, созданный профессиональными дизайнерами – это точно Webflow.

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

Платформа может выступать узловым элементом вашего бизнеса, использоваться как CMS-система, работать как полноценный интернет-магазин, организовывать обмен данными по API с другими внешними сервисами. Но всё это очень сложно для новичков и слабо адаптируется под российский рынок (особенно функционал для электронной коммерции, так как он рассчитан на европейскую и американскую аудиторию).

Другими словами, платформа реально крутая, но подойдёт она только дизайнерам и web-агентствам/студиям, которые знают, с какого бока к ней подойти.

Негативным фактором выступает цена подписки – она существенно выше предложений основных конкурентов и складывается из нескольких составляющих.

» Обзоры » Обзор конструктора сайтов Webflow