Beaver Builder против Elementor Pro: какой лучший конструктор страниц WordPress?
Опубликовано: 2021-09-02Пытаетесь выбрать между Beaver Builder и Elementor Pro в качестве инструмента для создания пользовательских сайтов WordPress с помощью визуального конструктора с перетаскиванием?
Это два лучших плагина для создания страниц WordPress. Оба они больше, чем просто конструкторы страниц — вы также можете использовать их для создания полной темы.
Итак, как вы можете выбрать между ними? Ну, об этом этот пост.
Я думаю, что оба этих плагина являются отличными инструментами, поэтому я не буду объявлять ни одного победителя. Вместо этого я попытаюсь помочь вам выбрать лучший плагин для ваших нужд и бюджета.
Давайте копать!
Функции
Чтобы начать наше сравнение Beaver Builder и Elementor Pro, давайте подробно рассмотрим функции, которые предлагают оба этих инструмента.
Вот что означают значки в сравнительной таблице ниже:
- ️ — функция доступна в плагине.
- ️️ — функция доступна в обоих плагинах, но реализация одного плагина более гибкая/мощная.
- – функция недоступна в плагине.
Характерная черта | Бобровый Строитель | Элементор Про |
Визуальный, интерфейсный редактор | ️ | ️ |
Перетаскивание | ️ | ️ |
Встроенное редактирование текста | ️ | ️ |
Выделенное отзывчивое редактирование | ️ | ️ |
Виджеты контента | ️ | ️️ |
Готовые шаблоны | ️ | ️️ |
Многоразовые шаблоны (ваши собственные проекты) | ️ | ️ |
Конструктор тем | ️* | ️ |
Вставка динамического содержимого (включая настраиваемые поля) | ️* | ️ |
Конструктор всплывающих окон | ️ | |
Конструктор форм | ️ | ️️ |
Поддержка WooCommerce | ️ | ️️ |
Специальная тема | ️ | ️ |
Белая маркировка | ️ | |
Мультисайтовая поддержка | ️ | ️** |
Копировать/вставить стили | ️ | ️ |
Поддержка правого клика | ️ | |
Темный режим (интерфейс) | ️ | ️ |
*Требуется официальное (но отдельное) дополнение Beaver Themer.
** Для Elementor Pro требуется активный лицензионный ключ для каждого сетевого сайта в вашей многосайтовой сети.
Заключение функций Beaver Builder и Elementor Pro
С точки зрения возможностей Elementor Pro имеет явное преимущество. Ты получаешь…
- Конструктор всплывающих окон, который является действительно мощной функцией, которая может заменить необходимость в отдельном плагине для всплывающих окон / подписки.
- Больше виджетов на выбор, включая уникальные опции, такие как кнопка PayPal для приема платежей.
- Больше шаблонов на выбор.
- Более мощный конструктор форм.
- Дополнительные варианты дизайна ( я не рассматривал их в таблице, но расскажу о них чуть позже ).
- Лучшая поддержка WooCommerce. Beaver Themer поддерживает WooCommerce, но Elementor Pro дает вам больше гибкости для работы с WooCommerce.
Однако в приведенной выше сравнительной таблице трудно уловить один момент — это компромисс между функциями и стабильностью. Если вы хотите добавить больше функций в инструмент, вам нужно ускорить цикл разработки, что увеличивает вероятность ошибок или проблем.
У Beaver Builder более медленный цикл разработки, что означает, что у него не так много функций. Но этот более медленный цикл разработки действительно означает, что Beaver Builder действительно надежен, и вы можете быть уверены, что обновление не вызовет проблем.
Я, конечно, не говорю, что Elementor Pro нестабилен. Это самый популярный плагин для создания страниц, и миллионы сайтов используют его без проблем.
Я просто пытаюсь подчеркнуть, что стабильность — это то, что Beaver Builder делает хорошо и заслуживает похвалы. Если вы относитесь к тому типу людей, которые ценят стабильность, а не получение дополнительных функций, это может быть важно для вас.
С другой стороны, если вам нужно максимальное количество функций и вы хотите регулярно получать доступ к новым функциям, Elementor Pro определенно имеет преимущество.
Интерфейс
Далее давайте рассмотрим, как интерфейс работает с каждым инструментом.
Качество интерфейса субъективно, поэтому я не буду здесь объявлять «победителя». Оба инструмента имеют отличные интерфейсы, и оба, как правило, работают быстро и без сбоев.
Однако одно из преимуществ Beaver Builder заключается в том, что он позволяет настраивать интерфейс в соответствии с вашими предпочтениями, тогда как интерфейс Elementor в значительной степени просто исправлен.
С другой стороны, у Elementor есть некоторые преимущества в том, что он дает вам некоторые полезные инструменты, которых нет в Beaver Builder, такие как поддержка щелчка правой кнопкой мыши и инструмент навигатора для организации вашего дизайна.
Бобровый Строитель
Как я уже упоминал выше, интерфейс Beaver Builder довольно гибкий. При первом запуске Beaver Builder вы увидите полноэкранный предварительный просмотр вашего проекта с панелью инструментов вверху:

