Elementor WordPress-плагин для визуального создания сайтов

Содержание материала:

11 отличных плагинов WordPress для дизайнеров

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

WordPress — это и самая популярная в мире блог-платформа, и самая широко используемая система управления контентом (CMS).

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

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

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

01. WebKite

WebKite позволяет легко добавлять фильтры и типы к содержимому вашего сайта — тот же самый вид фильтрации, который вы могли видеть на Yelp , Kayak и Amazon.com .

Этот бесплатный плагин WordPress позволяет вставлять такой контент на вашем WordPress-сайте . Здесь вы можете найти отличный пример интерактивного меню ресторана, созданного с помощью WebKite .

02. Manual Image Crop

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

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

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

03. Easy Pricing Tables

Easy Pricing Tables для WordPress позволяет легко создавать и публиковать на вашем WordPress-сайте красивые таблицы прайсов.

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

04. SlideDeck

SlideDeck 2 Lite это быстрый и простой способ создания слайд-шоу.

SlideDeck позволяет создавать собственные слайд-шоу, которые отображаются в слайдере контента на вашем WordPress-сайте .

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

Поддерживается добавление такого контента, как репосты из Twitter , YouTube , Pinterest , Flickr и многое другое. Вывод слайдов задается через систему шаблонов, которые связаны с SlideDeck как « линзы », которые могут быть сконфигурированы в соответствии с дизайном вашего сайта.

Премиум версия плагина имеет в наборе намного больше линз, но и бесплатная версия позволяет создавать свои собственные линзы.

05. HTML5 jQuery Audio Player

Создайте собственный аудиоплеер, встроенный в ваш сайт на WordPress.

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

Построенный на базе HTML5 , он работает во всех современных браузерах. Версия Lite является бесплатной. Есть также профессиональная версия с дополнительными функциями.

06. WPTouch

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

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

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

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

07. JetPack

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

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

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

08. NextGen Gallery

Создавайте галереи изображений для вашего сайта на WordPress с помощью плагина NextGen Gallery.

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

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

09. WP e-Commerce

Используйте WP e-commerce, чтобы начать зарабатывать деньги на вашем WordPress-сайте.

WP e-Commerce превращает ваш сайт на WordPress в полнофункциональный интернет-магазин, в комплекте с встроенной поддержкой (и интеграцией) многих крупнейших поставщиков платежных услуг ( PSP ).

Система позволяет загружать товары в различные категории, предлагает возможность формирования корзины для оформления заказа. WP e-Commerce обеспечивает функции обработки расчета стоимости доставки, отслеживания оплаты и все почтовые подтверждения, связанные с покупкой и продажей через Интернет.

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

Именно поэтому многие считают его лучшим плагином WordPress для электронной коммерции.

10. BuddyPress

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

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

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

Это один из лучших, если не самый лучший, плагин WordPress для социальных сетей.

11. Vimeography

Если вы загружаете файлы на Vimeo и имеете свой сайт на WordPress, Vimeography — обязательный для вас плагин.

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

Пользователи Vimeo могут воспользоваться для создания и отображения фантастических галерей видео-контента плагином WordPress Vimeography — он ориентирован на визуально красивое отображение контента на вашем WordPress-сайте .

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

Vimeography , пожалуй, лучший плагин WordPress для видео, хотя стоит отметить, что он поддерживает только контент из Vimeo .

И это вряд ли изменится в ближайшее время, потому что разработчик считает, что Vimeo является лучшей платформой для отображения контента уровня портфолио (без рекламы или ненужного брендинга платформы).

Данная публикация представляет собой перевод статьи « 11 great WordPress plugins for designers » , подготовленной дружной командой проекта Интернет-технологии.ру

Плагин Elementor Pro для WordPress первый взгляд

Теперь появилась возможность обойти код и делать потрясающие сайты на WordPress и поможет нам в этом, плагин Elementor бесплатная версия, а также и есть платная Elementor Pro.

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

Установить и скачать плагин Elementor можно тут

Установка плагина

Плагин Elementor Pro для WordPress как настроить

Самый простой способ, это:

  1. Выйти в панель администратора WordPress вашего сайта, перейти в плагины
  2. Нажать добавить новый плагин
  3. Вести в поиске Elementor
  4. Нажать установить
  5. Нажить активировать

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

Меню плагина при визуальной настройки

Меню плагина Елементор Про для WordPress при визуальной настройки

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

Чтобы активировать Елементор на странице, достаточно нажать на кнопку «Редактировать в Elementor»

Кнопка «Редактировать в Elementor»

Также вы можете нажать на зашедшей странице на сайте и начать его редактировать.

Плагин Елементор для WordPress как настроить

Как добавить простой заголовок

Перетащить кнопку плагина

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

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

Как быстро научиться пользоваться данным инструментом

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

Итог: зачем нужен плагин Elementor Pro для WordPress

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

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

Лучшие плагины-конструкторы для WordPress

Всем привет! В этой статье я расскажу про 5 плагинов-конструкторов для WordPress. С их помощью вы сможете легко редактировать страницы без помощи HTML-кода. Просто берете нужный элемент и перетаскиваете в нужное место. Все просто. Технология, кстати, называется Drag&Drop. Итак, давайте начинать!

5 плагинов-конструкторов для WordPress

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

Elementor

Один из самых известных плагинов-конструкторов, который доступен для установки прямо из каталога. Он бесплатный, но при желании вы можете приобрести расширенную версию за 49 долларов для одного сайта, 99 – для трех, 199 – для неограниченного количества. Тем не менее, даже бесплатной версии с лихвой хватит для простого использования. Вы сможете легко собрать лендинг из элементов за пару часов, и он будет выглядеть достаточно приятно и современно.

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

Более подробно об этом плагине можно узнать на странице WordPress.org. Скачать его можно там же, или прямо из каталога (Плагины – Добавить новый).

Page Builder by SiteOrigin

