Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Обзор Элементор Разработка сайта

Привет!

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

Эту статью я сверстаю также в Elementor и периодически буду вставлять красивые блоки, чтобы сразу наглядно показывать преимущества конструктора. Поехали? :)

Обзор мощного конструктора для WordPress — Elementor Page Builder

Содержание

Что такое Elementor и для чего он нужен

Elementor это многофункциональный конструктор страниц. Используется для верстки лендингов, лонгридов, статей и всего чего захотите :) Верстка происходит с помощью готовых элементов, которые вы выбираете простым перетаскиванием и задаете необходимые настройки через удобную админ-панель.

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

Установка

Элементор это плагин для CMS WordPress, то есть чтобы его использовать сначала нужно создать сайт на WordPress (если не знаете как это сделать, вам в помощь мой гайд), установить шаблон (про шаблоны читайте ниже) и установить плагин, Elementor готов к работе. Да, так все просто!)

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

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс "Идеальный сайт на Wordpress" и "Лендинг в Elementor", где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый - 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

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

Вдохновение там, где Elementor!

Возможности бесплатной версии

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

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

Секция

Секция это область куда вы добавляете элементы. Каждая секция состоит из колонок, можно выбрать от 1 до 6-ти колонок. Секции нужны для того, чтобы задавать положение элементов. Например разместить контент в две колонки, в левой будет картинка, а в правой заголовок, текст и кнопка.

30+ элементов

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

Элементы бесплатной версии

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

Хотите создать свою онлайн школу? Здесь я написал подробный гайд (+ показал свой пример академии).

Настройки макета страницы

Есть три варианта макета:

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

Настройки элементов, секций, колонок (Содержимое, Стиль, Расширенные)

У каждого элемента, секции или колонки есть дополнительные настройки, которые разбиты на три вкладки:

  1. Содержимое — здесь добавляете контент, текста, картинки, ссылки на кнопки и пр.
  2. Стиль — здесь задаете настройки типографики, цветов, тени и пр.
  3. Расширенные — здесь задаете отступы, эффекты движения и пр.

review-elementor-7

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

Настройка адаптивности на разных устройствах (Компьютер, Планшет, Телефон)

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

Сегодня очень важно чтобы сайт открывался корректно и быстро на всех устройствах, особенно на мобильных. Поэтому не следить за мобильной версией сайта это преступление :) Чтобы его не совершить, используйте эту функцию и делайте точечные настройки для каждой платформы.

Сохранить как шаблон

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

Плагин переведен на русский язык

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

История изменений

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

История изменений

Разделитель секций

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

Анимация при появлении

У Elementor’a очень обширный функционал для анимации, движения, parallax-эффекта, но в бесплатной версии доступен выбор анимации только при появлении.

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Пример появления изображения

Произвольное позиционирование

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

Видео в котором показано как это работает:

Есть олды, которые верстали сайты еще в Adobe muse? Там было очень удобно простым перетаскиванием ставить элементы в любом месте. Здесь такой же функционал.

Тонкие настройки типографики

Для любого элемента с текстом вы можете задать все возможные настройки, а именно: выбрать семейство, размер, насыщенность, преобразование, стиль, оформление, интерлиньяж, межсимвольный интервал.

Настройки шрифта

Конструктор точно понравится людям, которые понимают в типографике и делают красивую верстку за счет шрифта.

Пошаговый план создания первой страницы

Шаг 1. Установите плагин Elementor из репозитория WordPress или скачайте с официального сайта. Если вы сразу купили Elementor Pro версии, то также установите и его;

инструкция по установке

Шаг 2. Переходите Страницы > Добавить новую > и увидите кнопку Редактировать в Elementor;

Кнопка елементор

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

review-elementor-3

Шаг 4. Добавьте первую секцию, нажав на белый плюс в красном кружке и добавьте любой элемент из столбца слева;

Шаг 5. Сохраните или опубликуйте страницу;

Настройки

Готово. Это если вкратце.

Теперь посмотрим на Elementor Pro
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков
Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Возможности Pro версии

Еще 30+ дополнительных элементов

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

элементы в про версии

Модальные окна (Popup builder)

Еще одно из крутых преимуществ — это попапы (модальные окна). В Элементор много настроек по созданию попапов, интеграции с другими сервисами и условиями показа.

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

Попап вордпресс

Гибкие настройки вывода попапа, среди которых:

  • Показ на определенной странице
  • По клику
  • Через определенную длину скролла страницы
  • Во время ухода с сайта
  • После просмотра определенного количества страниц
  • По происшествию n-го количества секунд
  • и пр.

Посмотрите короткое видео про возможности попапа:

Контактная форма

Имея Elementor Pro можно отказаться от доп. плагинов, например таких как Contact Form 7, и делать формы с помощью конструктора.

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

Пример формы, можете заполнить ради интереса :)

Создание шапки и подвала

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

Создание своей темы

Вы можете создать дизайн всех необходимых элементов и страниц, которые включает в себя тема на WordPress, это: Главная страница, Страница с выводом постов, Формат статьи, Архив, 404 страница, Шапка и Подвал.

