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

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

Продолжаем знакомство с PageBulder плагином для WordPress Elementor. Сегодня я расскажу обо всех элементах, которые доступны в бесплатной версии этого плагина, а именно в Elementor Free. 

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

Обзор элементов в Elementor Free

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

29 элементов, доступных в Elementor Freeна WordPress
Основные элементы бесплатной версии плагина Elementor

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

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

Приступим.

Элемент "Внутренняя секция" в Elementor Free

Внутренняя секция (Inner Section)

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

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

У Дональда Дака было 3 племянника

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

Билли

Настоящее имя - Хьюи

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

Вилли

Настоящее имя - Дьюи

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

Дилли

Настоящее имя - Луи

Элемент "Заголовок" в Elementor Free

Заголовок (Heading)

Заголовок в Elementor — это всё то оранжевое, что есть на этой странице. Он может быть выведен как один из главных заголовков страницы (H1-H6), так и просто как абзац (тег <p> в HTML). 

Причем размером можно управлять не через теги, а через настройки. Тогда тот же заголовок H6 может быть больше, чем H1, но для поисковиков главным всё-равно останется заголовок H1. Это удобно использовать для SEO продвижения, когда для поиска мы пишем один заголовок, а для людей выделяем другой.

Элемент "Изображение" в Elementor Free

Изображение (Image)

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

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

Элемент "Текстовый редактор" в Elementor Free

Текстовый редактор (Text Editor)

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

Элемент "Видео" в Elementor Free

Видео (Video)

С помощью этого элемента можно вставить и настроить отображение видео с YouTube, Vimeo, Dailymotion или с собственного сайт. В качестве примера пусть будет видео, установленное по умолчанию. А то если вставлю какое-то другое видео с ютуба, то вы можете перейти туда и пропасть)

Элемент "Кнопка" в Elementor Free

Кнопка (Button)

Кнопки они и есть кнопки. Помогают выделять и акцентировать внимание на ссылках. 

В качестве демонстрации их работы предлагаю Вам на время оказаться в роли Нео из Матрицы.

Элемент "Рейтинг" в Elementor Free

Рейтинг (Star Rating)

Элемент «Рейтинг» добавляет статичный блок со звездами по 5 или 10 балльной шкале. 

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

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

Будем считать, что рейтинг этой статьи:
4.5/5
Элемент "Разделитель" в Elementor Free

Разделитель (Devider)

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

Для демонстрации я вставил разделитель до и после этой секции.

Элемент "Карты Google" в Elementor Free

Карты Google (Google Maps)

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

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

Элемент "Иконка" в Elementor Free

Иконка (Icon)

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

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

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

Элемент "Картинка с текстом" в Elementor Free

Картинка с текстом (Image Box)

Картинка с текстом объединяет в 1 элемент изображение, заголовок и текст. Там, где я показывал 3 племянников Дональда Дака, используется именно этот элемент. 

Картинку с текстом в Elementor Free можно размещать в 3 разных позициях.

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

Изображение слева

Тут какой-то текст, который раскрывает выгоду нашего заголовка

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

Сверху

Можно оставить только текст или только заголовок

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

Справа

Заголовок и текст можно выровнять по левой или правой стороне, по центру и по всей ширине

Элемент "Иконка с текстом" в Elementor Free

Иконка с текстом (Icon Box)

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

Слева

Иконка может быть обычная

По центру

Вписанная в круг или квадрат

Справа

Обрамленная кругом или квадратом

Элемент "Основная галерея" в Elementor Free

Основная галерея (Basic Gallery)

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

Идеальный инструмент для вывода портфолио. 

Выбираете нужные скриншоты, указываете количество колонок для изображений (от 1 до 10), пишите описание каждого изображение (не обязательно) и всё. Потенциальный клиент заходит на такую страницу, ищет интересный ему проект, нажимает на миниатюру и смотрит проект во всплывающем окне. 

Пример реализации основной галереи в Elementor Free

Элемент "Карусель" в Elementor Free

Карусель (Image Carousel)

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

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

Элемент "Список с иконками" в Elementor Free

Список с иконками (Icon List)

Название говорит само за себя. Элемент позволяет вывести список в строчку или в столбец и задать каждому пункту свою собственную иконку из коллекции Font Awesome.

Этот текст я заканчиваю в пятницу, так что держите рецепт коктейля Б-52
(Алкоголь вредит Вашему здоровью, если что)

Элемент "Счетчик" в Elementor Free

Счетчик (Counter)

Счетчик показывает нужное нам число с анимацией. Его можно использовать как сам по себе, там и добавляя нужные слова или символы до и после цифры. Обычно используется там, где надо показать доказательство собственного опыта. Например, мы сделали уже 500 сайтов, написали 3000 коммерческих предложений, 4 раза посмотрели все сезоны Хауса и так далее. 

Это уже 0 элемент
На этой странице про Elementor Free
Элемент "Интервал" в Elementor Free

Интервал (Spacer)

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

Элемент "Отзывы" в Elementor Free

Отзыв (Testimonial)

Можно использовать как конкретные слова своих клиентов (которым всё-равно верят, что бы кто ни говорил), так и просто как вывод некоторой цитаты по теме статьи.

