webflow что это такое
The modern way to build for the web
Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code.
Build
Build production-ready experiences without coding.
“ Webflow helped our brand team create a platform that enables all Zendesk employees to accurately and consistently represent the company in an easy, efficient and scalable way.”
Erin Pinkley
Executive Creative Director
The Designer
Bring your design vision to life in clean, semantic HTML5, CSS, and JavaScript — with the Webflow Designer.
CMS and Ecommerce
Build completely custom databases for dynamic content types, including online stores.
Interactions
Launch
Go live on a fast, reliable, and hassle-free hosting network that scales with your business — with a click.
“ When we launched the Amstel Live festival page, we were seeing 10,000 requests per second. Webflow Hosting handled it without a hitch.”
Jason Green
Eventbrite Agency Partner
Powered by Amazon Web Services
Built to scale — on the same network as Netflix, Pinterest, Airbnb, Slack, and Adobe.
99.9% uptime
So you don’t have to worry about your site going down.
Zero maintenance
No updates to run, packages to install, or headaches to deal with.
Create, launch, and iterate on new marketing campaigns without distracting your product team.
“ Webflow’s given our brand design team a new level of autonomy that allows us to be more experimental, creative, and ambitious when taking on new projects.”
Jared Erondu
VPВ of Design
Built-in SEO tools
Metadata controls, automatic XML sitemaps, easy 301 redirects, and canonical tags.
Flexible integrations
Connect your marketing tools with built-in integrations and the flexibility of custom code.
Easy content updates
Easily create and update pages — right on the page, with the Webflow Editor.
Get up and running fast
Our University, blog, and showcase give you the education, insights, and inspiration you need to succeed with Webflow — and as a business.
University
Browse hundreds of in-depth videos, courses, and guides to get up and running fast.
Explore our blog detailed articles on trends, inspiration, and best practices.
Showcase
Get inspired by the incredible websites built by members of the Webflow community.
Free until you’re ready to launch
Build your site for free and take as long as you need. (That’s right, no trial here.) Just add a site plan for more pages, and a custom domain when you’re ready for the world.
Обзор конструктора сайтов Webflow
Webflow – онлайн-сервис для визуальной вёрстки макетов. Да, он является SaaS-платформой, то есть предоставляет хостинг, облачную панель управления сайтом, техподдержку, имеет тарифные планы, позволяет подключить домен и так далее. Тем не менее, движок заметно отличается от привычных нам конструкторов сайтов с визуальным редактором. Формально для вёрстки веб-страниц в режиме дизайнера кодинг не нужен. То есть вам не придётся вручную прописывать div`ы, классы и атрибуты к ним. Тем не менее, в обязательном порядке вы должны хотя бы на среднем уровне ориентироваться в HTML/CSS, иначе не поймёте происходящего в системе. Тут без вариантов, только так.
С помощью Webflow можно собирать макеты страниц для сайтов-визиток (бизнес-сайты, портфолио, корпоративные, резюме, промо и т. д.), а также подключать CMS-модули динамически обновляемого контента, что нужно для ведения блогов и магазинов. Сайты большого объёма создавать неудобно, также этому мешают количественные ограничения доступных ресурсов на платных тарифах.
Аудитория системы – дизайнеры со стажем и новички, желающие познать науку визуальной вёрстки, оформления качественных веб-страниц авторского дизайна. Так же подходит разработчикам клиентских сайтов со стажем. Система недешёвая, поэтому клиенты должны располагать бюджетами, а работы – соответствовать им.
Интерфейс Webflow англоязычный, русской локализации нет. Это американская платформа, живущая на рынке с 2013 года. Во многом наследует традиции визуальной вёрстки Adobe Muse, недавно отправленной разработчиками на пенсию в угоду выпуска тандема Adobe XD и Portfolio. Позволяет создавать адаптивные макеты любого жанра и содержания. Лишь бы опыта и фантазии хватало.
Дизайны и работа с шаблонами
Webflow – инструмент для создания произвольного дизайна с нуля. Для этого созданы все условия. Основным является режим дизайнера, в котором доступно формирование структуры и стилей макетов веб-страниц. Есть также визуальный редактор для быстрого добавления контента в уже созданные блоки. Режим дизайнера позволяет верстать дизайн практически любой сложности, но без знаний HTML/CSS мало что получится, поскольку система оперирует объектами HTML и стилями CSS для настройки внешнего вида.
Да, разработчики сервиса не врут – кодить руками не обязательно, хотя можно, вставка кода есть. Выбирайте нужные элементы, комбинируйте их, назначайте стили и получайте результат. Но есть проблема: чтобы эффективно пользоваться Webflow, вы должны понимать значение элементов вышеуказанных языков и их свойства. В общем, здесь можно создавать страницы без кодинга, но без его знания далеко не уедете – придётся наугад тыкать всё подряд, что вряд ли приведёт к хорошему результату. Редактор гибкий, интересный, но только для опытных юзеров – они почувствуют себя как дома.
Вебфлоу по части дизайна страниц – профессиональный станок с большим запасом прочности для реализации креатива. Это его основное достоинство. Нечто вроде Фотошопа, но для веб-страниц. Явно сложный для новичков, хотя интерфейс довольно логично, удобно выстроен, учитывая приличное количество возможностей. Опытные верстальщики/дизайнеры через полчаса освоят его практически полностью, оставив разбор нюансов до работы над ближайшим проектом. Новичкам потребуется примерно месяц, чтобы выйти на более-менее свободное владение инструментарием системы.
Функциональные возможности
Webflow обладает довольно сложной структурой панели управления. Основная часть – режим дизайнера. Это рабочее пространство, холст для создания структуры и дизайна макетов. Редактор, в котором в левом сайдбаре собраны элементы и объекты, а справа – свойства стилей для настройки внешнего вида, анимаций, эффектов, поведения при взаимодействии и прочее.
Для создания макета веб-страницы здесь нужны хотя бы поверхностные знания HTML/CSS. Система оперирует div-блоками и прочими типами контейнеров, каждому из которых необходимо задать CSS-стили. Их список находится в правом сайдбаре, а набор может отличаться в зависимости от характера выбранного элемента.
К примеру, тут можно выбрать позиционирование (relative, absolute, static, fixed, sticky), настроить «overflow», «box shadows», анимации, задаваемые атрибутами «transforms»/«transitions», поведение курсора при наведении (атрибут «hover») и еще множество всего. Да, здесь много простых и понятных большинству свойств – настройки шрифтов, фонов, выравнивания, отступов, границ, прозрачности и т. д.
Все эти параметры можно отрегулировать переключателями графического интерфейса, никакого кодинга вручную. Но… Если примеры названий выше ни о чем ни говорят, то как можно использовать эти функции? Новичкам придется подучить HTML/CSS – тут без вариантов. Те, кто уже в теме, никакого сопротивления не встретят.
Также в правом сайдбаре можно работать с классами элементов. Допустим, вы оформили текстовый блок определенным образом, хотите сохранить стиль. Для этого нужно присвоить ему класс. У вас может быть множество своих, кастомных стилей для быстрого добавления элементов на макет – 20 видов кнопок, блоков с картинкой, заголовков и т. д. Лишь бы не запутались в их назначении/названиях.
В опциях «Element trigger» можно задать поведение элемента при загрузке страницы, скроллинге либо наведении курсора мыши. Так вы сможете оживить макет своевременными анимациями, сделав его интерактивным. Вообще, в этом редакторе можно создавать очень красивые визуальные композиции – всего хватает, был бы навык соответствующий.
Теперь об элементах. Они реализованы форматом виджетов, добавляемых на страницу перетаскиванием. По количеству их не больше, чем бывает в приличных конструкторах с визуальным редактором. Разница кроется в большем диапазоне возможностей настройки их стилей. К примеру, можно добавить секцию, контейнер, сетку из блоков, колонки либо базовый div-блок. Сочетания этих прямоугольников с настройкой позиционирования, стилями, анимациями могут быть разными: слои, прозрачности, размеры, цвета, фоны, видимые области и прикрытые. В общем, играться можно сколько угодно, получая каждый раз новые комбинации структуры и стиля.
Среди прочих виджетов блок со ссылками, списки, кнопка, различные текстовые элементы, медийные (видео, картинка, анимация), навигационные меню, лайтбокс, слайдер, виджеты Фейсбука и Твиттера, карта от Google. Много внимания уделено формам, для их сборки есть отдельный раздел с элементами, настройки подробные.
В левом сайдбаре также находятся навигаторы по страницам и структуре их внутреннего устройства. Всё это подано в формате древовидных списков с быстрым доступом к настройкам страниц. После выбора страницы или объекта редактор автоматически переключит на него фокус, в правом сайдбаре появятся доступные для него стили и прочие настройки. В общем, навигация по макетам проекта реализована просто и удобно.
Вы можете настроить отображение направляющих линий, подсветить контуры отдельных элементов, что упростит работу на сложных макетах. Есть ещё режим X-Ray, который глушит цвета к чёрно-белой палитре и наглядно показывает структуру каждой секции – блоки, контейнеры, кнопки, меню, иконки. Всё видно, как на ладони, удобная вещь.
С помощью функции «CSS Preview» (находится в левом углу под знаком вопроса) можно посмотреть код стилей объекта. Для этого перетащите в окошко кнопку, текст или другой элемент, и там появится список стилей. Редактировать нельзя, только посмотреть. Не работает с секциями и блоками, только с мелкими элементами. Кстати, можно перетаскивать элементы для просмотра прямо из навигатора, что удобно.
Webflow оптимально использовать для создания статических страниц – лендингов и визиток (сайт компании, портфолио, промо, резюме и т. д.). Тем не менее, система содержит инструменты для операций с динамическим контентом. Здесь это называется «CMS Collections». Его использование позволяет оформлять полноценные интернет-магазины и блоги.
Возможности магазина
Добавить витрину можно одной кнопкой в сайдбаре слева. Система активирует динамические коллекции, подключит корзину и прочее. Количество товаров, доступных для размещения, ограничено количеством динамических элементов, указанных в тарифном плане. То же самое касается и блоговых статей, кстати. Имейте это ввиду. Вебфлоу не годится для публикации больших магазинов. Зато здесь доступен импорт/экспорт товаров из файлов XML. Образец заполнения полей табличного файла система выдаёт.
При добавлении товара вручную сможете указать главное изображение и несколько дополнительных, цену (до и после в т. ч.), валюту, налоги, категорию, опции доставки, стандартные свойства товара (длина, ширина, вес и т. д.) и кастомные, артикул, а также дополнительные свойства вроде размера, материала, цвета, объёма и т. д. Набор полей для заполнения товарных карточек настраивается – сможете убрать ненужное, добавить недостающее.
Все добавленные товары отображаются в формате списка – наглядно, но при большом количестве отыскать нужный можно только с помощью строки поиска. Есть фильтры по цене, статусу публикации, дате изменения. С категориями всё просто: указали название, ссылку, добавили коллекцию для отображения, и сохранили изменения.
В разделе страниц после запуска магазина автоматически появятся шаблоны для отображения витрины, категория, корзины и т. д. Вы их можете отредактировать так же, как и любые другие макеты проекта. Для ПК и мобильных устройств предусмотрены раздельные режимы редактирования, между которыми можно переключаться на лету. В общем, дизайн магазина может быть любым – хоть по готовому шаблону, хоть с нуля созданным.
Возможности блога
Функционирование блога Webflow тоже завязано на использовании CMS Collections. Можно добавить вручную коллекцию с определённым набором свойств (полей) для отображения: текст, картинка, видео, ссылка, почта, телефон, дата, цвет, переключатель, файл, выпадающий список и т. д. Есть и заготовки структур вроде рецептов, карточек клиентов, мероприятий и прочего. Добавив, к примеру, шаблон рецептов и выбрав количество позиций, вы получите базу данных с однотипными публикациями из выбранного набора полей (шаблона записи). Далее уже сможете заполнить нужным контентом.
По такому же принципу работает блог: создаёте либо берёте готовый шаблон структуры записи (так и называется – blog posts), а потом верстаете по нему посты, добавляя в шаблоны тексты, картинки, видео и прочее. После добавления этого типа динамических записей страница блога будет создана автоматически. Если шаблон не предусматривает его наличие, то она окажется пустой – придётся с нуля оформить внешний вид блоговой ленты.
Количество постов ограничено пакетом доступных для публикации динамических элементов и зависит от выбранного тарифа. Тут есть всё необходимое: настройки структуры отдельных записей, макета для их вывода, SEO, возможность вставки своего кода, пароля на вход в блог, добавления RSS-ленты и оптимизации превьюшек записей для показа в Open Graph.
В режиме дизайнера можно добавлять посты, но здесь нет нормального текстового редактора, чтобы настроить форматирование. Зато он есть в WYSIWYG-редакторе (кнопка «Editor» в верхнем левом углу). Необходимо выбрать в футере «Collections», а потом «Blog Posts». Тут интерфейс приятнее и позволяет добавлять изображения, списки, видео и свой код, но только на платных тарифах. Таким же образом можно отредактировать и товары магазина.
Отложенной публикации у блога нет, но есть черновики, а также возможность добавить пост в ленту рекомендуемых посетителям. В целом, функциональность блога средняя. Он может служить не только дополнением к визитке или магазину, но в качестве самостоятельного типа сайта. Многое зависит от уровня дизайна – высокий уровень навыка позволит создать крайне привлекательный для целевой аудитории блог.
Визуальный редактор
Webflow может работать не только в режиме дизайнера с его сложным интерфейсом, но и в режиме WYSIWYG-редактора – примерно такого, который вы могли видеть в других конструкторах вроде uKit или Wix. В нём удобно добавлять контент в уже готовый структурно макет. Можно также быстренько создать сайт на основе готового шаблона, заменив демо-контент своим.
Работает визуальный редактор привычным образом: наводите на текст, кнопку, изображение, меню или ещё что-то, выделяете и меняете надпись/ссылку/изображение и т. д. В футере редактора находится список страниц для быстрого переключения между ними. Всё это очень просто и удобно работает.
Dashboard
Дашборд – личный кабинет, в котором собраны все ваши проекты и опции, не имеющие прямого отношения к редактированию макетов. Проект – это сайт, который может включать в себя статические и динамические страницы, количество которых ограничено условиями используемого тарифного плана. Можно делать с нуля или на шаблоне.
Проекты можно сортировать по папкам, дублировать, делиться ссылками на них. У каждого имеется внушительная пачка опций, начиная с определения названия, фавикона и заканчивая добавлением интеграций, своего кода, настройкой уведомлений, SEO, статистики, резервных копий и т. д. Много настроек безопасности, особенно относительно форм – капчи, адреса доставки сообщений, поля, регистрация для доступа, пароли и прочее. Возможностей очень много.
Помимо настроек сайтов, в Дашборде можете посмотреть работы других дизайнеров сообщества Webflow (Showcase), а также ознакомиться с их публичными профилями. Вы тоже можете разместить свои макеты для всеобщего обозрения. Здесь же находится раздел справки и поддержки, очень мощный, надо сказать. Куча текстовых и видеоматериалов с информативной подачей по большинству аспектов системы. На английском, конечно.
Итак, давайте подводить итоги по функциональности. Webflow – продуманная, мощная среда для вёрстки дизайнов и публикации готовых сайтов. Позволяет интегрировать любые внешние сервисы через код, создавать свои классы элементов, добавлять динамические базы данных (магазин, блог и прочее), гибко настраивать SEO, доступ на сайт, сбор статистики, привлекать членов команды для совместной разработки, делиться своими успехами в сообществе сервиса и многое другое.
Общий порядок работы в системе таков:
Webflow крепок в своём роде. Может выступать в качестве онлайн-редактора макетов либо конструктора сайтов. Отлично подходит для разработки красивых сайтов со статическими страницами, в меньшей степени – для магазинов и блогов ввиду тарифных ограничений. В меру удобный, понравится дизайнерам и профессиональным разработчикам клиентских сайтов. Новички могут его использовать в качестве тренировочной площадки. В режиме дизайнера поможет закрепить изучение HTML/CSS на практике. Для экспорта кода или публикации сайтов на своём домене придётся оплачивать тариф. Каких-то важных недостатков не имеет.
Оптимизация (SEO) и продвижение
Webflow позволяет создавать адаптивные, хорошо оптимизированные сайты. Система генерирует довольно чистый код, страницы быстро загружаются. Настройки SEO стандартные: мета-теги, ЧПУ для страниц, регулировка индексирования, редиректы, правка sitemap.xml/robots.txt, разметка для Open Graph. Всё это относится и к статическим страницам, и к материалам блога, а также товарам магазина. Везде есть настройки SEO.
Интеграция с социалками, доступ к API системы, Webhooks – всё есть и работает. Все новые проекты временно публикуются на поддоменах формата sitename.webflow.io, потом сможете добавить свой домен после оплаты тарифа. С интеграцией сервисов аналитики и сбора статистики проблем нет – через код можно всё. В целом, Webflow хорошо дружит с поисковой оптимизацией, все необходимые возможности в наличии.
Ценовая политика
На бесплатном аккаунте Webflow вы можете создать 2 проекта и опубликовать их на поддомене. Скачать код шаблонов, получить расширенные возможности редактора/настройки, добавить свой домен, код на страницы и многое другое не получится без оплаты тарифного плана. То есть Free-вариация сервиса годится только для ознакомления перед покупкой и тренировок новичков.
Вебфлоу – профессиональный инструмент, далеко не из дешёвых. Здесь 2 ветки тарифов. Первая предполагает публикацию сайтов на хостинге (формат конструктора), вторая ориентирована на дизайнеров и позволяет экспортировать код получаемых шаблонов. Есть ещё командные тарифные планы для дизайн-студий. Структура ценообразования сложная. Цена месяца при оплате за год вперёд ниже на 20%. Итак, вот тарифы для обычных сайтов (без магазина):
Если вам нужен магазин, то придётся рассматривать ещё более дорогую тарифную сетку:
Все эти тарифы предусматривают создание 1 сайта на своём домене. Кроме того, есть ограничения на прибыль, трафик, количество элементов CMS (по сути, статей блога и товаров магазина), а также комиссия с продаж. Webflow, безусловно, хорошая, но совершенно нерентабельная платформа. От слова совсем.
В арсенале Webflow есть ещё тарифы для дизайнеров, позволяющие скачивать код шаблонов. C бесплатной версии этой ветки тарифов вы начинаете работу в системе. Платные делятся на индивидуальные и групповые. Начнём с первых:
Итак, Webflow – крайне дорогой конструктор либо не самый дешёвый онлайн-редактор для вёрстки шаблонов. Смотря, для чего он вам нужен. Очевидно, аудитория системы – профессиональные дизайнеры, услуги которых стоят соответственно. Клиенты у них тоже непростые. Поэтому для такой аудитории цены подходящие. Для создания первого сайта новичкам система категорически противопоказана ввиду сложности и дороговизны.
Плюсы и минусы, альтернативы
По всему, что касается функциональности, Webflow можно нахваливать. Действительно хороший редактор, много настроек, относительно удобный интерфейс, горы готовых шаблонов, развитое сообщество, хорошие справочные материалы, нормальная техподдержка. Есть и другие достоинства:
Преимуществ куча, да и список их далеко не полный. Но этого хватит. Не всё так гладко, минусы тоже есть:
Итого, основная проблема Webflow кроется в ценообразовании. Это американская платформа, имеющая соответствующие аппетиты. У нас на рынке полно хороших конструкторов с визуальным редактором, позволяющих создавать сайты примерно того же уровня. Да, кастомизация у Вебфлоу помощнее, чем у многих, но для реализации этого потенциала нужно быть дизайнером. Если вы им не являетесь, толку от всей этой функциональности никакого.
Альтернативы Webflow можно перечислять долго. Все эти системы разные, но любая из них станет намного более удачным выбором по сравнению с Webflow