Еще один бесплатный конструктор для WordPress, который можно легко установить из каталога. По сути, это тот же Элементор, но только в профиль. Здесь имеются все функции и особенности, которыми должен обладать нормальный конструктор. Точно также, с помощью системы Drag&Drop, вы создаете красивую страницу без работы с кодом. Как заявляют разработчики, этот плагин может работать почти с любой темой WordPress. Посмотреть более подробную информацию и скачать можно со странички на WordPress.org.

WordPress Page Builder – Beaver Builder

Гибкий конструктор для WordPress Beaver Builder также позволит вам в два счета собрать страницу из разных элементов. Удобный интерфейс, поддержка большого количества разных виджетов (фото, видео, аудио и т.д.) делают этот плагин одним из лучших на сегодняшний момент. Пользователи, к слову, тоже оценили этот продукт. На данный момент у Beaver Builder около 500 тысяч активных установок. Это ли не говорит о его качестве. Для получения более подробной информации загляните на страницу WordPress.org.

WPBakery Page Builder

Вот мы и дошли до премиум-конструктора для WordPress, который используется по всему миру большим количеством вебмастеров. Это полностью платное решение, которое придется покупать в магазине Envato. Стоимость не такая высокая, как может показаться на первый взгляд – всего 46 долларов. Плагин обладает всеми необходимыми функциями для создания крутого лендинга или простой страницы. Здесь очень много разных виджетов, каждый из которых можно легко отредактировать. Цвета, размеры и даже стиль – все поддается изменению в WPB Page Builder.

Для покупки плагина перейдите по ссылке выше.

Visual Composer

По сути, это брат-близнец WPB Page Builder. Тот же интерфейс, те же функции, даже одни и те же названия. Как я понимаю, когда-то давно в команде Visual Composer произошел раскол. В итоге было решено создать два отдельных продукта. Но в отличие от WPBPB, Visual Composer имеет бесплатную версию. Прямо сейчас вы можете зайти на официальный сайт плагина и загрузить ее. Там же можно найти и более подробную информацию об этом продукте.

Заключение

Тут всего 5 плагинов-конструкторов для WordPress. Но всего их, конечно же, намного больше. Просто я старался выбрать наиболее популярные и одновременно полезные продукты, которые точно подойдут для комфортного использования. Возможно, в будущем я расширю этот топ, добавив еще несколько крутых решений. Но если вам невтерпеж, и вы хотите поискать другие плагины, то я рекомендую вам зайти в каталог WordPress и попробовать поискать по ключевым словам “Builder, Page Builder, Composer”. Уверен, вы найдете продукт себе по душе.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как создать сайт на WordPress с помощью конструктора Elementor за 1 час (Видео)

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

Использованные виджеты элементора:

  • Изменение цвета/изображения фона страницы — 14:27
  • Скрытие заголовка страницы — 15:24
  • Изменение размера секции — 16:54
  • Элемент текстовый редактор — 17:44
  • Элемент изображение — 19:10
  • Элемент кнопка — 20:11
  • Элементы иконка и счётчик — 23:55
  • Элемент вкладки — 28:42
  • Изменения стиля секции — 47:40
  • Элемент картинка с текстом — 52:55
  • Элемент карта — 57:30
  • WP Translitera — 9:13
  • Google Fonts — 12:40
  • Создание медиагалереи с помощью Jetpack 35:25
  • Создание контактной формы с помощью Contact Form 7 40:23
  • WP Google Maps — 57:30

WordPress хостинг Hostenko позволяет установить Вордпресс за 1.5 минуты. Подробно процесс установки смотрите на видео с 1:08 по 2:33 минуту. Сюда же входит и подключение сертификата безопасности сайта.

Для создания сайта, кроме плагина Elementor , понадобятся следующие плагины:

  • Jetpack, по функциональности заменяет множество мелких плагинов, создавая «Похожие записи», функционал «Поделиться», сайдбар виджетов, поддержку социальных кнопок, комментарии, карусели и многое другое.
  • Google Fonts for WordPress – плагин поддержки шрифтов.
  • WP Google Maps – плагин Гугл карт (в видео показано, как правильно активировать этот плагин).
  • WP Translitera – плагин переводит все постоянные ссылки сайта на латинские буквы.
  • Contact Form 7 – плагин контактных форм.

Установка всех необходимых плагинов и их активация занимает от 7 до 10 минут.

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

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

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

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

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

WP Elementor: достойная альтернатива онлайн-конструкторам

Всем привет! �� Эх, давненько я не писал… даже успел соскучиться за этим делом.

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

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

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

Уверен, что будет интересно. Поехали! ��

WordPress конструкторы сайтов — что это и зачем они нужны?

Когда люди говорят о WordPress конструкторах, они имеют ввиду плагины конструкторов сайтов и страниц WordPress (page builder plugins). Их много: Visual Composer, Beaver Builder, Velocity Page… WP Elementor — лишь один из них.

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

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

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

Что такое WordPress конструкторы — думаю, понятно. Зачем они нужны? Думаю, вы догадались… для упрощения жизни пользователям, не знакомым с программированием, т.к. процесс создания страниц сайта при использовании page builders заключается в добавлении на полотно необходимых элементов, их настройке и взаимном расположении на странице.

Именно поэтому, когда говорят о конструкторах сайтов, частенько добавляют приставку «визуальный», т.к. они позволяют максимально визуализировать процесс создания сайта и сделать из вашей WordPress админки аналог онлайн конструкторов (например, всем известного Wix), в которых процесс создания веб-ресурсов заключается в добавлении на пустую страницу различных элементов путём их перетаскивания (Drag-n-Drop).

Также некоторые WordPress конструкторы позволяют дополнительно экономить время при разработке сайтов на их базе за счёт установки готовых шаблонов страниц. Для WordPress Elementor, например, таковые вы можете найти в TemplateMonster Elementor Marketplace, товары из которого я буду вам демонстрировать в дальнейших статьях, посвящённых данному WordPress конструктору.

Думаю, что краткий экскурс по ключевым моментам и назначению WordPress конструкторов страниц и тем для людей, кто раньше с ними не сталкивался, я провёл. Теперь самое время поговорить о возможностях плагина Elementor для WordPress, которому и посвящена сегодняшняя статья.