Чтобы вставить модули или шаблоны, вы можете щелкнуть значок «плюс», чтобы открыть панель:

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

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

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

Одна функция, которая мне нравится в Beaver Builder, — это возможность создавать проекты с несколькими столбцами, просто перетаскивая один модуль рядом с другим:

Большинство построителей страниц заставляют вас настраивать структуру столбцов перед добавлением элементов, что требует дополнительного времени ( Beaver Builder также позволяет вам сделать это, если вы предпочитаете этот метод ).
В дополнение к тому, что я показал вам выше, Beaver Builder также предлагает собственный плагин Assistant, который поможет вам быстро переключаться между проектами ( хотя для этого не требуется Beaver Builder ).
Элементор Про
С Elementor и Elementor Pro вы получаете фиксированную боковую панель в левой части интерфейса и предварительный просмотр вашего дизайна в реальном времени справа:

Если вы хотите просмотреть полноразмерный предварительный просмотр своего дизайна, вы можете свернуть боковую панель, чтобы скрыть интерфейс Elementor:

На боковой панели вы можете добавлять новые модули и настраивать параметры элемента:

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

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

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

Если вам нужен больший контроль над интерфейсом Elementor, как это позволяет Beaver Builder, вы можете использовать сторонний плагин, такой как Flexible Elementor Panel.
Варианты дизайна
Если вы заинтересованы в визуальном конструкторе, вам, вероятно, нужен инструмент, который поможет вам настроить дизайн без необходимости использования какого-либо пользовательского CSS. Для этого вам понадобится широкий набор встроенных опций дизайна.
Оба инструмента достаточно гибкие, когда дело доходит до основ. Вы можете легко контролировать:
- Цвета
- Типография
- Интервал через поля/отступы
- Фоны
- Отзывчивый дизайн
- И т. д.
Тем не менее, Elementor Pro также идет дальше основ, поэтому я думаю, что он довольно явный победитель, когда речь идет о гибкости дизайна.
По сути, когда дело доходит до дизайна, Elementor может делать почти все, что делает Beaver Builder, плюс «больше». Например, вот некоторые уникальные особенности дизайна в Elementor Pro:
- Эффекты движения — добавьте интересные эффекты, такие как эффекты прокрутки, трехмерный наклон, отслеживание мыши и многое другое. Узнайте больше и посмотрите примеры здесь.
- Пользовательское позиционирование — используйте абсолютное и относительное позиционирование, чтобы идеально размещать виджеты в своих проектах.
- Добавляйте CSS непосредственно в элементы — вы можете добавлять CSS непосредственно в виджеты/столбцы/разделы, тогда как Beaver Builder позволяет добавлять только класс CSS или идентификатор.
Конечно, есть много других более мелких опций и различий между плагинами. Я просто пытаюсь подчеркнуть, что в целом Elementor Pro определенно имеет больше вариантов дизайна.
Единственный конструктор, который, как мне кажется, может соперничать с Elementor Pro с точки зрения встроенных опций дизайна, — это плагин Divi Builder (узнайте больше в нашем обзоре Divi).
Спектакль
Когда вы используете конструктор страниц, вы всегда будете идти на некоторые компромиссы, когда дело доходит до производительности. Независимо от того, какой конструктор страниц вы выберете, он никогда не создаст такой же легкий дизайн, как собственный редактор WordPress.
При этом некоторые плагины лучше других.
Beaver Builder всегда был одним из самых легких вариантов ( для компоновщика страниц ), и в последнее время команда Elementor уделяла большое внимание повышению производительности с такими улучшениями, как упрощение DOM и оптимизация загрузки ресурсов для загрузки скриптов только там, где это необходимо.
Чтобы оценить производительность этих двух инструментов, я создал идентичный дизайн для каждого из них. Дизайн довольно прост – я просто пытаюсь понять базовый «вес» каждого инструмента. Он просто включает в себя текстовый виджет, виджет кнопки и контактную форму ( из компоновщика страниц ). Я использую настройки по умолчанию в обоих инструментах.
Размер страницы | HTTP-запросы | |
Бобровый Строитель | 71 КБ | 11 |
Элементор | 315 КБ | 32 |
*Эти цифры включают мою тему GeneratePress.
В целом Beaver Builder немного легче, по крайней мере, в этом тесте. Elementor Pro предоставляет вам больше функций и дизайнерских эффектов, поэтому естественно, что для этого необходимо загрузить больше ресурсов. Например, Elementor загружает сценарии для своих эффектов движения, чего нет в Beaver Builder.
Если вы включите новую улучшенную функцию загрузки ресурсов Elementor ( которая все еще находится только в стадии альфа-тестирования ), разница станет меньше, потому что Elementor лучше загружает определенные ресурсы только там, где они необходимы:
Размер страницы | HTTP-запросы | |
Бобровый Строитель | 71 КБ | 11 |
Элементор | 239 КБ | 30 |
И это все без всяких плагинов для оптимизации производительности. Если вы используете что-то вроде WP Rocket, вы можете еще больше снизить эти цифры.
Думаю, я бы резюмировал производительность следующим образом:
- Beaver Builder немного легче, чем Elementor Pro, что имеет смысл, поскольку в нем меньше функций и эффектов для загрузки.
- Elementor станет лучше, если вы включите новые функции производительности, которые все еще находятся в стадии тестирования, когда я пишу это.
- Самое главное — вы можете создать быстро загружаемый сайт с помощью обоих инструментов, если вы создаете свой дизайн оптимальным образом и применяете передовые методы повышения производительности WordPress.
Цены
С точки зрения цены оба инструмента имеют некоторые преимущества. Elementor Pro дешевле, если вам нужен инструмент только для одного сайта или небольшого количества сайтов, а Beaver Builder дешевле, если вам нужен инструмент для большого количества сайтов (более 25 сайтов).
Прежде чем мы сможем сравнить цены, вам нужно подумать о том, каковы ваши потребности.
Elementor Pro включает в себя все свои функции в одном плагине. Поэтому, когда вы покупаете Elementor Pro, вы получаете доступ ко всему , включая конструктор тем, конструктор всплывающих окон и т. д.
Beaver Builder, с другой стороны, разделяет функции конструктора страниц и создания тем.
- Плагин Core Beaver Builder Pro — поддерживает только создание страниц.
- Официальное дополнение Beaver Themer — добавляет поддержку полного создания тем ( и требует для работы премиум-плагина компоновщика страниц ).
Таким образом, с Beaver Builder вы заплатите одну цену, если вы просто хотите создать страницу, и другую цену, если вы хотите добавить создание темы.
Еще одно важное отличие заключается в том, что Beaver Builder поддерживает неограниченное количество сайтов во всех планах , в то время как все планы Elementor Pro имеют ограничения на количество сайтов.
Давайте рассмотрим цены для каждого, а затем я сравню их и покажу, когда каждый инструмент дешевле.
Цены на Элементор Про
Вот цены Elementor Pro — все эти цены указаны за годовую лицензию:

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

