Webflow — один из самых популярных конструкторов для создания сайтов и лендингов. Платформа удерживает лидерство на рынке с момента своего появления в 2013 году. Этот инструмент, создан специально для дизайнеров, привыкших работать с технологиями фронтенда и флексбоксов. Уже несколько лет сервис остается самым востребованным в англоязычном мире.
Обзор сервиса
Webflow идеально подходит для создания макетов страниц. Также для сайтов-визиток, включая бизнес-сайты, портфолио, корпоративные сайты, резюме и промо-страницы. Благодаря возможности интеграции CMS-модулей, Webflow также позволяет динамически обновлять контент, что делает его отличным выбором для ведения блогов и интернет-магазинов.
Уникальность Webflow заключается в сочетании визуального редактора с функциональностью HTML и JavaScript. Это позволяет пользователям не только управлять внешним видом сайта, но и эффективно контролировать его содержимое и структуру.
Интерфейс Webflow может показаться слишком урезанным для верстальщиков и перегруженным для дизайнеров. Однако он идеально справляется с задачей объединения двух ключевых функций. Это делает его незаменимым инструментом для создания современных веб-ресурсов.
|
Преимущества
|
Недостатки
|
|
Визуальный редактор, выдающий относительно чистый код.
|
Отсутствие русскоязычного интерфейса.
|
|
Автоматически формируемый и тонко настраиваемый адаптив.
|
Недостаток обучающих материалов на русском языке.
|
|
Возможность работы с широкими экранами.
|
Невозможность локализации создаваемого сайта (добавление дополнительных языковых версий).
|
|
Компонентный дизайн для повторного использования блоков и элементов.
|
Ограничения на количество доступных ресурсов на платных тарифах.
|
|
Создание тем и стилей.
|
Высокая стоимость сервиса.
|
|
Вставка кастомного кода.
|
|
|
Библиотеки анимаций и моушн-дизайна.
|
|
|
Перенос макетов из Figma, анимаций из After Effects и Lottie.
|
|
|
Бесплатные шаблоны, возможность копировать или покупать уникальные шаблоны от дизайнеров и студий.
|
|
|
Ролевая модель для работы над проектом.
|
|
|
CMS с базами данных.
|
|
|
Интеграция маркетинговых инструментов.
|
|
|
Хорошая поисковая оптимизация и высокая скорость загрузки.
|
|
|
Возможность создать тонко настраиваемый личный кабинет пользователя.
|
|
|
Продвинутый интерфейс для электронной коммерции.
|
|
|
Возможность править контент без потерь для дизайна.
|
|
Webflow наследует многие традиции визуальной верстки Adobe Muse, который был заменен тандемом Adobe XD и Portfolio. Платформа предоставляет широкие возможности для создания адаптивных макетов любой сложности и содержания, ограничиваясь лишь опытом и креативностью пользователей.
Регистрация
Использовать инструменты Webflow можно только после создания учетной записи. Регистрация подвязывает аккаунт ко всем опциям сервиса.
Чтобы создать профиль, выполните следующие действия:
- На главной странице Webflow перейдите в раздел Get started — it`s free.
- Введите адрес вашей электронной почты и нажмите на Continue.
- Придумайте пароль: минимум 10 символов с латинскими буквами и хотя бы одним символом. Нажмите на кнопку Create account.
На почту придет письмо со ссылкой активации. Перейдите по ней, чтобы верифицировать аккаунт.
Также можно создать учетную запись через сторонний аккаунт. У вас должна быть зарегистрированный профиль на этой платформе. Выберите сервис (социальную сеть), согласитесь на обработку данных. Система автоматически зарегистрирует учетную запись.
Дальше сервис задаст несколько вопросов, чтобы адаптировать конструктор под задачи пользователя. В анкетировании нужно будет указать имя и фамилию, для чего будет использована платформа, тип сайта и многое другое.
В конце будет предложен вариант веб-страницы: пустой бланк, шаблон и обучающие материалы. Уроки доступны только на английском языке. Поэтому лучше на старте выбрать один из шаблонов.
Интерфейс программы
Чтобы создать веб-сайт, пользователь должен иметь представление об HTML-верстке и Java Script. Так как конструктор оперирует именно этими библиотеками. Однако знать досконально код не обязательно. У платформы есть удобная навигационная панель.
Пользователь перетаскивает элементы из бокового меню. Настройка проекта происходит в верхней части экрана. При выделении любого объекта справа появляются плавающие окна со свойствами.
Настройка конструктора
Основные параметры, которые влияют на весь проект целиком. Здесь находятся настройки, информационные панели и переход на другие инструменты.
Меню состоит из следующих разделов:
- Dashboard. Это личный кабинет, где находятся все проекты.
- Site settings. Главные настройки сайта.
- Editor. Добавление изменений в контент сайта. Инструмент активируется после публикации веб-страницы.
- Quick find. Быстрый поиск по странице.
- Undo/Redo. Отмена/Возврат действия.
- Export code. Добавление своего кода в проект.
- Keyboard Shortcuts. Горячие клавиши.
- CSS preview. Предпросмотр элементов CSS.
- Help & Feedback. Центр помощи.
Верхнее меню
Панель представляет собой набор инструментов для адаптирования проекта под определенные задачи. В частности — публикация сайта, переключение между некоторыми режимами, масштабирование страницы.
Доступны следующие элементы:
- Home. Возвращение на главную страницу сайта.
- Масштабирование. Выбор размера холста и положения на экране. То есть, как будет выглядеть страница на разных устройствах.
- Design/Edit. Переключение между инструментами дизайна и редактирования.
- Другие элементы. Частично скопированы из настроек. Дают возможность экспортировать HTML-код, добавлять комментарии и просматривать готовую страницу.
- Share. Отправка проекта другим пользователям в виде ссылки.
- Publish. Публикация веб-сайта. По умолчанию система выбирает бесплатный домен. Однако можно арендовать платный вариант.
Боковое меню
Это инструменты, благодаря которым пользователь может настраивать сайт. Они представлены элементами, которые можно перетаскивать на холст. Таким образом формируется шаблон будущего сайта.
Список доступных инструментов:
- Add Elements. Добавление элементов: текст, геометрические фигуры, контейнер, и так далее.
- Pages. Управление страницами: добавление, удаление, дублирование.
- Navigator. Древо веб-сайта.
- Components. Добавление компонентов.
- Variables. Настройка библиотек и переменных.
- Style Selectors. Настройка селекторов стилей. Можно использовать данный инструмент к каждому элементу по отдельности.
- Assets. Загрузка собственных файлов.
- CMS. Базы данных.
- Logic. Разработка бизнес-процессов на основе посетителей сайта.
- Users. Управление пользователями.
- Ecommerce. Создание интернет-магазина.
- Apps. Установка расширений. То есть внешних ресурсов для упрощения работы с сервисом.
- Settings. Настройки проекта.
- AI Learning Assistant. Помощник на базе ИИ.
- Audits. Проверка ошибок и тестирование сайта.
- Find Anything. Поиск текста на веб-странице.
- Video Tutorials. Видеоуроки по использованию инструментов Webflow.
Принцип работы конструктора
Webflow предлагает возможность создавать веб-страницы без необходимости вручную писать код. Визуальный редактор позволяет выбирать элементы, комбинировать их, настраивать стили и получать готовый результат. Однако, чтобы максимально эффективно использовать все возможности платформы, необходимо иметь базовое понимание HTML, CSS и JavaScript.
Без этих знаний пользователи могут столкнуться с трудностями, пытаясь разобраться в многочисленных параметрах и настройках, что может привести к неудачным результатам. Webflow — это гибкий и мощный инструмент, но его потенциал в полной мере раскрывается только для опытных пользователей, которые смогут легко ориентироваться в интерфейсе и использовать все его функции на профессиональном уровне.
Дальше рассмотрим важные разделы Webflow.
CMS
Внутренняя система управления контентом (CMS). Дает возможность пользователям легко редактировать содержимое сайта, добавлять блоки с множеством элементов и управлять базами данных (например, списками товаров). В Webflow база данных называется «Collection» и управляется прямо из редактора в разделе CMS.
Создавая коллекции, пользователи могут формировать динамический контент, такой как новости, списки треков, видео, товары и спикеров, с возможностью отображать или скрывать этот контент для различных аудиторий и страниц. Webflow также поддерживает вставку блоков кастомного кода через CMS, что позволяет интегрировать данные из внешних источников и создавать уникальные решения для каждой страницы сайта.
Webflow Users
Позволяет эффективно работать с различными категориями пользователей. Этот инструмент расширяет возможности стандартных функций конструкторов сайтов, таких как рассылка электронных писем и SMS. Также есть возможность проектировать персонализированные личные кабинеты и настраивать контент в зависимости от местоположения пользователя, способа входа на сайт и других характеристик. Однако стоит учитывать, что эта функция имеет ограничение на регистрацию не более 20 тысяч аккаунтов.
При подключении функции e-commerce Webflow позволяет создавать платные подписки для зарегистрированных пользователей, что открывает возможности для монетизации контента. Настройки оплаты и подписок в Webflow отличаются высокой гибкостью, позволяя подстроить их под конкретные нужды бизнеса.
Для интеграции пользовательских данных с внешними CRM-системами или таблицами Webflow предлагает использовать Zapier или API, что обеспечивает удобное взаимодействие с другими сервисами и платформами. Такой подход расширяет функционал и возможности управления аудиторией.
E-commerce
Webflow предоставляет обширные возможности для создания полностью кастомизируемого интернет-магазина. Пользователи могут гибко настроить оформление и функционал всех ключевых элементов, включая корзину, витрины, карточки продуктов, страницы оплаты и формы заказа.
Платформа позволяет не только управлять внешним видом магазина, но и эффективно администрировать товары, контролировать их остатки, настраивать условия заказа и многие другие параметры. Встроенная функция переписки с клиентами обеспечивает оперативное взаимодействие с покупателями прямо через интерфейс Webflow.
Что касается платежных решений, Webflow поддерживает интеграцию с популярными системами, такими как Stripe, Google Pay, Apple Pay и PayPal.
Дашборд
Представляет собой персональный кабинет, где сосредоточены все проекты пользователя и опции, не связанные напрямую с редактированием макетов. Их можно удобно сортировать по папкам, дублировать и делиться ссылками. Каждому проекту доступны обширные настройки: от определения названия и добавления фавикона до интеграции кастомного кода, настройки уведомлений, SEO-оптимизации, статистики и резервного копирования. Веб-платформа также предоставляет многочисленные возможности по обеспечению безопасности, особенно в отношении форм — включая капчи, настройку адресов для доставки сообщений, поля для регистрации и пароли для доступа.
Личный кабинет состоит из следующих разделов:
- All sites. Раздел, где собраны все созданные пользователем проекты.
- Tutorials. Интерактивные обучающие материалы.
- General. Настройка личного кабинета.
- Team. Управление общим доступом проекта.
- Plans. Смена и оплата тарифного плана.
- Billing. Настройки счета-фактуры, управление счетами.
- Apps & Integrations. Страница для разработчиков. Дает возможность использовать API и подключать сторонние ресурсы.
- Templates & Libraries. Управление и подключение шаблонов и библиотек.
Создание проекта с нуля
В Webflow редактор работает по принципу визуального HTML/CSS-конструктора. При этом знать код пользователю не обязательно. Для этого предусмотрена удобная визуальная библиотека, облегчающая процесс разработки.
При создании нового проекта пользователи могут начать с чистого листа или выбрать один из доступных шаблонов, как бесплатных, так и платных. Хотя количество бесплатных шаблонов ограничено, они удобны для старта работы, так как сразу демонстрируют, как устроена страница.
Редактор Webflow на первый взгляд может показаться перегруженным, но после просмотра вводных видеоуроков, интерфейс становится более понятным.
Чтобы создать проект самостоятельно выполните следующие действия:
- В Дашборде нажмите на кнопку New site.
- Выберите Blank site, чтобы создать веб-страницу с нуля.
- Вначале перейдите во вкладку Add Elements.
- Дальше формируйте сайт, как вам позволяет фантазия. Что нужно добавить — секцию, текст, контейнер.
- При выделении любого элемента слева будет появляться навигатор с древом веб-сайта.
- Выделенный объект будет показывать, в какой иерархии он находится. Также, выделяя объект в навигаторе он будет отображаться на странице.
- Справа система покажет свойства выделенного объекта. Пользователь может менять значения элемента. Например, скрыть его, поменять цвет, изменить текст и так далее.
- Можно сразу посмотреть и настроить CSS.
- Чтобы добавить новый блок, наведите на верхнее значение элемента сайта. Появится иконка «+». Нажмите ее и выберите, какой контейнер хотите добавить.
- Также стоит обратить внимание на вкладку Pages. Это управление страницами. Можно отдельно добавить блог, категории, новые слои.
- Если есть достаточно знаний для работы с кодом, используйте панель Export code.
- Весь сайт может отображаться в разных вариантах: HTML, CSS, JS. Правьте код и добавляйте свои элементы.
Для старта этих инструментов вполне хватит, чтобы создать простой одностраничник.
Внимание! Вкладка «Tutorials» на дашборде предлагает десятиминутное руководство с подсказками, что помогает быстро освоить основной функционал редактора и начать работу над проектами.
Использование шаблонов
Webflow для новичков предлагает готовые решения веб-дизайна. В частности широкий выбор готовых, адаптивных и разнообразных шаблонов. В Webflow доступно множество решений, подходящих для различных типов сайтов: визиток, портфолио, интернет-магазинов, лендингов, корпоративных сайтов, промо-страниц и блогов. Большинство шаблонов платные, с ценами в диапазоне от $24 до $149. Они отличаются высоким качеством, хотя и варьируются в деталях и стиле.
Новичкам может быть полезно начать с одного из 40 бесплатных вариантов. Веб-платформа позволяет просматривать шаблоны в формате сайта или сразу в редакторе с поддержкой всех разрешений — для ПК и мобильных устройств. Благодаря этому начинающие пользователи могут взять готовый дизайн, добавить свой контент через визуальный редактор и получить функциональный сайт. Этот упрощенный сценарий не раскрывает весь потенциал Webflow, но предоставляет удобное решение для создания веб-страниц.
Чтобы работать с шаблонами выполните следующие шаги:
- В Дашборде выберите пункт New site.
- Затем Template.
- На бесплатном тарифном плане ищите шаблоны с подписью Free. Платные начнут работать после перевода денежных средств.
- После выбора шаблон загрузится и его можно редактировать.
Кроме того, Webflow может использоваться как платный онлайн-редактор для верстки шаблонов. Тарифы начинаются от $16 в месяц за 10 проектов. Главной особенностью этого тарифа является возможность экспорта кода. То есть готовый проект можно интегрировать в другие системы, такие как WordPress.
Тарифные планы
У Webflow есть ежемесячная и ежегодная подписка. Во втором случае пользователь может сэкономить до 22% бюджета. Также сервис предоставляет несколько тарифных планов, которые варьируются по стоимости и функциональности.
Free
Включает базовый функционал, такой как домен Webflow.io, возможность создания двух страниц, 20 коллекций CMS и 50 элементов CMS. Пользователи также получают 1 Гб дискового пространства и возможность бесплатной локализации. Данный тариф позволяет отправить до 50 форм в течение всего срока действия плана.
Basic
Подходит для более сложных проектов. Стоимость $18 в месяц. Пакет поддерживает подключение пользовательского домена, создание до 150 страниц и отправку до 500 форм ежемесячно. Однако в этом тарифе отсутствуют функции CMS, что делает его подходящим для сайтов без сложных требований к контенту.
CMS
За $29 в месяц пользователь получает тарифный план, ориентированный на блоги. Пакет поддерживает до 150 страниц, включает 20 коллекций CMS и до 2 000 элементов CMS. Пользователи также получают до 50 Гб пропускной способности и могут назначить до трех редакторов контента для совместной работы. Этот план включает расширенные функции, такие как поиск по сайту и защита от перенапряжений.
Business
Подходит для крупных сайтов. Бизнес-тариф стоимостью $49 в месяц поддерживает до 300 страниц, 40 коллекций CMS и 10 000 элементов CMS. Также обеспечивает 100 Гб пропускной способности и возможность загрузки файлов через формы. В рамках этого плана можно назначить до десяти редакторов контента. Это делает тарифный план идеальным для крупных проектов с высокими требованиями к управлению контентом и производительностью.
Enterprise
Для корпоративных клиентов Webflow предлагает индивидуальные условия. Пакет включает неограниченное количество пользователей, масштабирование для предприятий, гарантии SLA и специализированную поддержку. Клиенты могут связаться с отделом продаж для обсуждения условий. Подписка будет соответствовать уникальным требованиям и обеспечит высокий уровень безопасности и поддержки.
Мнения пользователей
Webflow получает довольно противоречивые отзывы от своих пользователей. С одной стороны, этот конструктор сайтов позволяет создавать разнообразные и профессиональные веб-страницы. То есть они подходят для любых задач — от простых лендингов до сложных корпоративных порталов.
С другой стороны, многие пользователи выражают недовольство сложностью управления сервисом и обилием инструментов. Платформа сложна для освоения, особенно для новичков.
Проблемы усугубляются тем, что весь функционал Webflow представлен исключительно на английском языке. Это создает дополнительные трудности для пользователей из разных стран СНГ, включая Россию. Отмечается, что освоение интерфейса требует значительного времени и усилий. Это может быть отталкивающим фактором для тех, кто рассчитывает на быстрое внедрение и работу.
Несмотря на эти недостатки Webflow успешно выполняет свою основную задачу. Об этом свидетельствуют многочисленные отзывы. Сервис значительно облегчает работу веб-дизайнерам, позволяя создавать визуально привлекательные и функциональные сайты даже при наличии только базовых знаний в программировании. В результате Webflow остается востребованным инструментом, хотя и не лишенным некоторых трудностей, которые могут отпугнуть менее опытных пользователей.
Вывод
Webflow — это качественный и дорогостоящий инструмент, ориентированный на профессиональных разработчиков. Особенно подходит тем, кто занимается созданием клиентских сайтов. Сервис предоставляет широкий функционал, который позволяет разрабатывать сложные и индивидуализированные проекты, что делает его востребованным среди опытных пользователей. Несмотря на высокую стоимость, Webflow оправдывает затраты. Конструктор предлагает возможности для тех, кто делает свою работу на высоком уровне и готов продавать ее по соответствующей цене.
Редактор действительно впечатляет своими возможностями, и пользователи могут бесплатно практиковаться в его использовании, осваивая основные принципы дизайна и тонкости работы с CSS. Однако новичкам платформа может показаться сложной, в то время как для профессионалов она предоставляет все необходимые инструменты для создания качественных сайтов. Обучающие материалы, доступные на платформе, помогут новичкам освоить основные навыки, но по-настоящему Webflow раскрывает свой потенциал в руках опытных разработчиков, готовых к созданию уникальных и дорогих проектов.
0