Чем Гутенберг отличается от Элементора: ключевая разница двух конструкторов

Gutenberg или Elementor: есть ли правильный выбор? Возможно. Но это зависит от того, какие функции вы хотите получить от конструктора страниц WordPress. В этом материале мы рассмотрим особенности Гутенберг и Элементора, а затем проведем прямое сравнение между двумя конструкторами.

Что такое Gutenberg

Gutenberg — это конструктор страниц WordPress по умолчанию. Он был представлен в 2018 году и заменил так называемый “классический” редактор WordPress, который был обычным редактором текстового/HTML-контента без функции перетаскивания.

С точки зрения функциональности, Gutenberg предлагает доступную библиотеку “блоков” с элементами для перетаскивания контента. Это позволяет легко создавать страницы и посты.

В Гутенберг имеется около 100 блоков контента, некоторые из которых позволяют интегрировать и встраивать элементы из сторонних сервисов, таких как Twitter, Reddit и Amazon Kindle. Также можно создавать динамические блоки для автоматического обновления содержимого в них. Некоторые примеры компонентов Gutenberg:

• Абзац
• Заголовок
• Таблица
• Изображение
• Галерея
• Видео
• Кнопки
• Календарь
• Пользовательский HTML
• Последние сообщения

Gutenberg поддерживает быстрое редактирование разметки наряду с визуальным пользовательским интерфейсом. А при необходимости есть прямой доступ к разделам пользовательского кодирования для CSS и HTML.

Каждый блок имеет свой длинный список настроек, и в Гутенберг есть быстрые опции для мощного контроля основных параметров документа и блока. Например, таких как теги alt или цвет фона.

Что такое Elementor

Elementor — это конструктор страниц, очень похожий на Gutenberg. Однако он появился раньше Gutenberg, как одно из сторонних приложений для создания страниц.

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

Вы также заметите, что Elementor имеет уникальные названия для своих функций. То, что в Гутенберг называется “блоками”, в Элементор именуется “виджетами”. Кстати говоря, плагин может похвастаться более чем 100 такими виджетами контента.

Примеры виджетов контента Elementor:

• Пост
• Текстовый редактор
• Заголовки
• Изображение
• Текст
• Отзывы
• Переключатели
• Прогресс-бары

Многие виджеты позволяют интегрировать сайт WordPress со сторонними приложениями, такими как Stripe или Sound Cloud.

Наряду со специализированными виджетами от WooCommerce и маркетинговыми инструментами для целевых страниц и форм, Elementor остается лидером в сфере создания сайтов.

Сравнение Gutenberg и Elementor

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

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

Функциональность Drag-and-Drop и работа с кодом

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

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

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

Когда дело доходит до работы с кодом, в Gutenberg легко найти редактор.

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

Вы даже можете добавлять HTML-якоря и дополнительные классы CSS прямо с вкладки блоков в Gutenberg, что раньше требовало утомительной работы с вкладкой HTML в классическом редакторе.

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

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

Перемещать ранее размещенные блоки контента в Elementor проще, чем в Gutenberg. Чтобы переместить блок, достаточно нажать и удерживать его в любом месте.

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

Elementor также предоставляет виджет HTML Code для вставки любого пользовательского кода на веб-страницу.

В целом, функциональность Элементора, основанная на перетаскивании, сильнее, чем у Гутенберг. Тем не менее, опции работы с кодом выглядят одинаково удобными в обоих конструкторах страниц.

Шаблоны (для сайтов, блоков, страниц, всплывающих окон и прочего)

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

Многие конструкторы страниц предлагают готовые шаблоны для:

• Полноценных сайтов
• Страниц
• Постов в блогах
• Разделов страниц
• Блоков контента
• Хедеров
• Футеров
• Посадочных страниц
• И прочего

В Gutenberg ощущается острая нехватка готовых шаблонов. На вкладке “Шаблоны” есть полезные шаблоны разделов, но на этом все.

Однако можно установить сторонние плагины со стартовыми шаблонами для страниц и полноценных сайтов. Такие плагины, как Gutentor, Twentig и Otter Blocks, подходят для этих целей.

Elementor, с другой стороны, оснащается сотнями стартовых шаблонов. Шаблоны Elementor включают в себя:

• Хедеры
• Футеры
• Отдельные страницы
• Отдельные посты
• Архивы
• Страницы результатов поиска
• Страницы продуктов
• Архивы продуктов
• Страницы 404

Стилизация

Функции стилизации в Gutenberg позволяют быстро стилизовать элементы на панели в админке — после выбора блока, который вы хотите отредактировать.

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

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

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

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

Контентные блоки/виджеты

В Gutenberg представлено чуть более 90 блоков контента. Elementor предоставляет более 100.

Вот категории блоков Гутенберг:

• Текст
• Медиа
• Дизайн
• Виджеты
• Тематические вставки

Вы получаете все самое необходимое (блоки абзацев, изображений и кнопок), а также уникальные элементы для таких вещей, как Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read и других.

Elementor следующим образом классифицирует свои виджеты для контента:

