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

Автор: | 07.09.2018

wordpress-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 как нельзя кстати 🙂wp-elementor-vozmozhnosti

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

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

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

Думаю, что краткий экскурс по ключевым моментам и назначению 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-elementor-knopka-zapuska

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

stranica-do-redaktirovaniya-v-wordpress-elementor

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

wordpress-elementor-interfejs

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

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

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

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

wordpress-elementor-navigator

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

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

wordpress-elementor-nastrojki-stranicy

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

wordpress-elementor-kontekstnoe-menyu

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

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

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

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

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

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

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

wordpress-elementor-menyu-plagina

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

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

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

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

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

wp-elementor-istoriya-izmenenij

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

wp-elementor-sokhranenie-izmenenij

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

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

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

wordpress-elementor-kontrol-dejstvij

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

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

wordpress-elementor-rezhim-adaptivnosti

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

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

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

wordpress-elementor-prosmotr-izmenenij

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

wp-elementor-globalnye-nastrojki-plagina

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

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

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

wp-elementor-menedzher-rolej

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

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

wp-elementor-menedzher-shablonov

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

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

wordpress-elementor-rezhim-obsluzhivaniya

Причём, как видите, здесь можно настраивать как код 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-struktura-sekcij

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

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

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

wordpress-elementor-oformlenie-nalozheniya-fona

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

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

wp-elementor-nastrojki-stilya-zagolovka

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

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

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

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

wordpress-elementor-nastrojki-vidzheta-spiska

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

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

wordpress-elementor-nastrojki-animacii

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

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

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

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

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

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

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

wp-elementor-vidzhet-google-karty

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

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

wp-elementor-vidzhet-ikonki-socsetej

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

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

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

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

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

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

wp-elementor-nastrojki-vidzhetov-dlya-razlichnykh-ustrojstv

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

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

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

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

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

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

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

В завершение возможностей бесплатной версии 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 шаблонов и плагинов более детально. Так что, повторюсь, подписывайтесь на обновления сайта, чтобы быть в курсе всех новых статей.

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
5 голосов, в среднем: 5 из 5

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

  1. Лана

    Добрый день!
    Спасибо вам за столь понятный и информационный обзор. Испытываю симпатию к Елементор билдеру из-за его простоты в использовании. За ваше время тестирования этого конструктора ( 3 часа 34 минуты), не думали ли вы о ре-дизайне своего сайта? 🙂

    1. Pashaster Автор

      Добрый день. Спасибо за отзыв 🙂 По поводу редизайна — задумываюсь и, скорее всего его сделаю, когда появится время на это.

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

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