Divi против Elementor: сравнение популярных конструкторов страниц для WordPress

Divi против Elementor WordPress

Divi и Elementor — два лучших конструктора страниц WordPress с функцией Drag-and-Drop. Они позволяют создать полностью индивидуальный сайт, не требуя никаких знаний программирования. Помимо помощи в разработке страниц, они поддерживают создание тем и продвинутую интеграцию динамического контента.

Но хотя у них много общего, некоторые важные различия все-таки присутствуют.

Сравнение конструкторов Divi и Elementor

В этой статье я проведу подробное сравнение Divi и Elementor, чтобы помочь вам выбрать подходящий вариант для своих нужд.

Я не ставлю перед собой задачу — определить одного «победителя». Вместо этого покажу множество сходств и различий, чтобы помочь вам выбрать подходящий инструмент. Для этого сравним Elementor и Divi в 6 ключевых областях, а затем сведем их воедино.

Производительность: Divi vs Elementor

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

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

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

Использовались следующие модули:

  • Текст абзаца.
  • Кнопка.
  • Числовой счетчик.
  • Основная контактная форма.
  • Таблица цен.
  • Двухкомпонентный спойлер.
  • Отзывы.

Чтобы это соревнование было честным, я тестирую версию плагина Divi Builder в сравнении с Elementor и Elementor Pro. Для этого используется одна и та же тема (Astra), чтобы точно сравнить производительность конструкторов.

Тестовая страница Divi

Тестовая страница на Divi

Тестовая страница Divi сделана с помощью:

  • Плагина Divi Builder.
  • Темы Astra.
  • Дизайна, созданного на Диви с использованием модулей, описанных выше.

Тестовая страница Elementor

Тестовая страница на Elementor

Тестовая страница Elementor сделана с помощью:

  • Бесплатного плагина Elementor (я отключил встроенные стили в пользу наследования стилей темы).
  • Elementor Pro.
  • Темы Astra.
  • Дизайна, созданного на Элементор с использованием модулей, описанных выше.

Следует отметить, что Divi включает встроенную функцию минимизации и объединения CSS и JavaScript, а Elementor — нет. По этой причине Divi лучше ограничивает HTTP-запросы «из коробки». Однако вы можете (и должны) легко добавить такую же оптимизацию в Elementor с помощью бесплатного расширения, например, Autoptimize, или премиум-плагина, такого как WP Rocket.

По этой причине я провел два набора тестов:

Без дополнительных оптимизаций производительности.

С установленным Autoptimize для минимизации и объединения скриптов.

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

Также никакие изменения не вносились в среду WordPress по умолчанию.

Инструменты для тестирования:

  • WebPageTest: популярный инструмент для проверки скорости. Я настроил его на тестирование с компьютера.
  • web.dev: инструмент от Google, использующий Lighthouse. Он тестирует с мобильного устройства.

Производительность Divi

Начнем с результатов для самого Divi (без Autoptimize).

WebPageTest (без Autoptimize):

Тестирование диви без оптимизации

web.dev (без Autoptimize):

Тест Divi на web.dev

Выводы для Divi с установленным плагином Autoptimize.

WebPageTest (с Autoptimize):

Тест для Divi после оптимизации

web.dev (С Autoptimize):

Тест по web.dev после оптимизации

Производительность Elementor

Результаты для Элементор (без Autoptimize).

WebPageTest (без Autoptimize):

Elementor без оптимизации

web.dev (без Autoptimize):

Элементор по web.dev

Итоги для Elementor с установленным плагином Autoptimize.

WebPageTest (с Autoptimize):

Как с оптимизацией работает тестовая страница Elementor

web.dev (с Autoptimize):

web.dev с автооптимизацией

Выводы по производительности

Чтобы вам было проще воспринимать эти данные, вот две таблицы, в которых они собраны вместе.

Без Autoptimize:

Размер страницы HTTP запросы Оценка производительности (Lighthouse) Largest Contentful Paint (LCP)
Divi 339 KB 18 74 4.2 s
Elementor 327 KB 32 77 3.6 s

С Autoptimize:

Размер страницы HTTP запросы Оценка производительности (Lighthouse) Largest Contentful Paint (LCP)
Divi 335 KB 8 88 3.2 s
Elementor 319 KB 12 91 2.5 s

