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

Webflow — уважаемая платформа для дизайна веб-сайтов, которую используют более 3.5 миллиона клиентов по всему миру. Являетесь ли вы опытным профессионалом или только начинаете, этот обзор Webflow даст вам всесторонний обзор функций и возможностей этой платформы для создания веб-сайтов без кода.

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

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

Я не эксперт по веб-дизайну, поэтому давайте посмотрим, как я работаю с платформой. Может ли кто-нибудь использовать Webflow? Или лучше оставить специалистам? Давай выясним.

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

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

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

Во-первых, давайте сбалансируем хорошее и плохое с кратким обзором плюсов и минусов Webflow:

Планы и цены

Webflow имеет пять планов, доступных для общего использования:

• Бесплатный план: Используйте бесплатно на ограниченной основе
• Базовый план: От 14 долл. США в месяц при ежегодной оплате
• План CMS: От 23 долл. США в месяц при ежегодной оплате
• Бизнес-план: От 39 долл. США в месяц при ежегодной оплате
• Предприятие: Индивидуальные цены

У Webflow также есть тарифные планы специально для электронной коммерции:

• Стандартный план: От 24 долларов в месяц при оплате в год
• План Плюс: От 74 долл. США в месяц при ежегодной оплате
• Расширенный план: 212 долл. США в месяц при ежегодной оплате

Если вам требуются дополнительные рабочие места для вашей учетной записи Webflow, эти стоимость от $16/мес. и выше, в зависимости от ваших требований. 

План	Тип	Месячная стоимость	Ежемесячная стоимость оплачивается ежегодно	Используется для
Бесплатно	Общее использование	Бесплатно	Бесплатно	Ограниченное использование
Базовый	Общее использование	$18	$14	Простые сайты
CMS	Общее использование	$29	$23	Контентные сайты
Бизнес	Общее использование	$49	$39	Сайты с высокой посещаемостью
Предприятие	Общее использование	Украшения на заказ	Украшения на заказ	Масштабируемые сайты
Стандарт	Электронная коммерция	$42	$29	Новый бизнес
Дополнительная	Электронная коммерция	$84	$74	Большой объем
Фильтр	Электронная коммерция	$235	$212	Масштабирование
Указанные ниже цены указаны в дополнение к выбранным платам за план
Стартер	Собственные команды	Бесплатно	Бесплатно	Новенькие
Основные	Собственные команды	$ 28 за место	$ 19 за место	Небольшие команды
Рост	Собственные команды	$ 60 за место	$ 49 за место	Растущие команды
Стартер	Freelancerс и агентства	Бесплатно	Бесплатно	Новенькие
Freelancer	Freelancerс и агентства	$ 24 за место	$ 16 за место	Небольшие команды
Агентство	Freelancerс и агентства	$ 42 за место	$ 36 за место	Растущие команды

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

Ежегодная оплата экономит 30% по сравнению с ежемесячной оплатой. Поскольку доступен бесплатный план, бесплатной пробной версии нет.

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

Отличительные особенности

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

Шаблоны веб-потока

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

Стоимость шаблона колеблется от 20 до 100 долларов США и доступна в нескольких различных бизнес-нишах.

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

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

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

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

Инструмент дизайнера веб-потока

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

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

Далее я застрял в инструментах редактирования, и это был момент Я был поражен огромным количеством предлагаемых вариантов.

Инструмент имеет обычный интерфейс перетаскивания где вы выбираете нужный элемент и перетаскиваете его на веб-страницу. Щелчок по элементу открывает меню редактирования в правой части экрана и меню навигации в левой. 

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

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

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

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

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

Чтобы ознакомиться с полным списком функций, посетите веб-сайт webflow.com прямо сейчас.

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

Тем не менее, я укажу некоторые из примечательных особенностей здесь:

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

Анимации веб-потока

Кому нужны скучные статичные веб-сайты, когда можно великолепные, динамичные и анимированные веб-страницы?

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

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

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

Я люблю видеть веб-сайты с динамичные движения в них. Это отличный способ привлечь внимание людей или удержать их на вашем сайте дольше.

Они также являются потрясающим инструментом для побуждения кого-либо щелкнуть определенный элемент или выполнить желаемое действие.

Электронная коммерция Webflow

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

Фактически доступ к функции электронной коммерции осуществляется через интерфейс веб-редактирования и позволяет вам делать все, что сделало бы специализированное приложение для электронной коммерции:

• Настройте магазин для физических или цифровых продуктов
• Массовый экспорт или импорт списков продуктов
• Создавайте новые продукты, устанавливайте цены и редактируйте детали
• Распределите продукты по определенным категориям
• Создавайте индивидуальные скидки и предложения
• Добавьте индивидуальные варианты доставки
• Отслеживать все заказы
• Создание продуктов на основе подписки (в настоящее время в бета-режиме)
• Создание индивидуальной корзины и касс
• Настройте транзакционные электронные письма

