Как создать лендинг на вордпресс: Как сделать лендинг на WordPress: разбираемся пошагово

что это такое, его возможности, как установить и создать лендинг

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

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

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

В этой статье узнаете, как пользоваться плагином, рассмотрим особенности, функционал, узнаем его лучшие функции.

Содержание

• 1 Что такое Elementor в WordPress и для чего он нужен
• 2 Возможности плагина
• 3 Как установить и настроить плагин Elementor
• 4 Чем Elementor отличается от Elementor PRO
• 5 Как сделать лендинг в Элементор: пошаговая инструкция
  • 5. 1 Шаг 1. Создание новой страницы или записи
  • 5.2 Шаг 2. Начало работы в редакторе
  • 5.3 Шаг 4. Создаем блок с изображением
  • 5.4 Шаг 5. Создание текста на изображении
• 6 Строки, колонки, элементы в бесплатной версии
• 7 Готовые блоки, шаблоны страниц в Elementor
• 8 Заключение

Что такое Elementor в WordPress и для чего он нужен

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

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

1. Плагин облегчает процесс создания контента;
2. Имеется библиотека готовых шаблонов;
3. Совместимость со всеми плагинами и элементами в WordPress;
4. Возможность редактирования и сохранения выбранных шаблонов;
5. Elementor позволяет редактировать страницы с предпросмотром в интерфейсе редактора.

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

Сегодня это самый популярный и успешный плагин в WordPress.

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

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

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

Все настройки параметров основаны на виджетах: в бесплатном доступе их более 90.

Ознакомимся с некоторыми из них:

• внутренний раздел;
• заголовок;
• изображение;
• видео;
• отзыв;
• кнопка.

Как установить и настроить плагин Elementor

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

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

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

У плагина есть настройки начального уровня, которые можно посмотреть в разделе «Elementor» > «Настройки«. Пользователь может установить размер контейнера, выбрать типы записей, с которыми будет работать редактор. Это базовые настройки, влияющие на весь сайт:

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

Чем Elementor отличается от Elementor PRO

Существует платная и басплатная версии. Редактор содержит более 90 элементов, которые подразделяются на платные, общие, базовые и WooCommerce (интернет-магазин на Elementor WordPress).

Основные (бесплатные) виджеты необходимы каждому сайту, например:

• заголовок. Написание нужного текста, выбор шрифта, цвета, интервала и т.д.;
• видео. Возможность добавления роликов с разных видео хостингов: Rutube, YouTube, Vimeo и других источников;
• отзывы. Публикуйте отзывы пользователей с возможностью прикрепления фотографии и подписи;
• иконки социальных сетей. Добавление ссылок на социальные сети ваших компаний, партнеров, горячей линии и т. д.;
• кнопка. Настройка внешнего вида, текста и ссылок в кнопках.

Виджеты Pro версии содержат более масштабный функционал:

• анимированный заголовок. Анимация привлекает внимание пользователей;
• медиа-карусель. Добавьте медиа-карусель или слайдер, которые наглядно демонстрируют изображения и видео;
• прайс-лист. Создавайте идеальное меню, соответствующее стилю ресторана, с помощью простого визуального редактора;
• вход в систему. С помощью Elementor Pro можно добавить форму входа на любую страницу и полностью настроить поля формы, кнопку, фон и другие параметры;
• формы. Создавайте красивые формы с помощью встроенного в WordPress конструктора drag & drop. Код не требуется и предоставляется полный контроль.

Если стоит задача создать крупный проект с разными фишками и привлекательным внешним видом, Pro версия плагина необходима. Когда нужно воссоздать нечто попроще, можно воспользоваться бесплатным доступом (мне хватает бесплатной версии:)).

Благодаря данным инструментам можно создать блог от простого описания услуги до крупномасштабного интернет-магазина или сайта организации.

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

Как сделать лендинг в Элементор: пошаговая инструкция

Шаг 1. Создание новой страницы или записи

Для того, чтобы создать страницу на панели инструментов, переходим во вкладку «Страницы» > «Добавить новую«. Перед вами откроется редактор блоков Гутенберг. Определяемся с названием страницы лендинга и нажимаем «Опубликовать» > «Опубликовать» > «Редактировать в Elementor«:

Шаг 2. Начало работы в редакторе

На созданной новой странице нужно перейти в холст для этого в левом нижнем углу, нажимаем на «Шестеренку» > в «Макет страницы» выбираем «Холст Elementor«:

