Elementor для WordPress — Обзор функционала и настроек плагина

Обложка статьи "Что такое Elementor"
Оглавление статьи

Видеоверсия статьи

Вот и пришло время, когда сайты можно создавать практически без знаний HTML и CSS кода. И уже тем более без знания программирования. Да еще и практически бесплатно. «Кайфуши ваще. Прям капец» (с)

Для того, чтобы это осуществить, нам нужен PageBuilder плагин Elementor и WordPress. Сегодня поговорим именно про плагин.

Эту статью хорошо дополняют

Что такое Elementor

Elementor — это плагин, который превращает создание сайта, страницы или статьи на WordPress в конструктор. При этом практически не надо знать ни HTML, ни CSS языки. Практически, так как понимать разницу между H1, H2, div, span и так далее, вам всё-таки нужно знать. Но это основы HTML языка, так что узнать их в любом случае надо будет.  О, а вот и тема для новой статьи 🙂

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

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

Эту статью, как и все остальные на этом сайте (да и весь сайт тоже) я делаю именно в элементоре.
Что еще может служить лучшей демонстрацией его работы?)

Как установить Elementor на WordPress сайт

Так как Elementor — это плагин, то его установка ничем не отличается от установки любого другого плагина.

Следовательно, чтобы его установить делаем следующее:

1

Заходим в админку сайта

2

Находим в столбце слева вкладку Плагины

3

Сверху нажимаем на кнопку «Добавить новый«

4

В поле поиска пишем Elementor

5

Возле плагина «Elementor — Конструктор сайтов и страниц» нажимаем на кнопку «Установить«

6

Потом нажимаем на кнопку «Активировать«, которая появится на месте кнопки «Установить«

Ниже то же самое, только картинкой.

Elementor для WordPress - Обзор функционала и настроек плагина
Порядок установки плагина Elementor на WordPress сайт

Если вы всё сделали правильно, то теперь в боковом столбце появились 2 новых пункта «Elementor» и «Шаблоны».  А при создании новой страницы или записи появилась кнопка «Редактировать в Elementor», которая переключает редактирование страницы из уже классического редактора Gutenberg на редактор Элементор.

На скриншоте ниже я отметил эти поля рамками. Если у вас всё именно так, то теперь давайте разберемся что к чему в самом редакторе.

Elementor для WordPress - Обзор функционала и настроек плагина
Переключение из стандартного редактора на вордпрессе на редактор Elementor

Из чего состоит редактор Elementor в WordPress

После того, как вы нажмете на кнопку «Редактировать в Elementor», перед вами откроется сам редактор Элементор. Он состоит из 2 частей: Слева панель администратора, справа непосредственно редактируемая страница сайта. 

Разберем обе части отдельно.

Панель администратора Elementor

Панель доступных элементов

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

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

Настройки Elementor

Под цифрой 2, находятся настройки сайта и настройки Elementor. Пройдемся по ним всем.

Глобальные цвета в Elementor
Глобальные цвета

На вкладке «Глобальные цвета» можно выбрать цвет текста для всех основных элементов на странице. 

  • Первый — это цвет всех заголовков (H1-H6) на каждой странице и в статьях, а также значков (иконок).
  • Второй — окрашивает элементы списка, вторичные и анимированные заголовки, а также фон в таблицах цен.
  • Текст — основной цвет любого текста.
  • Акцент — здесь задается цвет ссылок, кнопок и заголовков у вкладок и аккордеонов.
 
При необходимости, можно добавить свой дополнительный цвет, который потом выбирать в стилях нужных элементов. Также каждый пункт можно переименовать на своё усмотрение. 
Глобальные шрифты в Elementor
Стандартные шрифты

На вкладке «Стандартные шрифты» можно выбрать шрифт и его насыщенность для основных элементов, для которых мы выше настраивали цвета.

Если что, на этом сайте я использую шрифт Roboto.

Elementor для WordPress - Обзор функционала и настроек плагина
Стили темы

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

Например, задать фон для всего сайта в виде одного цвета, одной картинки или градиента из 2 цветов. Также задать настройки цвета, размера и шрифт для основного текста, ссылок и заголовков H1-H6.

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

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

Ну а пользовательские CSS доступны только в PRO версии плагина. Как и любые другие уникальные настройки темы под себя.

Айдентика сайта

Отдельно хочу остановиться на айдентике сайта.

В большинстве тем сайта эти настройки есть по умолчанию (для этого надо зайти в админку -> внешний вид -> настроить). Но разработчики элементора решили облегчить нам и эту работу, поэтому перенесли всё в одно окно настроек.

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

Описание сайта — всё аналогично названию, просто раскрывает название сайта.

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

Favicon сайта — иконка сайта, которая отображается во вкладке браузера перед названием сайта. На телефонах так же служит иконкой вашего сайта, если закладку на неё сохранили на рабочий стол.

Лайтбокс

Лайтбокс (Lightbox) — это всплывающее окно, чтобы можно было лучше рассмотреть изображение. Вот нажмите на картинку слева (или ниже, если вы с телефона) и увидите как он работает. Если бы лайтбокса не было, то изображение открывалось бы в этом или  отдельном окне. А это не айс.

Теперь разберемся с настройками.

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

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

Во весь экран, Увеличение и Поделиться — включение и отключение кнопок управления лайтбокса, которые отображаются рядом с кнопкой «Закрыть». 

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

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

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

Цвет кнопок при наведении — цвет этих самых кнопок, когда на них наводится указатель мыши (псевдокласс :hover в CSS)

Цвет текста — цвет заголовка и описания, которые отображаются под изображением в лайтбоксе.

Размер иконок — отвечают за размер иконок управления в правом верхнем углу и стрелок вправо и влево в самом лайтбоксе.

Нижняя панель редактора Elementor на WordPress

Теперь давайте посмотрим, что находится на нижней панели редактора Elementor

Elementor для WordPress - Обзор функционала и настроек плагина

Если мы нажмем на шестеренку, то попадем в основные настройки конкретной страницы или записи. Здесь можно задать заголовок страницы, выбрать статус публикации, указать главное изображение (обложка у статьи в блоге), включить или отключить отображение заголовка и выбрать один из шаблонов страницы. Кстати, если выбрать шаблон «Холст Elementor», то перед Вами откроется полностью пустая страница без шапки и подвала, на которой Вы сможете сделать всё с 0. Отлично подходит для тех случаев, когда внутри многостраничного сайта создается отдельная лендинговая страница.

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

Здесь можно посмотреть историю изменений на странице и переключаться между ними в 1 клик, а не нажимая энное количество раз Ctrl+C

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

Просмотр созданной нами страницы в том виде, в котором её будут видеть посетители сайта. Не забывайте смотреть свои статьи и страницы перед публикацией, чтобы поправить некоторые места (например, анимацию элементов).

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

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

Визуальный редактор страницы

Любая редактируемая в Elementor страница состоит из 3 частей, которые имеют свою иерархию. Выглядит она следующим образом.

  1. Секция
    1. Колонка
      1. Элемент

 

У каждой из этих частей есть свои собственные настройки. Давайте разберем их все.

Из чего состоит Elementor для WordPress

Секция

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

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

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

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

На этом скриншоте весь экран занимает 1 секция. За это отвечает настройка «Высота». Видите, там стоит «По размеру экрана»? Это именно она. Если же эту настройку оставить «По умолчанию», то секция будет такой высоты, какой самая высокая колонка внутри неё.

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

Как зайти в настройки секции

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

Из чего состоит Elementor для WordPress

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

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

Настройки макета

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

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

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

Высота — про неё мы поговорили уже чуть-чуть выше.

Позиция колонок — определяет положение колонок внутри секции. Настройка похожа на выравнивание текста в ячейке в Word’e или Excel’e. Но если выбрать пункт «Растягиваться», то колонка станет той же высоты, что и секция.

Вертикальное выравнивание — Выравнивает элементы внутри колонки.

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

HTML-тег — Тег, в который надо обернуть всю секцию. От этого зависит настройки отображения всей секции, которые прописаны в CSS файлах. Если не знаете html, то просто оставьте по умолчанию и всё. По умолчанию секция будет обернута в тег div и это хорошо. 

Настройки стиля

Фон — Тут всё просто. В этой настройке мы задаем фон всей секции. Фоном может служить цвет, изображение (причем можно выбрать разные изображения для разных размеров экрана), градиент из 2 цветов, видео (с YouTube/Vimeo или с вашего cайта в формате .mp4) или слайдшоу.

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

Граница — задает настройки границы всей секции. Можно задать тип линии, угол скругления и тень. 

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

Типографика — задает цвет основных элементов у текста внутри секции. Работает только если отключены глобальные цвета в настройках Elementor в WordPress админке (Elementor -> Настройки -> Общие -> Отключить цвета по умолчанию).

Расширенные настройки

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

Отступы внутри — аналог свойства padding в CSS. Устанавливает отступы от краев секции до колонок. 

Z-индекс — устанавливает порядок отображения секций, колонок и элементов, которые слоями накладываются друг на друга. Чем выше номер в этом поле, тем выше слой.

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

Эффекты движения — задает анимацию, с которой секция появится на экране, когда до неё прокрутят страницу.

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

Пользовательские CSS — это функция, доступная только в платной PRO версии Elementor для WordPress. Она позволяет настроить внешний вид секции прямо на месте. У меня установлена именно про версия, но я не пользуюсь этой настройкой. Хватает того функционала, что уже есть.

Колонка

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

Настройки колонки в Elementor для WordPress

Ширина колонки задается в процентах для каждого типа экрана. Например, в секции, в которой я сейчас пишу текст, 2 колонки. 1 колонка для изображения имеет ширину 30%, а колонка с текстом 70%. Причем, если у вас несколько колонок и вы меняете значение ширины только у одной из них, то оставшаяся ширина распределяется поровну между всеми остальными колонками.

Вертикальное выравнивание — выравнивает элементы внутри колонки по вертикали.

Горизонтальное выравнивание — делает то же самое, но по горизонтали.

Отступы виджетов задает расстояние между элементами внутри колонки.

HTML-тег — оборачивает колонку в один из доступных тегов. По умолчанию используется div’ная верстка и чаще всего этого достаточно.

Элемент

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

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

Элементы Elementor Free
30 элементов в бесплатном элементоре, из которых можно собрать страницу
Элементы Elementor PRO
Дополнительные 29 элементов в платной версии плагина
Элементы для интернет - магазина на WooCommerce WordPress
Элементы, доступные в Elementor, при разработке интернет - магазина на плагине WooCommerce
Элементы для конструктора тем на Elementor
Элементы, из которых можно собирать шаблоны страниц в конструкторе темы

В заключение

Ух, большая вышла статья. Почти 2,5 тысячи слов. и это ведь только начало. Впереди будет еще минимум 3 большие статьи с обзорами элементов и шаблонов в бесплатной и платной версии Elementor для WordPress. 

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

P.S.  В мае 2020 года, уже после выхода этой статьи, мой наставник Даниил Шардаков попросил собрать в Elementor Free главную страницу и страницу Landing Page. Нужно это было для того, чтобы показать ученикам его бесплатного YouTube курса про прототипы, как могут выглядеть эти страницы на сайте, а не просто в голом прототипе. Что из этого получилось вы можете посмотреть по ссылкам ниже. Там же будет ссылка и на его курс.

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

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

5 13 голоса
Оцените эту статью

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

Facebook
ВКонтакте
Twitter
Telegram
Одноклассники
Email
Эту и остальные статьи на сайте для Вас подготовил
Копирайтер Андрей Рочев
Андрей Рочев

АйТишник с навыками гуманитария. Пишу, а также снимаю видео, о том, как создать сайт без навыков программирования используя CMS Wordpress и плагин конструктора страниц Elementor.

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

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

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

3 Комментарии
старее
новее большинство голосов
Inline Feedbacks
Посмотреть все комментарии
Анна
Анна
2 лет назад

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

Алексей
Алексей
1 год назад

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

3
0
Появились мысли по статье? Напишите их в комментариях, пока не забылиx

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

Яндекс.Метрика