Beaver Builder против Visual Composer: какой конструктор страниц WordPress лучше?

Хотите знать, чем отличаются Beaver Builder от Visual Composer? Beaver Builder и оригинальный Visual Composer с самого начала были новаторами на рынке конструкторов страниц WordPress.

Оба продукта за прошедшие годы претерпели немало изменений. Фактически, то, что раньше называлось Visual Composer, теперь известно как WPBakery Page Builder, а новый Visual Composer - это более современный подход к классическому построителю страниц.

В этом посте мы разберем Beaver Builder и новый Visual Composer и посмотрим, как они сравниваются друг с другом в нескольких разных областях. Мы представим каждый плагин, посмотрим, что может предложить каждый конструктор страниц, опишем несколько дополнительных функций, доступных в каждом решении, и дадим вам структуру их цен.

Что такое Beaver Builder?

Beaver Builder - это плагин внешнего визуального редактора, который был новатором в области создания страниц WordPress с момента его запуска в 2014 году. Он используется более чем на одном миллионе веб-сайтов и имеет средний рейтинг 4,8 на WordPress.org. В редакторе Beaver Builder есть готовые шаблоны макетов, модули содержимого и параметры настройки для создания потрясающих страниц и сообщений.

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

Что такое Visual Composer?

Еще пару лет назад Visual Composer был конструктором страниц, который использовался для создания сотен тем на Envato Marketplace. Ситуация изменилась, когда популярный конструктор страниц был переименован в WPBakery Page Builder.

Затем разработчики этого подключаемого модуля создали новый продукт, который модернизировал исходную страницу Visual Composer и возможности создания веб-сайтов. Разработчики хотели сделать новый продукт более конкурентоспособным с помощью интуитивно понятных конструкторов страниц, таких как Beaver Builder, и отказаться от пожизненной лицензии Envato, чтобы более эффективно покрывать затраты на разработку. Они назвали этот новый продукт Visual Composer, несмотря на путаницу со старым названием продукта.

Основным преимуществом нового Visual Composer над родственным продуктом WPBakery Page Builder является его способность настраивать любую тему, позволяя создавать и редактировать верхние, нижние колонтитулы и боковые панели сторонних тем.

Beaver Builder против Visual Composer: взгляд на особенности построения страниц каждого редактора

Чтобы начать сравнение Beaver Builder и Visual Composer, давайте исследуем каждый конструктор страниц и посмотрим, что они могут предложить в следующих областях:

• Состав
• Модули
• Укладка
• Расширенные параметры настройки
• Шаблоны

Состав

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

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

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

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

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

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

Когда дело доходит до структуры редактора, вы строите свои страницы в ряды, добавляете столбцы в эти строки и добавляете модули или «элементы» в свои столбцы.

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

Модули

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

Как показано на скриншоте выше, модули категорий Beaver Builder Basic позволяют добавлять на страницу текст, кнопки и различные формы мультимедиа. Также есть специальная категория «Медиа», в которой есть отзывы, карта, слайдеры и галереи.

Категория «Действия» (верхняя категория на скриншоте выше) заполнена модулями, предназначенными для поощрения посетителей к действиям на вашей странице, нажав кнопку действия, заполнив форму или подписавшись на ваш список рассылки. В категории «Макет», также показанной на снимке экрана, вы можете представить информацию визуально интересными способами с помощью таблицы цен, гармошки или вкладок. Вы также можете добавить боковую панель со стандартной группой виджетов WordPress, которую вы определили. Категория «Информация» позволяет наглядно представлять числа и счетчики времени. В категории «Сообщения» есть модули, которые различными способами отображают отфильтрованный набор сообщений. В этом примере вы можете отобразить первые пять сообщений категории «Новости» в виде карусели на своей домашней странице. Наконец, есть группа модулей, которые позволяют добавлять любой виджет WordPress в область содержимого вашей страницы.

Все, что не предлагает Beaver Builder, может быть добавлено с помощью сторонних плагинов, либо надстроек, которые добавляют дополнительные модули, либо продуктов с короткими кодами, которые вы можете вставить в макеты Beaver Builder. Когда вы устанавливаете WooCommerce, Beaver Builder предлагает дополнительные модули, связанные с продуктами, и специальные параметры для отображения продуктов на ваших страницах.

Visual Composer предлагает сотни элементов, хотя многие из них являются вариациями одного и того же типа элемента в разных стилях, чтобы сэкономить ваше время и дать вам идеи.

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

К счастью, большинство элементов Visual Composer не появляются автоматически в разделе «Добавить элемент» редактора, поэтому вам не нужно сортировать кучу элементов, которые вы редко используете. Вместо этого вы будете использовать Visual Composer Hub, библиотеку всех элементов, блоков (предварительно построенных строк и столбцов), шаблонов и прочего, которые вы можете импортировать в раздел «Добавить элемент» редактора. В разделе «Добавить элемент» элементы сгруппированы по нескольким категориям, таким как «Базовый», «Медиа», «Контейнер» и «Контент».

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

Укладка

Параметры стиля Beaver Builder меняются в зависимости от модуля. Если в вашем модуле есть текст, вы обычно сможете изменить его шрифт, размер шрифта, толщину и цвет шрифта, а также добавить интервал и даже тень текста.

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

Visual Composer не имеет специальной вкладки Style для своих элементов, как у Beaver Builder и большинства других конструкторов страниц. Вместо этого вы добавите и настроите содержимое и стили каждого элемента в одном общем разделе, как показано на следующем снимке экрана.

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

Расширенные параметры настройки