В целом, видно, что Элементор имеет небольшое преимущество перед Divi за счет меньшего размера файла. Он также лучше показал себя при аудите Lighthouse от web.dev и показал меньшее время наибольшей отрисовки контента в обоих тестах.

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

Если вам интересно, как темплейт Диви сравнится с Elementor Pro и темой Hello, то результат будет еще больше склоняться в пользу Elementor, потому что Hello легче Divi. По сути, если «Elementor + Astra» уже превосходит «Divi Builder + Astra», то если сравнивать «Elementor + Hello» с «Divi Builder + тема Divi», разрыв будет только увеличиваться.

Пользовательский интерфейс (UI): Divi vs Elementor

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

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

Одна вещь, которая является объективной, — это «скорость» в интерфейсе бэкенда, поскольку от этого зависит, насколько быстро можно создавать проекты. Раньше UI бэкенда Elementor определенно казался «быстрее». То есть, панели настроек открывались мгновенно, перетаскивание было более плавным и т.д.

Однако в январе 2021 года Elegant Themes выпустили большое обновление производительности бэкенда для Divi Builder, которое внесло огромные улучшения, ускорив многие важные действия на 100-700%. В стресс-тесте, проведенном Elegant Themes, время наведения курсора на модуль сократилось с 891ms до 383ms, что составляет 155%.

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

Пользовательский интерфейс Divi

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

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

Интерфейс Divi конструктора

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

Элемент настройки

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

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

Вот как выглядит каркасный макет:

Каркасный макет Диви

В качестве альтернативы каркасу можно использовать инструмент «Слои», который помогает организовать контент в различные структуры.

Как выглядит структура

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

Как выглядят опции

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

 

Интерфейс Elementor

Elementor использует несколько иной подход к своему интерфейсу. Он показывает вам «живой» предварительный просмотр дизайна справа и фиксированный сайдбар слева (как в WordPress Theme Customizer).

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

Интерфейс Elementor

Затем можно настроить стиль виджета, его содержимое и т.д. с помощью опций сайдбара.

Наполнение контентом в Элементор

Для большинства текстовых материалов вы также можете использовать встроенное редактирование. Это означает, что можно просто нажать и ввести текст на экране превью. Однако Divi предлагает немного большую поддержку встроенного редактирования, так как в Elementor все еще есть некоторые фрагменты текста, которые не поддерживают эту функцию.

Elementor не предлагает просмотреть каркас, как Divi, но в нем есть очень полезный инструмент «Навигатор». Он дает представление о структуре страницы, подобно функции «Слои» в Divi. Можно переименовывать элементы, чтобы их запомнить.

Навигация по слоям

Использование меню Elementor

Кроме того, вы получите другие полезные инструменты, такие как отмена/повтор действия, предварительный просмотр, история изменений и т.д. Elementor, как и Divi, поддерживает щелчок правой кнопкой мыши, позволяющий копировать виджеты и их настройки поверх других действий.

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

Уникальные возможности: Divi vs Elementor

С точки зрения возможностей, эти два инструмента во многом совпадают.

Они оба предлагают:

  • Визуальные интерфейсы перетаскивания.
  • Полную поддержку создания тем.
  • Поддержку динамических данных.

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

Уникальные возможности Divi

Одна из самых неповторимых функций Диви — встроенное A/B-тестирование, которое позволяет проводить сплит-проверку различных модулей между собой. Например, можно проверить, как работают разные CTA-кнопки.

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

Можно добавить A/B-тестирование в Elementor с помощью стороннего плагина Split Test for Elementor, но это не та встроенная функция, которую вы получаете в Divi.

A-B тесты в Диви

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

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

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

 

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

Уникальные возможности Elementor

Одна из самых уникальных функций Elementor Pro — Popup Builder. Он позволяет использовать интерфейс конструктора (и все его виджеты) для создания кастомизированных всплывающих окон, которые будут отображаться в любом месте сайта.

Уникальные особенности Elementor

Можно разработать различные типы таких окон (модальные, панели уведомлений, slide-in и т.д.), а также использовать распространенные триггеры (время пребывания на сайте, глубина прокрутки и прочие). Вы также получите подробные правила таргетинга, чтобы контролировать время появления всплывающих окон.

