Как работать с конструктором страниц Elementor в WordPress

• Что такое Elementor
• Возможности плагина Elementor
• Как установить Elementor на Wordpress
• Как сделать сайт на Элементоре
• Создание сайта на WordPress Elementor
• Шаблон Elementor WordPress
• Elementor настройка для WordPress
• Elementor Pro

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

Что такое Elementor

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

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

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

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

Плагин Elementor пользуется популярностью. Сейчас он установлен на 5+ миллионах сайтов. 

Возможности плагина Elementor

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

При работе со страницами в Elementor вы сразу видите изменения, которые вносите. Поэтому наряду с конструктором сайтов его называют визуальным редактором. Но есть оговорка: добавленные изображения будут отображаться только в режиме «Просмотра страницы». 

Адаптивность

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

Виджеты

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

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

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

Бесплатные виджеты:

• Заголовок → чтобы структурировать информацию и добавлять крупные надписи.
• Изображение → чтобы добавлять иллюстрации к услугам, фото сотрудников и т. д. 
• Видео → чтобы добавлять ссылки на видео с YouTube, Vimeo и других источников. 
• Кнопка → чтобы заключить ссылку в красивую кнопку, которую видно на странице. 
• Отзывы → чтобы размещать отзывы клиентов (social proof).
• Иконки соцсетей → чтобы связать сайт с группами вашей компании в соцсетях.

Виджеты платной версии:

• Галерея изображений (+ карусель) → чтобы добавить несколько изображений в сетке или тех, которые будут идти одна за одной. 
• Форма → чтобы настроить поля (например, заявки), которые будет заполнять пользователь. 
• Цитаты → чтобы выделить текст на странице, сделать его визуальным якорем. 
• Логин → чтобы у пользователей появилась возможность авторизоваться на сайте. 
• Прайс-лист → готовый блок, чтобы ввести описания и стоимость тарифов ваших услуг. 
• Шаблоны → чтобы использовать готовые шаблоны страниц и изменять контент. 
• Каталог товаров → чтобы добавить готовую сетку товаров, которую можно заполнить своими вариантами. 

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

1. Откройте админку WordPress. 

2. Наведите курсор на раздел «Плагины» и выберите Добавить новый из списка:

3. Введите название Elementor в строке поиска справа и нажмите Enter.

4. Нажмите Установить → Активировать:

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

Как сделать сайт на Элементоре

Чтобы добавить новую страницу и редактировать её в Elementor: 

1. Перейдите в раздел главного меню «Страницы» и нажмите Добавить новую: 

2. В верхней панели кликните Редактировать в Elementor:

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

Вы перейдёте в редактор Elementor.

Создание сайта на WordPress Elementor

1. Перетащите нужный виджет с панели управления в пустую область справа:

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

Здесь вы сможете очень гибко настроить элемент. Все функции рассортированы по трём вкладкам:  

• Содержимое. Здесь задаётся контентная часть: например, текст, который будет отображаться. Также здесь представлены основные настройки; 
• Стиль. В этой вкладке собраны более гибкие инструменты для управления дизайном элемента;
• Расширенные. Здесь собраны дополнительные функции. Например, анимация объектов, загрузка пользовательских CSS-стилей и другие.

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

3. Настроим виджет «Заголовок». 

 

 

Когда всё будет готово, вернитесь к другим виджетам, кликнув на иконку, отмеченную на скриншоте:

Повторите шаги 1–3 для остальных блоков вашей страницы. Добавим несколько элементов:

 

4. Чтобы сохранить черновик или опубликовать страницу, нажмите соответствующую кнопку в панели управления справа:

 

Шаблон Elementor WordPress

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

Однако здесь есть нюанс. Можно использовать Elementor в связке с Astra, в которой собраны темы для Elementor WordPress. Мы рассказывали о том, как сделать это в инструкции.

Чтобы посмотреть каталог шаблонов, нажмите среднюю кнопку в правой области редактора: 

 

 

Найдите понравившийся бесплатный (на платных сверху размещён ярлычок Pro) и нажмите Вставить:

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

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

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

Чтобы перейти настройкам в Elementor, в редакторе кликните по иконке с тремя полосами в панели управления и откройте раздел «Настройки сайта»:

В этом разделе вы сможете задать:

• цвета и шрифты. Для всех виджетов, содержащих текст; 
• типографику. Чтобы везде были одинаковые отступы, теги заголовков (H1–H6); 
• кнопки. Благодаря этому можно запрограммировать внешний вид кнопки один раз, а затем просто менять при желании текст и url;
• параметры изображений; 
• айдентику сайта. Чтобы настроить описание сайта, его фавикон и другие дополнительные элементы;  
• макет. Чтобы везде была одинаковая ширина страниц и расстояния между виджетами;
• пользовательские CSS (в платной версии). Чтобы загружать дополнительные стили;
• Расширенные настройки. 

Elementor Pro

Для того чтобы облегчить работу (за счёт готовых шаблонов) или добавить гибкие инструменты (прайс-листы, таймеры и т. д.), потребуется платная версия плагина Elementor Pro. Осветим её главные отличия от базовой версии: 

• В зависимости от тарифа подписка на год стоит 49–199 $.
• Будут доступны продвинутые виджеты, о которых мы рассказывали выше. Всего будет доступно более 90 элементов из категорий: Базовый, Общие, Pro и Woocommerce. 
• Есть конструктор поп-апов (всплывающих форм) на сайте. С помощью них можно привлекать аудиторию к покупкам, сообщать о новинках и т. п.
• В сравнении с обычной версией, в которой есть несколько бесплатных шаблонов, вам откроется галерея из 300+ готовых тем, которые можно использовать. 
• Вы сможете настраивать шапку (хэдэр) и подвал (футер) вашего сайта. 
• Создавать интернет-магазин на Elementor WordPress с помощью 15 шаблонов WooCommerce.
• Добавлять дополнительные динамические эффекты.