WP Elementor: первое впечатление

Как и любой порядочный юзер, перед тем, как начать использовать какой-то продукт, я, естественно, захотел почитать о нём, чтобы составить своё первое впечатление о нём и решить: стоит ли его вообще использовать или нет?

Для этого я решил изучить его описание на официальном сайте и в официальном репозитории WP плагинов.

Топ-пост этого месяца:  Способы оптимизации контента и учет тематики сайта при ссылочном продвижении для сведения затрат к

Сразу скажу, что начальное впечатление сложилось хорошее ��

Во-первых, потому что у WordPress Elementor вообще есть сайт, отсутствием которого грешат многие продукты.

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

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

В-третьих, меня впечатлила статистика WP Elementor на wordpress.org:

  • больше миллиона установок;
  • средний балл 4.8 из 5 (900 из 982 проголосовавших поставили высший балл);
  • частота обновлений (на момент изучения его описания последнее обновление было сделано 2 дня назад);
  • поддержка 30 языков интерфейса.

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

А в конце я озвучу вам отличия Pro версии от бесплатной с подробными расценками, чтобы вы могли понять — нужно ли вам её приобретать или нет ��

И в завершение данного раздела я хотел бы поделиться с вами примерами сайтов на Elementor, чтобы вы представляли, чего можно достигнуть в результате:

  1. https://www.page-and-paper.de — настоящий Интернет-магазин, демонстрирующий интеграцию WP Elementor с WooCommerce элементами;
  2. https://salonbook.one — красивый WordPress Elementor сайт с системой бронирования;
  3. https://sodapopdigital.com.au — яркий сайт со Sticky Elementor menu;
  4. https://www.prodtool.com.br — многостраничный сайт с множеством форм обратной связи и заказа звонка;
  5. https://teamonesecurity.dk — интересный многостраничный сайт с Masonry структурой;

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

WordPress Elementor: установка плагина и подготовка сайта

После положительного первоначального впечатления о ВордПресс Elementor я, естественно, решил продолжить знакомство с ним.

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

Свои эксперименты с ВордПресс Elementor я решил производить на чистом WordPress сайте, что позволит нам смоделировать процесс создания веб-ресурса с применением Elementor page builder с нуля.

Для этого я в панели управления своего хостинга (всё время существования данного сайта пользуюсь TheHost и пока не планирую его менять благодаря низким ценам) создал поддомен для данных целей, доступный по адресу http://elementor.cccp-blog.com, куда установил чистый WordPress.

Далее я приступил к установке плагина на свой будущий сайт. На текущий момент версия WP Elementor 2.2.1, чтобы вы понимали, насколько свежий функционал описан в данной статье.

Установку можно произвести как минимум двумя способами:

  1. скачать WordPress Elementor с официального сайта или репозитория WP плагинов в виде архива с дальнейшей его установкой в админке;
  2. установить WordPress Elementor прямо в админке из встроенного каталога плагинов.

Как установить плагин WordPress указанными способами детально написано в соответствующей статье по приведённой ссылке. Прочитайте её, если у вас возникнут какие-то затруднения на данном этапе.

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

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

А начнём мы с того, что изучим интерфейс плагина и подготовим чистый документ с подходящей структурой, чтобы понять как пользоваться WordPress Elementor.

Elementor WordPress: как пользоваться?

После установки WP Elementor на сайт первым изменением, которое лично я заметил, стала большая кнопка Редактировать в Elementor, которая появилась при редактировании содержимого страниц и постов в админке WordPress:

Как видите, в качестве подопытного кролика я решил взять стандартную WordPress sample page, т.е. пример страницы, говоря по-русски, которая имеет url http://корень_сайта/sample-page и выглядит следующим образом:

После нажатия на кнопку Редактировать в Elementor плагин активируется, и интерфейс редактирования контента страницы принимает следующий вид:

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

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

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

Следить за структурой документа в WordPress Elementor помогает инструмент под названием Навигатор, который вызывается из футера панели инструментов, и выглядит так:

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

Изменить шаблон страницы в WP Elementor page builder можно через следующее меню:

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

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

Если вместо кастомного контекстного меню WordPress Elementor вы захотите использовать стандартное меню браузера, то используйте комбинацию Ctrl + ПКМ (правый клик мышью).

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

Состоит она, как и большинство сайтов, из хэдера, блока контента и футэра.

В хэдере всего две кнопки:

  1. Меню плагина.
  2. Кнопка возврата на стартовый экран с виджетами.

Если со вторым элементов всё предельно ясно, то меню требует дополнительного изучения:

Здесь находятся ссылки на экраны настроек шрифтов и цветов заголовков H1, H2, основного и акцентного текста. Пункт Выбор цвета нужен для добавления новых цветов в палитры WordPress Elementor.

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

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

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

В WP Elementor есть такая полезная вещь, как контроль версий, принцип работы которого очень похож на механизм версионирования публикаций самого движка WordPress. Принцип прост: через определённые промежутки времени происходит сохранение черновика документа, которые потом можно восстанавливать через меню редакций при выборе необходимой копии:

В данном меню будут также доступны и версии документа, созданные при ручном сохранении в Elementor конструкторе, которое происходит при нажатии на соответствующую кнопку в футере:

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

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

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

Режим адаптивности

Ещё одна, я считаю, очень полезная фишка WordPress Elementor, которая позволяет просматривать, как будет выглядеть редактируемый документ на различных типах устройств. Например, при выборе мобильного телефона в данном инструменте, вы увидите следующее:

Также, как вы можете заметить, есть возможность превью страницы для планшетов.

Просмотр изменений

Данный инструмент ничем не отличается от стандартного предпросмотрщика WordPress, доступного в стандартном текстовом редакторе. При нажатии на соответствующую кнопку в футере панели инструментов ВордПресс Elementor происходит редирект на автоматически генерируемую страницу, создаваемую для определённой версии документа:

Данный же блок публикации с описанием интерфейса и возможностей плагина Elementor для ВордПресс я хотел бы завершить обзором глобальных настроек плагина, доступных в главном меню админки WordPress и являющимися дубликатами многих параметров, доступных через панель инструментов Elementor:

