»  Обзоры  »  WordPress Elementor (Free и Pro)

WordPress Elementor (Free и Pro)

Последнее обновление:

Обзор ElementorElementor — это визуальный конструктор страниц, который появился в 2016 году и быстро завоевал популярность.

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

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

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

И 3 лайфхака по использованию функций версии Pro в версии Free.

Содержание:

8 Особенностей Элементора, которые сделали его успешным

  1. Простота использования
  2. Скорость работы
  3. Удобные функции редактирования
  4. Редактирование текста в виджетах
  5. Мобильный предпросмотр и адаптивный дизайн
  6. Библиотека шаблонов
  7. Дополнения для Элементора
  8. Чистый код, если вы деактивируете Элементор

Elementor Pro

  1. Конструктор темы
  2. Все Pro шаблоны
  3. 30+ новых виджетов
  4. Динамические теги
  5. Всплывающие окна / Поп-апы
  6. Глобальные виджеты
  7. Интеграция с сервисами
  8. Управление доступом к редактору
  9. Загрузка шрифтов и иконок
  10. Шорткоды готовых блоков
  11. Редактор CSS

Кому подходит Elementor

Чего не хватает в Элементоре

8 Особенностей Элементора, которые сделали его успешным

В сообществе Вордпресс существует большое количество конструкторов страниц, которые предлагают визуальный драг-энд-дроп интерфейс, но Элементор предлагает больше, чем его главные конкуренты — DIVI, Beaver Builder и ThriveArchitect.

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

По сравнению с другими конструкторами страниц, интерфейс Элементора один из самых простых и интуитивно понятных.

Хотя все конструкторы страниц, особенно фронт-энд конструкторы, к которым относится Elementor, довольно просты в изучении, Elementor определенно один из самых простых.

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

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

Настройки стилей
Настройки стилей

2. Скорость работы

Иногда редактор Элементора довольно долго загружает страницу, — 10-15 секунд. Обычно проблема в скорости соединения или в нагруженности самой страницы.

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

До Элементора я пользовался конструктором WPBakery Page Builder, разница в работе сразу заметна.

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

Интерфейс Элементора
Интерфейс Elementor

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

Виджеты WPBakery
Виджеты WPBakery

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

3. Удобные функции редактирования

Кроме удобного интерфейса, у Элементора есть несколько инструментов, которые помогают работать быстрее:

1. Правая кнопка мыши

В Элементоре работает правая кнопка мыши. Вы можете дублировать элементы, копировать и вставлять элементы или стили, открывать Навигатор, и другие функции:

Правая кнопка Элементора - копировать и вставить стили
Правая кнопка — Копировать и вставить стили

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

Навигатор вызывается в меню правой кнопкой или в нижнем баре:

Elementor - Навигатор
Навигатор Элементора

3. История редактирования

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

Нажмите кнопку История и выберите действие, на которое хотите вернуться.

Elementor - История последних действий
История последних действий

Или нажмите кнопку Редакции и выберите одну из сохраненных ранее версий страницы.

Для отмены последнего действия используйте комбинацию кнопок Ctrl+z.

4. Поиск виджетов / Finder

Для поиска виджетов вы можете использовать окно поиска:

Elementor - Поиск виджетов
Поиск виджетов

Для поиска ваших страниц, блоков или шаблонов используйте Finder:

Elementor - Finder
Elementor — Finder

4. Редактирование текста в виджетах

Вы можете редактировать текст прямо в текстовых виджетах:

Elementor - Редактирование текста в виджетах
Текст в текстовых виджетах

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

5. Мобильный предпросмотр и адаптивный дизайн

Адаптивный дизайн страниц — обязательное условие для любой темы и пейдж-билдера. Все блоки, страницы или шаблоны, которые вы делаете в Элементоре, по умолчанию адаптивные.

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

Elementor - адаптивный дизайн
Адаптивный дизайн

Вы можете настроить разные стили элементов для разных устройств, например, разный размер шрифта или разные отступы для десктопов и смартфонов.

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

Отключение видимости элементов
Отключение видимости элементов

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

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

6. Библиотека шаблонов

Хотя у Элементора довольно много инструментов для создания страниц с нуля, вам не нужно это делать каждый раз. Даже в бесплатной версии Элементора в библиотеке есть готовые Блоки и Страницы.

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

Библиотека шаблонов
Библиотека шаблонов

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

Ну и конечно вы можете сохранить в библиотеке свои шаблоны и использовать их позже.

7. Дополнения для Элементора

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

Разработчики Элементора оставили возможность другим разработчикам писать дополнения для Элементора.

