WooCommerce + Elementor: давайте создавать классные вещи

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

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

Теперь, если вам интересно, какой плагин для создания страниц WordPress вам следует рассмотреть, вы находитесь в правильном месте. В этой статье мы рассмотрим один из самых популярных вариантов: Elementor, который считается золотым стандартом. Elementor является вторым наиболее часто устанавливаемым плагином WordPress с 2 миллионами активных установок, который используется примерно на 15,9% веб-сайтов WordPress.

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

Плагин Elementor: краткий обзор

Elementor — это визуальный плагин для создания страниц WordPress с функцией перетаскивания, который позволяет создавать уникальные веб-страницы и публикации по сравнению со стандартными шаблонами страниц, которые поставляются с вашими темами WooCommerce или WordPress.

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

Давайте начнем с обзора плагина, взглянув на то, как работает интерфейс Elementor.

Понимание интерфейса плагина Elementor

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

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

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

Вот как просто перетащить нужные элементы на страницу:

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

К таким конструктивным элементам относятся:

• Раздел: отмечен синим цветом.
• Столбец: находится внутри раздела, отмеченного черным. Вы можете добавить в раздел столько столбцов, сколько необходимо.

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

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

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

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

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

Таким образом, Elementor довольно прост в использовании, с простым перетаскиванием и простыми параметрами настройки — вы можете создать сайт своей мечты в кратчайшие сроки.

Теперь, не занимая много времени, давайте сразу перейдем к функциям конструктора страниц Elementor.

Основные функции Elementor, которые делают его отличным конструктором страниц для WooCommerce

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

1. Обширная библиотека готовых шаблонов

Elementor предоставляет широкий спектр шаблонов. Нажмите на значок « Добавить шаблоны » ниже, чтобы добавить шаблон.

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

С момента выпуска Elementor 2.0 эти шаблоны доступны в двух форматах:

• Блоки: предоставьте дизайн для определенных разделов, а не для всей страницы. Например, вы можете добавить раздел « О компании » или предварительно созданный раздел контактов в существующий макет страницы с помощью блоков.

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

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

Это также избавляет от необходимости каждый раз создавать новый дизайн страницы с нуля.

2. Элементы управления адаптивным дизайном и предварительный просмотр на мобильных устройствах

Использование мобильных устройств постоянно растет с каждым месяцем, и около 73,1% веб-дизайнеров считают, что неадаптивный дизайн страницы является одной из основных причин отказа от веб-сайта.

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

Нажмите кнопку « Адаптивный режим» в нижней части боковой панели и просмотрите версию своего веб-сайта для настольных компьютеров, мобильных устройств и планшетов, нажимая кнопки, выделенные на изображениях ниже.

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

Следовательно, он гарантирует, что ваш веб-сайт будет на 100% отзывчивым, поэтому он отлично выглядит на всех устройствах, включая настольные компьютеры, планшеты и мобильные устройства.

3. Безграничные возможности настройки

Настройка Elementor безгранична, и нет ограничений в том, как вы можете создавать свой веб-сайт и его элементы.

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

В то же время меню «Дополнительно» позволяет управлять макетом, эффектами движения, фоном, границей, атрибутами и другими факторами, как показано ниже.

4. Подробные элементы управления макетом

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

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

Используя элементы управления макетом в меню «Дополнительно», вы можете:

• Установите поля и отступы для разделов, виджетов и столбцов вручную.
• Выберите ширину раздела — по умолчанию, полную ширину, встроенную или пользовательскую.
• Настройте положение виджета в столбце — по умолчанию, фиксированное и абсолютное.
• Отрегулируйте зазор между столбцами и создайте пустое пространство для чистого макета.

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

5. Полная история изменений прогресса с отменой/повтором изменений

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

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

6. Оставляет после себя чистый код

Если вы когда-нибудь захотите деактивировать Elementor в будущем по какой-либо причине, вам не нужно беспокоиться о том, что он оставит после себя множество шорткодов, таких как Divi Builder.

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

Дополнительные функции Elementor

Вот еще несколько возможностей плагина конструктора страниц Elementor:

• Редактор верхних и нижних колонтитулов: вы можете легко редактировать верхние и нижние колонтитулы своего сайта с помощью Elementor без каких-либо навыков программирования.
• Встроенное редактирование текста: эта функция позволяет редактировать текст прямо на экране, что упрощает редактирование существующего текстового контента или создание сообщений в блоге.
• RTL и готовый перевод: Elementor поставляется на 23 переведенных языках, и вы можете легко перевести его на дополнительные языки благодаря полной поддержке языка RTL.
• Виджеты WooCommerce: он предоставляет предварительно созданные виджеты WooCommerce, такие как прайс-листы и таблицы цен, чтобы упростить создание веб-сайтов электронной коммерции.
• Сторонние интеграции: Elementor поддерживает сторонние интеграции, включая ActiveCampaign и MailChimp.
• Глобальные цвета и параметры типографики: Elementor позволяет вам устанавливать глобальную типографику и цвета для создания всеобъемлющего дизайна на всех страницах. Кроме того, вы также можете выбрать один из 800+ шрифтов Google для дизайна вашего сайта.
• Режим обслуживания: вы можете использовать шаблоны режима обслуживания Elementor, чтобы перевести свой сайт в режим обслуживания.

Элементор Про Обзор

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

Вот краткий обзор некоторых функций нового плагина Elementor Pro:

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

Таким образом, если вам нужны дополнительные функции, шаблоны премиум-класса и глобальные виджеты — вы можете выбрать плагин Elementor Pro всего за 49 долларов.

Обзор цен на Elementor

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

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

Планы Essential, Expert, Studio и Agency плагина Elementor стоят 49, 199, 499 и 999 долларов в год. Таким образом, Elementor предназначен для всех, и независимо от того, являетесь ли вы веб-дизайнером, разработчиком или владельцем агентства, Elementor предоставляет функции для любых потребностей и запросов.

Заключение: окончательный вердикт

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

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

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