Каждый модуль Beaver Builder имеет почти одинаковый набор дополнительных опций. Они включают в себя настройки полей, стили и продолжительность анимации, видимость (например, вы хотите, чтобы элемент видели только вошедшие в систему пользователи) и раздел для пользовательских идентификаторов и классов. Вот скриншот большей части вкладки "Дополнительно". На снимке экрана не показаны поля пользовательского идентификатора и класса в разделе HTML. Кроме того, в строках и столбцах есть поля Padding в дополнение к настройкам полей.

Расширенные параметры Visual Composer находятся в разделе «Параметры дизайна». Вот частичный снимок экрана.

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

Вы также можете добавить цвет фона к элементу, выбрать фоновое изображение и настроить параметры анимации. Расширенные параметры фона не отменяют параметры фона, доступные в разделе «Общие».

Шаблоны

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

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

Visual Composer имеет аналогичное количество шаблонов. Они не организованы по категориям, но предлагают разнообразный выбор и помогают создавать множество разных страниц. Некоторые из шаблонов показаны ниже.

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

Дополнительные возможности

Самая большая разница между новым Visual Composer и WPBakery Page Builder - это способность Visual Composer редактировать заголовок, нижний колонтитул и боковые панели вашей темы или создавать их с нуля.

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

Официальные темы

Хотя оба продукта работают с большинством любых тем, Beaver Builder и Visual Composer предлагают официальные темы, интегрированные с их построителями страниц.

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

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

Visual Composer имеет стартовую тему Visual Composer. Как и тема Beaver Builder, у нее есть множество вариантов тем и стилей, которые вы можете настроить. Он также оптимизирован для SEO и поддерживает WooCommerce.

Редакторы тем

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

Beaver Themer также добавляет две функции к стандартному плагину Beaver Builder. Во-первых, раздел «Видимость» на вкладке «Дополнительно» добавляет условную логику, чтобы дать вам больше контроля над отображением макета или содержимого. Например, вы можете отображать контент только для клиентов WooCommerce, которые потратили больше определенной суммы, или для участников сайта с определенными ролями или возможностями пользователей.

Вторая функция - это доступ к полевым соединениям в некоторых настройках строк и модулей, которые извлекают информацию из базы данных специально для просматриваемой страницы. Эта функция поддерживает настраиваемые поля WordPress, плагин Advanced Custom Fields и плагин Pods, поэтому вы можете добавлять настраиваемые поля на страницу, а затем использовать модуль для их отображения на странице.

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

Сохранение элементов для повторного использования

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

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

Хотя сохранение элементов для повторного использования доступно в WPBakery Page Builder, разработчики еще не добавили эту функцию в новый Visual Composer на момент написания этой статьи.

Цены и поддержка: Beaver Builder vs Visual Composer

Когда дело доходит до сравнения цен на Beaver Builder и Visual Composer, оба этих плагина предлагают модели ценообразования «freemium». Бесплатная версия Beaver Builder предлагает всего несколько модулей: аудио, фото, видео, HTML, текстовый редактор и боковую панель. Нет шаблонов, и вы не можете сохранять пользовательские элементы.

Бесплатная версия Visual Composer включает в себя два разных элемента кнопок, элемент заголовка Google Fonts и два разных видеоэлемента для видео YouTube и Vimeo. Если вы создадите бесплатную учетную запись и подключите свой веб-сайт, у вас будет доступ к небольшому количеству хорошо продуманных бесплатных шаблонов.

Beaver Builder предлагает три премиальных плана:

• Стандартный за 99 долларов - открывает доступ к неограниченным лицензиям на сайт, всем премиум-модулям и шаблонам, а также к одному году поддержки и обновлений.
• Pro за 199 долларов - дополнительно открывает тему Beaver Builder и возможность работы с несколькими сайтами.
• Агентство за 399 долларов - дополнительно открывает доступ к настройкам многосайтовой сети и white label.

Все планы продлеваются со скидкой 40%. Поддержка доступна через тикет-систему. Плагин Beaver Themer доступен в качестве надстройки для премиум-пользователей по цене 147 долларов США и обновляется со скидкой 40%. На все продукты распространяется 30-дневная политика возврата средств.

Visual Composer также предлагает три премиальных плана:

• Единый веб-сайт за 59 долларов - разблокирует одну лицензию на сайт, модули и шаблоны премиум-класса, редактор верхнего, нижнего и бокового колонтитула, а также один год поддержки и обновлений.
• 3 веб- сайта по цене 149 долларов США - открывает три лицензии сайта.
• Разработчики за 349 долларов - открывает неограниченное количество лицензий на сайт.

Все планы продлеваются со скидкой 40% и поддерживаются политикой возврата в течение 15 дней. Поддержка доступна через тикет-систему. Тема для начинающих доступна бесплатно даже для пользователей не премиум-класса.

Последние мысли: Beaver Builder vs Visual Composer

Хотя некоторые функции, существующие в WPBakery Page Builder, отсутствуют кое-где, новый Visual Composer предлагает многое, даже в своей бесплатной версии. К сожалению, конечный результат - неуклюжий пользовательский опыт в целом.

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

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

Beaver Builder и множество других конструкторов страниц WordPress гораздо более интуитивно понятны и работают быстрее. Вы можете добиться еще большего с Beaver Builder, если примете во внимание его Beaver Themer и функции сохранения / экспорта.

Когда дело доходит до сравнения Beaver Builder и Visual Composer, вы всегда можете сами протестировать их, чтобы увидеть, что вам больше нравится. У Beaver Builder есть демоверсия, которую вы можете использовать, чтобы проверить это. Вы также можете загрузить бесплатную версию Visual Composer с их веб-сайта, чтобы попробовать.

Хотите узнать больше? Посмотрите наше сравнение конструктора страниц Beaver Builder и Elementor WordPress.

Эй Джей Моррис

AJ обладает более чем двадцатилетним опытом работы и разработки членских сайтов с широким кругом клиентов.