Для приема платежей Webflow напрямую интегрируется с Полоса, Apple Pay, Google Оплата и PayPal.

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

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

Членство в Webflow, курсы и контент с ограниченным доступом

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

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

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

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

Безопасность и хостинг Webflow

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

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

Хостинг Webflow

Что касается хостинга, Webflow может похвастаться Производительность класса A и время загрузки веб-сайтов 1.02 секунды.

Хостинг предоставляется через его Сеть доставки контента уровня 1 вместе с Веб-сервисы Amazon и Fastly. Помимо первоклассной производительности, хостинг Webflow также дает вам:

• Пользовательские доменные имена (кроме бесплатного плана)
• Пользовательские 301 редиректы
• Метаданные
• Бесплатный сертификат SSL
• Ежедневное резервное копирование и управление версиями
• Постраничная защита паролем
• Сеть распространения контента (CDN)
• Пользовательские формы
• Поиск по сайту
• Платформа визуального дизайна и публикации
• Нулевая обслуживание

Безопасность веб-потока

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

Платформа отображает свою программу безопасности в соответствии с ISO 27001 и критические средства контроля безопасности CIS и другие отраслевые стандарты.

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

• Соответствие GDPR и CCPA
• Сертифицированный поставщик услуг уровня 1 для Stripe 
• Полная безопасность данных и проверка персонала в самом Webflow
• Двухфакторная аутентификация
• Возможности единого входа в G Suite
• Единая точка входа
• Ролевые разрешения
• Облачное хранилище данных клиентов
• Полностью зашифрованная передача данных

Интеграция с веб-потоком и API

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

Вы можете найти приложения и интеграции для:

• Маркетинг
• автоматизация
• Аналитика
• Платежные системы
• Членство
• Электронная коммерция
• Email-хостинг
• Социальные Сети
• Инструменты локализации и многое другое

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

Служба поддержки клиентов Webflow

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

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

В сообщениях в Интернете утверждается, что Webflow занимает в среднем до 48 часов для ответа на запросы клиентов. Это не очень хорошо, особенно если у вас есть сроки клиента, чтобы придерживаться.

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

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

Примеры веб-сайтов Webflow

Итак, как на самом деле выглядят опубликованные сайты Webflow? Из шаблона можно извлечь очень мало, поэтому просмотр живых примеров веб-сайтов — отличный способ почувствовать возможности Webflows.

Сначала мы имеем https://south40snacks.webflow.io, пример сайта компании, производящей закуски на основе орехов и семян (изображение выше).

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

Следующий https://illustrated.webflow.io/. Во-первых, вам предоставляется захватывающая анимация, но при прокрутке появляется чистая, красиво оформленная планировка это кажется убедительным, но организованным.

Каждая страница загружается быстро, а встроенные видео работают как сон.

https://www.happylandfest.ca/ демонстрирует пример веб-сайта для фестиваля и начинается с видеоклипы с наложенным текстом.

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

Для просмотра дополнительных примеров сайтов Webflow. Проверьте их здесь.

Сравните конкурентов Webflow

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

1. Squarespace: Squarespace — популярный конструктор веб-сайтов, предлагающий широкий выбор шаблонов и вариантов дизайна для создания профессионально выглядящего веб-сайта. Хотя Squarespace проще для новичков, Webflow предлагает больше возможностей настройки и расширенные функции для опытных дизайнеров.
2. Wix: Wix — это удобный конструктор веб-сайтов с интерфейсом перетаскивания для создания веб-сайтов. Хотя он более удобен для новичков, чем Webflow, он имеет меньше возможностей настройки и может не подойти для более сложных веб-сайтов.
3. WordPress: WordPress — это широко используемая система управления контентом (CMS), которая предлагает веб-дизайнерам множество возможностей гибкости и настройки. Хотя он сложнее, чем Webflow, он предлагает больший контроль над дизайном и функциональностью веб-сайта.
4. Shopify: Shopify — популярная платформа электронной коммерции, которая позволяет пользователям создавать интернет-магазины. Хотя он не является прямым конкурентом Webflow, стоит отметить, что Webflow предлагает функции электронной коммерции и может быть хорошим выбором для малых предприятий, которым нужен веб-сайт с возможностями как дизайна, так и электронной коммерции.

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

Вопросы и Ответы

Наш вердикт ⭐

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

Действительно, у платформы есть множество тарифных планов, которые позволяют вам расти и масштабировать свой сайт в соответствии с вашим бизнесом. Мне только жаль, что у меня не было опыта (и времени), чтобы полностью познакомиться с этой платформой.

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

Недавние улучшения и обновления

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