Чтобы добавить Beaver Themer, вы заплатите еще 147 долларов (всего 246 долларов).
Как с Beaver Builder, так и с Beaver Themer вы получите скидку 40%, если продлите лицензию, чтобы продолжать получать поддержку и обновления после первого года.
Когда дешевле купить Elementor Pro или Beaver Builder?
Чтобы обобщить всю приведенную выше информацию, давайте рассмотрим различные ситуации, когда каждый инструмент дешевле:
- Elementor Pro намного дешевле, если вам нужен инструмент только для одного веб-сайта (49 долларов).
- Если вам нужен только конструктор страниц, точка безубыточности — три веб -сайта. Если вам нужен инструмент только для трех веб-сайтов, инструменты стоят одинаково (99 долларов). Но если вам нужно более трех сайтов, Beaver Builder дешевле.
- Если вам нужно создание страниц и создание тем, точка безубыточности составляет 25 веб-сайтов . Если у вас менее 25 сайтов, Elementor Pro дешевле. Но если у вас более 25 сайтов, Beaver Builder дешевле.
Это все цены первого года. Если вы продлеваете подписку после первого года, Beaver Builder становится дешевле, потому что Beaver Builder предлагает 40% скидку на продление, а Elementor Pro — нет.
Следует ли вам использовать Beaver Builder или Elementor Pro?
Я думаю, что Beaver Builder и Elementor Pro — два из лучших (если не два лучших) конструктора страниц WordPress, поэтому я не думаю, что вы примете «неправильное» решение, когда речь заходит о Beaver Builder и Elementor Pro.
Вместо этого я думаю, что нужно просто выбрать лучший инструмент для вашей ситуации:
- Если вам нужно больше функций и вариантов дизайна, Elementor Pro, вероятно, лучший выбор для ваших нужд. Вы получаете уникальные функции, такие как конструктор всплывающих окон, уникальные варианты дизайна, такие как эффекты движения и настраиваемое позиционирование, и многое другое. Проще говоря, Elementor Pro — один из самых многофункциональных инструментов дизайна WordPress, поэтому он является самым популярным плагином для конструктора.
- Если вам просто нужен надежный конструктор, который немного легче и имеет все основные параметры создания страниц и создания тем, Beaver Builder также является отличным выбором.
В любом случае, у вас будет отличный инструмент, который поможет вам создавать потрясающие дизайны.
Конечно, есть еще одно отличие, которое может сыграть важную роль в вашем решении, — цена . Помните:
- Elementor Pro дешевле для одного сайта и одинаков по цене для 3 сайтов.
- Beaver Builder дешевле для 3+ сайтов, если вам нужен только конструктор страниц ИЛИ 25+ сайтов, если вам нужно создание страниц и создание тем. В остальном Elementor Pro все равно дешевле.
- Beaver Builder предлагает 40% скидку на продление, а Elementor Pro — нет.
Чтобы узнать больше об обоих плагинах, вы можете прочитать наши полные обзоры:
- Элементор обзор
- Обзор бобра-строителя
У вас остались вопросы о Beaver Builder и Elementor Pro? Дайте нам знать об этом в комментариях!