На данном экране основных настроек, как видите, можно как раз выбирать типы страниц WordPress сайта, которые можно будет редактировать с помощью WP Elementor (страницы и/или записи блога), а также можно удалить возможность использования плагином собственных глобальных настроек шрифта (цвет и начертание).

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

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

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

Следующей интересной вещью, доступной в глобальной меню настроек WP Elementor, является менеджер ролей, с помощью которого можно задавать права доступа как к редактору, так и к редактируемому с его помощью контенту для различных ролей WordPress пользователей:

Правда, как видите, ограничивать доступ к контенту можно только при наличии Pro версии WP Elementor плагина.

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

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

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

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

Сейчас же мы займёмся изучением виджетов WordPress Elementor на практике, рассматривая их свойства на примере создания реального сайта, чтобы вы могли воочию убедиться, насколько данный page builder plugin облегчает жизнь своим пользователям ��

Создание сайта на WP Elementor — инструкция

Чтобы особо не заморачиваться над тематикой моего тестового сайта, и не забивать себе голову придумыванием бизнеса со всеми деталями на ходу, который я буду «типа» продвигать, я решил сделать лэндинг курсов по фотографии, щедро напичкав сайт стоковыми фотками и яркими надписями ��

Ну, и, естественно, разными специфичными виджетами WordPress Elementor, ради которых всё это занятие и будет проводиться.

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

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

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

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

Надеюсь, вам и мне этот эксперимент понравится ��

Структура сайта вышла следующая:

  • главный блок с презентацией продукта;
  • счётчики клиентов, преподавателей, офисов и городов;
  • программа курса;
  • блок отзывов довольных клиентов;
  • стоимость занятий;
  • «как нас найти?» (адрес и отметка на Google карте);
  • «мы в соцсетях» (ссылки на социальные сообщества);
  • копирайт.

Думаете, что на подбор виджетов, изучение их свойств и саму разработку потребуются дни? Как бы… нет �� Лично у меня, как у человека, впервые в жизни работавшего с WP Elementor, и придумывающего дизайн «на лету» на всё про всё потребовалось 3 часа 34 минуты.

Поэтому рекомендую вам прямо сейчас засечь время и написать в комментариях, сколько времени уйдёт на создание сайта у вас �� Устроим, так сказать, мини-соревнование ��

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

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

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

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

Для этого у свойства Фон на вкладке Стиль выбираем нужный цвет (можно с различными типами градиента) или картинку, как в моём случае. Правда, у фона секций в WordPress Elementor нет настроек прозрачности, яркости, контрастности и т.д. Зато всё это есть в блоке настроек Перекрытие фона, значениям которого я установил следующие значения:

Чтобы добиться Parallax-эффекта, параметру Привязка я установил значение Замостить. Остальные настройки — чистой воды Фотошоп, только средствами CSS.

Надписи на фоне — это отдельные виджеты. Первый — Заголовок. Второй — Текстовый редактор. Настройки шрифта у обоих находятся на вкладке Стиль в выпадающем меню пункта Типографика:

На этой же вкладке находятся настройки выравнивания текста.

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

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

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

Здесь, как видите, можно управлять элементами списка. Причём, как их текстом, типом иконки и адресами ссылок, так и взаимным расположением (вертикальный или горизонтальный список). На вкладке Стиль для данного WP Elementor виджета можно устанавливать настройки шрифта заголовка и иконки, а также разделители элементов списка и расстояние между ними.

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

Для списка я установил эффект анимации Fade In Up, который заключается в «выезжании» объекта снизу вверх, а для заголовка — Fade In Down, чтобы он «выезжал» сверху вниз, т.е. навстречу списку. Получилось, как по мне, симпатично ��

Кроме эффекта анимации в банном блоке настроек, как видите, можно также указывать значения задержки, длительности анимации и другие свойства, не связанные с анимацией: внутренние и внешние отступы в процентах, пикселях и относительных единицах (em), z-index, CSS классы и id элемента.

Следующий структурный элемент нашей landing page — это блок с отзывами клиентов, создать который не составило никакого труда благодаря специализированному WordPress Elementor виджету с названием Отзыв, настройки содержимого которого выглядят так:

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

После блока отзывов у нас идёт ценник — сколько, собственно говоря, будут стоить продаваемые услуги. Я решил не заморачиваться составлением ценников, которые вы могли видеть на большинстве лэндингов: с различными расценками и списками услуг, и решил обойтись единой ценой. На данное решение, кстати, повлияло ещё и то, что данный виджет доступен только в WordPress Elementor Pro, о возможностях которого я буду рассказывать далее.

Данный блок я оформил, как и предыдущие: одноколоночная секция с минимальной высотой в 400px и Parallax-фоном, внутри которой разместил два h2-заголовка с эффектами анимаций Fade In Left и Fade In Right, чтобы они выезжали навстречу друг другу только не вертикально, а горизонтально — в принципе, ничего интересного ��

Зато для следующей секции лэндинга с отображением географического положения офиса мне понадобился новый тип виджета — Карты Google. Настройки его содержимого выглядят следующим образом:

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

Следующий блок нашего лэндинга — кнопки социальных сетей со ссылками на соответствующие сообщества. Для его создания также не пришлось сильно изощряться, т.к. в WordPress Elementor уже есть необходимый виджет — Иконки соцсетей, настройки контента которого выглядят так:

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

Ну, и в последнем блоке структуры нашей landing page я разместил ссылку на разработчика данного творения, т.е. себя, которая является обычным текстом.

На завершающем этапе я решил изменить шрифт с Roboto, который был установлен по умолчанию, на Verdana, который смотрелся более интересно с помощью меню Elementor настроек Стандартные шрифты, доступного в главном меню WP Elementor в хэдере панели инструментов.

Вот и всё, на этом сайт был готов. Казалось бы — можно размещать на хостинге и колотить бабло �� Но, не тут-то было…

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

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

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