• Базовые
• Профессиональные
• Общие
• Сайт
• WooCommerce
• WordPress

Предусмотрены стандартные виджеты контента — разделители, секции и шапки. Также есть уникальные виджеты для Google Maps, Code Highlights, WooCommerce Product Data и другие. Плюс можно расширить количество виджетов, благодаря дополнениям для Elementor.

Мы пришли к выводу, что Gutenberg гораздо лучше организует свои блоки контента, но Elementor предоставляет большее количество блоков (виджетов) с более сильными настройками.

Поддержка WooCommerce

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

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

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

Есть даже такие уникальные виджеты, как Upsells и Product Meta Data.

Интеграции

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

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

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

Вот список некоторых из 32 текущих интеграций в Gutenberg:

• Openverse
• Twitter
• YouTube
• WordPress
• SoundCloud
• Spotify
• Crowdsignal
• Dailymotion
• Imgur
• Issue
• Kickstarter
• Amazon Kindle
• Pinterest
• Reddit
• Slideshare

Elementor имеет большой список интеграций, от медиаплатформ до социальных сайтов. Вот некоторые из 40+ интеграций:

• PayPal
• Facebook* (для комментариев, встроенных элементов, страниц и кнопок)
• YouTube
• Vimeo
• Карты Google
• SoundCloud
• MailChimp
• ActiveCampaign
• ConvertKit
• HubSpot
• Zapier
• Discord
• Кастомные библиотеки иконок
• Slack
• ReCaptcha
• Drip

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

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

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

Вы можете вставлять блоки, нажав на одну из нескольких кнопок “+” (Добавить блок), разбросанных по всему редактору. В редакторе есть строка поиска, а также различные вкладки “Блоки”, “Паттерны” и “Медиафайлы”. Вы даже заметите, что решение интегрируется с популярными библиотеками изображений Creative Commons, которые дают возможность найти подходящую картинку бесплатно.

Кроме того, Гутенберг интегрируется с широким спектром других сторонних текстовых редакторов, и вы можете копировать контент из других программ прямо в Gutenberg (без необходимости второй раз загружать изображения или корректировать форматирование).

На вкладке “Страница” находятся настройки публикации и страницы, например, инструменты для работы с избранными изображениями и комментариями.

Легко настроить и параметры, ориентированные на блоки. Просто перейдите на вкладку “Блок”. Откроются уникальные возможности настройки для выбранного вами блока. Например, блок “Изображение” показывает все: от полей для заполнения атрибута Alt до настроек размеров изображения. Здесь же можно добавить теги CSS, HTML-якоря или атрибут Title.

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

Хотя категориям не хватает полезных названий, вы можете найти виджеты в разделах Basic, Pro, General, Site, WooCommerce и WordPress. Также есть панель “Избранное” для сохранения пользовательских виджетов на потом.

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

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

Главный недостаток Elementor — это стороннее приложение. Чтобы начать работать с ним в WordPress, необходимо установить плагин. Но даже в этом случае вам всегда придется нажимать кнопку “Редактировать с помощью Elementor”, так как Gutenberg технически все еще установлен в фоновом режиме.

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

Производительность и влияние на скорость страницы

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

В нашем тесте мы установили конструкторы на отдельные варианты высокопроизводительного сервера с поддержкой CDN. Мы также использовали одну и ту же тему с демо-контентом, чтобы сделать тестирование как можно более одинаковым. Мы придерживались одного и того же местоположения сервера для обоих тестов и установили два общих плагина (WooCommerce и Yoast SEO), чтобы посмотреть, как сборщики страниц ведут себя в реальной среде.

Тесты скорости работы страниц Gutenberg

Результаты с тестового сервера в Сан-Франциско:

• Оценка производительности Pingdom: 92
• Размер страницы: 905,2 КБ
• Время загрузки: 1,32 с
• Запросы: 19

Тот же тест с тестовым сервером в Лондоне:

• Оценка производительности: 92
• Размер страницы: 905,8 КБ
• Время загрузки: 1,50 с
• Запросы: 19

Результаты Google PageSpeed Insights:

• Производительность для компьютеров: 99
• Доступность для компьютеров: 100
• Лучшие практики для компьютеров: 92
• SEO для компьютеров: 67
• Производительность мобильных устройств: 93
• Доступность для мобильных устройств: 100
• Лучшие практики для мобильных устройств: 92
• SEO для мобильных устройств: 71

Тесты скорости работы страниц Elementor

Результаты с тестового сервера в Сан-Франциско:

• Оценка производительности Pingdom: 88
• Размер страницы: 2,5 МБ
• Время загрузки: 1,93 с
• Запросы: 48

Результаты с тестового сервера в Лондоне:

• Оценка производительности: 87
• Размер страницы: 2,5 МБ
• Время загрузки: 1,97 с
• Запросы: 48

Результаты Google PageSpeed Insights:

• Производительность для компьютеров: 94
• Доступность для компьютеров: 100
• Лучшие практики для компьютеров: 92
• SEO для компьютеров: 67
• Производительность мобильных устройств: 81
• Доступность для мобильных устройств: 100
• Лучшие практики для мобильных устройств: 92
• SEO для мобильных устройств: 71

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

