Cms collection webflow как это работает

Обновлено: 18.05.2024

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

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

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

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

Тарифы для командной разработки

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

План Teams особенно подойдёт для тех, кто работает над проектами командой. По сути это тот же план Pro только с добавлением режимов и функций совместной работы за $35 на человека в месяц (при оплате за год).

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

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

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

Почему мы верстаем только на WebFlow

Мы в Embacy делаем лендинги и сайты, но в нашей команде нет верстальщиков и фронтэндеров. Дизайнеры верстают сами в WebFlow. Обосновываем свой выбор в статье.

Согласно «Вордстату», запросов WebFlow в 18 раз меньше чем Tilda и почти в 100 раз меньше чем Wordpress. Поэтому рассказываем.

Если в двух словах, WebFlow — это конструктор, в котором можно делать сайты, лендинги, блоги и всё остальное. Это умеют и другие конструкторы, но в WebFlow можно закодить кастомно отдельные элементы, если нужно.

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

  • WebFlow University и отзывчивая поддержка. Все вопросы, которые у нас когда-либо возникали, решались одним из этих путей.
  • CMS для управления контентом на сайте. Для управления большими сайтами. К ней можно прикрутить бэкэнд.
  • Набор шаблонов для сайтов по типам бизнеса. Как бесплатных так и платных, которые удобно разделены по категориям. Удобно для не-дизайнеров. Поэтому в этот раздел мы даже не заходим

Мы пользуемся этим инструментом уже три года.

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

Мы работаем по спринтам. 1 неделя = 1 спринт, за который мы успеваем сделать дизайн и верстку.

Поэтому у нас есть правила, которые помогают придерживаться темпа:

  1. Сайт должен быть сверстан самим дизайнером. При любых других подходах не всегда получается перенести дизайн из макета в верстку пиксель к пикселю.
  2. Нам нужно верстать быстро. Потому что скорость — наше главное оружие.
  3. Финальная работа должна быть кастомной. Другие конструкторы не подходят, потому что сделать что-то, не соответсвующее шаблону платформы, — трудно.
  4. Мы не хотимвносить правки в контент после завершения проекта. Поэтому мы учим клиентов работать с CMS и самостоятельно менять контент, если нужно.

В итоге WebFlow подошел под наши задачи лучше других решений (других конструкторов и кастомной верстки).

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

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

Гибкость платформы

В WebFlow дизайнер не ограничен шаблонами платформы. 95% своих идей дизайнер сможет точно реализовать с помощью WebFlow. Например горизонтальный скролл. Другие конструкторы не такие гибкие.

Прямая интеграция с After Effects

С помощью плагина для After Effects можно очень просто делать сложные анимации. Нужно просто отрендерить её через плагин и прямо с рабочего стола закинуть в редактор. Мы тратим на одну анимацию 20–30 минут.

Удобная работа с классами

В WebFlow элементам можно присвоить класс. Например, нам нужен синий заголовок с шрифтом Proxima Nova 48 кегля . Мы один раз его создаем и называем « синий заголовок с шрифтом Proxima Nova 48 кегля ». И каждый раз, когда нам нужен синий заголовок с шрифтом Proxima Nova 48 кегля , мы указываем название класса, и он в один клик становится синим заголовком с шрифтом Proxima Nova 48 кегля.

В других конструкторах нужно отдельно менять каждый элемент: его размер, шрифт, цвет.

Не нужно извращаться в мобильной версии

Большинство трафика приходит с мобайла, поэтому мы много работаем над мобильной версией. Например, перерисовываем иллюстрации и убираем какие-то элементы.

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

Большое количество интеграций

Также WebFlow поддерживает интеграцию с множеством сервисов, например Shopify, Ecwid и так далее, что позволяет встраивать функциональность магазина, CRM-системы, инструментов SMS- и email-рассылок и многое другое.

Несколько лет мы пользовались Tilda и Readymag. Эта связка на должном уровне закрывала наши задачи по созданию веб-страниц.

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

Появился запрос на более гибкий инструмент, так мы пришли к WebFlow. И если Tilda это скорее «про маркетинг», то WebFlow однозначно «про дизайн». Бомбический анимационный блок с возможностью импорта ключей из After Effects, куча шаблонов с трендовыми визуальными эффектами, приятный интуитивный интерфейс.

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

Блиц: часто задаваемые вопросы

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