На основании получившегося в итоге WordPress Elementor документа я создал шаблон, который можно скачать по этой ссылке. А что с ним делать — об этом я расскажу в следующей статье, посвящённой созданию и установке WP Elementor шаблонов и плагинов.

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

Если вы пока ещё не заметили по приведённым в данной статье картинкам, она одинакова, что позволяет лучше ориентироваться в местоположении параметров у разных элементов. Свойства всех объектов состоят из 3 вкладок: Содержимое, Стиль и Расширенное.

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

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

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

Топ-пост этого месяца:  Как увеличить скорость загрузки сайта работа с изображениями в формате WebP

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

  • вставка картинок и видео контента с Youtube и Vimeo;
  • галерея изображений;
  • Elementor slider или, по-простому говоря, карусель (слайдер) картинок;
  • шкала прогресса;
  • вкладки;
  • Elementor popup — всплывающие окна для форм подписок на новости и прочих маркетинговых штук;
  • аккордеон и toggle элементы — группа связанных аккордеонов, из которых одновременно может быть открыт только один;
  • якоря;
  • кнопки (кнопка в Elementor обычно используется для вызова всплывающих меню, форм и для перемещения по секциям страницы);
  • чистый HTML-код;
  • шорткоды — позволяет вставлять в WP Elementor документы кастомные шорткоды или генерируемые другими плагинами;
  • сайдбар — разные сайдбары, как основной WordPress темы, так и кастомные.

WordPress Elementor Pro: отличия от бесплатной версии

С возможностями бесплатной версии WP Elementor я вас познакомил. Для создания незаурядных landing page, подобных созданной мной выше, как вы поняли, их хватит с головой. А вот если вы захотите чего-то посерьёзней, то вам, скорее всего, понадобится немного больше.

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

Чем конкретно WordPress Elementor Pro отличается от бесплатной версии плагина?

Нужно больше виджетов…

Прежде всего, в ней доступно на 25 виджетов больше, среди которых такие, как:

  • список постов блога;
  • портфолио;
  • редактирование header и footer в Elementor конструкторе;
  • конструктор форм, с помощью которого можно создавать контактную форма, форму подписки на почтовую рассылку, календарь бронирования услуг (booking calendar) и многое другое;
  • авторизация на сайте;
  • конструктор меню сайта (причём, WordPress Elementor позволяет делать как липкое меню, sticky menu, так и фиксированное);
  • прайслист и таблица ценников, которую я хотел добавить на свой тестовый сайт, но в бесплатной версии, к сожалению, без костылей таковую не создать;
  • карусель отзывов, которой мне, кстати, тоже не хватило в бесплатной версии при создании сайта, из-за чего я вынужден был добавить всего один отзыв;
  • обратный отсчёт, который отлично подходит для организации акций;
  • интеграция Facebook (комментарии, страница, кнопка лайка и т.д.) и WooCommerce с WordPress Elementor сайтами (категории, товары, элементы, добавление в корзину) элементов;
  • элементы навигации: поиск по сайту, хлебные крошки, пагинация постов и т.д.

Кстати, дополнительные виджеты, которых нет даже в WordPress Elementor Pro, можно купить в TemplateMonster Elementor Marketplace, который открылся пару месяцев назад, и с товарами которого я вас познакомлю более детально в следующей статье.

Больше настроек

WordPress Elementor Pro предоставляет также множество дополнительных настроек структуры секций (можно делать разные вариации Masonry блоков), гридов постов блога, списков и т.д.

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

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

Схема проста: берёте стандартный виджет WP Elementor, настраиваете его, а затем используете в кастомизированном виде на любой странице сайта. Удобно ��

Кастомные CSS стили

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

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

В целом, как вы могли заметить, маркетинговая политика у WordPress Elementor команды налажена очень хорошо: в бесплатной версии доступны все основные функции плагина, позволяющие сформировать о нём мнение, а дополнительные опции вынесены в платную Pro версию, цены на которую также не заоблачны:

  • 49$ для одного сайта — идеально для владельцев сайтов, разрабатывающих свой ресурс самостоятельно;
  • 99$ для 3 сайтов — отлично подойдёт для владельцев нескольких ресурсов;
  • 199$ для неограниченного количества сайтов — вариант для веб-студий и фрилансеров, зарабатывающих себе на хлеб с маслом созданием сайтов на базе WordPress Elementor.

Приобрести и скачать WordPress Elementor Pro вы сможете по этой ссылке. Если плагин вас разочарует или по каким-то причинам не подойдёт, вы сможете получить свои деньги обратно в течении 30 дней.

WordPress Elementor: финальные выводы

Если хотите знать моё личное мнение о WP Elementor, то я считаю, что данный плагин — отличная альтернатива онлайн-конструкторам для людей, не желающих иметь дело с кодингом, позволяющая создавать профессиональные веб-сайты. Причём данный вариант выигрывает у конструкторов как по цене разработки, так по времени и открытости кода.

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

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

Как при условии профессионального создания сайтов, так и при разработке ресурса самостоятельно стоимость WordPress Elementor Pro окупится в первый же месяц, гарантирую! При разработке сайта данная сумма окупится при первом же заказе, а при условии развития собственного проекта 49$ — не такая уж и заоблачная инвестиция ��

И ещё одной фишкой, которая мне особенно понравилась в WordPress Elementor, стала возможность самостоятельного создания WordPress Elementor шаблонов с целью дальнейшей их продажи и повторного использования.

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

На этом сегодня всё. Устанавливайте WordPress Elementor на свой сайт и смело испытывайте его функционал, т.к., несмотря на краткий экскурс по его возможностям в данной статье, лучше один раз попробовать продукт самостоятельно, чем сто раз о нём прочитать ��

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

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

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

Всем добра и до новых встреч! ��

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email [email protected]

И с друзьями не забудьте поделиться ��

10+ лучших Elementor аддонов для WordPress

2 min

С момента своего появления в 2020 году Elementor полностью захватил индустрию WordPress. Его 1 миллион активных пользователей говорят сами за себя. Если вы не знакомы с ним, позвольте нам дать вам краткое описание этого.