Тем не менее, оба конструктора обеспечивают высокую скорость работы.

Ценообразование

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

Цены на Gutenberg. Бесплатно, поскольку это редактор WordPress, встроенный в WordPress по умолчанию.

Цены на Elementor. Бренд Elementor предлагает дополнительные продукты и услуги, но в рамках данного сравнения мы ограничимся плагином для создания страниц.

• Бесплатный план: $0 за более чем 40 бесплатных виджетов, функциональность drag-and-drop и API для разработчиков.
• Essential план: $59 в год для поддержки 1 сайта с 100+ виджетами, 300+ шаблонами, конструктором тем с возможностью перетаскивания, конструктором магазинов WooCommerce, конструктором целевых страниц, маркетинговыми инструментами, конструктором всплывающих окон и премиум-поддержкой.
• Expert план: $199 в год за поддержку 25 веб-сайтов и все функции, перечисленные в плане Essential.
• Agency план: $399 в год за все функции, упомянутые в предыдущих планах, но с поддержкой 1 000 сайтов.

Мы утверждаем, что Elementor выгоднее просто потому, что это более оптимизированный и мощный конструктор страниц, чем Gutenberg, и при этом вы можете получить многие функции бесплатно. Но если вам необходимо навсегда сохранить бюджет на уровне $0, дефолтный вариант WordPress подойдет как нельзя лучше.

Совместимость с темами и плагинами

Сложно определить совместимость (или отсутствие таковой) конструкторов страниц с тысячами тем и плагинов WordPress, представленных на рынке. Однако мы можем изучить отзывы пользователей, чтобы выяснить, есть ли какие-то очевидные проблемы совместимости с популярными темами или плагинами.

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

На момент написания этой статьи на форумах WordPress.org существует около 12 открытых вопросов о совместимости, некоторые из которых, похоже, являются ошибками пользователей. Нельзя однозначно сказать, что вы не столкнетесь с какими-то проблемами.

Elementor известен своей хорошей совместимостью с WordPress. Однако это сторонний конструктор страниц, поэтому стоит следить за тегами совместимости (примечаниями, которые объясняют, когда плагин несовместим). А при поиске темы всегда проверяйте, совместима ли она с Elementor (если вы используете именно его в качестве конструктора страниц).

Как для Gutenberg, так и для Elementor, вы должны следить за “многоцелевыми” темами WordPress со стартовыми шаблонами. Эти стартовые шаблоны предназначены для конкретных конструкторов страниц. А в некоторых темах вообще отсутствуют стартовые шаблоны для этих конструкторов страниц.

Бэкен vs Фронтенд редактирование

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

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

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

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

Наконец, в обоих конструкторах страниц есть автоматическое сохранение, а также кнопки ручного сохранения.

Поддержка клиентов

В конструкторе страниц Gutenberg нет прямой поддержки клиентов. Однако вы можете обсудить проблемы на форуме пользователей Gutenberg. Также платные пользователи WordPress.com могут получить помощь в работе с Gutenberg.

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

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

Gutenberg vs Elementor: Что выбрать?

После многолетнего опыта работы в WordPress и подробного сравнения Gutenberg и Elementor, мы пришли к следующим выводам:

• Функциональность Гутенберг проще, чем Elementor. Доступны функции отлично подходят для основ веб-дизайна, но опытные пользователи захотят воспользоваться расширенными настройками стилей и блоками контента из Elementor.
• Пользовательский интерфейс Gutenberg встроен в WordPress, в то время как Elementor всегда будет сторонним плагином. Тем не менее, в Elementor пользовательский интерфейс работает без проблем, а в дефолтном решении WP гораздо сложнее даже просто перетащить элемент.
• С точки зрения производительности оба работают хорошо. Это показали наши тесты.
• Gutenberg всегда бесплатный, но нет и возможности расширить его функциональность. У Elementor есть мощная бесплатная версия с регулярными обновлениями, включающими новые функции. Также имеется реальная поддержки клиентов.
• Все варианты совместимы с широким спектром тем и плагинов WordPress.
• Бэкенд-редактирование в Gutenberg происходит в визуально приятном интерфейсе с быстрыми возможностями стилизации. Фронтенд-редактирование отсутствует. Однако в бэкенд-редакторе можно увидеть, как будет выглядеть страница во фронтенде. Elementor предлагает только редактирование бэкенда, но с реальным предварительным просмотром, который показывает все с фронтенда.
• В Гутенберг есть шаблоны разделов, но больше ничего. В Elementor есть шаблоны разделов, сайтов, страниц, хедеров, но все они требуют наличия премиум-версии.
• Поддержка Gutenberg осуществляется на форумах пользователей и во всех блогах, где можно найти статьи о нем. Платные пользователи WordPress.com могут получить помощь в работе с Gutenberg. Платные пользователи Elementor получают человеческую поддержку, а бесплатные пользователи — доступ ко множеству онлайн-ресурсов, включая базу знаний.

Резюме

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

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