Главная » Обзоры » Обзор плагина Elementor PRO 3.0.3 для WordPress

Обзор плагина Elementor PRO 3.0.3 для WordPress

Обзор плагина Elementor Pro для WordPress

Elementor (актуальная версия 3.0.3) — бесплатный плагин для WordPress, который превращает мощную CMS в конструктор сайтов. Его предназначение — добавление визуального редактора. Благодаря Elementor вы можете собирать страницы сайта на WordPress простым перетаскиванием готовых элементов. Это типичный пример платформы No-code — инструмента, позволяющий создавать интерфейсы без кодинга.

Установка Elementor не меняет административную панель WordPress. Единственное, что добавляется, — кнопка «Редактировать в Elementor» внутри редактора страницы. При нажатии на неё вы переходите в визуальный редактор, где можете собирать интерфейс из элементов, блоков и шаблонов.

Плагин Elementor PRO

У плагина есть две версии — ограниченная бесплатная и полная платная. Начать можно с первой. Её возможностей хватит для того, чтобы оценить возможности расширения и принять решение, будет ли он полезным при разработке вашего проекта. Для постоянной работы рекомендуется сразу приобретать платную версию — в ней заметно больше инструментов кастомизации.

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

Elementor
  • Мощный конструктор сайтов для WordPress
  • Создание дизайна без работы с кодом
  • Совместим со всеми современными темами

Плюсы и минусы

Elementor — самый популярный плагин, который добавляет визуальный редактор на WordPress. Из официального каталога его установили более 5 миллионов раз — по этому показателю он входит в десятку расширений. Чем же он так привлекает пользователей?

Плюсы:
Минусы:
Бесплатная версия, которая позволяет использовать основные возможности расширения без рекламы и лейблов на страницах сайта.
Совместимость с WooCommerce — можно редактировать в визуальном режиме карточки товаров.
Встроенный редактор CSS, который позволяет вставлять кастомные стили.
Глобальные шаблоны, которые можно использовать на разных страницах и при необходимости менять из одного места.
Расширяемость с помощью других плагинов.
Даже после отказа от продления подписки элементы, доступны только по лицензии, продолжают работать на сайте. Но редактировать их больше нельзя.
Постоянное обновление и добавление новых возможностей.
Большое количество обучающих материалов: статей, туториалов, видеокурсов.
Круглосуточная техническая поддержка.
Низкая скорость загрузки сайта из-за избыточного CSS-кода.
Возможны конфликты с некоторыми темами для WordPress.
На WooCommerce можно редактировать только страницы с товарами. Страницу оформления заказа и корзину изменить с помощью Elementor нельзя.
Оперативная техническая поддержка есть только после оплаты премиум-доступа.

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

Elementor
  • Без рекламы и лейбла на страницах
  • Продвинутые инструменты редактирования
  • Расширяемая функциональность

Для кого предназначен

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

Кому Elementor точно подойдёт:

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

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

Elementor
  • Для пользователей без опыта разработки
  • Отличный инструмент для прототипирования
  • Универсальный плагин для любого сайта

Простота использования

Elementor добавляет на WordPress визуальный редактор, который позволяет настраивать внешний вид страниц без правки кода. Если вы работали с конструкторами сайтов, то знаете, как это удобно и быстро. Но здесь остаётся вся мощность CMS WordPress, которую не может предложить ни один конструктор.

Освоение Elementor не занимает много времени. Сразу после установки появляется короткое обучающее видео, но разобраться с возможностями плагина можно и без него. Система тут же предлагает создать тестовую страницу. Это не обязательно — кнопка «Редактировать в Elementor» теперь есть во встроенном редакторе WordPress. Вам нужно только создать новую страницу и затем можно перейти в режим её визуального редактирования.

Редактор Elementor PRO

Интерфейс плагина тоже простой. Есть блок с настройками, который размещён слева. Большую часть экрана занимает полотно, на котором вы и будете настраивать внешний вид каждой страницы. Содержимое блока с настройками меняется в зависимости от того, что выбрано на полотне: секция, элемент, фон.

Elementor
  • Редактирование страниц на без правки кода
  • Простой интерфейс, русская локализация
  • Наглядные обучающие материалы

Функциональность

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

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

Редактор Elementor PRO

Плагин также позволяет гибко настраивать всплывающие окна. В галерее представлено более 100 готовых попапов. Можно кастомизировать понравившийся вариант или создать всплывающее окно с нуля. Внутри него выводится самый разный контент: форма подписки, авторизация, анонсы, акции.

Поведение всплывающих окон тоже настраивается. Есть следующие параметры его вывода:

  • показ только на определённых страницах;
  • отображение по клику — например, пользователь нажал на кнопку «Зарегистрироваться», появилось окно с формой регистрации;
  • показ после определённой длины скролла;
  • появление по истечении установленного времени;
  • отображение после просмотра определённого количества страниц;
  • показ во время ухода посетителя с сайта и т.д.

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

Глобальные шаблоны Elementor PRO

Ещё одна отличная функция плагина — глобальные шаблоны. Например, вы сохраняете синюю кнопку, затем меняете цвет на красный. Изменения будут внесены везде, где использован глобальный шаблон. Это очень удобная практика верстальщиков — создавать глобальные элементы и затем переиспользовать их в разных частях интерфейса и при необходимости быстро кастомизировать.

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

Elementor
  • Более 60 виджетов для создания интерфейса
  • Сохранение истории изменений
  • Возможность интеграции с WooCommerce

Дизайн и работа с шаблонами

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

