Elementor: назначение, возможности, сравнение версий

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

Что такое Elementor

Elementor (полное название: Elementor Website Builder) — плагин WordPress, который расширяет возможности стандартного редактора. Это своеобразный конструктор сайтов, с помощью которого можно быстро и просто разработать любой дизайн страницы или отдельного блока. Elementor — очень популярное решение. К концу 2020 года его установили более 5 млн пользователей. Есть официальный сайт, посвященный Elementor, со своим блогом и сообществом разработчиков. Прежде чем перейти к возможностям плагина, посмотрите, какие сайты можно создать с его помощью:

Сделать динамичную прокрутку и анимацию, как на сайте агентства Kima

Или стильный двухколоночный лендинг, как у шеф-повара Джейд Бергер

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

Что умеет плагин Elementor

У плагина есть бесплатная (Elementor) и платная (Elementor Pro) версии. Они отличаются количеством доступных функций. Мы сравним их ниже, а сначала расскажем о принципе работы этого конструктора страниц.

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

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

Шаг 1

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

«Голая» структура страницы в редакторе

Шаг 2

Редактируем каждый блок, заполняя его контентом (текст, изображения, отзывы, кнопки и т. д.).

Редактирование блока (в примере виджет «Кнопка»)

Всего инструмент содержит более 90 виджетов. Они разделены по типам: базовые, платные, общие, сайт и WooCommerce (интернет магазин на Elementor WordPress).

Рассмотрим наиболее универсальные бесплатные функции:

• Заголовок. Вставьте нужный текст, настройте цвет, шрифт, размер, интервалы, насыщенность и т.д.
• Изображение. Загрузите картинку из админки WordPress или с компьютера, отредактируйте её размер, прозрачность, тени, расположение на странице.
• Текстовый редактор. Идентичен стандартному редактору WordPress.
• Видео. Добавьте ролики с YouTube, Vimeo и других источников.
• Кнопка. Настройте текст, внешний вид и ссылку ваших кнопок.
• Отзывы. Разместите отзывы клиентов с текстом, фотографией, подписью.
• Иконки соцсетей. Добавьте ссылки на социальные сети вашей компании.

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

• Галерея/карусель изображений. Несколько изображений будут отображаться в одной сетке или сменять друг друга.
• Форма. Настройте форму, которую сможет заполнить пользователь.
• Цитаты. Оформите текст как цитату.
• Логин. Позволяет добавить блок для авторизации в аккаунте на вашем сайте.
• Прайс-лист. Разместите тарифы ваших услуг.
• Таймер. Пригодится, если на сайте действует акция, ограниченная по времени.
• Шаблоны. Позволяет взять готовую страницу из библиотеки и отредактировать содержимое/изображение.
• Каталог товаров. С помощью этого виджета вы сможете превратить страницу в интернет-магазин.

Благодаря этим инструментам и простому интерфейсу можно собрать страницу любого типа: от простого описания услуги или статьи с фотографиями в блог до каталога интернет-магазина или сайта компании.

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

Как установить Elementor на Wordpress

Создание сайта на WordPress Elementor

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

Чтобы открыть Elementor:

Если вы хотите отредактировать уже существующую страницу, последовательность действий будет та же. Только вместо добавления новой страницы выберите в 1-м шаге нужную (в примере выше «Blog» или «Classes»), нажмите Изменить, а затем Редактировать в Elementor.

Дальше перейдем к тому, как создать сайт на WordPress Elementor.

Elementor настройка для WordPress

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

В нем есть следующие разделы:

• Глобальные цвета → для задания основных и дополнительных цветов надписей, кнопок, разделителей и других элементов сайта.
• Глобальные шрифты → для выбора нескольких шрифтов, которые будут сохраняться для всех текстовых виджетов.
• Типографика → для задания отступов и SEO-разметки заголовков (тегов H1-H6).
• Кнопки → чтобы один раз создать кнопку и затем редактировать по минимуму.
• Изображения → для настроек отображения картинок.
• Поля формы → настройки внешнего вида формы для заполнения пользователями.
• Айдентика сайта → позволяет задать название и описание сайта, выбрать логотип и фавикон.
• Фон → цвет фона для всех элементов сайта.
• Макет → для настройки ширины страницы, отступов виджетов.
• Лайтбокс → позволяет открывать изображения во всплывающем окне.
• Пользовательские CSS (Pro версия) → для загрузки пользовательских стилей.
• Расширенные настройки (откроются в новом окне) → для разработчиков и настройки селекторов, оптимизации и т. п.

Elementor vs Elementor Pro

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

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