По своей сути, Webflow – это онлайн-инструментарий для создания и запуска веб-сайтов. Он представляет из себя эдакий гибрид традиционных конструкторов сайтов, таких как Wix, классических систем управления контентом, таких как WordPress, и собственно написания кода сайта вручную.

Еще не запутались? Это руководство как раз и написано с целью всё прояснить! Сначала лучше разобраться с основными компонентами Webflow, а именно его дизайнером сайтов, CMS и системой развертывания/хостинга.

Вот это, наверное, самый сложный вопрос о Webflow. Пожалуй лучшим ответом здесь будет составленная нами диаграмма, которую можно найти в разделе «Цены».

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

Тут, как и во всём: тяжело в учении – легко в бою . Иными словами, когда вы привыкните к Webflow, пользоваться им будет достаточно легко. Да, в некоторых моментах он может показаться сложнее, чем, скажем, Wix или Squarespace, но наградой за труд будет владение гораздо более гибким и мощным инструментом.

Мы коснемся этой темы подробнее в следующих трех разделах, которые непосредственно касаются основной функциональности Webflow:

Система управления контентом (CMS)

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

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

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

Единственное, с чем у CMS Webflow не лады, так это с локализацией. До появления сторонних расширений (в частности Weglot) создание многоязычного веб-сайта в Webflow было настоящей морокой.

По всему видно, что Webflow стремится сделать работу по управлению контентом как можно более органичной, чтобы дизайнер сайта не тратил свое внимание на технических аспект, что очевидно является огромным плюсом. В любом случае, CMS Webflow гораздо более гибкая и вариативная, чем WordPress или другие популярные конструкторы сайтов, такие как Wix.

А что думаете вы?

Спасибо, что нашли время (и терпение..) прочитать наш обзор Webflow! Нашли ответы на свои вопросы? Если у вас есть что добавить или вы не согласны с определенными моментами, давайте обсудим в разделе комментариев ниже:

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

Тарифные планы подобраны таким образом, чтобы пользователь платил только за нужные инструменты. В бесплатном тарифе доступны:

  • два проекта;
  • более 100 обучающих материалов на английском;
  • страница на домене webflow.io.

Он подходит для знакомства с платформой и обучения верстке. Но собрать «живой» проект не получится.

Истинная мощь Webflow раскрывается на платных тарифах. Тут платформа предлагает два вида тарифов: site plans и account plans. Site plans подключаются отдельно к конкретному проекту, а account plans расширяют набор инструментов и возможности дизайнера в целом.

Site plans

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

Блогу или информационному ресурсу — тариф CMS. Крупному онлайн-магазину с большим количеством товаров нужен тариф Plus с платежной системой и расширенными возможностями для магазинов.
В таблице сравнили три тарифа из линейки Site plans. Больше тарифов и опций на сайте Webflow:


Если предложенных опций не хватает, можно связаться с менеджерами и подключить тариф Enterprise. Как и другие no-code-платформы, Webflow позволяет настроить набор опций под ваши задачи.

Account plans

Вторая группа тарифов открывает дополнительные возможности для специалистов. Эти опции не связаны с Site plans — вы можете оставаться на бесплатном тарифе, но подключить к сайту LIte или Plus. Комбинируйте тарифы, чтобы получить необходимые функции по нужной цене.

Есть планы для фрилансеров и команд:


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

Полезные шаблоны для Webflow. Часть 1

В дебютной подборке – лендинг для показа фич приложения, сайт с горизонтальным скроллом, сайт с постраничным скроллом на scrollify.js, CMS-слайдер и аккордеон для секции часто задаваемых вопросов.

Привет, VC! Я – Саша, дизайнер и сооснователь агенства разработки на Webflow Buildbites. Раньше я собирал сайты с абсолютного нуля, но потом повзрослел, обленился, и стал активно пользоваться шаблонами. Это позволило не только сократить время разработки, но и применять больше интересных решений не выходя за рамки бюджетов. Поэтому я решил делать периодические подборки с самыми интересными и полезными Webflow шаблонами для тех, кто тоже пользуется или изучает этот инструмент. Меньше слов – больше полезности. Погнали.

Просто офигительный шаблон лендинга для показа фишек мобильного приложения. Фишка шаблона – в переключении заголовков и картинок внутри мокапа телефона, когда вы скролите страницу. А еще шаблон адаптивен, что повышает его полезность в разы.

