Elementor pro что это

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Записи (Posts)

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Максимально короткое видео и конкретным ответом на вопрос: Как купить и установить Elementor PRO на WordPress сайт.

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Судя по аналитике, многих интересует вопрос о том, как изменить размер секции в Elementor. Но прямого ответа на этот вопрос я не нашел. Поэтому решил

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Как купить, скачать и установить Elementor Pro

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Как установить SSL сертификат на сайт бесплатно

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Что будет, если не продлить Elementor PRO

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Как изменить размер секции в Elementor

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Как настроить заголовок в Elementor

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Внутренняя секция в Elementor

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Слайды (Slides)

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Форма (Form)

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Вход (Login)

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

PERSONAL
EXPERT

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

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

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Цитата (Blockquote)

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

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

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

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

Владимир Быстров, Футболист

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Рецензии (Reviews)

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

Кнопка Facebook (Facebook Button)

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Шаблон (Template)

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Галерея (Gallery)

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Лотти (Lottie Widget)

Лотти — это небольшие анимированные элементы, которые можно скачать с сайта lottiefiles.com

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

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

В заключение

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

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что это

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

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

Источник

Обзор Elementor (Free и Pro)

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

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

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

Current Version: 3.4.8

Last Updated: 16.11.2021

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Конструктор темы

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

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

Elementor pro что это. Смотреть фото Elementor pro что это. Смотреть картинку Elementor pro что это. Картинка про Elementor pro что это. Фото Elementor pro что этоНовый шаблон Записи

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

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

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

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

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

2. Шаблоны Pro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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-код для добавления своих стилей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это позволило бы оптимизировать и ускорить загрузку страниц.

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *