Обзор и демонстрация 24 элементов плагина Elementor Pro

Обложка статьи "Обзор элементов в Elementor PRO"
Оглавление статьи

В предыдущей статье я рассказал о 29 элементах, доступных в бесплатной версии PageBuilder плагина Elementor (имеет приставку Free). Сегодня же поговорим о доступных элементах в платной версии этого замечательного плагина, а именно в Elementor Pro.

ELEMENTOR — это плагин, который делает из сайта на WordPress конструктор и позволяет создавать сайты практически без знания HTML и CSS. Благодаря этому любой фрилансер может за несколько дней создать профессиональный сайт и искать через него себе клиентов напрямую, а не через различные биржи фриланса.

24 элемента для конструктора страниц в Elementor PRO

Элементы в Elementor Pro
24 элемента в Elementor PRO

На май 2020 года в про версии плагина доступно 24 элемента для построения страниц. Это в дополнение к 29 в бесплатной версии (её, кстати, не надо удалять после установки платной версии). Плюс в Elementor PRO есть 19 элементов для создания интернет — магазина с помощью плагина WooCommerce. А также 11 элементов для конструктора всего сайта. О них я поговорю в отдельных статьях. Ссылки будут — тут. 

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Записи (Posts)

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

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Портфолио (Portfolio)

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

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Слайды (Slides)

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

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

Пошаговая стратегия "Как статьи профессиональным копирайтером"
Теория копирайтинга
Всё о том, кто такой копирайтер, чем он занимается, какие навыки и знания ему надо прокачивать и какие направления деятельности в копирайтинге существуют.
Перейти
Разработка сайта на WordPress
Шаг за шагом я покажу, как создать профессиональный сайт на WordPress с помощью плагина Elementor даже без навыков программирования и дизайна.
Перейти
Как копирайтеру найти клиентов
Различные приемы и хитрости, с помощью которых даже начинающий копирайтер может найти клиентов вне бирж с ценником от 1000 рублей за текст.
В разработке
Практика копирайтинга
Мало найти клиентов на свою работу, эту работу надо еще и выполнить. Да так, чтобы клиент стал постоянным. Вот тут всё о том, как это делать.
В разработке
Предыдущая
Следующая
Обзор и демонстрация 24 элементов плагина Elementor Pro

Форма (Form)

С помощью элемента «Форма» можно создать форму обратной связи, форму подписки на рассылку или какой-нибудь опросник.

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

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

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Вход (Login)

Элемент «Вход» позволяет вывести на любой странице форму входа на сайт. Ту же самую, которая находится на странице wp-login.php или wp-admin. Форма состоит только из 2 полей: имя пользователя и пароль.

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

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

Я выводить форму не буду, так как на моем сайте нет регистрации.

Обзор и демонстрация 24 элементов плагина Elementor Pro

Меню навигации (Nav Menu)

Элемент позволяет вывести произвольное меню в любом месте на сайте. Само меню создается в админке сайте во вкладке «Внешний вид — Меню». 

Любое меню представляет из себя набор ссылок. Поэтому нет особой разницы куда эти ссылки ведут: на внутренние страницы, на какие-то статьи или рубрики, на другие сайты или это меню чисто по странице. Последнее создается с помощью элемента «Ярлык», который доступен в бесплатном Elementor. 

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Анимированный заголовок (Animated Headline)

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

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

Сегодня день

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

В этом варианте доступно чуть больше вариантов анимации. В качестве демонстрации использую анимацию Clip, а заодно и подчеркну текст. 

Я пишу статьи про
Обзор и демонстрация 24 элементов плагина Elementor Pro

Прайс - лист (Price List)

Название элемента говорит само за себя. Он выводит список цен с кратким описанием каждого пункта (необязательно). Например, можно на странице «Услуги и цены» вывести этот список, а на сами пункты повесить ссылки, ведущие на отдельные страницы каждой из услуг. 

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

Для примера выведу 3 разновидности коммерческого предложения, которое можно у меня заказать.

  • Холодное коммерческое предложение без дизайна $100

    1-2 страницы текста на Вашем фирменном бланке помогает заинтересовать аудиторию, которая о Вас еще не знает

  • Холодное коммерческое предложение с дизайном $150

    Графическое оформление КП позволяет выделиться и привлечь внимание потенциальных клиентов к ключевым моментам Вашего предложения

  • Продающая презентация $200

    От 10 слайдов для демонстрации своего проекта, товара или услуги на встречах или сайте.

Обзор и демонстрация 24 элементов плагина Elementor Pro

Таблица цен (Price Table)

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

Для примера покажу стоимость Elementor PRO. У него есть 3 пакета, подходящие под разные задачи. Свойства под каждой ценой относятся ко всем пакетам. Разница заключается лишь в том, на скольких сайтах вы можете использовать свою лицензию

PERSONAL
Для 1 сайта
$ 49 В год
  • 50+ виджетов
  • Конструктор темы
  • 300+ шаблонов страниц