Шаг 4. Создаем блок с изображением

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

Далее нужно выставить настройки для картинки. Переходим в «Макет» нажимаем на выпадающее меню в «Высота» > «По размеру экрана«, возвращаемся в «Стиль» и в выпадающих меню (вы выбираете настройки, которые нужны вам):

• «Позиция» выбираем «Центр Центр«
• «Привязка» выбираем «Закрепить«
• «Повтор» выбираем «Не повторять«
• «Размер» выбираем «Перекрыть«

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

Шаг 5. Создание текста на изображении

Нажимаем на «квадратик в виде 9 точек» в левом верхнем углу, далее зажимаем элемент «Заголовок» и перетаскиваем его на изображение в «+«:

В поле «Введите текст заголовка» пишем свой текст. После чего где «Размер» выбираем нужный (у меня «Огромный«) и в «Выравнивание» выравниваем. Далее идем в «Стиль» и там выбираем цвет текста, и в «Типографика» (размер, интервал и т.д.):

Строки, колонки, элементы в бесплатной версии

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

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

Библиотека шаблонов обширна, даже в случае с бесплатной версией. Находим рядом с «+» изображение папки, после нажатия на папку открывается каталог блоков и шаблонов. Стоит добавить, что большинство самых крутых шаблонов доступно только в Pro версии:

Вот такой лендинг я делал без шаблонов, самостоятельно:

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

Внимание! Ограниченное предложение! Вы можете сэкономить 70% от текущей стоимости. Нажмите на ссылку ниже, перейдите на страницу, выберите тариф: «Начальный” «Продвинутый” либо «Профессионал«. Обязательно ВВЕДИТЕ этот купон BLG70 и Вы получите дополнительную скидку 70%.

Перейти на страницу:
https://valera24.ru/professionalnye-odnostranichniki-samostojatelno-i-besplatno/

Заключение

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

Автор — Валерий Москаленко

Маркетолог, вебмастер, блогер с 2011 года. Люблю WordPress, Email маркетинг, Camtasia Studio, партнерские программы)) Создаю сайты и лендинги под ключ НЕДОРОГО. Обучаю созданию и продвижению (SEO) сайтов в поисковых системах. Мои контакты >>>

---

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

Создание Landing Page на WordPress

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

Конечно, есть множество способов создать Landing Page, но в данной статье рассмотрю способы создать одностраничник на WordPress.

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

Итак, я вижу всего 3 варианта создания лендинга на вордпрессе:

1. Поиск или создание темы-лендинга;
2. Вставка на страницу кода лендинга, созданного другим способом
3. Поиск или создание плагина для лендинга.

Landing с помощью темы WordPress

Этот вариант я считаю самым лучшим, т.к. ни один плагин не даст вам такого функционала как php код, на котором пишутся страницы для WP.

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

Идеально будет написать страницу самому или нанять для этого фрилансера.

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

Примером таких тем является Zerif Lite и его производные.

Вставка кода лендинга

Нельзя исключать возможность вставки на страницу вордпресса html кода, написанного самостоятельно или сгенерированного сервисами для создания лендингов.

Ярким примером такого сервиса может быть сервис tilda.cc и аналоги.

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

Landing с помощью плагинов

Плагины решают большинство проблем на WordPress, и, благодаря популярности этой CMS, выбор достойного плагина тоже займёт время.

Я сразу скажу, что посмотрел далеко не все варианты, но впечатлить меня смогли только 2 плагина: Elementor и Page Builder от SiteOrigin.

Page Builder от SiteOrigin

Результат работы этого плагина интересен, но всё равно уступает созданию отдельного шаблона.

Количество установок (более миллиона) говорит нам о том, что плагин популярен и, возможно, имеет не плохой функционал.

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

Elementor

Возможно я зря уделил этому плагину так мало времени, но он всё равно установлен у меня на сайте.

На момент написания этой статьи имеет 100 000 установок и свежие обновления.

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

Из самого интересного:

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

Как скрыть элементы темы на WordPress?

Изначально предполагается, что любая страница созданная на WordPress будет находиться в заданных ей рамках. Можно, конечно, разрешить странице использовать шаблон на всю ширину, но как скрыть элементы темы на вордпресс(header и footer), если они не нужны?

Если у вас достаточно навыков, то вы наверняка сможете сделать это внеся правки в WP шаблон, но есть и более простое решение.

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