Шаблон, в котором прокрутка страницы реализована по секциям. Тут использован скрипт Scrollify.js, который и управляет таким поведением. Если умеете в JS, то можно донастроить под себя, а если нет – оставьте все как есть, и так работает круто. Шаблон так же адаптивен.

Фанаты горизонтального скролла – этот шаблон для вас! Примечателен не столько горизонтальным скроллом, сколько работой с CMS и бесшовным переходом на страницу (поста или проекта, к примеру) . Адаптирован под десктопы, но под мобилки придется немного доработать.

Кастомные слайдеры в Webflow – моя боль. А кастомные слайдеры, которые используют Webflow CMS – боль в квадрате. Ну нельзя без танцев с бубном сделать слайдер, который будет отображать данные из CMS. Но! Есть же прекрасный шаблон, который решает именно эту проблему, да еще и работает как на десктопах, так и на мобильных девайсах. Шик-блеск! Под капотом использовано немного кода. Ничего супер-сложного, только подключение сторонней библиотеки.

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

Если понравился выпуск, то можешь подписаться на меня тут, на VC, чтобы не пропустить следующие выпуски и интересные статьи. Выходят редко, но метко.

Еще можно вообще нигде не фолловить. Все равно спасибо, что взглянул на статью.

Проспал момент. А что за новое меньшинство нокоде? Это как психическое расстройство лгбт, но только в ит? которые отрицают естественный ход вещей?

На сколько я помню, с бета версии (примерно 2015 год) в вебфлоу можно было свои решения на js интегрировать. Т.к. сервис все же для дизгнеров кодеров.

Ноукод это и есть естественный ход вещей

Ноукод это чья-то фантазия, не более. Как таргет(олог), директор(ка)

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

Конечно, реальность такова, что это все же конструктор, как его не об обзывай модными словами. Хоть nocode 2022s plus max pro.

Итог, можно как угодно называть условную вещь другими словами, но, сути этой вещи не изменит.

а теперь воткни в свой ноукод синхронизацию товаров с поставщика, у которого кастомный xml, который почти как yml, но отличается, допустим <rrc> вместо цены.

Скорее эволюция технологий и процессов. Но вам с дремучими взглядами этого не понять.

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

Webflow не совсем конструктор, на выходе получается полноценная верстка для любого проекта. Обычный HTML+CSS+js. Которая закрывает 90% потребностей фронтенд разработки.
При этом, это значительно дешевле, проще и быстрее, чем кодить.
Проект можно натянуть на любую цмску или фреймворк. Как говорят создатели вебфлоу — это визуальное программирование )) и это не так далеко от правды.

Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками, без понимания процесса разработки и каких-то основ HTML js CSS — вряд ли выйдет что-то путнее..
Пожалуй из всего семейства nocode, только wf можно назвать Профессиональным инструментом.. Остальное всё 🤦‍♀

Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения.

Помимо wf, полноценная верстка на выходе получается в любом другом конструкторе. Иначе смысл конструктора, если там что-то не будет работать? Так же определение "полноценная верстка" сомнительно, что тогда не полноценная?

Отличие капитальное с самой беты wf это экспорт верстки и да, потом можно натянуть на туже лаву и прочее. Тут только плюс в сторону wf.

Визуальное программирование это конечно сильно. Если брать констракт (для игр), вот там согласен, можно применить данное словосочетание. Я понимаю, что они так говорят, т.к. маркетинг. Да пусть, что угодно говорят. Продукт у них топовый.

"Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками" - wf развивает туториалы, да и в трубе полно. Это не wix убогий.

"только wf можно назвать Профессиональным инструментом." - тут я только соглашусь, инструмент за который приятно платить.

"Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения." - Поэтому фреймворки уже созданы. А будущее не определено. Ноукод просто новое слово.

Ценовая политика Webflow

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

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

Базовый план стоит $12 в месяц (при оплате за год) и включает в себя автоматический SSL, CDN, а также привязку пользовательского домена, который легко настроить и еще проще использовать.

План CMS, $16 в месяц (оплата за год), позволит вам развертывать не только статические страницы, но и элементы, созданные CMS (посты в блогах, проекты и т. д.). Бизнес-план, стоимость которого $36 в месяц при оплате за год, в основном является расширенной версией предыдущего плана, подходящей для крупных веб-сайтов со значительным трафиком.

Также имеются планы аккаунтов, в которых установлено максимально допустимое количество активных проектов и другие профессиональные параметры.

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