Самолёт разбился, никто не убился!
Обзор и демонстрация 29 элементов плагина Elementor Free
Зигзаг МакКряк
Авиапилот
Как я стал таким богатым? Я был умнее самых умных и упорнее самых упорных!
Обзор и демонстрация 29 элементов плагина Elementor Free
Скрудж Макдак
селезень-миллиардер
Зачем нам дядюшка в золотом пальто? Мы хотим иметь дядю с золотым сердцем.
Обзор и демонстрация 29 элементов плагина Elementor Free
Поночка
Приемная племянница Скруджа

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

Элемент "Вкладки" в Elementor Free

Вкладки (Tabs)

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

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

Элемент "Аккордеон" в Elementor Free

Аккордеон (Accordion)

По большому счету, это те же вкладки, только горизонтально. Так же можно использовать для объединения какого-то однотипного текста или как оглавление. Давайте тоже оставлю тут ссылки на свои статьи. И вам может быть полезно и мне для SEO хорошо.

Рубрика, в которой я показываю, что советы из книг XX века работают и в век интернета.

  1. Зиг Зиглар «Секреты заключения сделок»
    1. Прием «Подножка»
    2. Прием «Владение»
Элемент "Спойлер" в Elementor Free

Спойлер (Toogle)

Элемент, который лучше всего использовать для ответов на частые вопросы. Тот самый блок FAQ (или по-русски ЧаВо). 

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

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

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

Для того, чтобы стать профессиональным копирайтером Вам надо:

  1. Уметь продавать продукты своих клиентов через текст, а не просто информировать;
  2. Знать и уметь применять основы маркетинга;
  3. Понимать психологию поведения и влияния на людей;
  4. Знать основы того языка, на котором он пишет.

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

Нет, не является.

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

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

Элемент "Социальные иконки" в Elementor Free

Иконки соцсетей (Social Icons)

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

В качестве примера я оставлю ссылки на свои соцсети. Подписывайтесь, если еще не.

Элемент "Прогресс" в Elementor Free

Прогресс (Progress Bar)

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

Как можно изучить копирайтинг на 90%, веб-дизайн на 50%, а элементор фри на 63%? Разве вообще опыт можно оценивать в процентах? Ведь каждая новая задача может поставить перед тобой новые вопросы, которые надо будет изучить и решить. Понятно, что при этом ты будешь знать немного больше, но как понять, сколько это в процентах? Разве существуют вообще 100% знания в какой-то теме? 

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

Вы уже узнали про
элементов в Elementor Free 82.75%
Элемент "SoundCloud" в Elementor Free

SoundCloud плеер (SoundCloud)

Хотите добавить на свой сайт музыки? SoundCloud вам в помощь. Если кто не знает, то это интернет — портал, где можно бесплатно слушать музыку совершенно без ограничений, платная только загрузка своих треков. 

Так что просто копируете ссылку на нужную песню и вставляете ее в этом элементе. После чего снова же через элемент настраиваете отображение. Всё.

Как вставить музыку на WordPress сайт с других сервисов я покажу в блоке про элемент HTML-код (он чуть ниже).

Элемент "Шорткод" в Elementor Free

Шорткод (Shortcode)

Шорткод в WordPress — это короткий код, который используется при создании страницы или статьи и который потом преобразуется в php код при выводе страницы. Пример показывать не буду, потому что вы увидите не шорткод, а тот код, который он вызывает. Хотя, рекламный баннер ниже выведен именно с помощью шорткода.

Просто знайте, что шорткоды выглядят следующим образом [shortcode]. То есть внутри квадратных скобок есть ключевое слово, которое вызывает нужную функцию из файла functions.php, а также необходимые параметры (если есть). Согласитесь, гораздо удобнее написать это, нежели тот кусок кода, который он вызывает.

Элемент "HTML-код" в Elementor Free

HTML-код (HTML)

Позволяет вывести любой html код. Если же код вставить просто в текстовый редактор, то он работать не будет. По-крайней мере, если его вставить в текстовом редакторе на вкладке «Визуально». Если через вкладку «Текст», то там html код будет работать. 

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

И да, заранее извиняюсь, если эта песня засядет у Вас в голове. Я не специально)

Элемент "Якорь меню" в Elementor Free

Якорь меню (Menu Anchor)

Якорь — это некое место на странице со своим уникальным идентификатором (ID), к которому мы можем  обратиться по ссылке. Оглавление в начале страницы работает именно по такому принципу. Каждому заголовку в статье задается свой уникальный якорь и потом собирается в одном месте все ссылки на них.

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

Элемент "сайдбар" в Elementor Free

Сайдбар (Sidebar)

В общем понимании, сайдбар — это боковая колонка, слева или справа от основного текста страницы. Если же говорить конкретно про WordPress, то тут сайдбар — это любое место на сайте, в котором выводятся различные виджеты (в WordPress так называется то, в Elementor Free является элементами)

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

Элемент "Предупреждение" в Elementor Free

Предупреждение (Alert)

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

В заключение

Как видите, даже в бесплатной версии Elementor Free есть практически все необходимые инструменты, чтобы создать свой собственный сайт на WordPress. 

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

P.S. Это вторая статья про Elementor и снова более 2,5 тысяч слов. Надеюсь, вы не сильно устали и статья оказалась вам полезна. Если так, то можете ею даже поделиться 😉

 

Что почитать дальше
5 7 голоса
Оцените эту статью

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

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

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

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

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

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

0 Комментарий
Inline Feedbacks
Посмотреть все комментарии
0
Появились мысли по статье? Напишите их в комментариях, пока не забылиx
()
x

Привет!

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

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

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

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

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

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

Спасибо!

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

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

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