Перед началом работы нужно выбрать макет страницы. Есть несколько вариантов:

  • По умолчанию — шапка и подвал сайта сохраняются, контентная замена центрирована.
  • Холст Elementor — подвала и шапки сайта нет, контентная зона растянута на всю ширину страницы.
  • Elementor полная ширина — шапка и подвал сайта остаются, контентная зона растянута на всю ширину страницы.

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

Стиль блоков Elementor PRO

В настройках также есть вкладка «Стиль». Здесь настраивается цвет и фон страницы, а также внутренние отступы — их можно связать или сделать разными в зависимости от стороны. При подключении режима Pro доступен третий раздел настроек. В нём размещён редактор CSS, который позволяет добавлять блокам кастомные стили.

При открытии страницы в редакторе Elementor вы увидите две кнопки — «Добавить секцию» и «Добавить шаблон». С их помощью выстраивается весь интерфейс контентной зоны.

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

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

  1. «Блоки» — свёрстанные секции, состоящие из нескольких элементов. Например, раздел FAQ, обложка с таймером, секция с контактными данными.
  2. «Страницы» — полностью свёрстанные страницы под разные задачи. Например, здесь есть пример главной страницы сайта фотографа или журнала, разные варианты страниц с контактами. Из таких шаблонов можно очень быстро собирать сайты.
  3. «Мои шаблоны» — элементы, секции, целые страницы, которые вы создали и сохранили. Отличное решение для разработчиков сайтов, которые собирают проекты из готовых компонентов. Например, можно создать блок с кастомным CSS и затем переиспользовать его на других страницах или в других проектах.

Некоторые блоки и страницы доступны в бесплатном режиме. Но самые лучшие варианты — только для подписчиков Elementor Pro.

Важно, что блоки и страницы из библиотеки можно редактировать так же, как секции, собранные своими руками. У каждой сущности есть собственные настройки: фон, шрифты, границы, отступы, эффекты. Можно добавлять HTML и CSS, чтобы кастомизировать стандартные блоки, а затем сохранять их как свои шаблоны.

Использование HTML и CSS — опция, а не требование. Вы можете обходиться визуальными инструментами редактирования и собирать из готовых элементов разные интерфейсы, используя встроенные настройки блоков.

Адаптивность Elementor PRO

При настройке внешнего вида сайта нужно обязательно обращать внимание на адаптивность интерфейса. Для этого в левом меню есть специальная кнопка, переключающая редактор в режим адаптивности. В нём можно посмотреть, как сайт выглядит на десктопе, планшете (768px) и смартфоне (360px).

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

Elementor
  • Встроенная библиотека блоков и шаблонов
  • Вставка кастомных HTML и CSS
  • Проверка и настройка адаптивности

Техническая поддержка

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

Ссылка на этот курс есть и на официальном сайте Elementor в разделе Help Center. В нём вообще очень много полезного:

  • Getting Started — раздел с несколькими видео, которые объясняют, как начать работать с Elementor.
  • Video Tutorials — ссылка на канал на YouTube с туториалами.
  • Website Tutorials — подборка инструкций по созданию сайтов разного типа (сайт музыкальной группы, тренажёрного зала, кафе, визитку с портфолио, интернет-магазин).
  • Knowledge Base — база знаний со статьями по всем важным вопросам, связанным с работой плагина.
  • FAQ — ответы на распространённые вопросы.
  • Support — страница со ссылками на все материалы поддержки, в том числе ресурсы для разработчиков и профиль на GitHub.
  • Ask the Community — ссылка на приватную группу на Facebook. В ней 73 000 участников, которые помогают друг другу работать с Elementor.

У Elementor есть собственная служба поддержки. В бесплатной версии с ней можно связаться через форму обратной связи. Она доступна на официальном сайте плагина на странице Contact Us. Экстренная поддержка доступна только пользователям с подпиской Elementor Pro.

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

Elementor
  • Много обучающих материалов и видео
  • Большое пользовательское сообщество
  • Круглосуточная техническая поддержка

Цена: сколько стоит сделать сайт с Elementor PRO?

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

Чтобы получить доступ ко всем возможностям плагина, нужно оплатить лицензию. Она включает:

  • Более 90 виджетов (в бесплатной версии примерно в 2 раза меньше).
  • Глобальные шаблоны — можно разместить их на разных страницах и менять из одного места.
  • Более 300 профессиональных тем.
  • Простая анимация: параллакс, горизонтальный скроллинг, повороты, прозрачность и так далее.
  • Редактор CSS.
  • Редактор тем, который позволяет править шапку и подвал сайта.
  • Редактор страниц товаров, созданных с помощью WooCommerce.
  • Редактор всплывающих окон и форм.
  • Круглосуточная поддержка и обновления в течение года.

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

  • 1 сайт — 49 долларов в год.
  • 3 сайта — 99 долларов в год.
  • 1000 сайтов — 199 долларов в год.

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

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

Elementor
  • Много возможностей визуального редактора
  • Цена сопоставима с стоимостью платной темы
  • Возможность расширения функциональности

Выводы: стоит ли использовать Elementor PRO?

Главные фишки расширения — в версии Pro, что логично. Базовые возможности бесплатной версии подходят разве что для тестирования плагина. Вместо них можно использовать встроенный визуальный редактор Gutenberg, который предлагает сопоставимые возможности.

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

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

Howard

Об авторе:

Приветствую, Я Говард Стил, владелец и главный редактор этого сайта. Имея за плечами более 10 лет опыта в сайтостроении я знаю, как порой нелегко бывает неспециалисту разобраться во всем многообразии инструментов для создания сайта. Не знаете, какой конструктор выбрать? Просто напишите мне и я подскажу лучший вариант для вашей задачи.

Добавить комментарий

Ваш адрес email не будет опубликован.