Создание магазина с помощью Woocommerce элементов

Elementor также включает в себя 15+ виджетов для создания магазина. Также как и другие элементы вы можете полностью настраивать и связывать между собой.

Эффекты движения, параллакс, mouse effect

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

  • Scrolling effect (движение при пролистывании) — движение будет происходить во время прокрутки сайта. Можно задать эффект появления, движения, размытия, поворота, увеличения.
  • Mouse effect (движение работает от мыши) — элементы двигаются тогда когда посетитель страницы шевелит мышью.
  • Анимация при появлении — простой эффект появления элементов. Об этом эффекте мы говорили выше, он также есть в бесплатной версии.

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

300+ шаблонов страниц

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

Галерея шаблонов

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

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

Возможность добавлять свои шрифты

Добавляйте любые шрифты, которых нет в библиотеки Элементора.

Глобальные настройки

В бесплатной версии мы говорили про шаблоны, которые можно сохранять, в ПРО версии можно сохранять отдельные элементы и задавать им глобальные настройки. Что это значит? В дальнейшем редактируя один элемент, изменения будут происходить во всех остальных связанных элементах.

Например, на своем сайте я так сохранил кнопку «Скачать бриф», которую использую на всех страницах с описанием кейсов, и потом отредактировал одну кнопку, добавил ссылку на скачивание и эта ссылка появилась сразу на всех кнопках. Круто же?)

Пользовательские CSS

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

Регулярные обновления

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

Поддержка 24/7

Если будут вопросы по плагину, пишите в поддержку, как написано, работают круглосуточно.

Сколько стоит Elementor Pro

Есть три пакета:

PERSONAL

49$ (3100 р.)
лицензия на 1 сайт

PLUS

99$ (6300 р.)
лицензия на 3 сайта

EXPERT

199$ (12600 р.)
лицензия на 1000 сайтов

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

Выгодно ли покупать Pro версию? Давайте посчитаем

За 49$ (3100 р.) мы получаем:

  • Конструктор (ближайший конкурент для WordPress это WPBakery, от стоит 45$)
  • Попап конструктор (который отдельно стоит 25$)
  • Создание форм (который отдельно стоит 30$)
  • Эффекты движения (который отдельно стоит 25$)

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

В общем, мой ответ «Да», выгодно покупать Pro версию.

Также выгодно покупать пакет Expert для разработчиков. Можно сделать до тысячи сайтов на одной лицензии, сами посчитайте насколько это выгодно :)

Elementor в цифрах

0
активных установок
0 .8
из 5 — рейтинг
0 $
цена Pro версии
0 +
элементов на выбор
0 /7
поддержка

Отзывы на конструктор Элементор

Самый главный показатель качества, это конечно же отзывы реальных пользователей. На сегодня Элементор установлен более чем на 2 млн. сайтов (это активные установки!). И рейтинг в официальном репозитории WordPress 4.8 из 5. Это очень круто!

Отзывы элементор

Для сравнения мы можем посмотреть отзывы на плагин Gutenberg, который WordPress начал использовать вместо стандартного редактора. Рейтинг 2 из 5, т.е. пользователи оставляют негативный отклик, если им что-то не нравится.

Взаимодействие с шаблонами. Какую тему выбрать для Elementor?

Как заявляют разработчики, Элементор корректно должен работать на любом шаблоне. Так это или нет в вашем случае, поможет проверить только практика. Благо что есть бесплатная версия и вы можете все проверить до покупки, если решили покупать версию про.

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

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

80 шаблонов Elementor wordpress

Как изучать Элементор

  1. Хочу отметить канал Александра на ютубе, который называется WPlowers, там он много и понятно рассказывает про настройки билдера, многие ответы найдете в его видео.
  2. На официальном сайте есть база знаний со всеми инструкциями, да на английском, но с переводчиком понять не составит большого труда. И канал на ютубе, где есть пошаговые инструкции.

Дополнительные материалы

  1. Официальный сайт конструктора
  2. Ссылка на Pro версию
  3. Больше информации про попап билдер
  4. База знаний
  5. Официальны канал на Ютубе
  6. Бесплатный шаблон Hello от Elementor
  7. Подборка из 80-ти премиум тем на Элементоре

Итог

Что мы получаем:

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Pixel perfect дизайн

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Точная настройка адаптивности

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Чистый код

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Настройка цветов и шрифтов

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Сохранение шаблонов

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Эффекты движения

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

На русском языке

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

История изменений

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Поддержка 24/7

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

Поделитесь статьей в соцсетях, чтобы ее не потерять и немного помочь моему блогу :) И увидимся в следующих статях! 

P.s. смотрите также: Как сделать лендинг за 9 шагов — подробный гайд.

Заказать сайт
Поделитесь в соцсетях? Благодарю ✌
Илья Чигарев

Привет. Меня зовут Илья и я автор блога. Люблю путешествия, веб-дизайн и компьютерные игры. Всегда рад новым знакомствам. Веду блог, где рассказываю все секреты и фишки, которые мне принесли результат в онлайн маркетинге.