План Pro ($35 в месяц, при оплате за год) добавляет доступ к ребрендингу платформы и защиту сайтов паролем. Этот план подходит тем, кто регулярно создает полноценные проекты на заказ.

Для пущей наглядности мы немного попотели и создали общую диаграмму всех тарифных планов, доступных в Webflow:

Webflow pricing

В целом, на странице тарифных планов Webflow немного сбивает с толку принцип их группировки: в зависимости от того, нужен ли вам один сайт, много, или вы работаете в команде.

Опция «Мне просто нужен один сайт» фактически предложит вам только хостинг (это план вебсайтов, который мы обсуждали ранее), остальные опции предложат план Lite за $16 и Pro/Team за $35, а также индивидуальный план для больших команд. Это все те же два типа планов, описанных выше, кроме бесплатной и пользовательской версии.

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

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

Развертывание и хостинг

Последние варьируются от Базового –12 долларов в месяц* с лимитом посещений в 25 тыс./месяц, до Бизнес – 36 долларов в месяц* с большим количеством функций и лимитом посещений в 1 млн./месяц (*при оплате за год вперед).

Помимо интеграции с конструктором хостинг от Webflow имеет и другие преимущества, реально влияющие на производительность вашего сайта и рабочий процесс разработчиков:

  • Будучи основанным на распределенной инфраструктуре крупнейших облачных провайдеров (Amazon Cloudfront и Fastly), он может легко масштабироваться в соответствии с вашими требованиями к трафику, без необходимости делать это вручную.
  • Встроенная сеть доставки контента (CDN) без каких-либо дополнительных затрат гарантирует, что ваш веб-сайт будет загружаться с сервера, который географически близок к вашим посетителям, где бы они не находились.
  • Усовершенствованная распределенная инфраструктура гарантирует быстрое время загрузки и круглосуточную безотказную работу вашего сайта, независимо от скачков трафика и даже хакерских атак.
  • Встроенный сертификат SSL гарантирует, что ваш веб-сайт с самого начала соответствует современным стандартам безопасности без необходимости что-либо настраивать, докупать или продлевать.

Учитывая вышеперечисленные факторы, Webflow хостинг – это масштабируемый, удобный в использовании хостинг со встроенным CDN, по цене сопоставимый с такими решениями, как Digital Ocean и крупными конструкторами сайтов.

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

Что умеет Webflow

На Webflow можно создавать:

  • лендинги и сайты-визитки;
  • многостраничные сайты;
  • онлайн-магазины;
  • блоги.

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


Как устроен конструктор страниц

Интерфейс конструктора напоминает Photoshop. Основные элементы и действия расположены слева, а инструменты для работы с текстом и эффекты — справа.


В разделе Add elements стандартные компоненты, с которыми работают верстальщики и фронтенд-разработчики:

  • Слои: секции, сетки и другие;
  • Базовые: div-блоки, списки, ссылки;
  • Строчные и блочные текстовые элементы;
  • Медиа: фото, видео, аудиозаписи;
  • Формы и поля.

Webflow позволяет создавать динамические страницы с помощью компонента Collection list, в котором отображается содержимое CMS-коллекции. Чтобы управлять контентом на странице, добавьте Collection list и подключите его к CMS во вкладке CMS Collections. Оттуда можно создавать поля с данными, менять их содержимое и добавлять фото и видео.

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


Сделать онлайн-магазин из страницы можно во вкладке Ecommerce. Платформа автоматически создаст коллекции с товарами и скидками, а также проведет вас за руку с нуля до готового магазина с помощью пошагового гайда.


Витрина и раздел Designers

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

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

Библиотека шаблонов

Если собирать сайт с нуля не хочется, купите готовые шаблоны. На странице Webflow Templates более 500 решений для портфолио, блогов и онлайн-магазинов. Цена шаблона варьируется от 20 до 100 $.

Экспорт кода

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

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

Где научиться работать с Webflow

Еще одна фишка Webflow — богатая база знаний, которая регулярно пополняется.

На странице Webflow University есть видеокурсы для начинающих и опытных фрилансеров. Там научат делать дизайн, строить онлайн-магазины и настраивать SEO.

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

Открытых источников на русском пока мало, но есть платные курсы. Учиться по курсам или самостоятельно — решать вам. Опытные фрилансеры, которые хотят познакомиться с платформой, часто разбираются самостоятельно. Тем же, кто только осваивает профессию и хочет правильно в нее войти, лучше учиться по курсам.

Ограничения Webflow