Elementor — это плагин WordPress Page Builder, который предлагает пользователям уникальный опыт веб-дизайна. Любой может просто перетащить классные элементы и создать удивительный сайт всего за несколько минут. Знание кодирования больше не требуется!

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

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

Почему вы можете использовать аддоны Elementor?

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

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

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

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

Отказ от ответственности: WPExplorer является партнером для одного или нескольких продуктов, перечисленных ниже. Если вы нажмете на ссылку и совершите покупку, мы можем сделать комиссию.

1. Elementor Pro

Прежде чем искать альтернативное решение, вы обязательно должны попробовать Elementor Pro. Несмотря на бесплатную версию с 29 базовыми элементами, премиум-версия обогатит цифры даже в большом масштабе. Например, он предлагает более продвинутые виджеты, такие как сообщения, WooCommerce, формы, социальные сети и многое другое.

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

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

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

В основном, чтобы извлечь максимальную выгоду из Elementor Page Builder, вы должны использовать его Премиум-версию.

2. Основные дополнения для Elementor

Если вы говорите о каких-либо сторонних аддонах после Elementor Pro, то вам нужно сначала проверить Основные дополнения для Elementor. Недавно она достигла рубежа, став первым аддоном Elementor, достигшим 100 000+ активных установок. Кроме того, Essential Addons имеет наибольшее количество активных пользователей среди всех сторонних расширений на рынке.

Essential Addons предлагают как бесплатную, так и премиум-версию, которую вы можете использовать для простого создания привлекательных веб-сайтов. В бесплатной версии вы сможете использовать более 30 выдающихся элементов, таких как Form Stylers, Post, Social Media и многие другие. Он удовлетворяет все основные потребности пользователей, так что вы можете получить удивительно красивый сайт.

Кроме того, Essential Addons for Elementor очень легок и не замедляет работу вашего сайта из-за возможности «Модульного контроля», позволяющей включать или отключать любые элементы в любое время.

Чтобы получить в свое распоряжение более продвинутые и необычные функции, вы также можете попробовать Essential Addons Pro. Самое замечательное, что вы получите доступ к более чем 59 фантастическим элементам с этим плагином. Вы сможете похвастаться своим творческим потенциалом и сделать свой веб-сайт потрясающим благодаря его премиальным виджетам, таким как Off-Canvas, Lightbox & Modal, расширенные виджеты Post & Gallery, эффекты Parallax, Form Stylers и многие другие.

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

3. JetElements Аддон для Elementor

JetElements — это премиальный плагин, который содержит более 40 фантастических элементов. Это дает вам возможность легко использовать все элементы с настройками на вашем сайте.

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

4. Расширение CrocoBlock Elementor

CrocoBlock содержит все Jet Widgets в виде пакета и предлагает большую коллекцию готовых шаблонов. Кроме того, пакет CrocoBlock позволяет добавлять высококачественные дизайны на ваш сайт. Вы можете персонализировать свой сайт с его элементами, такими как Post, WooCommerce, Popup и т. Д.

Однако, поскольку CrocoBlock включает Jet Widgets в качестве отдельных плагинов, вы можете сначала попробовать его на локальном хосте. Чем больше плагинов вы используете, тем больше шансов на конфликты — так что не забудьте проверить перед установкой на ваш сайт.

5. Окончательные дополнения для Elementor

Ultimate Addons for Elementor — еще одно высоко оцененное расширение Elementor, которое вы не можете пропустить. Он предоставляет 21+ виджетов, который поставляется с расширенными и уникальными функциями.

Вы можете использовать его модульное управление, чтобы ваш сайт работал быстро. Кроме того, Ultimate Addons предлагает виджеты WooCommerce & Post, чтобы красиво отображать все ваши продукты / контент на вашем веб-сайте.

Несмотря на впечатляющие виджеты, количество предлагаемых Ultimate Addons довольно ограничено. Поскольку у вас нет бесплатной версии, которую вы можете попробовать, вам нужно приобрести премиум-версию, чтобы получить живое впечатление.

6. JetBlocks Аддон для Elementor

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

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

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

7. Элемент Пакет

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

8. Elementor PowerPack

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

9. JetTricks Аддон для Elementor

Название JetTricks дает четкие намеки на то, что включает этот пакет. У реактивных трюков есть некоторые элементы, которые привлекают внимание и понравятся вашим читателям.

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

10. Бесплатные шаблоны Envato Elements

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

Хотя у этого аддона еще нет выделенных элементов для Гутенберга, команда над этим аддоном работает над этим.

11. Все в одном Виджеты для Elementor

Все в одном виджеты помогут вам добавить «Расширить сетку», «Горячую точку изображения» с всплывающей подсказкой, «Флипбокс», «Слайдер карт», «До и после», «iHover», «Временная шкала», «Блок с плавающей точкой» и т. Д. В Elementor Page Builder. Всего в комплекте восемь элементов. Команда, работающая над этим дополнением, надеется, что в будущем они добавят больше виджетов в комплект. К сожалению, нет бесплатной версии этого дополнения.

Завершение лучших аддонов Elementor

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

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

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

Elementor — конструктор страниц

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

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

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

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

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

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

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

Создание главной страницы с помощью Elementor

Особенности:

  • Визуальный конструктор
  • Поддержка адаптивности
  • Вставка элементов методом перетаскивания
  • Вставка разделов, колонок и изменение их ширины
  • Настройки расстояния между колонками
  • Выравнивание элементов в разделе/колонке
  • Настройка внешних и внутренних отступов для элементов
  • Использование шрифтов-иконок (больше 400)
  • Шрифты Google (больше 800)
  • Возможность выбора типов контента, для которого можно использовать Elementor
  • Библиотека готовых шаблонов
  • Создание и сохранение своих шаблонов
  • Создание и сохранение разделов и блоков контента (чтобы их повторно использовать на др. страницах)
  • Импорт/экспорт готовых шаблонов
  • История изменений
  • Возможность откатить страницу
  • Настройка ролей доступа к конструктору Elementor
  • После переезда страницы/страниц на другой сайт Elementor позволяет в элементах сменить ссылки (домены)
  • Наличие режимов работы: Обслуживание и Скоро открытие
  • Наличие бесплатной версии (достаточно много функций и элементов) и версии PRO
  • Наличие русского языка
  • Откат версии плагина Elementor
  • Элементы Elementor (бесплатная версия): колонки, заголовок, кнопки, изображение, видео, разделитель, иконка, иконка с текстом, изображение с текстом, каресель, галерея, цифры, список с иконками, прогресс, отзывы, вкладки, аккордеон, уведомления, плееры, спойлеры, сайдбары.
  • Элементы WordPress, которые можно вставить в Elementor: страницы, записи, архивы, галерея, аудио, видео, поиск, текст, рубрики, календарь и др.
  • Вставка шорткодов (например, формы обратной связи Contact Form 7)

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

  • Cодержимое — размеры, тип, выравнивание и т.д.
  • Стиль — шрифты, цвет, размер шрифта, отступы и т.д.
  • Расширенные — отступы, фон, граница, адаптивность, анимация, произвольные стили CSS

Скриншоты

Общие настройки Elementor

Настройки ролей доступа

Инструменты

Режим обслуживания

Шаблоны

Создайте страницу и переключитесь на конструктор Elementor

Добавляйте элементы на страницу

Установка Elementor

Первый вариант:

Установить плагин (бесплатную версию) можно в админке, через раздел Плагины — Добавить новый.
В поиске укажите «Elementor». Установите и активируйте плагин.

Второй вариант:

Установите архив через раздел Плагины — Добавить новый — Загрузить плагин. Активируйте плагин.

Возможности Elementor PRO

Для конструктора страниц Elementor доступна версия ПРО, которая значительно расширяет возможности плагина.

Особенности версии PRO:

  • Использование библиотеки шаблонов PRO
  • Интеграции: reCAPTCHA (защита от спама), donReach (кнопки для шаринга), Facebook SDK (кнопки, комментарии, страницы), MailChimp (форма подписки), Drip (форма подписки), ActiveCampaign (форма подписки), GetResponse (форма подписки), ConvertKit (форма подписки), TypeKit (шрифты).
  • Использование произвольных шрифтов
  • Новые элементы: записи, портфолио, слайды, форма подписки, меню, форма авторизации, анимированный заголовок, список цен, тарифы, переворачивающийся блок, карусель, карусель отзывов, обратный отсчет, кнопки шаринга, цитаты, Facebook, вставка шаблона, форма поиска, об авторе, комментарии записей, навигация записей.
  • Глобальные виджеты — вставка виджетов Elementor в любом месте вашего сайта (работает в любом шаблоне WordPress)
  • Конструктор темы (создание шапки сайта, футера сайта, шаблоны архивов и записей).
  • Конструктор WooCommerce (создание страниц товаров и категорий).
  • Конструктор всплывающих окон.
  • Произвольные шрифты.
  • Динамический контент.
  • Условия отображения шаблонов.
  • Прикрепленная шапка.
  • Страница 404.
  • Страница архива.
  • Интеграция с произвольными полями и типами записей.
  • Хлебные крошки.

Хотите создать уникальный и красивый сайт и при этом не быть ограниченными в возможностях? — Покупайте Elementor PRO!

Плагин elementor для WordPress

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

Топ-пост этого месяца:  SendPulse — Push уведомления для сайта и бесплатный вариант их подключения от СендПульс

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

Elementor — конструктор сайтов и страниц

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

Описание

Конструктор Elementor совместим со всеми темами WordPress. Он универсален – может быть применен при разработке интернет-магазина, лендинга, представительского сайта, любого другого интернет проекта. Управление осуществляется через удобную админ панель. Элементы размещаются на нужных областях страницы путем перетаскивания. Навыков программирования для использования этого плагина не требуется.

Установка

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

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

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

Настройки типографики

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

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

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

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

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

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

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

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

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

Плагин с русским переводом

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

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

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

Настройка адаптивности

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

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

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

Варианты макета

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

Элементы

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

Секция

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

live режим

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

Режим «в разработке»

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

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

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

Техподдержка

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

Обновления

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

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

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

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

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

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

Elementor интегрируется со всеми основными сервисами, которые могут понадобиться при работе над сайтом.

Шаблоны страниц

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

Настройки движения

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

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

Интернет-магазин

Elementor применим при верстке или настройке интернет-магазинов. Он совместим с Woocommerce. Кроме того, внесено более десятка легко настраиваемых виджетов-элементов магазина. С их помощью создаются витрины, карточки товаров, корзины и т. д.

Своя тема

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

Шапка и подвал

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

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

Комплектация ПРО включает функции, заменяющие некоторые расширения. Например, можно обойтись без плагина для создания форм Contact Form 7, которым пользуются почти все разработчики сайтов на вордпресс. Любую форму можно сверстать конструктором.

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

Настройки поп-ап окон

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

Создание поп-ап окон

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

Дополнительные элементы

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

Инструкция по созданию страниц

Чтобы начать работу необходимо сначала скачать и установить конструктор, как было описано в начале статьи. Если оплачена ПРО версия, при установке нужно выбрать и активировать ее.

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

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

Темы для Elementor

Данный конструктор совместим с любыми темами вордпресс. Однако некоторые авторы тем ориентируются именно на это расширение и создают продукцию именно под него. Ниже приведены наиболее популярные темы для Elementor.

Monstroid

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

Luxor

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

BuildWall

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

FitPeople

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

Belle Fleur

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

Contributz

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

DentalCare

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

Tourizto

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

Soothery

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

Простой и многофункциональный конструктор страниц WordPress

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

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

Плагины с похожим функционалом:

Elementor конструктор страниц WordPress

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

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

Скачайте плагин Elementor по ссылке ниже, установите его на свой сайт и активируйте. Давайте разберёмся в нём.

После установки плагина в консоли образуется пункт «Elementor». В нём, в разделе «Post Types» можно выбрать, в каких типах контента будет присутствовать дополнительный конструктор WordPress, а в раздел «Exclude Roles» можно отметить роли пользователей, для которых этот конструктор не будет доступен.