Оцените автора
( 16 оценок, среднее 4.75 из 5 )
Добавить комментарий

Отправляя данную форму вы соглашаетесь с политикой конфиденциальности сайта

  1. Татьяна

    Спасибо большое за статью. Хочу тоже разобраться и внедрить на свой сайт.

    Ответить
  2. Омак

    Хороший лонгрид! Побольше такого в блоге:)

    Ответить
    1. Илья Чигарев автор

      Благодарю)

      Ответить
  3. Эдуард

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

    Однако тезис «чистый код» (из красивой сетки в конце статьи) не соответствует действительности абсолютно :)

    Конкретно этот элемент состоит из 9 (!!!) вложенных друг в друга html-элементов, хотя делая «руками» можно было обойтись всего одним.
    Огромная избыточность css-свойств которые перезаписывают или дублируют друг друга.
    К странице прикреплен чудовищно большой css-файл (650кб), и это несмотря на минификацию! Верстальщик бы уместил такой объем работы в 70Кб, а с минификацией в 30-40.

    Чистота кода и его размер значительно хуже чем сделанные вручную.

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

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

    Резюмируя:
    +1 инструмент в копилку разработчика (для ограниченных случаев)
    + ваш блог в избранное, буду регулярно читать :)

    Ответить
    1. Илья Чигарев автор

      Спасибо Эдуард за такой развернутый комментарий! :)

      Ответить
  4. Андрей

    Каким образом ограничивается число сайтов, на которые куплена Pro версия? Если я купил на один сайт, то на другие я не смогу ее поставить? Даже из файла?

    Ответить
    1. Илья Чигарев автор

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

      Ответить
  5. Дмитрий

    Илья, спасибо Вам за статью! Очень круто! И полезно!)

    Ответить
    1. Илья Чигарев автор

      Пожалуйста! :) Используете Элементор на своем сайте?

      Ответить
  6. Анастасия

    А если купить pro версию на год и не продлить потом… Что станет с созданными сайтами?)

    Ответить
    1. Илья Чигарев автор

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

      Ответить
      1. Женя

        Получается если я сделал сайт для заказчика на Elementor Pro и передал ему все данные для работы с сайтом, он сможет много лет его сам в последствии редактировать? Не прибегая к покупке плагина?

        Ответить
        1. Илья Чигарев автор

          Получается так. Только если ему понадобятся про функции плагина, придётся продлевать.

          Ответить
  7. Анатолий

    А что, нельзя в элементоре многостраничные сайты делать? Почему только про лендинги написано?

    Ответить
    1. Илья Чигарев автор

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

      Ответить
  8. Сергей

    Самое хреновое в этом плагине — отсутствие блочного редактора, а именно чтобы можно предварительно блок-схемы страницы. Это делает этот плагин отличным для редакторов и ужасным для разработчиков.
    Также хочу отметить, что часть задач гораздо быстрее решается кодом, к примеру та-же типографика, это ж долбануться можно — настраивая каждый заголовок без возможности наследования стилей (не путать с глобальными настройками)

    Ответить
    1. Илья Чигарев автор

      Что именно подразумеваете под блочным редактором? В Элементор можно сохранять блоки и потом их использовать на других страницах. Также блоки с настроенной типографикой можно просто скопировать и изменить текст.

      Ответить
  9. Ирина

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

    Ответить
  10. Алексей

    Добрый день, Илья.
    Спасибо за статью.
    Подскажите как тема Reboot дружит с Элементором ?
    Особенно, если редактировать одну статью, средствами Вордпресс и Элементора ?
    У меня не работают настройки Элементора в разделе «расширенные»( в режиме редактирования фон и тень я вижу изменения, после сохранения не применяются на странице)
    Я пробую редактировать статью (на ней также есть элементы Эксперт Ревью), в режиме Элементора «по умолчанию» и у меня при переключении на Гутенберг, ломается страница . Не пойму что это за «косяк» , у вас вижу страница в порядке.
    У меня стоит Reboot с набором плагинов от WPshop.
    С ув. Алексей

    Ответить
    1. Илья Чигарев автор

      Здравствуйте, Алексей. Отлично дружит, на этой связке я даже курс записал :) https://ichigarev.ru/ideal-course

      Обычно, когда изменения не применяются, это значит страница закешировалась, попробуйте обновить через ctrl+f5

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

      Ответить
  11. Евгения

    Мне очень нравится как стиль изложения. так и содержание. Приятная открытость, знание темы, текст без «воды», только нужная, полезная информация. Илья, респект и уважение.

    Ответить
  12. Ленар

    За 199 долларов уже не купишь на 1000 сайтов(((Жаль

    Ответить
    1. Илья Чигарев автор

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

      Ответить
  13. Denchis

    Отличная статья. Когда знакомлю людей с Элементором — вы в ТОПе ;-)
    p.s. хорошая интересная статья для всех =)

    Ответить

Получите крутые бонусы бесплатно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: