Elementor против Gutenberg — разборки 2021 года: какой конструктор страниц лучше?

Можем ли мы вообще вспомнить времена, когда WordPress работал без компоновщиков страниц?

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

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

Да начнётся разборка!

Что такое Элементор?

Со средним рейтингом 4,7 из 5 и 5+ миллионами активных установок — в этом нет никаких сомнений: Elementor — самый популярный конструктор страниц среди пользователей WordPress .

Elementor был впервые представлен в 2016 году и очень быстро стал лидером. Причиной его почти мгновенной популярности была разница между визуальным конструктором перетаскивания Elementor и обычным текстовым редактором WordPress (эра до Гутенберга).

Пользователи WordPress, наконец, получили нечто, не похожее на Microsoft Word, — гибкий редактор, который позволил проявиться их творчеству , и все благодаря различным виджетам, которые уменьшили потребность во всех видах пользовательского кодирования или создании пользовательских шаблонов HTML / PHP / CSS.

И если вы ищете новые шаблоны веб-сайтов Elementor WordPress? Ознакомьтесь с нашей последней коллекцией HubSpot.

В этом сравнении Elementor и Gutenberg мы рассмотрим только функции бесплатной версии Elementor.

Что такое Гутенберг?

Гутенберг, также известный как редактор блоков , является редактором страниц/сообщений WordPress по умолчанию. Впервые он был представлен в 2018 году в версии WordPress Bebo 5.0.

Команда WordPress понимала потребности сообщества в более продвинутом и интуитивно понятном редакторе по умолчанию , а также тенденции в создании веб-сайтов. Так появился редактор Gutenberg, пришедший на смену своему предшественнику — классическому редактору.

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

И, если вы ищете шаблоны веб-сайтов Gutenberg для WordPress, ознакомьтесь с нашей последней коллекцией шаблонов WooCommerce, использующих Gutenberg.

Элементор против Гутенберга: сравнение

Elementor против Гутенберга: простота использования

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

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

Нужно создать разделы? Или разделы с разным количеством колонок? Выбрать другой дизайн или изображения для разных устройств? Тоже не проблема. Elementor действительно позволяет настроить весь контент до совершенства. Не говоря уже о различных анимациях, которые любят дизайнеры веб-сайтов (хотя инструменты для измерения скорости — нет).

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

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

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

Elementor против Гутенберга, что выбрать? Ответ всегда OceanWP, потому что мы используем оба

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

Elementor против Gutenberg Простота использования Резюме

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

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

Элементор против Гутенберга: особенности

У Elementor есть виджеты, у Gutenberg есть блоки — как все просто.

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

Виджеты Elementor работают аналогичным образом — предоставляя функции со сгруппированными параметрами и несколькими настройками запросов и стилей. Естественно, виджеты Elementor предлагают гораздо больше возможностей и универсальности, чем виджеты WordPress (Внешний вид > Виджеты).

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

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

Кстати говоря, у вас была возможность познакомиться с нашим последним продуктом — Ocean Gutenberg Blocks? Если вы являетесь клиентом, этот плагин уже доступен для загрузки и использования в вашей панели инструментов. Если вы хотите стать профессионалом, ознакомьтесь с нашим последним предложением.

Обзор функций Elementor и Gutenberg

Elementor использует виджеты, Gutenberg использует блоки. Бесплатная версия Elementor поставляется с множеством продвинутых виджетов , которые каждый дизайнер веб-сайтов может использовать для создания фантастического веб-сайта. Чтобы получить доступ к более продвинутым блокам, для Гутенберга необходимы дополнительные плагины, такие как блоки Ocean Gutenberg.

Elementor против Гутенберга: производительность

Вы могли заметить , что мы намеренно использовали термин «производительность» вместо «скорость страницы».

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

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

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

Сравнение настроек WordPress

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

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

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

Для этого небольшого эксперимента мы использовали два наших шаблона веб-сайта WordPress: Agenda и Gutenberg Agenda .

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

Оба сайта расположены на одном сервере и имеют абсолютно одинаковую конфигурацию:

• Программное обеспечение: Apache/2.4.51 (Unix)
• MySQL: (Убунту) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• WordPress (PHP) Ограничение памяти: 256M
• Тема WordPress: OceanWP (мигает, мигает)

