Начните сейчас, это просто!

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

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

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

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

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

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

Webflow
  • Конструктор для дизайнеров
  • Требуются минимальные навыки вёрстки
  • Функциональность, близкая к CMS

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

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

Плюсы:
Минусы:
Мощный визуальный редактор с интерфейсом, напоминающим Photoshop и другие графические программы.
Более 100 профессиональных шаблонов.
Продвинутые SEO-настройки «из коробки». Можно настроить отличающиеся заголовки и описания для поисковой выдачи и превью в соцсетях.
Встроенные инструменты для создания блога и интернет-магазина.
Доступ к CSS для работы с классами элементов интерфейса.
Возможность настроить дизайн в визуальном режиме.
Поддержка вставки стороннего кода.
Глубокая интеграция с коммерческими инструментами Facebook и Instagram для продажи товаров и услуг через соцсети.
Нет локализации на русский язык. Не хватает перевода интерфейса и документации, а также интеграции с сервисами из рунета.
Сложная система тарифов с непонятными условиями и ограничениями.
Высокая стоимость тарифов. На других конструкторах можно создать сайт-визитку или портфолио в несколько раз дешевле.
Для комфортной работы нужно хотя бы на базовом уровне уметь верстать, иначе освоить конструктор будет сложно.
Вёрстка сетки на гридах — технология всё более распространённая, но на старых браузерах могут быть проблемы с отображением.
Техническая поддержка доступна только по электронной почте, ждать ответа приходится ждать до 2 суток.

Если вы владеете английским языком, обладаете приличным бюджетом и немного умеете верстать, то Webflow может стать для вас крайне полезным инструментом создания сайтов. Однако минусы у него всё равно достаточно серьёзные для того, чтобы отвадить новичков — тот же Wix или uKit намного дружелюбнее к начинающим вебмастерам по всем параметрам, начиная от простоты освоения и заканчивая ценообразованием.

Webflow
  • Доступ к классам элементов и API
  • Гибкие инструменты кастомизации
  • Система оптимизации для продвижения

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

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

Webflow

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

Обычные пользователи тоже могут использовать Webflow — по крайней мере, для старта не требуются специальные навыки. Однако освоить конструктор сложнее, чем uKit или Wix. Всё дело в том подходе, который используется в визуальном редакторе.

Если вы умеете верстать, то быстро поймёте, что такое div и как изменится расположение элементов внутри контейнера, если сделать его Flexbox и задать значение justify-content. Если вы этого не знаете, то придётся запоминать, как работает вся эта система. Проблема в том, что используемый в Webflow подход к вёрстке не универсальный. Разобравшись с его классами, вы не научитесь верстать на чистом HTML.

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

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

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

На первый взгляд редактор выглядит как Photoshop. Но быстро становится ясно, что здесь многое построено на знании базовых техник веб-разработки. Это проявляется даже в названии элементов. Вы будете добавлять на страницы сетки на гридах, контейнеры, секции, колонки, Div-блоки — всё это понятия из вёрстки.

В редакторе Webflow можно пользоваться стандартными WYSIWYG-техниками: перетаскивать на рабочее пространство подходящие элементы, позиционировать их мышкой и наполнять контентом. Но при таком подходе вы быстро упрётесь в границы. Этот конструктор предназначен для того, чтобы гибко кастомизировать интерфейс. Для этого понадобятся базовые навыки вёрстки.

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

С чего начать

После регистрации вы попадаете в дашборд. На бесплатном тарифном плане можно создать до двух проектов. Чтобы приступить к разработке, нажмите на кнопку New Project.

Webflow дашборд

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

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

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

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

