Обзор Elementor (Free и Pro)

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

В начале 2024 года Элементор — самый популярный плагин в репозитории Вордпресс.

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

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

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

Содержание:

Что сделало Элементор популярным

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

Elementor Pro

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

Что сделало Элементор популярным

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

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

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

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

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

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

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

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

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

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

Интерфейс Элементора работает достаточно быстро и не имеет всплывающих окон, поэтому работа с ним тоже проходит быстро.

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

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

• Правая кнопка мыши
• Навигатор
• История редактирования
• Поиск

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

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

2. Навигатор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему Elementor так популярен

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

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

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

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. Динамические теги

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

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

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

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

• Обзор плагина Advanced Custom Fields

И при создании различных шаблонов для вывода контента.

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

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

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

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

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

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

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

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

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

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

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

6. Шаблоны Pro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. Редактор CSS

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

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

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

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

Заключение

Элементор — это конструктор для создания практически любого сайта.

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

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

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

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

1. Обзор Astra
2. Обзор Blocksy
3. Обзор Kadence
4. Библиотеки CSS

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