PLUS
Для 3 сайтов
$ 99 В год
  • Интеграция с 10+ сервисами
  • Конструктор всплывающих окон
  • Конструктор WooCommerce
Мой выбор
EXPERT
Для 1 000 сайтов
$ 199 В год
  • Отображение динамического контента
  • 1 год обновлений и премиум поддержки
  • Пользовательские CSS и шрифты

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Флип - бокс (Flip Box)

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

Если честно, как это использовать в коммерческих задачах не особо понятно. Хотя… Можно же скрыть с другой стороны некий купон или промокод, который на первый взгляд не видно. Или на странице с услугами сделать привлекательное изображение с названием услуги, а с другой вывести ее описание и ссылку на отдельную страницу. Оказывается много применений этого инструмента. Впрочем, как и всегда. 

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

Узнаешь актера?

Жизнь - боль

Это Хэйли Джоэл Осмент. Актер, известный по ролям в фильмах "6 чувство", "Заплати другому", "Искусственный интеллект", "Форрест Гамп" и других.
Убедиться
Обзор и демонстрация 24 элементов плагина Elementor Pro

Призыв к действию (Call To Action)

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

Так вот, в Elementor PRO есть специальный элемент, реализующий этот важный функционал. Состоит он из 4 частей: 

  1. Изображение, которое можно размещать слева, сверху или справа от текста.
  2. Заголовок, в котором нам надо зацепить человека вопросом или указать ключевую выгоду нашего предложения. 
  3. Описание, раскрывающее заголовок.
  4. И кнопка, которая реализует само действие.
Уже хочешь купить Elementor PRO?
Жми на кнопку ниже, переходи на сайт разработчиков и выбирай подходящий тариф.

*К кнопке привязана моя реферальная ссылка, так что после покупки в том же браузере, Elementor выплатит мне 50% от суммы вашего платежа. И это будет просто великолепное «Спасибо» от вас за мои статьи!

Обзор и демонстрация 24 элементов плагина Elementor Pro

Медиа карусель (Media Carousel)

Тут тоже всё понятно из названия элемента. Он отвечает за вывод выбранных изображений и видео в одном месте. Изображения вставляются из медиабиблиотеки сайта, а видео с YouTube и Vimeo. При этом видео будет проигрываться во всплывающем окне, а не уводить людей с вашего сайта. 

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

Например, с помощью карусели можно отображать благодарственные письма от клиентов. Через слайдшоу примеры работ (например, для компании, занимающейся ремонтом, в каждой карусели показывать конкретный ремонт квартиры или офиса). А с помощью медиатеки — своё портфолио. Хотя в Elementor PRO для портфолио есть и отдельный элемент, о котором мы поговорим ниже.

А пока давайте посмотрим и на других актеров — детей и что с ними стало.

 

Обзор и демонстрация 24 элементов плагина Elementor Pro

Карусель отзывов (Testimonial Carousel)

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

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

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Обратный отсчет (Countdown)

Elementor PRO заточен под решение коммерческих задач. Поэтому и элементы тут, в основном, те, которые помогают эти задачи решать. Счетчик обратного отсчета не исключение.

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

Счетчик обратного отсчета можно установить 2 видов: до какой-то определенной даты и «вечнозеленый таймер». Во втором случае счетчик начинает свой отчет для каждого посетителя отдельно, запоминая их по cookie файлам. Именно из этой «слежки» и стали требовать выводить согласие на сбор cookie.

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

Я, для примера, использую первый вариант. Кстати, что там у вас с новогодними обещаниями? Успеете сделать до конца года?)

До 2021 года осталось

Дни
Часы
Минуты
Секунды
С новым 2021 годом!
Обзор и демонстрация 24 элементов плагина Elementor Pro

Кнопки поделиться (Share Buttons)

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

Всего доступно 20 кнопок, среди которых есть как самые популярные соцсети, так и мессенджеры, отправка по почте и кнопка «Распечатать». Также на каждой кнопке можно написать свой текст, что может привлечь внимание к ним. 

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

Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в telegram
Telegram
Поделиться в odnoklassniki
OK
Поделиться в whatsapp
WhatsApp
Обзор и демонстрация 24 элементов плагина Elementor Pro

Цитата (Blockquote)

С помощью элемента «Цитата» можно красиво выделить какую-то часть текста из статьи и добавить кнопку «Твитнуть», чтобы люди могли поделиться вашей мудростью с твиттере. Можно, конечно, эту кнопку убрать и оставить только сам текст цитаты и имя человека, который её сказал. Но кто тогда узнает, какой автор умный?)

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

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

Я книжки не читаю – от них глаза болят

Владимир Быстров, Футболист
Обзор и демонстрация 24 элементов плагина Elementor Pro

Рецензии (Reviews)

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

Для примера давайте посмотрим отзывы на «Конфеты с Любыми Вкусами от Берти Ботт» из вселенной Гарри Поттера.

