ТrafficСardinal Elementor: обзор популярного конструктора страниц для WordPress

Включить нумерованное содержание?

Да

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

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

Главная страница сайта elementor.com

Материал с канала: Traffic Cardinal

Принцип работы Elementor​

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

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

Макет страницы​

Работа с Elementor начинается с выбора одного из двух CSS-подходов позиционирования элементов на странице: Flexbox и Grid (сетка).

Выбор типа макета страницы в Elementor


Flexbox и CSS Grid пришли на смену популярному ранее float-подходу и на сегодняшний день поддерживаются всеми современными браузерами.

Так в чем же разница между этими двумя подходами и можно ли их совмещать?

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

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

Подробно о том, как работают Flexbox и Grid CSS, можно посмотреть вот в этом видео.

Элементы страницы​

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

К сожалению, в бесплатной версии Elementor количество таких виджетов ограничено. Но выход все же есть — проблема решается установкой сторонних дополнений, которые покрывают большую часть платного функционала. Из популярных — это Essential Addons for Elementor, ElementsKit Elementor addons и Premium Addons for Elementor.

Бесплатная версия Elementor включает в себя около 30 виджетов:

Настройки макета и элементов​

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

Для контейнеров​

• Настройки макета;
• настройки стилей;
• расширенные настройки.

Настройки контейнера в Elementor

Для элементов​

• Настройки содержимого (у каждого виджета они разные);
• настройки стилей;
• расширенные настройки.

Пример настройки виджета в Elementor

Немного практики​

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

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

Хэдер​

За основу шапки нашего лендинга мы возьмем flex-контейнер с двумя дочерними блоками.

Выбор структуры flex-контейнера

В нем будет содержаться следующие элементы:

1. фоновое изображение;
2. заголовок;
3. кнопка «Заказать».

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

Настройки фонового изображения для контейнера

Теперь методом перетаскивания по очереди отправляем виджеты «Заголовок» и «Кнопка» в левый дочерний блок нашего flex-контейнера.

Перетаскивание элементов во flex-контейнер

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

Настройки позиционирования элементов внутри дочернего блока flex-контейнера

Установим минимальную высоту общего контейнера так, чтобы фон и элементы внутри контейнера отображались корректно. Для этого жмем «Редактировать Контейнер», заходим во вкладку «Макет» и выставляем минимальную высоту в 550 пикселей.

Настройки минимальной высоты flex-контейнера

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

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

Получаем вот такой результат:

Готовый header

Товар​

Как и в случае с шапкой сайта, создаем flex-контейнер с двумя дочерними блоками.

В первый блок добавляем изображение с товаром:

Добавление изображения товара

Далее нам придется прибегнуть помощи к стороннего дополнения для Elementor: устанавливаем плагин Premium Addons for Elementor и заимствуем у него виджет «Таблица цен».

Виджет «Таблица цен»

Выравниваем блоки по центру и настраиваем стили для таблицы цен.

Также Elementor позволяет добавлять различного вида разделители для блоков: жмем «Редактировать контейнер» и переходим во вкладку «Стили». Затем находим раздел «Разделитель секции».

Настройки разделителя секций

Здесь можно выбрать тип разделителя и задать для него стили.

Теперь мы справились с блоком товара и можем посмотреть, что же у нас получилось:

Готовый блок «Товар»

Отзывы​

И снова обращаемся за помощью к плагину Premium Addons for Elementor — в этот раз нам понадобится виджет с отзывами.

Так как отзывы — это повторяющиеся элементы контента, используем сетку с тремя секциями. Далее находим через поиск виджет «Отзыв» от Premium Addons и перетаскиваем его в каждую секцию.

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

Готовый блок «Отзывы»

Счетчик окончания акции​

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

Сперва создаем заголовок для счетчика, затем добавляем сам счетчик от все того же плагина Premium Addons for Elementor. Задаем стили и запускаем:

Счетчик обратного отсчета

Конечный результат​

Используя преимущественно стандартный функционал Elementor и потратив около 25 минут времени, нам удалось получить вот такой результат:

Финальная версия landing-page на Elementor

Итог​

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

Теперь рассмотрим основные преимущества Elementor:

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

Раньше многие юзеры жаловались на то, что Elementor тормозит сайты. На самом деле многое зависело не только от плагина, но и от темы, на которую он установлен. Чтобы избежать проблем с медленной загрузкой страниц при использовании Elementor, установите легкий, минималистичный шаблон «Hello Elementor», который был разработан специально под эти задачи.

Ну и никогда не помешает познать нейронки для 18+: Обзор лучших нейронок для создания 18+ контента

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

Используете ли вы Elementor в своей работе? Обязательно делитесь личным опытом в комментариях. Всем удачи!