В левом меню доступны следующие разделы:

  • Add — добавление элементов интерфейса, шаблонов и блоков — например, футера или навигации.
  • Navigator — полная структура страницы. В ней отмечены все блоки и элементы, можно быстро переключаться между ними и вносить изменения в настройки через правое меню редактора.
  • Pages — управление страницами. Здесь вы добавляете новые папки и страницы, задаёте основные и SEO-настройки.
  • CMS — управление базами данных и динамическим контентом.
  • Ecommerce — настройки интернет-магазина. В этом разделе представлены инструменты управления товарами, категориями, скидками, заказами.
  • Assets — загруженные файлы: изображения, документы, иконки.
  • Settings — настройки поисковой индексации, сохранения резервных копий, электронной коммерции, рассылок по почте.

Webflow Редактирование сайта

В нижней части левого меню доступны иконки для включения направляющих линий и столбцов. Это полезно при выравнивании элементов по пикселям. Здесь же есть ссылка на обучающие видео, в которых разъясняется настройка сайта в редакторе Webflow. Ролики короткие, но очень информативные. Правда, доступны они только на английском языке.

При редактировании сайта в основном используется раздел Add. Из него вы перетаскиваете на холст секции, контейнеры, колонки, таблицы. Затем внутри них размещаются элементы интерфейса: заголовки, изображения, кнопки, списки, карточки и так далее. В редакторе поддерживается технология Drag-and-Drop, все действия выполняются мышкой.

Элементы не получится разместить в любом месте шаблона — абсолютное позиционирование на Webflow не в почёте. Для изменения положения внутри контейнера используется свойство Align. Вы можете его не применять, и тогда элементы будут выстраиваться с левого края — то есть в начале строки.

Можно также управлять очередностью отображения элементов с помощью свойства Order. Всё это — понятия из CSS. Если вы умеете верстать, то можете без проблем представить, что происходит с кодом, когда вы указываете то или иное значение свойства. Разница в том, что на Webflow не нужно писать CSS руками — вы просто нажимаете на кнопки, а конструктор уже переделывает значения.

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

Webflow Mobile

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

Публикация сайта

Webflow предлагает четыре варианта варианта публикации сайта:

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

С бесплатным доменом всё просто. Чтобы сайт был доступен на нём, нажмите на кнопку Publish в редакторе, выберите его в списке и щёлкните Publish to Selected Domains.

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

  1. Откройте раздел Project Settings.
  2. Перейдите на вкладку Hosting.
  3. В секции Custom domain укажите доменное имя.
  4. Обновите записи DNS в панели управления доменом. Добавьте две записи типа A для основного домена и запись CNAME для каждого поддомена.

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

При публикации к домену автоматически подключается бесплатный SSL. На платных тарифах также можно использовать дополнительные опции, в том числе автоматическую минификацию HTML, CSS и JavaScript. Благодаря этому вы получаете оптимизированный сайт, который быстрее обрабатывается браузером и загружается на устройствах пользователей из-за меньшего веса сборки.

На тарифных планах для разработчиков и студий (Account Plans) есть ещё одна возможность поделиться сайтом — экспорт его кода. Перед экспортом можно посмотреть, что именно будет в сборке. Вместе с кодом экспортируются все изображения, размещённые на сайте.

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

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

CMS

Webflow CMS

Встроенная система управления контентом, предназначенная для дизайнеров, редакторов и разработчиков. С её помощью, например, можно добавить на страницу динамический контент. Разработчики могут также использовать API для подключения к сайту на Webflow сторонней базы данных или CMS.

Продвинутые дизайнерские эффекты

Webflow эффекты

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

Разные способы оплаты и автоматический расчёт налогов

Webflow платёжные системы

Кроме стандартного приёма платежей по банковским картам, Webflow поддерживает Apple Pay и PayPal. Налоги рассчитываются автоматически. Как только клиента делает заказ, система добавляет к стоимости товара налог с продаж. Это позволяет сэкономить время администратора магазина.

Интеграция сайта со сторонними сервисами

Webflow интеграция с сторонними сервисами

Вы можете синхронизировать каталог товаров с Facebook и Instagram, чтобы получать заказы прямо из соцсетей и гибко управлять маркетинговыми кампаниями.