В принципе, всё можно оставить по умолчанию.

Теперь перейдите непосредственно в конструктор страниц WordPress от «Elementor», для этого просто откройте для редактирования (или создайте новую) страниц или запись. Встроенный редактор WordPress остаётся доступным. Чтобы переключиться на конструктор, нужно нажать на кнопку «Edit with Elemetor».

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

Панель инструментов конструктора страниц WordPress разделена на две группы: «Elements», в которой собраны разнообразные элементы плагина «Elementor», которые можно поместить на страницу или в запись; и «WordPress» — со стандартными элементами WordPress.

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

Начать нужно с нажатия кнопки «Add New Section», которая добавляет секцию на страницу или в запись.

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

Вы можете посмотреть видео-обзор этого конструктора страниц WordPress.

Давайте рассмотрим элементы из группы «Elementor»:

  • Columns. Позволяет создавать дополнительные колонки.
  • Heading. Заголовок.
  • Texteditor. Текстовый редактор на основе встроенного редактора WordPress.
  • Images. Вставка картинки.
  • YouTube. Вставка видео из YouTube.
  • Button. Симпатичные настраиваемые кнопки.
  • Devider. Разделитель.
  • GoogleMaps. Карта из Google.
  • Счётчик.
  • Progressbar. Красивый настраиваемый прогресс-бар.
  • Icon. Иконка, которую можно выбрать из встроенной в плагин библиотеки.
  • Iconlist. Настраиваемый список с иконками вместо маркера.
  • Tabs. Очень удобный элемент, позволяющий переключать текст в табах, вкладках.
  • Accordion. Конструктор страниц WordPress позволяет создавать также не менее удобное меню-аккордеон, где пользователь может сворачивать и разворачивать текст.
  • Toggle. Переключатель. Это тоже разновидность контентного меню, с возможностью сворачивания и разворачивания текста.
  • Alert. Выделенный текстовый блок.
  • HTML. Выполнение HTML кода.
  • Menuanchor. Создаёт якорь в тексте, из которого можно сделать оглавление.
  • Sidebar. Дополнительный сайдбар в любой записи или странице, в который можно добавить виджеты.

Вот такой внушительный список элементов поддерживает этот конструктор страниц WordPress. И это ещё не всё. Как я писал выше, есть ещё блок элементов «WordPress», в котором собраны стандартные части CMS. Их подробно рассматривать не стану, сможете разобраться самостоятельно.

В визуальном редакторе есть ещё одна панель инструментов внизу.

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

Создание красивых сайтов на WordPress вместе с Elementor

Курс: «Создание красивых сайтов на WordPress вместе с Elementor» . Материал от зарубежных авторов. Материал хороший, подойдет для тех, кто занимается созданием сайтов. Материал на английском языке. В самом плагине нет ничего сложного и все понятно, на крайний случай можно использовать переводчик страниц. Отзывы о материале хорошие. Материал прислал анонимный пользователь без комментариев.

Материал может быть удален по запросу правообладателя!

Описание курса:

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

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

Содержание курса:

Курс состоит из двух основных разделов. В первом разделе мы собираемся использовать БЕСПЛАТНУЮ версию Elementor для создания полноценного одностраничного веб-сайта для вымышленной компании, известной как White Hat Hackers. Эта компания специализируется на кибербезопасности и помогает компаниям бороться с кибератаками и хакерами.

В процессе создания этого сайта вы узнаете следующее:

  • Как работать с разделами, столбцами и виджетами;
  • Как создать заголовок раздела с логотипом сайта и иконками социальных сетей;
  • Как работать с виджетами заголовков;
  • Как работать с видео и текстовыми полями;
  • Как построить образ карусели;
  • Как вставить счетчики чисел, а также переключать элементы;
  • Как добавить карту Google на свою веб-страницу;
  • Как создать и вставить контактную форму;
  • Как создать полный раздел нижнего колонтитула для вашего сайта WordPress;
  • Как создать адаптивный веб-контент и структуру;
  • Как работать с шаблонами страниц;
  • и многое другое…

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

  • Как добавить таймер обратного отсчета на свою страницу;
  • Как создать анимированный заголовок;
  • Как добавить контактную форму;
  • Как улучшить дизайн и стиль с помощью флип-боксов;

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

Программа обучения:

Elementor — Создание бизнес-сайта:

  • Что мы будем строить вместе;
  • Начальная настройка;
  • Общие настройки Elementor;
  • Настройка домашней страницы Elementor;
  • Настройка наших глобальных ценностей;
  • Добавление нашего первого раздела — текст заголовка + фоновое видео;

Второй раздел — кто мы;

  • Навигатор и инструменты истории;
  • Создание расширенных структур;
  • Elementor Challenge 1;
  • 1 вопрос;
  • Добавление раздела «Наши услуги»;
  • Добавление раздела «Зачем работать с нами»;
  • Добавление раздела «Встреча с командой»;
  • Добавление раздела «Наши клиенты»;
  • Добавление раздела отзывов;
  • Работа с полями и отступами;
  • Работа с элементами Spacing;
  • Работа с элементом счетчика чисел;
  • Создание раздела нижнего колонтитула;
  • Создание Заголовка Часть 1 — Якорные ссылки;
  • Создание заголовка, часть 2 — добавление нашего меню и логотипа;
  • Отзывчивый режим;
  • Работа с шаблонами страниц и блоками;

Раздел 2 — Использование Elementor Pro:

  • Введение в Elementor Pro;
  • Партнерская акция;
  • Партнерская ссылка;
  • Elementor Pro Section Предварительный просмотр;
  • Добавление главного меню;
  • Создание анимированного заголовка;
  • Добавление таймера обратного отсчета;
  • Воссоздание раздела услуг с помощью флип-боксов;
  • Воссоздание раздела «Зачем работать с нами»;
  • Воссоздание раздела Контакты;
  • Заключение.

Если Вы не видите ссылку для скачивания материала — отключите блокиратор рекламы и добавьте наш сайт в список исключений. Если Вы против рекламы на нашем сайте — покупайте контент напрямую у авторов.

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