Некоторые из них, например, Crocoblock имеют даже больший функционал, чем Elementor Pro.

8. Чистый код, если вы деактивируете Элементор

Для отображения своих виджетов Элементор не использует шорткоды. Если однажды вы решите удалить Элементор, он не оставит после себя шорткоды, как например DIVI или WPBakery. Ваш контент останется на странице, но стили, конечно, пропадут.

В конце мая 2020 года у Элементора более 5 млн. установок, и он входит в Топ-10 самых популярных плагинов Вордпресс.

Я думаю, что Элементор стал таким популярным благодаря этим характерным чертам:

  1. Быстрый и удобный интерфейс,
  2. Много настроек стилей для каждого элемента,
  3. Большое количество платных и бесплатных дополнений для расширения функционала,
  4. Потенциал для редактирования шаблонов темы с помощью дополнений
Elementor - Разделитель секции
Разделитель секции

Elementor Pro

Если вы хотите создать несколько постов или страниц на вашем сайте, или делать несложные лендинги, то бесплатной версии Элементора должно быть достаточно.

В платной версии, которая стоит 49$ / год за 1 сайт, вы получите еще больше:

  1. Конструктор темы
  2. Все Pro шаблоны
  3. 30+ новых виджетов
  4. Динамические теги
  5. Всплывающие окна / Поп-апы
  6. Глобальные виджеты
  7. Интеграция с сервисами
  8. Управление доступом к редактору
  9. Загрузка шрифтов и иконок
  10. Шорткоды готовых блоков
  11. Редактор CSS

1. Конструктор темы

Самая крутая функция Elementor Pro — конструктор темы. С его помощью вы можете создать свою собственную тему.

Перейдите ElementorШаблоныКонструктор темы. Выберите, какую часть темы вы хотите создать:

Создайте новый шаблон
Новый шаблон Записи

Создайте новый шаблон с помощью виджетов Элементора, выберите, на каких страницах вы хотите использовать этот шаблон и нажмите Сохранить.

В версии 2.9.4 вы можете создать 9 шаблонов:

  • Страница
  • Секция
  • Поп-ап
  • Хедер
  • Футер
  • Запись
  • Архив
  • Страница Товара
  • Архив Товаров

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

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

Или вы можете использовать другую собственную премиум-тему Элементора Layers, которую вы получите бесплатно вместе с покупкой любой Pro лицензии.

2. Шаблоны Pro

Если вы купите Elementor Pro, вы получите все блоки и шаблоны в библиотеке. Шаблоны Pro обычно сложнее и более детально проработаны.

Шаблоны Elementor
Шаблоны Elementor

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

3. 30+ новых виджетов

В версии Pro добавляется более 30 дополнительных виджетов, которые могут заменить множество плагинов.

Часто используемые виджеты:

  • Конструктор форм
  • Меню сайта
  • Слайдер
  • Банер
  • Кнопки Поделиться в соцсетях
  • Таймер обратного отсчета
  • Таблица цен
  • Форма входа
Виджеты Elementor Pro
Виджеты Elementor Pro

И динамические виджеты для создания шаблонов.

4. Динамические теги

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

Например, для того, чтобы вывести название записи, имя или фотографию посетителя.

Динамические теги
Динамические теги

Пример вывода информации о посетителе.

Еще один способ применения динамических тегов — вывод информации из кастомных полей плагинов Advanced Custom Fields, JetEngine, PODS.

5. Всплывающие окна / Поп-апы

Вы можете создать шаблон со своим контентом и сохранить как Поп-ап. ElementorШаблоныПопапы. В настройках укажите условия отображения:

Elementor - Триггеры поп-апа
Триггеры поп-апа

6. Глобальные виджеты

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

С помощью глобального виджета вы можете:

  • Сохранить элемент как шаблон и использовать на нескольких страницах
  • Автоматически обновлять копии виджета, когда редактируете глобальный виджет
Elementor - Глобальный виджет
Elementor — Глобальный виджет

7. Интеграция с сервисами

У Элементора по умолчанию есть интеграция со множеством сервисов.

  • MailChimp
  • MailerLite
  • ActiveCampaigns
  • HubSpot
  • Zapier
  • FontAwesome
  • и многие другие

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

Подключение к сервисам находится в разделе НастройкиИнтеграции.

8. Управление доступом к редактору

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

Elementor - менеджер ролей
Менеджер ролей

9. Загрузка шрифтов и иконок

В Elementor Pro вы можете загрузить свои собственные шрифты и иконки:

Elementor - Пользовательске шрифты, Пользовательские иконки
Пользовательске шрифты и иконки