Альтернативное решение или WP Maintenance

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

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

Из всего многообразия плагинов подошёл только WP Maintenance, так как он единственный предоставил мне весь экран.

 

Как создать целевую страницу с формой в WordPress

Ищете способ создать целевую страницу с формой для своего сайта WordPress?

Целевая страница WordPress с контактной формой — это практически все, что вам нужно для преобразования веб-трафика в потенциальных клиентов и продажи. Но как это сделать? Вам нужно создать целевую страницу в HTML? Или контактная форма в HTML? Или оба?

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

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

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

Звучит хорошо? Давайте углубимся.

Что такое целевая страница контактной формы?

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

Короче говоря: целевая страница — это машина для конверсии на вашем сайте.

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

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

• Кнопка «Купить»
• Формы регистрации
• Кнопка воспроизведения мультимедиа

И многое другое!

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

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

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

Мы рекомендуем использовать SeedProd.

SeedProd — лучший конструктор целевых страниц WordPress на рынке. В этой статье мы собираемся использовать SeedProd для создания вашей первой целевой страницы. Если вы не уверены на 100%, что это правильный конструктор целевых страниц, вам следует ознакомиться с нашим обзором SeedProd.

Итак, приступайте!

Шаг 1. Установите подключаемый модуль SeedProd на свой сайт

Сначала вам необходимо посетить веб-сайт SeedProd и приобрести подключаемый модуль. Затем вы можете загрузить файл плагина на свой компьютер. Затем скопируйте лицензионный ключ плагина с панели управления SeedProd.

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

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

Шаг № 2. Создайте целевую страницу с помощью SeedProd

На экране приветствия SeedProd прокрутите вниз и нажмите Создайте свою первую страницу кнопка:

Затем вы увидите 5 различных типов целевых страниц, которые вы можете создать:

Используя шаблоны SeedProd, вы можете быстро запускать сложные страницы, такие как:

• Скоро и режим обслуживания Страницы
• Страницы входа
• 404 Страницы

И если вы прокрутите немного вниз, вы можете запустить пользовательскую целевую страницу из готовых шаблонов. Нажмите Добавить новую целевую страницу :

Затем выберите шаблон целевой страницы из предварительно созданных целевых страниц, перечисленных в конструкторе SeedProd:

Не торопитесь и выберите подходящий шаблон для вас. Чтобы выбрать шаблон, просто щелкните значок галочки на шаблоне.

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

Шаг № 3. Настройка шаблона целевой страницы

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

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

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

Например, вы можете перетащить таймер обратного отсчета, чтобы увеличить срочность:

Когда вы закончите, нажмите Сохранить .

Шаг №4: Добавьте контактную форму WordPress

Далее вам нужно выбрать плагин контактной формы WordPress.

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

Мы рекомендуем использовать WPForms для создания контактных форм на вашем сайте WordPress.

WPForms — плагин №1 для создания форм WordPress с более чем 3 миллионами пользователей. Вы получаете конструктор форм перетаскивания, а это значит, что вы можете создавать формы WordPress с невероятными функциями за считанные минуты.

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

Установите и активируйте плагин. Как только это будет сделано, пришло время создать вашу первую форму. Перейдите к WPForms »Добавить новый :

Это откроет конструктор форм перетаскивания WPForms.

Чтобы создать новую форму, дайте ей имя и выберите шаблон формы:

Вот и все! если вы хотите добавить или отредактировать поля в контактной форме, вы можете сделать это на боковой панели. Перетащите поля формы, чтобы добавить новые, и нажмите на существующие поля, чтобы отредактировать их:

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

Если вам нужно более подробное руководство, ознакомьтесь с этой статьей о том, как создать контактную форму WordPress.

Шаг № 5. Подключите службу маркетинга по электронной почте

Многие малые предприятия собирают потенциальных клиентов со своей целевой страницы вместо того, чтобы что-то продавать. Если вы создаете целевую страницу для сбора потенциальных клиентов на своем сайте, вам нужно создать подписку. Затем подключите свою подписку к поставщику услуг электронной почты, например, к Constant Contact.

Для этого перейдите на вкладку Подключить в конструкторе SeedProd и выберите поставщика услуг электронной почты из списка:

Далее нажмите  Подключить новую учетную запись :

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

Шаг № 6. Опубликуйте целевую страницу

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

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