Webflow — это инструмент веб-дизайнера. На нем нельзя строить ИТ-системы со сложной логикой: в конструкторе нет инструментов для построения сценариев, API и управления базами данных. Чтобы реализовать крутую идею без кода, соберите фронт на Webflow, а серверную часть на Directual или Bubble.

Webflow vs. традиционная разработка

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

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

Зачем менять порядок работы, если без кодеров все равно не обойтись? Дело в том, что сверстанная страница не всегда на 100% соответствует макету. А ведь это распространенное требование к работе верстальщика, есть даже такое понятие — pixel perfect.

В Webflow контроль над макетом полностью в руках дизайнера. Он работает в конструкторе почти как в Photoshop, но на выходе получает код. Программисту нужно только «оживить» страницы с помощью JavaScript. Адаптивность тоже на плечах дизайнера: конструктор позволяет отдельно собирать макеты для десктопа, планшета и смартфона.

Задать вопросы по Webflow и пообщаться с экспертами можно в русскоязычном коммьюнити.

Как компании используют Webflow

Крупный бизнес уже давно использует Webflow в своих проектах. Лучшие кейсы собраны на сайте платформы. Мы расскажем о трех самых интересных.

Dell построили мост между дизайном и разработкой

Отдел Dell по customer experience создает на Webflow прототипы страниц главного сайта и отдельных проектов. Как говорят в компании, платформа помогает преодолеть разрыв между дизайном и разработкой.

Когда-то Dell использовали внутреннюю систему разработки и прототипирования. Но ее поддержка обходилась дорого: нужна была целая команда разработчиков. А для нетехнического отдела это было не под силу.

Тогда решили перейти на внешнюю платформу. У команды было три требования к ПО:

  • оно должно упростить согласование с разработчиками;
  • веб-, десктопное и мобильное прототипирование;
  • минимум кода.

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

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

Lattice вернули контроль над сайтом

Платформа Lattice воспитывает бизнес-лидеров и предоставляет услуги тимбилдинга крупным компаниям, среди них Reddit, Slack и Asana.

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

С переходом на Webflow Lattice экономит 50 000 $ в год и недели на разработку и публикацию новых страниц. Маркетологи работают с контентом в CMS, а дизайнеры воплощают идеи в конструкторе и публикуют их самостоятельно в один клик.

Команда Lattice content создала обширную библиотеку ресурсов для HR-специалистов, в которой менеджеры сами загружают материалы, без помощи разработчиков и дизайнеров. За два года с момента перехода на Webflow органический трафик на сайте вырос на 280%.

Rakuten SL сэкономили время и деньги

Логистическая компания Rakuten SL сотрудничает с Amazon, Ebay и Shopify, крупными и средними ритейлерами. Офисы компании расположены по всей США.

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

Глава маркетингового отдела Сара Смит утверждает, что в компании сэкономили тысячи долларов за несколько месяцев после перехода с WordPress на Webflow.

Теперь маркетологи Rakuten SL вносят изменения в сайт всего за 20 минут, а у дорогого программиста это заняло бы 4-5 часов.

Вот каких показателей добились в Rakuten SL благодаря Webflow:

Дизайнер сайтов Webflow

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

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


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

Другими словами, чтобы нарисовать простой квадрат в середине страницы, нужно добавить новый <div> элемент (Webflow называет его «контейнером» или «разделом»), установить его позиционирование на «фиксированное» и его верхнее-правое и нижнее левое положение на 0. Поздравляем с первой лекцией по программированию!


Работа с медиа-запросами и адаптация под разные устройства [/ Подпись]

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

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

Платные темы варьируются в цене от 40 до 80 долларов и являются творением профессиональных дизайнеров и разработчиков Webflow.

По вышеизложенным причинам проектировать сайт с чистого листа рекомендуется тем, кто уже имеет опыт работы с HTML/CSS и создания сайтов из блоков. Если вы раньше не программировали (а даже если и программировали, но хотите ознакомиться с инструментарием Webflow), настоятельно рекомендуем в первую очередь поиграться с настройками готовых шаблонов.

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

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

По сути это инструмент автоматизации Javascript, который потенциально может заменить 80-90% вашего обычного файла JS для стандартного веб-сайта: анимации меню, всплывающие подсказки элементов, состояния при наведении курсора и т. д.

Остальные вкладки боковой панели содержат Навигатор (дерево HTML) и Диспетчер стилей (иерархия CSS), которые полезны в качестве инструментов обзора, но не так существенны, как уже рассмотренные нами функции.

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