• Элемент блока кода: новая функция для отображения фрагментов кода для конкретного языка на любой странице.
• Массовый перевод полей для отдельных элементов CMS: позволяет перевести весь элемент CMS на дополнительный языковой стандарт одним щелчком мыши.
• Поддержка Markdown в элементах форматированного текста: добавляет возможность использовать уценку для форматирования элементов форматированного текста.
• Изменение порядка свойств компонентов: позволяет пользователям изменять порядок свойств компонентов в соответствии со своим рабочим процессом.
• Локализация для всех клиентов: функции локализации теперь доступны всем клиентам с бесплатной предварительной версией основных функций.
• Управление событиями указателя: это обновление помогает управлять перекрывающимися элементами на веб-сайтах, устанавливая для событий указателя значение «Нет».
• Пользовательский элемент: пользователи теперь могут добавлять к элементу любой HTML-тег или настраиваемый атрибут, раскрывая весь потенциал HTML.
• Постановка ветвей для тестирования проекта: предоставляет отдельную промежуточную среду для тестирования проектов в филиале, что особенно полезно для корпоративных клиентов.
• Улучшения элементов форматированного текста: Внесены улучшения, чтобы сделать создание элементов форматированного текста более гибким и эффективным.
• Noindex-контроль для отдельных страниц: это улучшение SEO позволяет контролировать, какие страницы включаются в карты сайта и индексируются поисковыми системами.
• Щелкните правой кнопкой мыши на панели навигатора.: повышает скорость создания веб-сайта: все действия теперь доступны по щелчку правой кнопкой мыши в навигаторе.
• Новый внешний вид Webflow: обновленный пользовательский интерфейс предлагает более целенаправленное рабочее пространство и современный дизайн.
• 3D-сплайн-сцены: пользователи могут добавлять и анимировать 3D-объекты на своих сайтах с помощью сплайн-сцен.
• Контроль соотношения сторон: представляет контроль соотношения сторон в Webflow Designer.
• Кодификация системы проектирования с переменными: переменные для хранения таких значений, как цвета, размеры и типографика, повышают согласованность и масштабируемость дизайна.
• Улучшения удобства использования компонентов: повышенное удобство использования в зависимости от того, управляется ли основной компонент или создается экземпляр компонента.
• Новые API для компонентов, переменных и локализации: эти API помогают разработчикам создавать мощные приложения Webflow.
• Планы переноса участка: администраторы рабочей области теперь могут переносить планы сайтов между сайтами, что упрощает управление.
• Новые роли редактирования контента и комментирования: Улучшает командную работу за счет новых ролей в дизайнере для редактирования контента и совместной работы.
• Управление пользовательскими доменами: подключение пользовательских доменов к сайтам в Webflow стало проще.
• Приложения веб-потока: Представляет следующее поколение приложений Webflow, более глубоко интегрирующихся с основными бизнес-инструментами.
• Обновления платформы разработчиков: В платформу разработчиков были внесены значительные обновления, открывающие больше возможностей для создания продуктов.
• Улучшенные рабочие процессы публикации: улучшенные рабочие процессы подготовки и публикации, особенно для корпоративных клиентов, обеспечивают лучший контроль над изменениями на веб-сайте.
• Архивировать рабочую область: владельцы рабочих пространств теперь могут удалить рабочие пространства с панели управления, не обращаясь в службу поддержки.
• Сочетания клавиш для управления классами: новые сочетания клавиш для дублирования или удаления последнего класса элемента.
• Перенос текста и разрыв слов: контроль над тем, где текст переходит на новую строку.
• Улучшенная поддержка плагинов Figma: расширенная поддержка автоматического макета и отзывчивости в Figma, легко импортируемая в Webflow.
• Отслеживайте изменения контента в журнале активности сайта: видимость на CMS и изменения статического содержимого страницы в журнале активности сайта.
• Упрощенные разрешения на публикацию: Детальный контроль над разрешениями на публикацию для каждого участника Workspace.
• Централизованная обратная связь с комментированием в дизайнере: делитесь, просматривайте и разрешайте отзывы непосредственно в дизайнере.
• Элемент быстрого стека: новый элемент, который ускоряет процесс сборки с помощью элементов управления на холсте и предустановок макета.

Обзор Webflow: наша методология

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

1. Адаптация люстры: Позволяет ли конструктор изменять дизайн шаблонов или включать собственный код?
2. Удобство для пользователя: Просты ли в использовании навигация и инструменты, такие как редактор с возможностью перетаскивания?
3. Соответствие цены и качества: Есть ли возможность бесплатного плана или пробной версии? Предлагают ли платные планы функции, оправдывающие стоимость?
4. Безопасность: Как конструктор защищает ваш сайт и данные о вас и ваших клиентах?
5. Шаблоны: Являются ли шаблоны качественными, современными и разнообразными?
6. Поддержка: Доступна ли помощь посредством человеческого взаимодействия, чат-ботов с искусственным интеллектом или информационных ресурсов?

Узнайте больше о наших методологию обзора здесь.

добавить отзыв

Ссылки:

• Полный список возможностей – https://webflow.com/features
• YouTube канал - https://www.youtube.com/c/webflow
• Википедия - https://en.wikipedia.org/wiki/Webflow
• Reddit - https://www.reddit.com/r/webflow/