Это гибкая функция, которую легко использовать для всех типов привлечения потенциальных клиентов, от email-подписки до всплывающих контактных форм, рекламных акций, входа/регистрации и многого другого. Можно посетить официальную группу модуля в Facebook*, чтобы получить поддержку сообщества из 98 000+ участников. Это хороший вариант для пользователей.

Не составит труда найти сторонние дополнения, которые добавляют создание всплывающих окон в Divi, но это не основная функция. При покупке Divi вы также приобретаете плагин Bloom, который включает pop-up. Но это не дает возможности кастомизации при помощи перетаскивания, поэтому он не подходит для Elementor Popup Builder. Кроме того, Bloom от Divi ограничен опциями, в то время как с помощью Элементор можно создать любой тип всплывающего окна.

Цены на Divi и Elementor

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

Бесплатная версия

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

Так что, если ваша цель — минимизировать затраты, Elementor — единственный вариант. И это отличный выбор.

Премиум-версии

Как выглядят премиум-версии:

  • Elementor Pro дешевле, если нужен конструктор только для одного сайта.
  • Divi обойдется дешевле, если требуется конструктор для нескольких проектов.

Elementor Pro предлагает 3 варианта годовой лицензии, каждый рассчитан на разное количество сайтов:

  • Один веб-ресурс: $49 /год.
  • 3 проекта: $99/год.
  • 1 000 сайтов: $199/год (по сути, безлимитное количество, но ограниченное во избежание злоупотреблений).

С 9 марта 2021 года Elementor перешел на новые тарифные планы Pro с повышенными ценами. По сути, первые два остались прежними, а план на 1 000 сайтов теперь стоит $999 в год. Два новых тарифа Pro — план на 25 веб-ресурсов за $199 в год и план на 100 проектов стоимостью $499/год. Все, кто купил Elementor Pro на 1 000 сайтов до 9 марта 2021 года, остались обладателями старой лицензии. Это означает, что они платят только $199 в год, пока сохраняют активную лицензию.

Elegant Themes, с другой стороны, разрешает неограниченное использование своих планов. Годовая лицензия стоит $89 за использование на безлимитном количестве личных и клиентских сайтов.

Кроме того, предоставляется доступ ко всем продуктам Elegant Themes, а не только к Divi.

За эту стоимость вы получите:

  • Тему Диви.
  • Плагин Divi Builder.
  • Дополнительные темплейты.
  • Расширение Bloom (подписка по электронной почте).
  • Плагин Monarch (шеринг в социальных сетях).

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

  • Один сайт: Elementor Pro будет дешевле — $49/год против $89/год у Divi.
  • Три сайта: эти конструкторы практически равны: Elementor Pro стоит $99/год, а Divi — $89/год.
  • 4 сайта (или больше): Divi будет дешевле всего — $89/год против Elementor Pro за $199/год.

Пожизненная лицензия

Последний важный момент — срок действия лицензии. Elementor предлагает только годовые. То есть, придется продлевать лицензию каждый год, если хотите продолжать получать поддержку и обновления. Кроме того, если вы ее не продлите, то больше не сможете добавлять новые виджеты Elementor Pro. Хотя все существующие в проектах будут продолжать работать. Но нельзя будет вставлять новые премиум-шаблоны.

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

Пожизненная лицензия стоит $249, то есть точка безубыточности составляет примерно 2,8 года по сравнению с годовым вариантом.

Темплейты: Divi vs Elementor

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

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

Оба конструктора имеют довольно большие библиотеки шаблонов, но Divi имеет преимущество, когда дело доходит до их количества и организации.

Шаблоны Divi

Divi поставляется с 1 500+ готовыми темплейтами, которые можно импортировать, разделив их на 199 пакетов макетов. Layout Pack — это, по сути, тематическая коллекция шаблонов, созданная для определенного сайта. Например, вы можете получить один темплейт для главной страницы, другой — для раздела контактов и т.д.

Шаблоны Divi

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

Шаблоны Elementor

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

  • Страницы: это полностраничные шаблоны, которые позволяют легко сделать сайт на Элементоре. В ПРО-версии у вас будет около 200 темплейтов.
  • Блоки: это шаблоны секций для частей сайта. Можно собрать их вместе, чтобы создать полноценную страницу.

Блоки Элементор

