Elementor: обзор лучшего конструктора страниц для WordPress

Зачем WordPress нужен визуальный конструктор

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

Как работает Elementor

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

Общие характеристики конструктора:

• более 5 миллионов пользователей;
• последнее обновление расширения было в ноябре 2020 года;
• плагин переведен на 56 языков;
• возможность интеграции CRM;
• вы можете добавить свои шрифты и иконки;
• возможность добавления пользовательского CSS;
• качественная служба поддержки и обширная документация.

Две версии

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

Бесплатная версия Elementor

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

• Drag & Drop редактор страниц. На базовом уровне Elementor позволяет изменять страницы без необходимости использовать код. Редактирование контента происходит простым перетаскиванием элементов;
• редактор адаптивных страниц. Адаптивность – это одна из самых важных функций сайта. Поэтому разработчики добавили редактор, в котором вы можете посмотреть, как страница отображается при разных разрешениях экрана и изменить положение блоков на свое усмотрение;
• более 40 базовых виджетов. Плагин включает в себя более 40 виджетов, которые можно использовать в на любых страницах;
• свыше 30 основных макетов. Уже при бесплатном тарифе вы можете использовать любой из 30 макетов и попробовать изменить их под свои требования.

PRO версия Elementor – есть ли смысл покупать?

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

Платная версия включает в себя тоже, что и бесплатная, но добавляются следующие функции:

• свыше 50 профессиональных виджетов, которые можно установить на страницах сайта и изменить под себя;
• более 300 заготовок профессионального уровня;
• больше 10 полных наборов шаблонов для веб-сайта;
• конструкторы тем, форм и всплывающих окон;
• включена надстройка для WooCommerce – WooCommerce Builder;
• гарантированная профессиональная поддержка и регулярные обновления на 1 год.

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

Редактирование в режиме реального времени

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

Полный контроль при работе с макетом

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

Возможность отмены изменений

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

Оптимизируйте работу с Elementor

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

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

Помимо копирования стилей и элементов, конструктор позволяет работать с горячими клавишами. Чтобы посмотреть полный список быстрых команд, нужно использовать сочетание клавиш «CTRL (CMD) +?».

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

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

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

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

Как отзываются об Elementor профессиональные разработчики

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

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

Модальные окна

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

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

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

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

По умолчанию Elementor предоставляет на выбор три варианта макетов для работы:

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

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

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

Документация и руководство пользователя

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

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

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

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

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

Анимация в Elementor

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

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

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

Добавление своих стилей

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

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

Elementor и WooCommerce Builder

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

• кнопка «добавить в корзину. Стандартная кнопка, позволяющая посетителю добавить товар в корзину;
• цена на товар. Виджет дает возможность установить актуальную цену на товар;
• название и описание продукта. Посетителям важно знать, что они покупают. Поэтому стоит добавить описание товара и помочь им в выборе. Добавить описание можно при помощи через редактор Drag & Drop (то есть, перетаскиванием);
• изображения товара. Покупатели всегда должны видеть товар, который они покупают. В этом и поможет виджет с изображением;
• дополнительные продажи. После того, как пользователи сделают покупку, вы можете предложить им купить еще некоторые товары с сайта;
• альтернативные варианты. Вы можете дать пользователям просмотреть другие варианты товаров, которые они ищут. Это увеличит шансы того, что посетитель купит какой-либо товар;
• рейтинг продукта. После того, как посетитель получил товар, можно предложить ему оценить покупку;
• содержание продукта. В специальном месте вы можете написать характеристики своего продукта;
• навигационная цепочка. Чтобы пользователю было проще ориентироваться на сайте, при переходе по вкладкам будет отображаться путь от главной страницы до той, на которой он находиться в данный момент;
• товар на складе. В виджете вы можете отобразить количество товара на складе.

Многоязычный конструктор

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

Интеграции Elementor

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

• сервисы почтовых рассылок – MailChimp, AWeber и Drip (последний еще является менеджером по работе с клиентами);
• CRM ActiveCampaign;
• программа электронного маркетинга ConvertKit;
• WooCommerce (популярное расширение для электронной коммерции);
• Yoast (плагин для оптимизации сайта под SEO);
• ACF(дополнение, позволяющее добавить кастомные настраиваемы поля на веб-сайт);
• LearnDash (расширение, позволяющее создавать и запускать онлайн-курсы и вести их прямо на сайте);
• Discord – вы можете отправлять формы и уведомления на Discord;
• YouTube – позволяет добавлять на страницы сайта любые видео с YouTube.

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

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

Заключение

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

Красота в дизайне, легкость в навигации,
Информация на каждой странице.
Сайт красивый – как картина в кадре,
Привлекает к себе каждого гостя.

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

Цвета сочетаются и дружат между собой,
Каждый блок на своем месте.
Сайт красивый – как красивая книга,
Приглашает к погружению в него.

Это написал ИИ. Что тут добавить?