Стоит ли попробовать Webflow?

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

Результат совместной работы Конструктора, редактора/CMS, хостинга, а теперь и eCommerce отвечает всем современным требованиям для веб-разработки, но требует гораздо меньших первоначальных затрат и времени на установку.

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

Экспертный обзор Webflow (2021): достойный инструмент или очередной конструктор сайтов?

Наверняка к этой статье вас привел примерно такой вопрос: «Что это за Webflow и стоит ли в нем разобраться?» Наш подробный обзор поможет вам с этим определиться.

Мы подробно рассмотрим все услуги Webflow (включая Конструктор, CMS, хостинг, магазин и т. д.) для того, чтобы ответить на наиболее актуальные вопросы:

Девизом работы Webflow является «умное отсутствие кода», а это значит, что инструмент специально разрабатывался для людей, которые хотят создавать сайты без упора на технический аспект, при этом основываясь на качественном коде и без привязки к какой-либо конкретной издательской платформе.

Такой принцип работы особенно понравится визуалам, поскольку он позволяет дизайнерам реализовать свое воображение непосредственно онлайн, возможно даже минуя такие графические пакеты, как Photoshop и Sketch.

Является ли это единственным преимуществом использования Webflow и работает ли такой «бескодовый» подход на практике, обсудим ниже:

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

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

Много букв! Какой же из всего этого вывод? Другими словами,

Что такое Webflow


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

Сервис в 2013 году создали выходцы из России Сергей и Влад Магдалины вместе с Брайантом Чоу. Сначала Webflow был внутренним инструментом компании, но позже основатели осознали его пользу для фрилансеров и занялись поиском инвесторов. Так они попали в Y Combinator, а затем самостоятельно привлекли 215 млн $ в четырех раундах инвестиций.

В первой версии можно было верстать только лендинги, но позже появилась CMS для блогов и интернет-магазинов. А еще добавили инструменты для работы с анимацией, скриптами на JavaScript и стилями. Основатели Webflow говорят, что одна из целей — передать дизайнерам полный контроль над версткой сайтов.

Функции магазина (eCommerce)

Одним из самых последних (и самых ожидаемых) дополнений к Webflow является функционал онлайн-магазина.

Webflow eCommerce предлагается по отдельным тарифным планам и включает в себя все необходимое для организации продаж через Интернет: управление товаром и запасами, пользовательские корзины, оформление заказа, переписка с клиентами, а также самостоятельное оформление заказа.

Основным преимуществом Webflow eCommerce является возможность полностью настраивать каждую деталь вашего интернет-магазина: от сеток продуктов и страниц оплаты до того, как выглядят уведомления о покупке.

Для сравнения, в Shopify, Wix или даже в пакете WooCommerce + WordPress для достижения такого же детализированного уровня контроля придётся приложить немалые усилия (и к тому же иметь навыки программирования).

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

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

Если же все обещанные функции будут реализованы, Webflow eCommerce станет полноправным конкурентом таким специализированных решений, как Shopify и Instacart, да ещё и со всеми вышеописанными преимуществами Webflow конструктора, CMS, и хостинга!

Weblflow и конкуренты

Сравним Webflow с другими популярными конструкторами сайтов.

Webflow vs. Wix


Wix — простой drag&drop-конструктор для тех, кто только пробует создавать сайты. Интерфейс понятный, без лишних кнопок и параметров. Новички обычно сразу приступают к работе — берут готовые шаблоны и перекраивают под свои нужды.

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

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

В Webflow нет ограничений по оптимизации и работе с кодом. Кроме того, благодаря отсутствию drag&drop сгенерированный код более оптимизирован, чем у Wix — нет лишнего кода для позиционирования компонентов. Отсюда и высокая скорость загрузки страниц.

Webflow vs. Тильда


Тильда — профессиональный конструктор сайтов с растущими возможностями. Платформа приветлива к новичкам: у нее есть drag&drop-конструктор и интерфейс на русском. Webflow пока не локализован, а drag&drop в нем вряд ли появится — это усложнит исходники и ударит по оптимизации сайтов.

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

  • стороннюю CRM;
  • систему коллтрекинга;
  • виджеты комментариев и обратной связи;
  • сервисы массовой СМС-рассылки и уведомлений.

Есть и своя CRM-система, а с недавних пор на платформу можно переносить макеты из Figma.

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

Читайте также: