Сравнение редакторов WordPress Elementor и SiteOrigin Page Builder

Сравнение визуальных редакторов для WordPress Page Builder

Пытаетесь выбрать между Elementor и SiteOrigin Page Builder для создания своего сайта WordPress? По количеству активных установок это два самых популярных конструктора страниц на WordPress.org.

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

Чтобы помочь вам принять решение, мы написали подробное сравнение Elementor и SiteOrigin Page Builder, сравнивая как бесплатную, так и премиальную функциональность в каждом плагине.

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

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

Elementor против SiteOrigin Page Builder: бесплатные основные плагины

И Elementor, и SiteOrigin Page Builder предлагают бесплатные основные версии *, которые при желании можно расширить с помощью надстройки премиум-класса для большей функциональности.

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

* Мы включим официальный пакет виджетов SiteOrigin и расширения CSS SiteOrigin, потому что они бесплатны и принадлежат одному разработчику.

Вот краткое описание каждого бесплатного плагина. И продолжайте читать, чтобы узнать больше:

	Elementor	SiteOrigin
Режимы редактирования	Интерфейсный визуальный редактор	Бэкэнд-редактор и легкий живой редактор
Встроенное редактирование	да	Нет
Бесплатные виджеты	28 (40+)	26
Адаптивный превью	да	да
Показать / скрыть по устройству	да	Вроде, с CSS
Бесплатные шаблоны страниц	38+ (30+)	26+
Сохранить собственные шаблоны?	да	Нет, но легко клонировать
Кодовая блокировка?	Нет, оставляет чистый HTML	Некоторые виджеты оставляют короткие коды

Интерфейс: как вы создаете свой дизайн

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

Elementor

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

Вот как работает интерфейс:

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

Чтобы добавить новый виджет на свою страницу, просто перетащите его с боковой панели:

Если вы хотите отредактировать какой-либо текст на своей странице, вы можете просто нажать на предварительный просмотр в реальном времени и ввести. Это называется «встроенным редактированием» и в данном сравнении уникально для Elementor (то есть SiteOrigin Page Builder не предлагает встроенное редактирование):

SiteOrigin Page Builder

В отличие от Elementor, SiteOrigin Page Builder предоставляет вам как внутренний редактор, так и легкий интерфейсный редактор в реальном времени.

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

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

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

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

Вы также можете щелкнуть элемент в режиме предварительного просмотра, чтобы отредактировать его. Но вы не можете перетаскивать элементы при предварительном просмотре в реальном времени:

• 1 — здесь вы выполняете свою работу.
• 2 — это предварительный просмотр в реальном времени, но вы не можете перетаскивать элементы сюда.

Параметры макета

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

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

Elementor

Elementor предоставляет вам два основных структурных элемента для работы:

• Разделы — это элемент самого низкого уровня.
• Столбцы — столбцы входят в разделы. В каждом разделе может быть один или несколько столбцов.

Например, если вы хотите разделить свою страницу на три вертикальные области, вы должны создать:

• 1 — Одна секция, отмеченная синим
• 2 — Три столбца, отмечены черным

• Чтобы настроить ширину столбцов, Elementor позволяет использовать простое перетаскивание:

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

• Отрегулируйте поля / отступы для столбца или раздела
• Добавить фон в столбец или раздел
• Пользовательские классы / идентификаторы CSS
• Выберите зазор колонны
• Растянуть раздел на всю ширину (только разделы)

Elementor недавно добавил настраиваемое позиционирование, которое упрощает размещение виджетов в определенных местах на странице.

SiteOrigin Page Builder

Как и Elementor, SiteOrigin Page Builder также предоставляет вам два структурных элемента для создания ваших страниц:

• Строки — аналог разделов Elementor.
• Столбцы — каждая строка может иметь один или несколько столбцов.

SiteOrigin Page Builder позволяет вам выбирать ширину столбцов из набора предустановок или использовать перетаскивание для создания собственного разделения:

В отличие от Elementor, SiteOrigin не дает вам возможности настройки отдельных столбцов. Но вы можете настроить отдельные строки такими вещами, как:

• Пользовательские поля / отступы
• Пользовательский желоб столбца
• Фон строки

Включенные виджеты

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

Elementor

Elementor позволяет вам использовать все основные виджеты WordPress в ваших проектах. Помимо этого, он также добавляет 28 собственных виджетов. Вы можете просмотреть их ниже:

SiteOrigin Page Builder

Как и Elementor, SiteOrigin Page Builder также позволяет использовать любые основные виджеты WordPress.

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

По умолчанию он активирует виджеты для:

• Текст
• Функции
• Кнопки
• Карты Гугл
• Изображений
• Пост карусель
• Слайдер
• Конструктор макетов
• Опубликовать контент
• Цикл публикации

Вы также можете получить доступ к дополнительным виджетам, которые по умолчанию отключены:

• Аккордеон
• Призыв к действию
• Форма обратной связи
• Функции
• Заголовок
• Изображение героя
• Значок
• Сетка изображений
• Слайдер макета
• Таблица цен
• Простая планировка кладки
• Кнопки социальных сетей
• Вкладки
• Таксономия
• Отзывы
• Видео проигрыватель

Виджеты для стилизации

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

Elementor

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

• Содержимое — позволяет настроить основное содержимое для этого элемента, а также такие простые вещи, как размер и выравнивание.
• Стиль: позволяет применять собственные цвета, типографику и другие базовые параметры стиля.
• Расширенный — позволяет применять настраиваемые поля / отступы, Z-индекс, фон и некоторые другие расширенные настройки, которые мы рассмотрим в следующих двух разделах.

SiteOrigin Page Builder

SiteOrigin Page Builder предоставляет вам две области для настройки каждого виджета:

• 1 — в главном редакторе вы получаете параметры аккордеона, которые применяются к основным функциям виджета.
• 2 — на правой боковой панели вы получаете более продвинутые стили виджетов, которые позволяют добавлять настраиваемые поля / отступы, настраиваемый фон и настраиваемые классы / идентификаторы CSS.

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

Адаптивные параметры

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

Elementor

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

Для большего контроля над тем, как выглядит ваш дизайн, Elementor также позволяет скрывать определенные разделы, столбцы или виджеты с определенных устройств одним щелчком переключателя на вкладке «Дополнительно»:

SiteOrigin Page Builder

Если вы используете Live Editor SiteOrigin Page Builder, вы можете быстро получить доступ к предварительному просмотру для различных устройств:

Для управления отображением отдельных виджетов на разных устройствах SiteOrigin Page Builder не дает вам простого переключателя, как Elementor. Но он дает вам специальное поле « Стили мобильного CSS», которое применяет стили только в мобильном представлении.

Можно было бы добавить простое «display: none;» здесь, чтобы скрыть отдельные строки или виджеты на мобильных устройствах:

Добавление собственного CSS

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

Elementor

В бесплатном основном плагине Elementor позволяет добавлять пользовательские классы или идентификаторы CSS к любому:

SiteOrigin Page Builder

В своей бесплатной версии SiteOrigin Page Builder немного более гибок, когда дело доходит до добавления CSS.

Как и Elementor, вы можете добавлять собственные классы CSS или идентификаторы к различным элементам. Но SiteOrigin Page Builder также делает шаг вперед, позволяя напрямую добавлять атрибуты стиля CSS к строкам или виджетам, включая вышеупомянутую опцию стилей CSS для мобильных устройств :

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

Включенные шаблоны / Сохранение собственных шаблонов

Шаблоны помогают ускорить процесс проектирования за счет:

• Импорт готовых шаблонов от разработчика (или стороннего производителя)
• Сохранение собственных дизайнов в виде шаблонов для последующего использования

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

Elementor

Elementor включает встроенную библиотеку шаблонов, которая предлагает два разных типа шаблонов:

• Страницы — это дизайны для целых страниц
• Блоки — это дизайны для определенных разделов страницы. Например, блок контактов, блок героев и т. Д.

Хотя Elementor предлагает сотни шаблонов страниц, только ~ 38 из них доступны в бесплатной версии. В бесплатной версии доступно большее количество блоков:

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

SiteOrigin Page Builder

SiteOrigin Page Builder включает 26 готовых шаблонов, которые вы можете импортировать парой кликов.

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

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

Блокировка / качество кода, если вы когда-либо отключили

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

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

Elementor

Когда вы деактивируете Elementor, он оставляет 100% чистый код. То есть, если у вас был заголовок H2 с Elementor, вы все равно увидите заголовок H2 в обычном редакторе WordPress … он просто будет использовать стили вашей темы по умолчанию.

Например, вот содержимое одного из шаблонов Elementor после деактивации Elementor:

Да, это некрасиво. Но весь ваш контент по-прежнему имеет такое же базовое форматирование HTML.

SiteOrigin Page Builder

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

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

Elementor против SiteOrigin: Премиум-надстройки

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

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

	Elementor Pro	SiteOrigin Premium
Самая уникальная особенность	Конструктор тем	Конструктор пользовательских типов сообщений
Стартовая цена	$49	$29

Elementor Pro

Конструктор тем

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

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

• Заголовок
• Нижний колонтитул
• Шаблон отдельного сообщения
• Шаблон архива сообщений в блоге
• Пользовательский шаблон типа сообщения

Вы получаете элементы темы, которые можете использовать в своих проектах:

И вы можете выбрать, где именно применять свои собственные шаблоны:

Хотя вам все же следует выбрать качественную тему по другим причинам, эта функция создания тем по существу позволяет вам проектировать 100% вашего сайта WordPress с использованием интерфейса Elementor, чего вы не можете сделать с SiteOrigin Page Builder.

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

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

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

Больше виджетов и шаблонов

Elementor Pro предоставляет вам доступ к более чем 50 новым виджетам , включая специальные виджеты и виджеты WooCommerce, которые помогут вам отображать сообщения WordPress и настраиваемые типы сообщений:

Кроме того, вы разблокируете более 300 шаблонов страниц и более 100 шаблонов блоков.

Elementor представил в 2019 году свой виджет Table of Contents (TOC), который упрощает процесс предоставления доступа к вашему контенту с помощью следующих функций:

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

Глобальные виджеты

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

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

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

Встроить где угодно

В дополнение к функциональности создания тем Elementor Pro, его функция Embed Anywhere дает вам еще один способ использования интерфейса Elementor за пределами вашей обычной области содержимого.

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

• Боковая панель
• Нижний колонтитул
• Где-нибудь еще

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

Прямой настраиваемый CSS

С Elementor Pro вы можете добавлять код CSS непосредственно в отдельные разделы, столбцы или виджеты (а не просто класс или идентификатор CSS, как в бесплатной версии) :

Тем не менее, стоит отметить, что SiteOrigin Page Builder предоставляет вам те же функции бесплатно.

SiteOrigin Premium

SiteOrigin Premium — это модульный набор надстроек, которые вы можете включать и отключать по мере необходимости.

Конструктор настраиваемых типов сообщений

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

Конструктор настраиваемых типов сообщений позволяет:

• Создавайте собственные типы сообщений и настраивайте базовые параметры
• Создавайте многоразовые макеты пользовательских типов записей с помощью SiteOrigin Page Builder
• Отображение ваших пользовательских типов сообщений в интерфейсе

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

• Elementor позволяет создавать шаблон для уже созданных вами пользовательских типов сообщений. Ваш шаблон будет динамически извлекать информацию о настраиваемом типе записи, которую вы вводите в обычный редактор WordPress и / или настраиваемые поля.
• SiteOrigin Premium позволяет вводить информацию о настраиваемом типе публикации в многоразовом макете, созданном с помощью SiteOrigin Page Builder.

Новые виджеты и параметры виджетов

Большинство других дополнений SiteOrigin Premium включают:

• Добавление новых виджетов
• Расширение бесплатных виджетов с помощью существующих параметров стиля

Совершенно новый функционал включает:

• Параметры анимации строк и виджетов
• Надстройка лайтбокса для различных виджетов
• Комментарии AJAX
• Новые социальные виджеты

И конкретные виджеты, которые получают новые настройки и стили:

• Аккордеон
• Блокировать анимацию
• Форма обратной связи
• Конструктор пользовательских типов сообщений
• Призыв к действию
• Герой
• Слайдеры (эффект параллакса)
• Вкладки
• Отзывы

SiteOrigin Premium версии 1.9 также недавно запустил следующие дополнения:

• Зеркальные виджеты (отражающие настройки и изменения, внесенные вами в конкретный виджет для всех ваших страниц)
• Автоматическая оптимизация (уменьшение размера страницы и улучшение времени загрузки)
• Наложение изображений (настраиваемые наложения текста при наведении с анимацией)
• Стили карты (20 стилей карты, которые вы можете выбрать для своей страницы)
• Переключить видимость (скрывает строки и виджеты Конструктора страниц в зависимости от размера экрана)

Elementor Pro и SiteOrigin Premium: сравнение цен

Elementor Pro предлагает три разных годовых тарифных плана. Все они полнофункциональные, разница только в количестве поддерживаемых сайтов:

• 1 сайт — 49 $
• 3 сайта — 99 $
• 1,000 – $199

Elementor также предлагает 30-дневную гарантию возврата денег.

Не существует бессрочной лицензии , но вы получаете скидку 25% при продлении, если вы продлеваете, пока ваша лицензия еще активна (вы не получите скидку, если дождетесь, пока срок действия вашей лицензии уже истечет).

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

• 1 сайт — 29 $
• 5 сайтов — 49 $
• Безлимитные сайты — 99 $

SiteOrigin Premium также предлагает 60-дневную гарантию возврата денег.

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

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

Elementor против SiteOrigin: что выбрать?

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

Elementor предлагает:

• Больше виджетов, особенно если у вас Elementor Pro
• Настоящее визуальное редактирование, включая встроенное редактирование текста
• Больше встроенных вариантов стиля / макета
• Больше и часто более красивых шаблонов
• Полная функциональность создания тем (в Elementor Pro)
• Полезные функции Pro, такие как глобальные виджеты и встраивание где угодно
• Выделенные виджеты WooCommerce в Elementor Pro

SiteOrigin предлагает:

• И внутреннее редактирование, и легкий живой редактор, хотя живой редактор не является настоящим визуальным редактированием.
• Немного больше контроля над CSS, особенно в бесплатной версии (в Pro версии довольно равны, но SiteOrigin все еще дает легкий доступ к мобильной только CSS)
• Возможность создавать пользовательские типы сообщений на разовой основе с многоразовыми макетами (а не с фактическим шаблоном)

Вывод

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

Теперь к вам — вы использовали оба этих конструктора страниц? Что вы предпочитаете и почему?