Вы можете нажать на See Live Page  , чтобы просмотреть целевую страницу. Готово!

Что делать после создания целевой страницы с формой

На этом все, ребята!

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

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

Не убежден? Ознакомьтесь со следующими ресурсами:

• 7 разумных стратегий повышения вовлеченности клиентов
• Эффективны ли push-уведомления? 7 статистических данных + 3 совета эксперта
• Как настроить push-уведомления о брошенной корзине (простое руководство)
• Как добавить плагин WordPress для веб-уведомлений на свой сайт

Мы рекомендуем использовать PushEngage для создания кампаний push-уведомлений. PushEngage — программа для push-уведомлений №1 в мире. Итак, если вы еще этого не сделали, начните работу с PushEngage уже сегодня!

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

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

Хотите знать, можно ли создать целевую страницу с помощью редактора блоков, который был выпущен как часть WordPress 5.0? Это действительно так, и этот пост покажет вам, как это сделать.

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

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

Что такое новый редактор блоков в WordPress?

Редактор блоков — это совершенно новый редактор контента, который стал редактором по умолчанию в WordPress 5. 0. Во время разработки новый редактор назывался «Гутенберг». Однако, поскольку он стал частью ядра, теперь это просто «редактор WordPress» или «редактор блоков», если вы хотите быть более конкретным.

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

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

Краткий обзор интерфейса редактора блоков

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

Чтобы добавить новые блоки, вы будете работать во всплывающем окне слева. А после добавления блока вы сможете настроить важную информацию, например цвета, на боковой панели справа:

.

Существует пять уникальных разделов для разделения блоков, которые вы можете использовать:

• Общие блоки — содержит все общие элементы, такие как абзац, заголовок, список, цитата и другие основные элементы содержимого.
• Форматирование — подходит для добавления пользовательского кода, редактирования блока в редакторе WP (классический) или добавления таблицы.
• Элементы макета — содержит элементы для улучшения общего макета, такие как столбцы.
• Виджеты — позволяет добавлять обычные виджеты WordPress в ваши проекты.
• Embeds — помогает встраивать контент с внешних платформ, таких как YouTube, Twitter и многих других.

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

Как создать лендинг с помощью редактора блоков в WordPress

Чтобы дать вам представление о том, что вы узнаете, вот базовая целевая страница, которую мы создадим с помощью нового редактора блоков:

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

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

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

После того, как вы настроили свой веб-сайт, все, что вам нужно сделать, это перейти на страниц → Добавить новый и начать работу.

Шаг 1. Выберите макет страницы

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

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

Шаг 2. Спланируйте базовый дизайн целевой страницы

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

Например, если вы пытаетесь продать услугу, может быть важно, чтобы на вашей целевой странице была таблица цен (если это так, плагин Otter Blocks предоставляет вам блок для этого). Или, если вы пытаетесь расширить свой список адресов электронной почты, вам может понадобиться форма подписки по электронной почте в центре.

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

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

Одним из распространенных подходов является использование Z-шаблона. Этот шаблон хорош для страниц с минимальным содержанием.

Z-правило основано на том, что пользователь начинает просматривать страницу слева направо в строке меню, затем переходит в левый нижний угол, а затем снова переходит в правую сторону (при условии, что страница не содержание тяжелое). Этот дизайн используется некоторыми популярными платформами, такими как Shopify, Facebook и многими другими.

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

Шаг 3. Используйте блоки для добавления элементов на целевую страницу

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

В нашем примере я начну с основного заголовка и подзаголовка.

Заголовок, подзаголовок и фоновое изображение

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

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

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

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

Чтобы добавить текст, вам просто нужно нажать и ввести.

Основной призыв к действию (CTA)

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

И вот как все выглядит в режиме предварительного просмотра:

Подробная информация о продукте/коробка с обзором

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

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

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

После добавления контента и изображения в блок Media & Text

. Это будет выглядеть так:

Последний призыв к действию (CTA)

Чтобы добавить последний призыв к действию в конце целевой страницы, вы можете использовать еще один блок Button . Или, если вы предпочитаете вместо этого использовать форму, плагин WPForms включает собственный блок WPForms , который можно использовать для встраивания формы любого типа.

Собираем все вместе

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

Несмотря на то, что вы не могли видеть его во время работы в редакторе блоков, шаблон Neve без боковой панели дает вашему окончательному дизайну много свободного места во внешнем интерфейсе.