Когда мы говорим о конструкторах страниц WordPress, самым популярным и имеющим наибольшее количество активных установок и самое большое сообщество, безусловно, является Elementor. На сегодняшний день существует около 8 миллионов сайтов, созданных с помощью Elementor. Многие эксперты рекомендуют его за простоту использования, скорость и огромные возможности при создании сайтов WordPress.
Я протестировал Pro-версию Elementor и создал целевую страницу. Она поставляется с функцией drag-and-drop, работает с любой темой, и вы можете использовать все виджеты Free, Pro и WordPress одновременно. Давайте прочитаем эту статью, чтобы узнать больше об установке и настройке Elementor в WordPress.
Почему стоит выбрать Elementor Page Builder?
Elementor — один из первых и один из самых продвинутых конструкторов страниц WordPress на рынке в настоящее время. Он также имеет огромную экосистему вокруг себя, и множество мелких авторов создают полезные дополнения и шаблоны, которые вы можете использовать, чтобы сократить время, необходимое для получения конечного результата.
В случае с Elementor конечным результатом может быть действительно потрясающий сайт, хорошо спроектированный, со всеми функциональными возможностями, которые вам нужны или могут понадобиться. Вы не найдете ни одного типа сайта WordPress, который нельзя было бы создать с помощью Elementor. Если вам нужна дополнительная функциональность, ее можно легко реализовать с помощью шорткодов.
Особенности Elementor Page Builder
Бесплатная версия Elementor поставляется с ограниченным количеством элементов, но в Pro-версии вы получаете такие дополнения, как QI, Ultimate Add Ons и др. Кроме того, у вас будет куча полезных элементов и шаблонов, чтобы с легкостью построить свой сайт.
Было бы несправедливо оставить без внимания дополнение Crocoblock для Gutenberg и Elementor, которое является одним из любимых инструментов для большинства пользователей Elementor, поскольку оно расширяет функциональные возможности родного Elementor.
Elementor разделил свои возможности на 4 категории.
1. Базовые виджеты
Базовые виджеты поставляются в бесплатной версии, и их вполне достаточно для создания потрясающего сайта, который не требует расширенных опций, таких как оглавление, портфолио или форма. Кроме того, в бесплатной версии вы не можете создать меню заголовка/навигации, и вам, возможно, придется найти какую-нибудь классную тему WordPress с навигационным меню, которое вам нравится.
2. Виджеты Pro
Pro Widgets с Elementor Pro охватывают практически все аспекты и все виджеты, которые могут понадобиться вам для создания любого сайта. Добавляйте и выбирайте посты из различных категорий, типов постов или просто перечисляйте последние, таблицы цен, галерею, флип-бокс, легкое встраивание социальных сетей, различные медиа-карусели, виджет Lottie и HotSpot (о нем я расскажу позже).
3. Элементы темы
Элементы темы также поставляются с Elementor Pro, и они важны для создания всех шаблонных страниц и, конечно, шаблона одного поста. Как вы знаете, есть страницы, которые динамически заполняются контентом, например, категория, тег, автор и т.д. Для таких страниц необходимо создать шаблон с помощью элементов темы.
Для этих страниц необходимо создать шаблон с помощью элементов темы. То же самое относится и к одиночным постам, где вы можете создать красивый шаблон для ваших постов, который будет использоваться всеми постами без необходимости создавать их каждый раз. Просто добавьте контент, как вы привыкли, и все готово.
4. Виджеты WooCommerce
И последнее, но не менее важное — виджеты WooCommerce. Эти виджеты позволяют с помощью элементов WooCommerce создавать, подобно Theme Builder, шаблоны страниц и шаблоны одного товара с легкостью.
Системные/хостинговые требования Elementor
Согласно странице системных требований Elementor, он должен работать даже при 128 Мб PHP, MySQL 5.6 или выше или MariaDB 10.0 или выше. Также он должен работать с любым PHP 7+. Для тестирования я использовал VultrHF с 2GB PHP Memory.
Конечно, вам понадобится последняя версия WordPress и все остальные плагины.
Установка и настройка Elementor Page Builder
Установка бесплатной версии Elementor не отличается от установки любого другого плагина из репозитория плагинов WordPress. Перейдите в панель инструментов WordPress → Плагины → Добавить новый, найдите Elementor, установите и активируйте плагин.
Для Pro-версии вам необходимо приобрести тарифный план, который автоматически создаст учетную запись в Elementor. Когда вы войдете в него, вы увидите кнопку загрузки, чтобы загрузить последнюю версию Pro.
Пока вы все еще зарегистрированы в панели Elementor, войдите в WordPress Dashboard → Plugins → Add New и выберите Upload, просмотрите загруженный файл Elementor Pro с вашего компьютера, установите и активируйте его.
Когда все будет готово, в левой боковой панели на панели инструментов WordPress перейдите в раздел Elementor → нажмите на License → нажмите кнопку Connect & Activate.
После щелчка вы будете автоматически перенаправлены на панель инструментов Elementor для активации. Нажмите зеленую кнопку Активировать, и все готово. Ваш Elementor Pro подключен и активирован.
После активации вы увидите подтверждение того, что ваш Elementor активирован. Однако если вы создали сайт на staging домене и не хотите покупать еще одну лицензию для live, вы можете легко отключить аккаунт на staging и активировать его на live домене.
Пришло время начать использовать Elementor и создать свой сайт. Я предлагаю использовать тему Hello Theme от Elementor, специально созданную для Elementor.
Для этого давайте начнем с создания страницы «Домашняя страница» и ее редактирования в Elementor. Перейдите в раздел Страницы → Добавить новую страницу, назовите ее Homepage и опубликуйте ее, затем нажмите кнопку Редактировать с помощью Elementor.
На странице редактирования вы увидите элементы, которые вы не можете редактировать, потому что макет установлен по умолчанию. Чтобы использовать Elementor на пустом холсте, выберите Elementor Full Width или Elementor Canvas, нажав на значок шестеренки в левом нижнем углу.
Перед началом создания сайта обязательно нажмите на значок бургера в левом верхнем углу и установите все глобальные настройки, необходимые для дальнейшей работы.
Настройки сайта очень похожи на настройку темы. Здесь вы можете выбрать глобальные цвета, шрифты, которые вы будете использовать, и полную типографику сайта для каждого HTML-тега.
Кроме того, вы можете установить глобальный стиль кнопок, верхний и нижний колонтитулы, пользовательский CSS, если необходимо, и все, что вам нужно установить и сохранить в таком виде на всем сайте, чтобы сохранить последовательность.
Второй вариант — Theme Builder, который позволяет создавать шаблоны страниц и шаблоны отдельных постов/продуктов, которые будут автоматически использоваться конкретной динамически генерируемой страницей, постом или продуктом. Как и каждая тема WordPress должна иметь файлы шаблонов для отображения всего вышеперечисленного, Elementor позволит вам сделать это, не написав ни одной строчки кода.
Последняя опция — пользовательские настройки, где вы можете настроить свою рабочую среду в Elementor, ничего, что влияет на сам сайт, но ваш пользовательский интерфейс как администратора.
Для начала работы вашего сайта все доступные виджеты размещаются в левой боковой панели, и все можно редактировать визуально и с помощью перетаскивания. Если вы хотите более простой способ, вы можете начать с использования одного из готовых блоков или шаблонов, нажав на значок папки.
Значок папки откроет всплывающее окно, где вы можете увидеть готовые блоки и шаблоны, а также те, которые вы сохранили ранее. Вы также можете сохранить блок или целый шаблон, который вы создали, и повторно использовать его на какой-либо другой внутренней странице. Довольно часто сохраненный блок используется для отзывов, каких-то специфических призывов к действию, которые должны отображаться не на каждой странице, а только на некоторых.
Есть еще одна вещь, которую вам нужно знать, когда вы начинаете создавать сайт без какого-либо предыдущего опыта, — это простота использования, довольно интуитивная, и без какого-либо предыдущего опыта в течение нескольких дней вы будете более чем способны создать себе хороший сайт, я могу сказать, даже профессионально выглядящий.
Однако ваш сайт должен отлично выглядеть на всех устройствах, и точно так же, как вы редактировали версию для настольных компьютеров, вы можете редактировать все остальные размеры. Обратите внимание, что элементы и виджеты могут быть добавлены только в настольную версию, а затем вы можете изменить внешний вид на меньших размерах.
Кроме того, вы можете легко настроить видимость виджета или раздела на разных устройствах, поэтому вы можете иметь разный контент в одном и том же разделе, оставляя один раздел видимым на настольном компьютере, но скрытым на планшете и мобильном. Аналогично, другой раздел скрыт на настольном компьютере, но виден на планшете и мобильном.
Чтобы отредактировать мобильную и планшетную версии, нажмите на значок отзывчивого режима внизу левой боковой панели, он покажет ваш сайт на мобильном. А вверху вы можете переключаться между разными размерами экрана.
Для большей наглядности я добавил два раздела, один из которых скрыт на мобильной и планшетной версиях, а другой — на настольной. Пожалуйста, посмотрите пример ниже.
Конечный результат на мобильных устройствах.
А конечный результат на рабочем столе имеет только один раздел, но другой.
Резюме
Если вам нужен интуитивно понятный и простой в использовании конструктор страниц, Elementor может охватить все аспекты, необходимые для создания хорошего сайта. Не так уж сложно создавать сайты с идеальным пиксельным дизайном, если у вас есть хоть какие-то знания CSS.
Благодаря огромному сообществу и сотням дополнений и внешних плагинов, расширяющих базовые функции Elementor, я не вижу ни одного типа сайта, который нельзя было бы создать с помощью Elementor.
Мы часто видим, что Elementor раздувается, загружается много ненужного кода, его трудно оптимизировать, но, как вы можете видеть из тестов, кажется, что Elementor работает довольно хорошо на Cloudways. Я тестировал целевую страницу с 25 изображениями внутри и 7 разделами + Header и Footer, что выше среднего для главной страницы.
Еще одна замечательная особенность Elementor заключается в том, что кривая обучения не крутая, а довольно легкая, и всего за несколько минут, используя некоторые готовые шаблоны или блоки, вы можете получить действительно красиво оформленный, современно выглядящий сайт.
