Как использовать конструктор страниц Elementor с WordPress

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

Я протестировал Pro-версию Elementor и создал целевую страницу. Он поставляется с функцией перетаскивания и работает с любой темой, и вы можете использовать все виджеты 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 с Elementor Pro охватывают практически все аспекты и все виджеты, которые могут вам понадобиться для создания любого типа веб-сайта. Добавляйте и выбирайте сообщения из разных категорий, типов сообщений или просто перечисляйте последние, таблицы цен, галерею, флип-бокс, простое встраивание социальных сетей, различные карусели мультимедиа, виджет Lottie и HotSpot (об этом я расскажу позже).

3. Элементы темы

Элементы темы также поставляются с Elementor Pro, и, конечно же, они важны для создания всех страниц шаблонов и одного шаблона сообщения. Как вы знаете, есть страницы, которые динамически заполняются таким контентом, как Категория, Тег, Автор и т. Д.

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

4. Виджеты WooCommerce

И последнее, но не менее важное, виджеты WooCommerce. Эти виджеты позволяют с легкостью создавать похожие на Theme Builder страницы шаблонов и единый шаблон продукта, используя элементы WooCommerce.

Цены и планы Elementor Page Builder

Elementor Pro поставляется с 5 различными планами, все они содержат один и тот же конструктор страниц Elementor Pro и такие функции, как:

• Живой редактор с перетаскиванием
• Адаптивный дизайн
• 90+ базовых и профессиональных виджетов
• 300+ базовых и профессиональных шаблонов
• Конструктор тем

Самый дешевый план - Essential для 1 сайта по цене 49 долларов США. С этим планом вы получаете премиум-поддержку, а это значит, что вы можете ожидать ответа в течение 24 часов. Следующий план - Расширенный, и он включает лицензию на 3 сайта по цене 99 долларов с таким же типом поддержки.

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

Перед вершиной находится Studio для 100 сайтов по цене 499 долларов, и там у вас есть дополнительное преимущество VIP-поддержки, что означает, что у вас есть приоритет, и на ваши заявки ответят в течение 30 минут. То же самое и с самым дорогим тарифным планом Agency на 1000 сайтов по цене 1000 долларов.

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

Системные / хостинговые требования Elementor

Согласно странице системных требований Elementor, он должен работать даже с 128 МБ PHP, MySQL 5.6 или выше или MariaDB 10.0 или выше. Также он должен работать с любым PHP 7+. Для целей тестирования я использовал VultrHF с 2 ГБ памяти PHP.

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

Установите и настройте Elementor Page Builder

Установка бесплатной версии Elementor такая же, как и для любого другого плагина в репозитории плагинов WordPress, перейдите в панель управления WordPress → Плагины → Добавить новый, найдите Elementor, установите и активируйте плагин.

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

Пока вы все еще вошли в панель управления Elementor, войдите в свою панель управления WordPress → Плагины → Добавить новый и выберите Загрузить, просмотрите загруженный файл Elementor Pro со своего компьютера, установите и активируйте его.

Когда вы закончите с левой боковой панелью на панели инструментов WordPress, перейдите в Elementor → нажмите License → нажмите кнопку Connect & Activate.

При нажатии на нее вы автоматически перенаправляетесь на панель инструментов Elementor, чтобы активировать ее. Нажмите зеленую кнопку «Активировать», и все готово. Ваш Elementor Pro подключен и активирован.

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

Пришло время начать использовать Elementor и создать свой веб-сайт. Я предлагаю использовать тему Hello от Elementor, специально созданную для Elementor.

Для этого давайте начнем с создания страницы «Домашняя страница» и отредактируем ее с помощью Elementor. Перейдите в Pages → Add New, назовите его Homepage и опубликуйте, затем нажмите кнопку Edit With Elementor.

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

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

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

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

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

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

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

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

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

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

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

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

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

Конечный результат - на мобильном телефоне.

И в конечном результате на рабочем столе есть только один раздел, но другой.

Производительность конструктора страниц Elementor на Cloudways

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

- Результаты Elementor на GTMetrix

- Результаты Elementor на Pingdom Tools

- Результаты Elementor на WebPageTest

Резюме

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

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

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

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