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

Здравствуйте, читатели блога «Pro-Wordpress»! Landing Page сейчас – явление широко распространенное в сфере интернет-маркетинга. И не без оснований. При правильном применении это мощный инструмент для превращения посетителей сайта в клиентов. Если вы пришли к выводу, что вашему проекту нужна посадочная страница, то без труда сможете найти агентство, которое разработает лендинг. Или же вы можете попробовать сделать это самостоятельно.

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

Содержание:

1. Посадочная страница: чему она служит?
2. Как самому сделать лендинг пейдж: структура и советы по оптимизации
3. Как выбрать шаблон целевой страницы: основные критерии
4. Обзор плагинов Landing Page для WordPress

Что нужно знать о Landing Page?

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

Landing Page (буквально – «страница посадки») – это одна веб-страница, сделанная с целью повышения конверсии вашего проекта, на которую пользователь попадает по ссылке из другого источника (речь идет о контекстной рекламе). Такая страница максимально подталкивает посетителя к совершению целевого действия.

Это достигается за счет того, что лендинг пейдж разрабатывается только под одно предложение и подразумевает совершение единственного возможного действия. Здесь работает принцип «buy or die!» («купи или умри»), то есть размещенный на посадочной странице контент не допускает никаких альтернативных действий потенциального клиента, кроме совершения того одного, под которое он написан.

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

В зависимости от желаемых действий, целями создания лендингов являются:

1. получение контактных данных посетителя, в основном речь идет об email. Таким образом происходит формирование базы данных пользователей. Далее, с помощью email-маркетинга, из участников такого списка можно сделать полноценных клиентов. Чтобы вы захотели оставить свои контакты, в обмен на них целевая страница предлагает некий бонус, зачастую это: скачать какой-то курс без оплаты, получить бесплатную консультацию и т.п. Вот классический пример такого варианта:
   

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

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

   

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

Как сделать качественную посадочную страницу?

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

Анализ потребительского поведения выявил, что потенциальный клиент проходит  5 основных этапов: внимание — интерес – желание – действие – удовлетворение/неудовлетворение. На основе этой информации была разработана определенная структура посадочной страницы, призванная обеспечить максимальную отдачу. Давайте рассмотрим основные ее блоки и элементы, наполняющие их.

Первый «кирпичик» идеального лендинг пейдж на WordPress и не только – первый экран. Это тот самый блок, условно можно назвать его шапкой, который виден посетителю сразу после загрузки страницы до момента скроллинга. Суть первого экрана – в привлечении внимания пользователя с целью удержать его на странице как можно дольше. Он должен быть спроектирован таким образом, чтобы «цеплять» гостя и вызывать у него желание изучить остальной контент. Какие же компоненты располагаются в этой части посадочной страницы?

1. Логотип. Не обязательный, но желательный элемент. Его присутствие позволяет идентифицировать вас и тем самым увеличивает степень доверия к вашей компании.
2. Дескрипт. Короткий текст, описывающий, чем вы занимаетесь, на чем специализируетесь.
3. Контакты. Еще один инструмент повышения доверия. Преимущественно это номер телефона и кнопка заказа обратного звонка, но допускаются и другие удобные способы связи.
   Схематически верхняя полоса целевой страницы может иметь такой вид:
4. Заголовок. Уникальное торговое предложение (УТП) — это то, под что создан лендинг. И вполне закономерно, что именно в заголовке оно и должно находиться. Именно заголовок с первых секунд пребывания на сайте говорит посетителю, что он перешел по правильному адресу и о чем здесь будет идти речь.
   Чтобы максимально исчерпывающе передать УТП, прибегают к такому стандарту:
    — основной заголовок. Эта часть лаконичная, ярко выраженная (с точки зрения дизайна). Продающий заголовок значительно влияет на конверсию. Для формирования основной части следует использовать релевантные слова, т.е. те, которые приводят посетителей из поисковиков на целевую страницу;
    — подзаголовок. Может использоваться для уточнения основного заголовка или обозначения еще одной выгоды.
5. Изображение/видео как демонстрация продукта или услуги. Должны быть исключительно высокого качества. Картинка или ролик могут служить нескольким целям: способствовать усилению эмоции, ассоциирующейся с УТП, иллюстрировать пользу или взаимодействие с продуктом.
6. Кнопка СТА. СТА – Call To Action, призыв к действию, размещается на кнопке. Именно этот элемент и становится первым из рычагов, конвертирующих потенциального клиента в реального.
   Данная кнопка призывает посетителя совершить желаемое действие. И поскольку она имеет очень важную миссию, ее оформлению стоит уделить внимание. Если вам предстоит создать Landing Page самому, проследите, чтобы кнопка  содержала предельно понятный и четкий призыв к действию («Записаться на тест-драйв», «Заказать бесплатную консультацию»), имела контрастное по отношению к фону цветовое оформление, была большой и кликабельной.
   
7. Иногда на первом экране размещается форма обратной связи. Таким образом структура лендинга позволяет легко найти этот элемент среди прочего контента. Число полей формы должно быть минимальным и требовать от посетителя только самую необходимую для вас информацию. Оптимально: email и имя.

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

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

• перечень услуг, предлагаемых заказчику и процесс их предоставления;
• детальное описание выгод, получаемых клиентом;
• технические характеристики товара;
• 3D-изображения;
• варианты/версии/разновидности и их основные различия;
• калькулятор, онлайн-конвертер и подобные сервисы;
• результаты исследований, статистические данные, графики и т.д.

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

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

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

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

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

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

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

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

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

Чтобы сделать Landing Page на WordPress действительно продающим, особое внимание стоит уделить закрытию возражений. Возражения клиента – это доводы пользователя, почему он не хочет приобрести товар или услугу. Например: «у вас дорого», «я встречал дешевле», «какие гарантии качества?», «а если вы возьмете предоплату и исчезнете?», «не знаю, какой вариант выбрать», «а точно успеете за 3 дня?», «и какой результат я получу, если схожу на ваш семинар?». То есть допускается ситуация, что ваше УТП интересно потенциальному клиенту, но у него возникают сомнения. Эти сомнения вам и необходимо предвидеть.

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

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

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

Особенности шаблона для посадочной страницы

Мы с вами уже знаем, как устроен сам механизм посадочной страницы. Но как выбрать тему Landing Page для WordPress, чтобы иметь возможность разместить в ней все необходимые элементы и сделать их работу эффективной?

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

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

• желательно, чтобы высота первого экрана не превышала 700 пикселей;
• основной заголовок (h1) рекомендуется размещать слева или по центру. Он должен иметь хорошую читаемость, поэтому, если фон первого экрана не однотонный, сложный, обратите внимание на то, чтобы под текстом располагалась полупрозрачная подложка;
• форма и кнопка СТА должны быть контрастными по отношению к фону (если фон темный – форма светлая, и наоборот, а кнопка призыва к действию — яркая). Количество полей — минимальное;
  
• отдайте предпочтение теме, в которой используются шрифты без засечек и в количестве не более двух;
• выбирая шаблоны лендинг пейдж для Вордпресс, остановитесь на тех вариантах, где много свободного пространства. Что это значит? Следует избегать нагромождений текста и изображений. Стиль минимализма дает возможность сконцентрировать внимание потенциального клиента на основном и выделить кнопки СТА.

При желании, овладев основами, вы можете самостоятельно отредактировать файлы шаблона, файл стилей style.css, изменить  или добавить шрифт по своему вкусу и в соответствии с вашим УТП. Это предоставит вам большую свободу в выборе темы для создания Landing Page на WordPress.

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

Плагины Вордпресс для создания посадочной страницы

Среди популярных платных инструментов для создания лендингов  на WP хорошо зарекомендовали себя: wPPage, Visual Composer, Optimize Press, Thrive Landing Pages, InstaBuilder, Divi Builder. Все они имеют практически идентичный функционал, принцип работы и основные особенности:

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

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

Представителями наиболее востребованных из бесплатных плагинов для лендинг пейдж на Вордпресс являются: WordPress Landing Pages, (Ultimate) Landing Page, Free Landing Pages Builder by Wishpond, WPLead, Long Form Storybuilder.  

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

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

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

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

Теперь мы находимся в конструкторе плагина. Здесь расположены основные кнопки, с помощью которых мы будем собирать лендинг, и кнопка «Вернуться в редактор» («Revert to Editor»).

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

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

Готовый макет («Layouts»). Здесь, как понятно из названия, можно подобрать готовый макет. Если есть необходимость очистить содержимое главной страницы, жмите на кнопку с иконкой гаечного ключа над полем редактора Page Builder и выберите в выпадающем списке «Удалить строку».

Теперь переходим на вкладку готовых макетов. Выбираем пункт «Layouts Directory», кликаем «Enable». Тем самым мы загружаем библиотеку готовых шаблонов посадочных страниц.

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

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

В выбранном мною макете первый экран представлен слайдером. В схематическом отображении страницы это – первая строка «SiteOrigin Slider». Наводим на нее курсор мышки и нажимаем «Редактировать». В открывшемся окне мы можем загрузить пользовательские картинки для слайдера, вместо представленных (поля «Frame» — «Background Image»), добавить новые («Add») и произвести ряд настроек для слайдшоу.

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

Переходим к оставшимся кнопкам конструктора. Именно они помогут нам сделать лендинг пейдж на WordPress с нуля.

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

Перейдем на вкладку. Изначально строка разбита на 2 равных колонки. Мышкой мы можем расширять и сужать границы каждой из них, предварительно выбрав, сколько колонок должно быть в нашем макете строки. Если выбрать 1 колонку, она будет занимать 100% ширины.

Устанавливаем нужные параметры и жмем «Вставить». Выбранная конструкция отображается в редакторе Page Builder.

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

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

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

Сегодня мы с вами узнали, как сделать Landing Page на WordPress таким образом, чтобы получать максимальную отдачу от использования этого маркетингового инструмента. Теперь нам известно, какая структура и дизайн шаблона оптимальны для достижения цели посадочной страницы – привести пользователя к совершению целевого действия. А плагины для создания лендингов на Вордпресс, которые были рассмотрены в статье, помогут вам сделать эффективную целевую страницу и повысить конверсию.