Webflow также предлагает интеграции с сервисами Google:

  • Google Analytics — для сбора информации о поведении посетителей сайта.
  • Google Domains — для приобретения и быстрой привязки доменов.
  • Google Optimize — для запуска A/B-тестирования и выбора успешной маркетинговой стратегии.

«Из коробки» также есть интеграция с MailChimp для автоматического формирования списка рассылки по электронной почте. Ещё одна очень полезная штука — интеграция с Zapier. Это сервис для автоматизации, благодаря нему можно связать конструктор с другими приложениями — например, подключить к нему чат из Slack.

Расширенные SEO-параметры

Webflow SEO

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

Система бэкапов и бесплатный SSL

Webflow бэкапы

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

Ещё один важный момент — автоматические сохранение резервной копии сайта. Если что-то пойдёт не так, вы сможете быстро восстановить последнее рабочее состояние.

Инструменты для работы с клиентами

Если вы делаете сайты на заказ, то вам обязательно пригодятся инструменты для работы с клиентами:

  • выставление счетов за хостинг прямо из панели Webflow;
  • организация проектов в папки;
  • экспорт чистого кода HTML/CSS;
  • защита страниц паролем;
  • защита проекта от удаления (полезно при командной разработке);
  • резервное копирование сайта и встроенная система контроля версий.

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

Webflow
  • Интеграции со сторонними сервисами
  • Бесплатный SSL для безопасной работы сайта
  • Система автоматического создания бэкапов

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

Webflow предлагает сотни шаблонов для сайта. Большая часть из них платная. Цена — от 24 долларов. Чтобы выбор был богатым, лучше приготовить не менее 80 долларов.

Шаблоны разделены на категории: для бизнеса, блога, маркетинга, фотографии и видео, образования, спорта и других сфер деятельности. Качество исполнения — на высоком уровне. Встречаются неудачные варианты, но это, скорее, вопрос вкуса. Технически все шаблоны сделаны грамотно, с явным понимаем трендов веба.

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

Webflow шаблоны

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

На Webflow можно создать макет с нуля, а затем экспортировать его код. Эта возможность доступна только на платных тарифах, минимальная цена — 16 долларов в месяц. После оплаты тарифного плана можно экспортировать до 10 проектов. Профессиональные дизайнеры пользуются этой возможностью. Для многих из них Webflow — удобный онлайн-редактор, в котором можно создать шаблон для последующей адаптации под другие CMS или размещение на стороннем хостинге в качестве статичной страницы.

Важная часть редактора Webflow — гибкая настройка адаптивности. Макет можно менять в десктопном и мобильном режимах. Естественно, все темы по умолчанию имеют адаптивный дизайн. У каждого шаблона есть собственный набор картинок, иконок и других частей интерфейса. Вы также можете добавить свою библиотеку графических элементов.

Максимальную гибкость кастомизации даёт работа в режиме дизайнера. Однако для комфортного использования инструментов нужно знать HTML и CSS. Писать код не придётся. Просто система оперирует понятиями тегов и классов. Если вы с ними не знакомы, то будет сложно. Если знакомы, то сразу поймёте, насколько мощный редактор перед вами.

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

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

Связаться со специалистами поддержки можно только по электронной почте. Служба работает с 6:00 до 18:00 по тихоокеанскому времени с понедельника по пятницу. При обращении можно прикрепить файлы — например, скриншоты с демонстрацией проблемы. Ответ приходит в течение 48 часов.

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

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

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

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

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

Платные тарифы разделены на два вида.

  • Site Plans — тарифы для разработки сайтов для себя.
  • Account Plans — тарифы для профессиональной разработки для клиентов.

Внутри Site Plans две линейки тарифных планов: Site Plans для персональных сайтов, блогов и бизнес-сайтов, Ecommerce Plans для интернет-магазинов, лендингов и других видов электронной коммерции.

Webflow цены

