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

* ОБНОВЛЕНИЕ: Поскольку многим из вас эта статья показалась интересной, мы в ProteusThemes решили избавить вас от всех хлопот и создали тему WordPress GrowthPress, которая включает в себя, среди прочего, целевую страницу для лидогенерации с высокой степенью конвертируемости.

У вас были проблемы с настройкой целевых страниц с существующей темой WordPress? Следуйте этому простому руководству и создайте собственную целевую страницу WP уже сегодня!

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

Page Builder от SiteOrigin — самый популярный бесплатный плагин WordPress для создания страниц, который входит в топ-20 плагинов WordPress всех времен с более чем 1 миллионом активных установок. Это тот же конструктор страниц, который мы используем в наших темах WordPress, и мы твердо убеждены, что это лучшее решение для создания страниц на рынке.

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

Что такое целевая страница лидогенерации?

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

Краткая история или целевые страницы лидогенерации

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

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

С появлением таких инструментов целевые страницы лидогенерации стали более сложными, и сегодня они интегрируются с другими инструментами, такими как платформы электронного маркетинга и инструменты CRM.

Как и когда использовать целевые страницы лидогенерации

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

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

Продвигайте один продукт или услугу

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

Увеличение количества регистраций на вебинар

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

Продвигайте свой информационный бюллетень

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

Сегментируйте свою аудиторию

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

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

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

Удовлетворение различных источников трафика

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

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

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

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

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

Хорошая целевая страница должна иметь:

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

На хорошей целевой странице не должно быть:

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

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

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

Давайте начнем

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

• Нажмите « Создать » на верхней панели инструментов администратора WP.
• Перейдите на страницы и нажмите « Добавить новую » на боковой панели.
• Или нажмите кнопку « Добавить новую » в верхней части страниц.

После того, как вы создадите новую страницу, вам нужно будет перейти на эту страницу и скрыть с нее все элементы по умолчанию. Поэтому посетитель не сможет так просто покинуть ваш сайт. Единственный способ покинуть целевую страницу — нажать «X» на вкладке браузера. Это трюк номер один при разработке целевой страницы.

Скрыть все элементы текущей страницы WordPress

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

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

Чтобы скрыть элементы по умолчанию, такие как верхний и нижний колонтитулы и боковая панель на вашем сайте WordPress, используйте свойство CSS display: none; для всех элементов, которые уже показаны на вашей вновь созданной странице.

В моем случае мне нужно скрыть два элемента заголовка и два элемента нижнего колонтитула. Это код, который я вставил в дополнительный CSS в WP Customizer («Внешний вид»> «Настроить»> «Дополнительный CSS»).

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

Как найти классы элементов, которые вы хотите скрыть?

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

Когда вы найдете родительский div элемента, который хотите скрыть, просто скопируйте/вставьте имя класса в свой настройщик. В моем случае это имя header__container .

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

Как узнать идентификатор страницы в WordPress?

Перейдите в WP Admin > Страницы > Ваша целевая страница, и вы увидите что-то вроде этого в URL-адресе этой страницы:

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

Теперь, когда у нас есть чистая белая страница без всего, мы можем приступить к созданию нашей целевой страницы. Для начала установите плагин под названием Page Builder от SiteOrigin и SiteOrigin Widgets Bundle (Плагины > Добавить новый > Поисковые плагины).

Затем перейдите на свой сайт (Страницы > Все страницы > Ваша страница) и нажмите на вкладку Конструктор страниц .

Затем нажмите кнопку « Добавить виджет» и выберите виджет SiteOrigin Image . Новый виджет должен появиться ниже. Мы вставим наш логотип в этот виджет. Для этого вам нужно щелкнуть Виджет > Выбрать медиа и выбрать свой логотип. Если вы еще не загрузили свой логотип, загрузите его сейчас. Когда вы закончите, нажмите «Установить носитель».

Так как мы хотим, чтобы наш логотип располагался по центру, щелкните Image Alignment и выберите Center . Когда будете готовы, нажмите Готово .

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

Теперь пришло время для зоны героя.

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

Нажмите на строку « Добавить», установите строку из двух столбцов с соотношением 65% – 35% и нажмите « Вставить» . Теперь мы сделали пустую строку с двумя столбцами.

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

Щелкаем по только что созданному виджету и начинаем вставлять содержимое.

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

Давайте создадим форму генерации лидов.

Для этого мы будем использовать плагин Contact Form 7. Если вы еще не установили и не активировали его, сделайте это сейчас. Процесс установки плагина Contact Form 7 такой же, как мы делали выше с плагином Page Builder.