Альбус Дамблдор
Альбус Дамблдор
@albus
Читай ещё
А! «Конфеты с Любыми Вкусами от Берти Ботт»! Когда-то в детстве мне не повезло с одной такой, — у нее был вкус рвоты, и я с тех пор, боюсь, утратил к ним интерес… Но вот эта выглядит вполне надежно, как считаешь? Хмм... Увы! Ушная сера!
Рон Уизли
Рон Уизли
@ronald
Читай ещё
Будьте осторожны!На пакетике с леденцами написано, что у них самый разный вкус. Так вот, это истинная правда. Нет, там есть вполне нормальные вкусы — апельсин, скажем, или шоколад, или мята, но иногда попадается шпинат, или почки, или требуха. Джордж, мой старший брат, уверяет, что ему как-то попалась конфета со вкусом соплей.
Предыдущая
Следующая

Переходим к элементам Facebook. Чтобы они работали, надо произвести интеграцию Elementor PRO и Facebook. Вскоре я напишу статью об этом, а может даже и видео сниму, так что здесь появится ссылка на статью. А пока что просто продолжим обзор Elementor PRO и его элементов.

Обзор и демонстрация 24 элементов плагина Elementor Pro

Кнопка Facebook (Facebook Button)

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Встраивание Facebook (Facebook Embed)

С помощью этого элемента можно вывести на сайте какую-то запись, видео или даже отдельный комментарий из Facebook.

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Страница Facebook (Facebook Page)

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

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

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

Обзор и демонстрация 24 элементов плагина Elementor Pro

Шаблон (Template)

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

Отобразить шаблон, конечно, можно и при создании новой секции, если нажать на серую кнопку с иконкой папки. Но что делать, если нам надо вставить шаблон не на всю секцию, а только в одной колонке? Тут-то и приходит на помощь элемент «Шаблон».

Для примера выведу шаблон, который отображает форму подписки на мою рассылку. 

Подписаться на рассылку блога

Андрей Рочев о копирайтинге, WordPress и elementor

Обзор и демонстрация 24 элементов плагина Elementor Pro

Комментарии Facebook (Facebook Comments)

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

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

У нас Facebook не так сильно развит, поэтому стандартную форму комментариев можно заменить другими плагинами. А какими именно, я расскажу в следующий раз и оставлю тут ссылку. 

Ну а для демонстрации работы элемента, давайте поиграем в ассоциации. Я начну.

Обзор и демонстрация 24 элементов плагина Elementor Pro

Галерея (Gallery)

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

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

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

Для демонстрации выведу галерею из основных актеров из Гарри Поттера в сравнении: тогда и сейчас.

Обзор и демонстрация 24 элементов плагина Elementor Pro

Оглавление (Table of Contents)

Почему-то у этого элемента в оригинальной и русской версии разные иконки. Это может смутить. Но суть остается та же — элемент отвечает за вывод оглавления у статьи или на странице. 

Принцип работы очень простой: он собирает все H2-H6 заголовки на странице и формирует из них оглавление с подпунктами. H3 будет подпунктом у H2. H4 будет подпунктом у H3 или H2. И так далее.

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

Оглавление

В заключение

Ну вот, кажется, и всё, что я хотел рассказать об элементах в Elementor PRO. Статья вышла очень большая (более 3200 слов), но зато достаточно полезная. Забавно, что в этой статье я рассказал о меньшем количестве элементов, чем в elementor free, но объем статьи вышел на 700 слов больше. Вот что значит, когда есть что сказать и показать.

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

Задавайте свои вопросы, если они остались. А также подписывайтесь на рассылку с сайта, чтобы узнавать о выходе новых статей. 

Что почитать дальше

Расскажите о статье своим друзьям

Поделиться в facebook
Facebook
Поделиться в vk
ВКонтакте
Поделиться в twitter
Twitter
Поделиться в telegram
Telegram
Поделиться в whatsapp
WhatsApp
Поделиться в odnoklassniki
Одноклассники
Поделиться в email
Email
Эту и остальные статьи на сайте для Вас подготовил
Копирайтер Андрей Рочев
Копирайтер Андрей Рочев

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

Женат. Сопереживаю ФК «Спартак» Москва, а также клубам Юргена Клоппа и Жозе Моуриньо (не из-за стиля, а из-за его харизмы).

Высказать свое мнение по теме
avatar

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

  Подписаться  
Уведомление о

Привет!

Деловой кот приветствует Вас!

Есть тема для статьи?

Отлично! Напиши мне о ней ниже. А также можешь рассказать, почему она тебе интересна и каким моментам уделить особое внимание.

Подписаться
на рассылку блога

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

Нажимая кнопку "Подписаться", Вы соглашаетесь на обработку Ваших персональных данных (которые будут храниться в сервисе e-mail рассылок и, естественно, не будут никому переданы) и на получение писем от меня.

from-header

Спасибо!

Деловой кот приветствует Вас!

Письмо с твоим предложением уже пришло ко мне на почту

Я его прочту, обдумаю и обязательно тебе отвечу. Спасибо тебе за помощь в развитии блога!

P.S. Надеюсь, ты не против, что я тебя еще не знаю, но уже ТЫкаю. Так проще. Мы ведь коллеги.