Оба веб-сайта имеют большинство общих плагинов WordPress :

• Океан Экстра
• Совместное использование продуктов океана
• Социальный обмен океаном
• WooCommerce
• Список желаний TI WooCommerce
• WPforms Lite
• Липкий заголовок океана
• WP Rocket (не используется при создании шаблонов WordPress).

Шаблон повестки дня WordPress:

• Элементор
• Виджеты Ocean Elementor

Шаблон WordPress повестки дня Гутенберга:

• Океанические блоки Гутенберга

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

Elementor против Gutenberg: Google Page Speed ​​Insights

Для всех тех, кто пропустил некоторые фрагменты текста и сразу перешел сюда — важно подчеркнуть, что Google Page Speed ​​Insights не измеряет скорость веб-сайта . Вместо этого он оценивает веб-сайт, принимая во внимание различные факторы.

Более того, также важно признать, что оценки могут быть не только ложноположительными (низкие оценки, но быстрый сайт и наоборот), но и часто не отображают реальной картины. Когда дело доходит до мобильных показателей PSI (Page Speed ​​Insights), Google собирает информацию от реальных пользователей, которые просматривают ваш сайт с помощью мобильных телефонов .

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

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

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

Когда дело доходит до мобильных результатов PSI , в гонке Elementor vs Gutenberg победителем становится Гутенберг .

Различия между всеми данными вполне очевидны и в пользу Гутенберга.

Результат, который нас больше всего удивил, — это разница в общем времени блокировки (TBT). В случае страницы, созданной Elementor, TBT составлял 310 мс, а TBT на странице, созданной Gutenberg, — всего 50 мс .

Можете ли вы представить, какие были бы результаты, если бы мы действительно оптимизировали изображения на веб-сайте перед загрузкой и правильно настроили WP Rocket вместо использования настроек по умолчанию? Не уподобляйтесь нам — оптимизируйте изображения и найдите оптимальные настройки кэширования для своего сайта .

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

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

Elementor против Гутенберга: сравнение GTmetrix

GTmetrix, кажется, доволен обеими версиями нашего шаблона Agenda WordPress — Elementor и Gutenberg.

Но мы не можем игнорировать огромную разницу между Time to Interactive и DOM Interactive Time — обе метрики в пользу Гутенберга.

Время до интерактивности : Elementor против Gutenberg : 912 мс против 408 мс .

Интерактивное время DOM: Elementor против Gutenberg : 714 мс против 405 мс .

Когда дело доходит до сравнения структур Elementor и Gutenberg, GTmetrix снова показывает нам зеленую развертку.

Но есть одна вещь, которая сразу привлекла наше внимание — размер DOM . И снова результаты в пользу Гутенберга.

Избегайте чрезмерного размера DOM : Elementor против Gutenberg : 1251 элемент против 929 элементов .

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

В общем, графики сказали. Несмотря на то, что оценки производительности и структуры абсолютно одинаковы, и оба веб-сайта получили оценку GTmetrix Grade A, оценку производительности 100% и оценку структуры 98%, есть много статистических данных в пользу Гутенберга , которые могут быть важны для вас, если вы огромный поклонник оптимизации и производительности.

Судя по GTmetrix, дела обстоят прозрачно. Когда дело доходит до сравнения производительности Elementor и Gutenberg , Гутенберг — абсолютный победитель .

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

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

Обзор производительности Elementor и Gutenberg

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

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

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

Elementor против Гутенберга: преимущества

Что касается сравнения преимуществ Elementor и Gutenberg, трудно решить.

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

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

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

С точки зрения удобства использования и раскрытия творчества мы голосуем за Elementor .

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

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

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

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

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

Обзор преимуществ Elementor и Gutenberg

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

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

Elementor против Gutenberg: какой конструктор страниц лучше?

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

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

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

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

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

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

Независимо от того, какой конструктор страниц вы предпочитаете — Elementor или Gutenberg, ответ всегда — OceanWP и пакет расширений Ocean Core, потому что мы предлагаем вам как виджеты, так и блоки для достижения желаемого дизайна веб-сайта.

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

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