Как создать целевую страницу с помощью Elementor и PowerPack

WordPress упростил создание своего присутствия в Интернете для всех, будь то блог, бизнес-сайт или сложная ERP. Темы и плагины WordPress позволяют пользователям легко создавать свои веб-сайты, не беспокоясь о найме эксперта. Плагины Page Builder сыграли жизненно важную роль в изменении способа создания веб-сайтов с помощью WordPress. Elementor - один из таких популярных плагинов для создания страниц.

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

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

Что такое Elementor?

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

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

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

Особенности Elementor

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

Быстрый и простой в использовании

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

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

Готовые шаблоны страниц

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

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

Загружен виджетами

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

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

Конструктор всплывающих окон Elementor

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

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

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

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

Создавайте части темы, такие как верхний колонтитул, нижний колонтитул, архивы и т. Д.

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

Динамический контент

С помощью функции динамического содержимого в Elementor Pro вы можете отображать динамические данные / контент из настраиваемых полей WordPress, ACF, Toolset, Pods, MetaBox или любого другого плагина настраиваемых полей. Вы можете использовать данные из настраиваемых полей и отображать их с помощью виджетов Elementor в любой части вашего сайта. Вы можете узнать больше о динамическом контенте здесь.

Lite и Pro версии

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

PowerPack для Elementor

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

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

В настоящее время в Pro-версии PowerPack есть более 50 виджетов, и команда продолжает добавлять новые виджеты, что делает его отличным выбором среди надстроек Elementor.

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

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

Создание целевой страницы

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

Убедитесь, что на вашем сайте установлены и Elementor, и PowerPack. Вы можете получить бесплатные версии по ссылкам ниже:

1. Элементор
2. PowerPack Lite для Elementor

Создание страницы с Elementor

Войдите в свою панель администратора WordPress и нажмите кнопку « Добавить» в разделе « Страницы» . Теперь дайте своей странице заголовок / имя и нажмите кнопку « Редактировать с помощью Elementor» .

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

Начнем с первого раздела . Прежде чем мы это сделаем, измените макет на Elementor Canvas , щелкнув маленький значок настроек в нижнем левом углу редактора.

Шаг 1: Раздел героев

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

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

Теперь вы можете выбрать желаемое изображение для фона на вкладке «Стиль»> «Тип фона»> «Классический» и выбрать изображение на мультимедийном дисплее.

У нас есть готовый фон. Теперь давайте добавим заголовки и кнопку в наш раздел героев.

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

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

После того, как вы внесли изменения, перетащите еще один виджет заголовка под двойным заголовком и измените настройки текста и типографики на такие же, как требуется, здесь я изменил размер текста на 90 , шрифт на Элси и вес шрифта на 600 .

Теперь добавим кнопку CTA .

Перетащите виджет «Кнопка Elementor» в раздел сразу под виджетом «Заголовок». Теперь приступим к изменению настроек кнопки.

Вот изменения, которые я внес в кнопку:

• Текст изменен на " Заказать сейчас!"
• Выровняйте кнопку по центру.
• Добавлена ссылка CTA
• Типографика изменена на Элизу; 24; 600 для шрифта, размера и веса соответственно.
• Цвет фона изменен на красный ( # ff0000 ), а цвет шрифта на белый ( # ff0000 ).
• Добавлены отступы 18, 40, 18, 40 для верхней, правой, нижней и левой сторон соответственно.

После внесения изменений так выглядит раздел героев.

Шаг 2. Раздел "О нас"

Теперь мы будем работать над разделом «О нас». Давайте добавим на страницу структуру из двух столбцов, щелкнув значок «+».

Теперь мы нацелены на создание макета, подобного этому, поэтому мы добавим виджет заголовка, виджет текстового редактора и виджет отзывов в левый столбец. В правый столбец мы добавим виджет «Заголовок», виджет «Текст» и виджет «Кнопка».

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

Вот как это будет выглядеть:

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

Теперь мы добавим виджет Testimonial Carousel под виджетом текстового редактора. Добавьте «Предметы» или характеристики, которые будут отображаться на вашем веб-сайте. Вы также можете использовать виджет Testimonials от PowerPack, который предлагает гораздо больше возможностей для настройки.

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

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

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

Вертикально выровняйте правый столбец в середине от редактирования столбца> раскладка> Вертикальное выравнивание и у вас есть о разделе готов!

Это окончательный результат раздела О программе:

Шаг 3. Раздел с призывом к действию «Узнать больше»

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

Итак, мы хотим, чтобы наш конечный результат выглядел так:

Вы заметили здесь что-нибудь подобное?

Да! Заголовок, текстовый редактор аналогичны тому, который мы уже создали ранее. Итак, вместо того, чтобы переделывать все виджеты, мы просто скопируем их и перетащим на место.

Давай сделаем это!

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

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

Вот как выглядит раздел:

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

Шаг 4: раздел "Контакты / заказ"

Это раздел CTA, который поможет пользователю разместить заказ. Итак, что должен включать весь этот раздел? Посмотрим, на что мы нацелены здесь.

Нам нужно создать два виджета заголовка и текстового редактора, контактную форму и виджет меню прайс-листа с помощью PowerPack.

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

Вы можете использовать виджет «Формы» в Elementor Pro для создания контактной формы простым перетаскиванием. Как только вы это сделаете, на странице появится контактная форма. Теперь вы можете вносить дополнительные изменения в формы. Вот внесенные мной изменения:

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

Если вы используете какой-либо плагин контактной формы, такой как Gravity Forms, WPForms, Ninja Forms и т. Д., Вы можете использовать виджет стилизатора форм PowerPack для стилизации формы с помощью Elementor.

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

Участвуйте в розыгрыше прямо сейчас!

Розыгрыш PowerPack, организованный Cloudways

Завершение!

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

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

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