Лайфхак: В бесплатной версии Элементора вы можете добавить кастомные шрифты с помощью плагина Custom Fonts.

Если у вас тема Astra, этот плагин добавит шрифты в тему и в Элементор. Если у вас другая тема, этот плагин добавит шрифты только в Элементор.

10. Шорткоды готовых блоков

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

Elementor - Шорткоды
Шорткоды Elementor

Это очень удобная функция, которой нет в бесплатной версии.

Хотя это очень полезная функция, я вынес ее в конец списка, потому что в бесплатной версии вы можете использовать плагины Piotnet Addons for Elementor, Elementor – Header, Footer & Blocks или AnyWhere Elementor, которые добавляют шорткоды шаблонам. Лайфхак.

11. Редактор CSS

В Elementor Pro у каждого виджета в разделе Расширенные становится доступен Custom CSS. С его помощью вы можете добавлять собственный css.

Elementor - Custom CSS
Расширенные — Custom CSS

Это тоже очень полезная функция, но она находится в конце списка, потому что для нее тоже есть лайфхак: в бесплатной версии вы можете пользоваться виджетом HTML-код:

Elementor - HTML виджет
Кастомный css в виджете HTML-код

Если вы хотите использовать собственный класс, вы можете назначить его в настройках виджета РасширенныеCSS ID:

Elementor - CSS ID
Расширенные — CSS ID

И так же использовать виджет HTML-код для добавления своих стилей.

Кому подходит Elementor

Элементор подойдет практически всем, кто использует Вордпресс.

Обычный пользователь

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

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

Интернет-маркетолог

Элементор подходит интернет-маркетологу, потому что у него есть множество инструментов для маркетинга.

Бесплатной версии Элементора достаточно для создания лендингов.

В Elementor Pro вы можете использовать конструктор форм и подключить их к сервисам рассылки или к CRM, например, HubSpot.

В Elementor Pro есть встроенная интеграция с Zapier, с помощью которой вы можете подключить ваш сайт к сотням сервисов в Интернете.

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

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

Разработчик сайтов

Если вы делаете сайты на заказ, Элементор хороший и популярный выбор.

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

Чего не хватает в Элементоре

Хотя Elementor и особенно Elementor Pro — это действительно хороший инструмент, который постоянно развивается, и в котором постоянно появляются новые функции, хотелось бы видеть этот функционал в ближайших обновлениях:

Отключение неиспользуемых виджетов

В следующих версиях хотелось бы видеть отключение неиспользуемых виджетов, как в плагинах Crocoblock, PAFE Piotnet и других:

Отключение виджетов в плагине JetElements
Отключение виджетов в плагине JetElements

Редактирование страниц Корзина, Оформление заказа

Если конструктор темы позволяет создать собственный шаблон Страницы товара WooCommerce и архивные страницы Товаров, то почему бы не добавить возможность редактировать страницы Корзина и Оформление заказа.

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

Возможно, это появится в одной из будущих версий, пока это есть только в плагине Woolementor.

Редактирование админки WooCommerce

Хотя это довольно просто сделать вручную, было бы удобнее иметь один инструмент для всех задач.

Пока известно, что в ближайшей версии появится много-шаговая форма и поддержка Lottie:

Заключение

Элементор — это база для создания практически любого сайта. Я думаю, что это лучший пейдж-билдер для Вордпресс на данный момент, потому что у него:

  • Быстрый и удобный интерфейс
  • Редактирование шаблонов темы
  • Множество настроек стилей для каждого элемента
  • Большое количество платных и бесплатных дополнений для разных задач

Хотя с версией Pro вы можете создать собственную тему, для экономии времени вы можете использовать одну из этих тем:

Стоимость лицензии начинается с 49$ / год за 1 сайт, примерно столько же стоит лицензия на хорошую тему.

Я думаю, что идея Элементора заключается в том, чтобы заменить тему и работать хорошо. И он успешно с этим справляется.

Если вам понравился Элементор, вы можете его купить по этой партнерской ссылке.

Читайте также:

  1. Обзор темы Astra
  2. Обзор плагина Advanced Custom Fields
  3. Библиотеки CSS
  4. Липкое меню Вордпресс с помощью Elementor
  5. Как закрыть любую секцию в Elementor по клику
  6. Как добавить текст на картинке при наведении мышкой

Надеюсь, статья была полезна. Оставляйте комментарии.

Поделиться в facebook
Поделиться в vk
Поделиться в email
Поделиться в telegram
Поделиться в whatsapp

Оставьте комментарий

Do NOT follow this link or you will be banned from the site!