Site Plans (тарифы для блогов и персональных сайтов):

  • Basic (15 долларов в месяц) — подключение домена, до 100 страниц на сайте, до 25 000 визитов в месяц, до 500 принятых заявок через формы, подключение к CDN для ускорения загрузки контента на стороне пользователей.
  • CMS (20 долларов в месяц) — до 100 000 визитов в сутки, до 2000 записей в базу CMS, до 1000 принятых заявок через формы, лимитированное использование API, до 3 контент-менеджеров на проекте, поиск по сайту.
  • Business (45 долларов в месяц) — до 1 000 000 визитов в месяц, до 10 000 записей в CMS, безлимитное количество принятых через формы заявок, до 10 контент-менеджеров.
  • Enterprise (стоимость оговаривается индивидуально) — безлимитное использование API, приоритетная поддержка, подключение дополнительных способов оплаты, гарантия бесперебойной работы хостинга.

Webflow цены

Ecommerce Plans (тарифы для электронной коммерции):

  • Standard (42 доллара в месяц) — возможности тарифа CMS из Site Plans, до 500 товаров в каталоге, три аккаунта для менеджеров, настройки оплаты, налогов, доставки, размещение товаров в Facebook и Instagram, комиссия 2% с каждого платежа, ограничение продаж до 50 000 долларов в год.
  • Plus (84 доллара в месяц) — возможности тарифа Business из Site Plans, до 1000 товаров в каталоге, отсутствие комиссии с платежей, 10 аккаунтов менеджеров, ограничение продаж до 200 000 долларов в год.
  • Advanced (235 долларов в месяц) — все возможности тарифа Business из Site Plans, до 3000 товаров, 15 аккаунтов менеджеров, снятие лимита на объём продаж в год.

Account Plans тоже разделены на две линейки — Individual и Team. Первые подходят фрилансерам, вторые — студиям.

Webflow цены

Individual Plans:

  • Starter — тот самый бесплатный тариф, который позволяет создать до 2 проектов для тестирования возможностей конструктора.
  • Lite (24 доллара в месяц) — до 10 проектов, экспорт кода, выставление счетов клиентам, перенос сайтов на другие аккаунты внутри конструктора, публикация до 100 статических страниц и до 50 динамических элементов CMS.
  • Pro (42 доллара в месяц) — неограниченное количество проектов и перемещений сайтов на другие аккаунты, возможность установить пароль на сайт и сделать ребрендинг — заменить White Label конструктора своим логотипом.

В Team Plans есть только один тариф, при покупке которого вы получаете доступ ко всем возможностям конструктора. Стоимость использования — 42 доллара в месяц с каждого члена команды. Если в студии работает более 25 человек, нужно брать тариф Enterprise. Его стоимость рассчитывается индивидуально.

Webflow цены

Если оплатить тариф на сразу на год, применяется скидка 15%.

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

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

Если вы дизайнер с навыками вёрстки, который ищет удобный инструмент для быстрой разработки сайтов для клиентов, то Webflow — неплохой выбор. Здесь можно поставить создание проектов на поток, переиспользуя шаблоны и готовые блоки контента.

Если же вы делаете сайт для себя, то гораздо эффективнее будет использовать другие конструкторы. Из сопоставимых по возможностям для кастомизации интерфейса можно предложить Wix и Tilda. У них тоже есть свои особенности, но порог входа намного ниже, чем на Webflow. Цены тоже не так кусаются, особенно если нужен небольшой сайт.

Howard

Об авторе:

Приветствую, Я Говард Стил, владелец и главный редактор этого сайта. Имея за плечами более 10 лет опыта в сайтостроении я знаю, как порой нелегко бывает неспециалисту разобраться во всем многообразии инструментов для создания сайта. Не знаете, какой конструктор выбрать? Просто напишите мне и я подскажу лучший вариант для вашей задачи.

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

Добавить комментарий

Ваш адрес email не будет опубликован.