Перейти к основному контенту

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

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

Что такое Elementor

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

=600x369

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

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

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

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

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

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

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

Шаг 1

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

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

Шаг 2

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

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

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

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

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

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

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

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

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

Закажите услугу REG.Site

Попробуйте комплексное решение для создания сайта прямо сейчас!

Попробовать

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

Устанавливается Elementor, как все другие плагины в WordPress.

  1. 1.
    Войдите в административную панель WordPress. Если не добавили её в закладки браузера или не помните адрес, посмотрите инструкцию.
  2. 2.

    В меню выберите раздел «Плагины» и нажмите Добавить новый:

    Работа в Elementor 5

  3. 3.
    Введите в строку поиска справа название «Elementor» и нажмите Enter.
  4. 4.

    Нажмите Установить, а затем Активировать в блоке «Elementor Website Builder»:

    Работа в Elementor 6

Готово, сразу после активации откроется приветственная страница плагина с видеоинструкцией о том, как пользоваться Elementor. Она на английском языке. Если не владеете им, прочитайте гайд REG.RU.

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

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

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

  1. 1.

    Перейдите в раздел «Страницы» и нажмите Добавить новую:

    Работа в Elementor 7

  2. 2.

    На открывшейся странице нажмите Редактировать в Elementor:

    Работа в Elementor 8

Готово, после этого загрузится расширенный конструктор страниц Elementor:

Работа в Elementor 9

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

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

  1. 1.

    Перетащите необходимый элемент (виджет) из левого меню в область справа:

    Работа в Elementor 10 В примере виджет «Заголовок»

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

  2. 2.

    После добавления виджета в левой части появится меню для работы с отдельным блоком. В нём есть 3 вкладки:

    • Содержимое. Предназначена для работы с контентом (здесь вы вставляете свой текст, картинки, т. п. и назначаете основные настройки);
    • Стиль. Здесь настраивается внешний вид добавленного контента;
    • Расширенные. Это настройки для чуть более продвинутых пользователей. Здесь можно анимировать объект, скрыть его в мобильной версии сайта, загрузить ваши CSS-стили и др.

    Это меню стандартно для всех виджетов, но настройки внутри вкладок отличаются в зависимости от типа элемента.

    Работа в Elementor 11

  3. 3.

    Задайте необходимые настройки, они сразу отобразятся справа. Покажем на примере заголовка. Создадим заголовок «Инструкция по Elementor»:

    Работа в Elementor 12

  4. 4.

    Когда блок будет готов, перейдите к следующему виджету. Для этого кликните на отмеченную стрелкой иконку:

    Работа в Elementor 13

    После этого откроется меню виджетов. Дальше повторите с 1-го по 4-й шаги. Добавим ещё несколько виджетов, чтобы показать возможности Elementor:

    Работа в Elementor 14 Как сделать сайт на Элементоре

    Добавленные изображения отображаются в редакторе только тогда, когда вы редактируете этот блок. Если хотите увидеть страницу целиком до сохранения, нажмите на иконку с тремя полосами слева – Просмотр страницы:

    =292x450

  5. 5.

    Когда страница будет готова, нажмите в нижней части левого меню кнопку «Опубликовать» или треугольник справа от неё. Там можно выбрать «Сохранить черновик» или «Сохранить шаблон», если созданная страница будет повторяться на сайте несколько раз (например, вы сделали карточку товара). Это позволит в следующий раз не создавать шаблон страницы с нуля:

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

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

=292x450

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

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

Elementor vs Elementor Pro

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

  Elementor Elementor Pro
Цена Бесплатно От 49 до 199 $ в год (цены действительны на 06.12.2020)
Доступные виджеты 40 (категории «Базовый», «Общие») 90+ виджетов (бесплатные + категории «Pro», «Woocommerce»)
Шаблоны 5 бесплатных шаблонов в библиотеке 300+ шаблонов. Каждый шаблон Elementor Wordpress из коллекции можно использовать, не нарушая авторские права
Конструктор всплывающих форм - Есть функционал для разработки поп-апов на сайте
Конструктор тем - +
Настройка хедера и футера - +
Создание интернет-магазина - +
Анимация Базовые инструменты Параллакс-скроллинг, 3D-наклон, тени и др.

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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2