Elementor также объединяет некоторые из своих шаблонов в наборы, которые представляют собой темплейты, ориентированные на создание полноценного сайта (как и Диви). Сейчас он предлагает менее 25 наборов, хотя каждый месяц они выпускают новый комплект.

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

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

Поддержка: Divi vs Elementor

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

Поддержка Divi

Все пользователи Elegant Themes с активной лицензией получают премиум-поддержку 24/7. Одним из главных преимуществ является то, что вы получаете ее в чате через Intercom.

Это огромное преимущество, так как найти поддержку в чате в любой теме или плагине WordPress — большая редкость.

Кроме того, при желании можно воспользоваться их старой системой саппорта на форуме. Однако этот вариант опирается на помощь сообщества (сотрудники Elegant Teams больше не отвечают там на вопросы). Тем не менее, вы можете помочь себе сами, воспользовавшись подробной документацией базы знаний по работе с конструктором.

Также можно получить поддержку сообщества через большую официальную группу Divi Theme Users в Facebook*, которая насчитывает 64 200+ участников.

Поддержка Elementor

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

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

Есть также дополнительные группы по общим вопросам, таким как «Elementor + тема?» и «Elementor + плагин?», а также специализированное сообщество.

Поскольку в сообществах Facebook* участвует много людей, вы получите более быстрый ответ, чем при отправке тикета.

Divi vs Elementor: что выбрать?

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

Elementor — это, вероятно, лучший вариант для начала, в основном потому, что он бесплатный. Можете протестировать бесплатную версию и, если она подойдет, вы получите отличный инструмент, не тратя денег.

Если же готовы заплатить, то это более сложное решение.

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

Вы можете протестировать каждый:

  • Используя «живую» веб-демонстрацию Divi Builder.
  • Установив бесплатную версию Elementor.

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

Во-вторых, подумайте, есть ли у них уникальные особенности, которые могут подтолкнуть вас в ту или иную сторону. Например, маркетолог оценит встроенное в Divi A/B-тестирование.

С другой стороны, маркетологу также понравится Elementor Popup Builder, универсальный инструмент для всего: от подписки по электронной почте до промо-акций, опросов и прочего.

С точки зрения производительности Elementor имеет небольшое преимущество. Так что, если она для вас на первом месте, это балл в пользу Elementor.

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

И наконец, цены. Для одного веб-ресурса Elementor Pro стоит дешевле. Но для нескольких и в долгосрочной перспективе Divi имеет два больших преимущества с точки зрения соотношения цена/качество.

  1. План начального уровня Elegant Themes за $89 позволяет использовать его на неограниченном количестве сайтов, в то время как для этого нужен более дорогой тариф Elementor Pro за $199.
  2. Elegant Themes предлагает пожизненную лицензию. Если знаете, что будете использовать этот инструмент в течение нескольких лет, то с точки зрения стоимости трудно превзойти такое предложение. Для Диви точка безубыточности между годовой и постоянной лицензией составляет около двух лет и 9 месяцев.

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

Можно ли использовать Elementor с Divi?

Да, в некотором роде. Технически возможно использовать и Elementor, и Divi на одном сайте. Однако я бы настоятельно не рекомендовал так делать. Это приведет к замедлению работы ресурса (потому что каждый билдер будет загружать свои скрипты), добавит много сложностей и усложнит вам работу.

Если обязательно нужно использовать оба плагина (опять же, я не рекомендую это делать), можно рассмотреть возможность использования расширения Asset CleanUp, чтобы условно загружать скрипты каждого конструктора только там, где они необходимы. Это позволит снизить падение производительности при совместном использовании Divi и Elementor.

Вы можете совместить Divi Builder с Hello от Элементор, что может быть неплохим вариантом в ряде случаев.

Заключение

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

Если эти два варианта все еще не удовлетворяют ваши требования, ознакомьтесь со списком потрясающих конструкторов страниц WordPress. Он включает другие редакторы, такие как GeneratePress, Beaver Builder, Oxygen и Brizy.

*Facebook признан экстремистской организацией и запрещен на территории РФ

Рейтинг
( Пока оценок нет )
Александр/ автор статьи

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

Загрузка ...
Шаблоны для WordPress
×
День SEO
Время сделать подарок своему WordPress!

-20%
на премиум шаблоны и плагины

Порадуй свой сайт ⋙