Когда у вас установлен и активирован плагин CF7, перейдите в « Администратор WP» > «Контакты» > «Добавить новый» и введите имя контактной формы.

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

 <метка> Ваше имя (обязательно)
[текст* ваше имя] </label>
<label> Ваш адрес электронной почты (обязательно)
[email* ваш адрес электронной почты] </label>
[submit class:btn class:btn-primary "Скачать БЕСПЛАТНУЮ электронную книгу СЕЙЧАС"]

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

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

Затем скопируйте шорткод, который появляется на синем фоне вверху страницы. В моем случае шорткод выглядит так: [ contact-form-7 title="form" ] . Затем вернитесь к редактированию страницы, вставьте ее в правый виджет SiteOrigin Editor и нажмите «Готово».

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

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

Затем вам нужно нажать « Дизайн» в правом сайдбаре и установить фоновое изображение. Я собираюсь использовать изображение автора Рауля Петри, основанное на Unsplash.

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

Поскольку я хочу, чтобы это фоновое изображение имело полную ширину, я установил для макета значение « Полная ширина » («Макет» > «Макет строки» > «Полная ширина»).

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

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

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

Как вы можете видеть на скриншоте выше, интервалы совсем не правильные. Во-первых, мне не нравится, что моя форма касается верхней границы изображения. Чтобы изменить это, мы должны нажать на кнопку Значок гаечного ключа рядом с героями, а затем « Редактировать ряд» . На боковой панели справа мы нажимаем « Макет » и устанавливаем отступы. Я установил отступы на 45px 90px 45px 90px . Вот результат:

Следующее, что мне не нравится, это внутреннее заполнение виджета. Чтобы изменить это, мы переходим к этому виджету, мы снова выбираем макет на правой боковой панели и устанавливаем внутреннее дополнение. Я установил их на 45px 60px 0px 60px .

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

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

? Это тот момент, когда можно немного помолиться.

Если вам повезет (или если автор темы сделал свое дело), ​​сломано всего пара пробелов. Чтобы исправить их, снова перейдите к Значок гаечного ключа > Изменить строку или Изменить виджет > Макет и изменить значения мобильных отступов.

Добавление отзыва на нашу целевую страницу

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

Если вам не нравятся предопределенные размеры шрифта, вы всегда можете добавить свой собственный с помощью встроенного CSS. Для этого щелкните вкладку « Текст » в правом верхнем углу (когда вы находитесь внутри виджета) и добавьте свойство font-size:. Пример, где я меняю размер шрифта h5 по умолчанию на 28px:

Пример, где я меняю размер шрифта h5 по умолчанию на 28px:

<h5>Lorem Ipsum dolor site</h5>

Вот окончательный результат нашей целевой страницы лидогенерации:

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

Как взращивать потенциальных клиентов

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

Сосредоточьтесь на предоставлении ценности

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

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

Реализуйте приветственную последовательность

Приветственная последовательность — лучший способ повысить ценность ваших новых лидов. Хорошая приветственная последовательность обычно состоит из 5-7 писем (и может быть длиннее), которые способствуют дальнейшему развитию потенциальных клиентов.

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

Обратите внимание на время

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

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

Как правило, рекомендуется чередовать приветственную последовательность, чтобы ваши новые лиды получали от вас новое электронное письмо один раз в день в течение 5 или 7 дней. Однако, если это кажется вам слишком большим, вы также можете уменьшить частоту и отправлять электронное письмо каждые два дня, что сделает вашу приветственную последовательность слишком длинной.

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

Подождите, прежде чем просить о продаже

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

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

Подумайте об использовании дефицита

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

Например, наши энергосберегающие лампочки могут поставляться со скидкой 20%, но только в том случае, если они будут куплены в течение следующих 48 часов. Или вы можете предложить свою высококлассную программу один на один, но ограничить ее только 20 участниками.

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

Не сдавайся

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

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

Поздравляем!

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

Хотите сэкономить время?

Если вы хотите воссоздать целевую страницу, но у вас нет на это времени, вы можете скачать мой файл .json и импортировать макет в свой конструктор страниц. Для этого создайте новую страницу > нажмите «Макеты» > «Импорт/экспорт », а затем импортируйте файл .json .

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

PS:

Теперь, когда вы создали целевую страницу для лидогенерации, не забудьте провести несколько A/B-тестов.

PPS:

Если есть что-то непонятное, не стесняйтесь обращаться за помощью в комментарии ниже.