Как сделать Создать веб-сайт лендинг
Узнайте, как создать отзывчивый веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.
Создание веб-сайта с нуля
«проект макета»
Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:
Side Content
Some text some text..
Main Content
Some text some text..
Some text some text..
Some text some text..
Первый шаг-базовая HTML страница
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.
Примечание: Если вы не знаете, HTML и CSS, мы предлагаем вам прочитать HTML учебник.
Пример
Page Title
body {
font-family: Arial, Helvetica, sans-serif;
}
<h2>My Website</h2>
<p>A website created by me.</p>
</body>
</html>
Пример как работает
<!DOCTYPE html>Декларация определяет этот документ как HTML5<html>элемент является корневым элементом HTML-страницы<head>элемент содержит мета-информацию о документе<title>элемент задает заголовок документа<meta>элемент должен определить кодировку UTF-8<meta>элемент с именем = «видовой экран» делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана<style>элемент содержит стили для веб-сайта (макет/дизайн)<body>элемент содержит видимое содержимое страницы<h2>элемент определяет большой заголовок<p>элемент определяет абзац
Создание содержимого страницы
Внутри <body> элемента нашего сайта, мы будем использовать наш «макет проекта» и создать:
- A header
- A navigation bar
- Main content
- Side content
- A footer
Semantic Elements
HTML5 ввел несколько новых семантических элементов. Семантические элементы важны для использования, поскольку они определяют структуру веб-страниц и помогают читателям экрана и поисковым системам правильно читать страницу.
Вот некоторые из наиболее распространенных семантических HTML-элементов:
Элемент <Section> можно использовать для определения части веб-сайта с соответствующим содержимым.
Элемент <статья> можно использовать для определения отдельного фрагмента содержимого.
Элемент <Header> можно использовать для определения заголовка (в документе, разделе или статье).
Элемент <Footer> можно использовать для определения нижнего колонтитула (в документе, разделе или статье).
Элемент <Nav> можно использовать для определения контейнера навигационных ссылок.
В этом уроке мы будем использовать семантические элементы.
Заголовка
Заголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:
<div>
<h2>My Website</h2>
<p>A website
created by me.</p>
</div>
Затем мы используем CSS для стиля заголовка:
.header {padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h2> element */
font-size: 40px;
}
Панель навигации
Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:
<div>
<a href=»#»>Link</a>
<a href=»#»>Link</a>
<a href=»#»>Link</a>
<a href=»#»>Link</a>
</div>
Use CSS to style the navigation bar:
/* Style the top navigation bar */.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Содержимого
Создайте макет из 2 столбцов, разделенный на «боковое содержимое» и «основное содержимое».
<div>
<div>…</div>
</div>
We use CSS Flexbox to handle the layout:
/* Column container */.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Затем добавьте мультимедийные запросы, чтобы сделать макет отзывчивым. Это позволит убедиться, что ваш сайт хорошо смотрится на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефонах). Измените размер окна обозревателя, чтобы увидеть результат.
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout — when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
float: none;
width: 100%;
}
}
Нижний колонтитул
Наконец, мы добавим нижний колонтитул.
<div>
<h3>Footer</h3>
</div>
And style it:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Поздравляю! Вы создали сайт с нуля.
Как верстать Лендинг | ЗЕКСЛЕР
Сначала была разметка:
недавняя история
По тому, как верстались сайты, можно проследить эволюцию интернета. Способы превращения дизайн-макета в полноценную веб-страницу – одинаково отображаемую на всех устройствах и в любых браузерах – прошли этот путь с ошибками, потерями и победами. При этом ни один из способов верстки не смог стать каноническим, все они продолжают существовать и бороться за место в интернете и арсенале разработчиков.
Можно сказать, что проблема оформления вообще не стояла перед первыми сайтами, появившимися в сети. Они основывались на так называемом академическом дизайне, который по выразительной составляющей близок к языку полиграфического информационного наполнения. В сети до сих пор можно встретить мастодонтов этого стиля, не изменившихся за прошедшие два с половиной десятилетия. Но всегда находится кто-то, изменяющий правила игры.
В нашей истории таким игроком выступил появившийся в 1994 году браузер Netscape. Он сразу был ориентирован на более широкую палитру изобразительных свойств и сыграл роль в их появлении – пользуясь своим монопольным доминированием внедрял нестандартные html-теги, ломающие существующие границы дозволенного. Подобную вольность поддерживали разработчики, ориентируясь в своих проектах исключительно на потенциал Netscape – еще раз повторимся, в тот временной промежуток этот браузер был безраздельным лидером в своей области. Веб-дизайн стал преобладать и ему начали уделять внимание. А это, в свою очередь, повлекло необходимость задуматься над способами верстки страниц. Использование «голого» языка разметки перестало отвечать формирующимся потребностям, возникла необходимость создания стандартизированных стилей оформления.
Верстка консолидировала интернет:
к миру через соперничество
Естественно, что монополия Netscape не могла длиться вечно – в середине 90-х Internet Explorer стал «оттягивать одеяло» на себя и подорвал единоличное доминирование конкурента. А веб-разработчики встали перед дилеммой выбора – теперь нужно было добиваться корректного отображения сайтов уже в двух браузерах. Так возникла необходимость в создании режима совместимости, который в дальнейшем трансформировался в унифицированные правила и появление термина «кросс-браузерность» – способность сайтов одинаково отображаться во всех программах просмотра, которых к началу 2000-х уже появилось достаточное количество. Так закончились «браузерные войны», беззвучно прогремевшие на пространстве интернета в конце прошлого века.
Возникает вопрос: «А какое отношение все это имеет к верстке лендингов?». Непосредственное. Ведь продающие сайты – это тот сегмент, в котором невозможно представить себе программных ограничений. Посадочными страницами пользуются на десктопных и мобильных платформах, во всех браузерах и при любом разрешении. Все это было бы невозможно, не добейся разработчики единого стандарта верстки и унифицированных правил ее применения.
Верстка одностраничника:
любое решение на продающем сайте
Главное, что можно сказать об искусстве верстки веб-страниц – в ней нет обязательных условий. Разрешено все, что не запрещено правилами корректного отображения контента браузерами. С внедрением в общую практику языка разметки стандарта HTML5 и каскадных таблиц стилей CSS3 это правило получило новые инструменты, способные решить любые практические задачи. К тому же мобилизация интернета поставила перед разработчиками новые вызовы. Одно дело, стандартизировать отображение сайта на нескольких видах стационарных компьютеров и линейке ноутбуков, а другое – дополнительно принимать в расчет смартфоны и планшеты, обладающие помимо совершенно других параметров отображения еще и поворотными свойствами экрана. Обо всем, что сопровождает верстку современных продающих сайтов, в следующей статье.
проект в категории Верстка, 22.01.2019 в 09:36
Бесплатно зарегистрируйся и получай уведомления о новых проектах по работе
A | Заказчик Отзывы фрилансеров: + 15 0 — 0 Зарегистрирован на сайте 6 лет и 10 месяцев | Бюджет: по договоренности |
Разделы:
Опубликован:
22.01.2019 | 09:36 [последние изменения: 22.01.2019 | 09:39]
Теги: верстальщик удаленно, сверстать сайт, сделать верстку, требуется верстальщик, сверстать страницу, ищу верстальщика
Верстка лендинга заказать на ФРИЛАНС.ру
Превращаю макет в сайт!!!
Современная верстка под все устройства!
У вас есть готовый макет от дизайнера и Вы не знаете что делать дальше?
Чтобы макет превратить в сайт — нужно его сверстать!!!
Сверстаю лендинг, сайт, интернет-магазин по всем правилам/стандартам верстки.
Н…
Сайты, Landing Page (WordPress, Tilda)
Сайты, Landing Page (WordPress, Tilda) для продвижения товаров и услуг по умеренным ценам
Лендинг с уникальным дизайном
Создам для вас профессиональный лендинг с оригинальным дизайном и анимацией, профессионально настрою контекстную рекламу.
ИП, р/с, договор.
Подробное КП с примерами и что входит в стоимость: https://shoshiev.com/
Делаю как на Тильде, так и на ручной…
Продающий сайт «Под ключ»!
Создам для вас и вашего бизнеса сайт под ключ, от Лендинга до многостраничного сайта. Работая со мной вы можете быть уверены, что работа будет сделана качественно и в срок!
План работы:
1. Проведу анализ рынка и конкурентов
2. Создам верстку сайта с…
Верстка интернет-магазинов
Сделаю верстку интернет-магазина по вашему макету под любую систему управления. Использую современные технологии верстки. Гарантирую чистый код, понятный любому программисту, адаптивность и кроссбраузерность. Работаю до полного утверждения проекта.
Валидная кроссбраузерная верстка по PSD макету
Я сверстаю сайт по вашему PSD макету(1-3 страницы)
Сделаю качественную, адаптивную верстку Вашего PSD макета, с использованием фреймворка Bootstrap(по желанию):
— Валидная кроссбраузерная адаптивная вёрстка с корректным отображением на всех устройства…
Адаптивная html верстка сайта, заказать верстку, цена ниже у нас👍
Что такое адаптивная верстка? Она представляет собой неотъемлемую часть современного веб-сервиса, которая может изменять дизайн страницы, учитывая диагональ экрана, особенности платформы, ориентацию устройства и поведение пользователя.
Адаптивная верстка не предполагает наличие горизонтальной прокрутки и областей для масштабирования, только читабельный текст и объемные площади для кликабельного элемента. Благодаря медиа запросам можно компоновать и перестраивать шаблоны так, чтобы они адаптировались под определенный размер экрана.
Актуальность вопроса
Сегодня пользователи сайтов применяют не только настольные компьютеры, но и другие современные гаджеты. В силу того, что экран многих устройств маленький, текст соответственно тоже становится мелким, ссылки не кликабельны, элементы для управления находятся очень близко друг к другу. Специалисты начали разрабатывать так называемые мобильные версии для ресурсов, решая таким образом проблему.
Но это оказалось совсем недешево, долго и неудобно. Решила проблему такая инновация, как верстка адаптивного сайта. Благодаря ей веб-страницы могут адаптироваться под диагональ любого гаджета. С помощью верстки можно экономить средства, не рисуя новый дизайн для каждого разрешения, а просто менять размеры и размещение отдельных элементов.
Верстка многостраничного сайта
С каждым годом трафик мобильного интернета увеличивается и чтобы его эффективно отработать нужно создавать такие веб-сайты, у которых будет удобный интерфейс. В связи с этим у разработчиков возникла проблема.
Создавать мобильную версию параллельно с основной или внедрять адаптивную верстку многостраничного сайта, которая легко подстроится под нужный экран? Для этого стоит оценить плюсы и минусы двух технологий, а также их способность воздействовать на “поведение” сайта.
В 2015 году исследователи компании TNS опубликовали результаты проекта, во время которого они изучали поведение интернет российских пользователей. Оказалось, что больше 60% аудитории выходят в сеть с мобильного устройства.
Аналогичную статистику опубликовал сервис MobilizeToday.ru. – из 50% смарт-пользователей, которые заходят на сайт с неудобной навигацией, половина сразу же покидает его.
Неутешительную информацию предоставили и поисковые системы – если запрос в строке вводится из мобильного гаджета, то многостраничные сайты, у которых нет адаптивной верстки, автоматически оказываются в хвосте поисковой выдачи. В связи с этим, адаптация сайтов под переносные устройства стала обоснованной необходимостью.
Причин, которые указали на необходимость оптимизировать сайты под мобильную технику, оказалось несколько:
- Удобная навигация – не нужно увеличивать поле для ввода текста и, нажимая нужную кнопку, пользователь не промахивается.
- Отсутствие необходимости для владельца, покупать приложения для разных платформ – его сайт сможет открываться на любом устройстве.
- Увеличение покупок и сделок – клиенты в любой момент могут зайти на мобильный сайт и приобрести то, что нужно.
- Коммерческая надежность – форма заказа также адаптируется под гаджет и позволяет сделать заказ быстро и просто.
Благодаря адаптации сайтов владельцы резюмируют, что мобильный трафик растет с каждым годом. Нежелание принимать новшество приводит к удару по конверсии, значительной потере клиентов и снижению доходности бизнеса. Отзывы сотрудников западных фирм подтверждают тот факт, что после верстки сайта по psd макету, конверсия существенно вырастает и цифры достигают 400%. Конечно, большую роль играет и качество адаптивной версии, поэтому за такими услугами обращаться нужно только к опытному верстальщику – компании “Нужен сайт”.
Как это работает
Для того, чтобы создать ресурс, дружественный с мобильным гаджетом, применяются две стратегии – адаптивная верстка и создание мобильного варианта.
Первая подразумевает разработку страниц, автоматически открывающихся с учетом размеров используемого пользователем устройства. Чтобы просматривать разные макеты страниц, используется один и тот же HTML. Система автоматически выполняет настройки под разрешение, меняет размеры картинок, расположение текста и т.д.
Это не требует создания отдельного дизайна для каждого девайса, а функциональность сайта при этом остается на высоком уровне. Эффективными инструментами в процессе создания ресурса может стать верстка wordpress или же верстка opencart. Адаптивный дизайн больше подходит для владельцев блогов, небольших сайтов или интернет-магазинов, где покупателей не так много, а также для компаний, которые занимаются доставкой контента.
Мобильная версия нужна для того, чтобы открыть сайт на мобильном устройстве, после чего пользователь перенаправляется на другой поддомен. Создание мобильной версии актуально для тех, кому не нужна верстка сайта с нуля, у кого уже он имеется и успешно работает. Необходимости делать редизайн нет, а проявить лояльность к мобильному поколению необходимо. Технология подходит для почтовых сервисов, социальных сетей, интернет-магазинов, новостных порталов.
Банкротство физических лиц — пример лендинга со сложной версткой
Задача
Для рекламной кампании на тему банкротства физических лиц нужно было создать посадочную страницу, дающую максимальную конверсию. Реклама шла по всей России, затраты были огромными. Поэтому было очень важно сделать такой лендинг, который давал бы наибольший эффект, выжимал максимум из получаемого трафика.
Решение
Современный лендинг должен быть адаптивным, т.е. одинаково хорошо отображаться как на компьютере, так и на мобильном устройстве. Да, получается лендинг со сложной версткой, однако без этого сложно добиться сколь-нибудь удовлетворительного процента конверсии (процент заказавших от количества зашедших). Данный лендинг был создан именно таким образом и стал примером сложной но и качественной верстки.
Мультилендинг, реализованный нами в рамках данного проекта — великолепная функция, необходимая на любом лендинге. Она позволяет менять содержимое в зависимости от того, откуда пришел человек. Если он зашел с объявления “Банкротство физ.лиц” — ему показывается один текст, если с объявления “Банкротство юр.лиц — ему показывают другой контент. А лендинг при этом один, просто он подстраивается под пользователя.
Кроме сложной верстки созданный лендинг содержал в себе и другие трудоемкие в реализации функции. Так, на нем были установлены гео-зависимые блоки с контентом. Говоря русским языком — это текст и информация, которые менялись в зависимости от города, из которого пришел посетитель. Так, если посетитель зашел из Москвы — ему показывался московский адрес организации, схема проезда до московского офиса, отзывы клиентов именно из Москвы.
Часто на лендингах используются счетчики “До конца акции осталось…”. Это не усложняет верстку лендинга и является полезной функцией. Мы пошли дальше и установили помимо этого таймера еще и отсчет количества поданных заявок, количества свободных мест у юристов. Все это создает у пользователя ощущение ограниченности предложения и, как результат, повышает конверсию.
Лендинг был интегрирован в установленную нами CRM-систему. Это позволило получать заявки с него моментально. Сотрудники колл-центра в течение нескольких секунд видели заявку у себя в личном кабинете, знали, откуда она поступила, с какой проблемой обратился клиент. Это значительно повысило эффективность их работы.
Результат работ
Ссылка на сайт: ez.bankrotoved.bizКонверсия по сравнению с предыдущим лендингом выросла в два раза и достигала 8%
ГЕО-зависимые блоки и адаптивный контент снизили процент отказов (% посетителей, пробывших на сайте менее 15 секунд) до рекордных 15%
До 20 000 посетителей в сутки принимал лендинг в пики посещаемости и великолепно справлялся с нагрузкой
Интеграция с CRM повысила конверсию заявок в клиентов в три раза — с 10 до 31%
Свою руку приложили
Было очень интересно делать этот лендинг. Это не просто лендинг — это шедевр инженерной мысли. Под красивой обложкой скрывается мощнейший движок, объединяющий в себе множество великолепных функций. Я люблю сложные задачи, а здесь были как раз такие.Николай, программистЭдуард, руководитель проекта | Мария, дизайнер | Николай, программист | Денис, верстальщик | Вадим, PR-специалист |
Вам тоже нужен отличный сайт и клиенты? Пишите, звоните:
Наша почта:
Единая справочная: 8 (843) 2-588-132
Оставить заявку
30+ адаптивных лендинг пейдж шаблонов на HTML (бесплатные, премиум)
Готовые лендинг пейдж шаблоны нужны для быстрого запуска нового продукта, его продвижения при помощи LP-страницы или мобильного приложения, либо мотивации пользователей зарегистрироваться / подписаться на рассылку. Для «целевой страницы» крайне важны удобство и простота пользования с грамотным расположением конверсионных элементов. Современные продающие шаблоны лендингов, разрабатываются с прицелом на возможность создания адаптивного сайта с высокой конверсией.
В этой подборке лендинг-шаблонов HTML есть бесплатные и премиум. И те и другие пригодны для успешного продвижения сервиса/продукта онлайн, при условии правильности оформления и соответствия вашему продукту. Среди премиум HTML5 LP-шаблонов выбор достаточно широк, в отличии от тех, что скачивают бесплатно. Наверняка найдется подходящий и для вашей ниши / специфики.
Итак, семь бесплатных лендинг пейдж шаблонов на HTML и 20+ «премиальных» – с доп. опциями и отличным адаптивным макетом.
Бесплатные шаблоны Landing Page на HTML
Bent – Free App Landing page
Современный шаблон LP для приложений позволит создать проект в считанные минуты. Хороший адаптивный дизайн рассчитан на любую платформу.
Snow – A Free Bootstrap Landing Page Theme
Чистый Bootstrap шаблон для демонстрации нового продукта, сервиса. Этот бесплатный шаблон лендинга способен ускорить маркетинговую кампанию по продвижению вашего сервиса.
Landy – Free Landing Page Template
Простой адаптивный LP шаблон отлично подойдет для рекламы или продаж приложений, софта, розничного продукта или сервиса. Он разработан на bootstrap с применением только бесплатных шрифтов Google Fonts. Код содержит комментарии на случай кастомизации шаблона.
Legend: One Page Free Responsive landing Template
Legend — 2-й основанный на бутстрап, бесплатный LP-шаблон. На нем можно создать лендинговую страницу, креативное онлайн-портфолио и даже бизнес-сайт.
Flexbox Responsive Landing Page
Адаптивный шаблон лендинг пейдж создан на основе CSS Flexbox. Созданный без каких либо фреймворков, шаблон будет проще редактировать / кастомизировать.
App Landing Page Website Template
App Landing идеально подойдет разработчику софт-продукта или приложения, а также для целей продвижения малым бизнесом приложений и продукции iPhone, iPad, Android. Адаптивный и готовый к Retina шаблон на Foundation CSS фреймворке имеет одну страницу, использует иконочный шрифт, оптимизирован для SEO и рекламы.
HTML Business App – Free Landing Page Template
BusinessApp – это бесплатный Landing Page шаблон, основанный на HTML5 / CSS3 и созданный для продвижения Android и iOS приложений.
Адаптивные премиум Landing Page шаблоны HTML
Kane
Html шаблон Landing Page для сайта и мобильного приложения, подходящий для целей бизнес продвижения. Для стиля лейаута (темный и светлый с фото-видео бэкграундом и mailchimp поддержкой, делают LP-шаблон серьезным инструментом конверсии.
Crossway – Startup Landing Page Template
Ультра-современная HTML5 тема на Bootstrap 3.1.1. Поставляется с 4 макетами: одно/много страничник, варианты панели навигации. Легкий эффект параллакс-прокрутки интегрирован в тему лендинга, адаптированную под мобильные и получение органического трафика (SEO).
DotSquare
Html landing page шаблон для веб и мобильных приложений, нацелен на легкую генерацию лидов. Обладает быстрой загрузкой и валидным html, css кодом. В верхней части одностраничника продублирована форма контактов с призывом к действию.
Primo Responsive Landing Page Template
Одностраничный HTML5 лендинг-шаблон с CSS3-эффектами. Имеет трехколоночный каркас, создан на Bootstrap 3. Подойдет для продаж iOS/Android-приложений. В шаблон включено 2 лейаута (с Parallax и без), Ajax формы контактов, PrettyPhoto лайтбокс и 5 цветовых схем. Легок в настройке: смените hex-коды и связанные элементы окрасятся в новый цвет. PSD в комплекте.
Hype – App Landing Page
Современный, готовый к Retina шаблон для мобильных приложений предлагает 8 вариантов цветов, опции для изображений / видео бэкграунда.
Gotte Multipurpose Landing Page
Многоцелевой лэндинг шаблон в плоском стиле поставляется с 3 вариантами index, 6 цветовыми схемами. Шаблон создан на twitter bootstrap3, включен PHP скрипт формы контактов и загрузки.
Slander – Responsive Bootstrap HTML5 Landing Page
Slander – идеальный вариант для стартапа и компаний, подходит профессионалам или индивидуальному проекту. Отзывчивый дизайн с Bootstrap и HTML5 / CSS3 включает адаптивный слайдер, слайдер вкладок, форму новостной подписки и пр.
Appster – Ultimate Clean App Landing Page Template
Адаптивный App лендинг шаблон под рекламу и продажи. Создан на основе последних html5 / css3 техник. Имеет элегантный, чистый и минималистичный дизайн, включает все необходимое для успешного маркетинга.
Cloud – An Easy To Use App Landing Page
Элегантный, чистый и минималистичный HTML5 / CSS3 шаблон лендинг пейдж с отличным функционалом. Шаблон разработан под страницу Coming Soon (скоро запуск), идеален для создания страницы приложения и сайта-витрины.
OnEvent – Special Event Landing Page
Адаптивный лэндинг-шаблон для спец. мероприятий. Имеет секции под фотогалерею, коммерческое видео, расписание событий, список гостей.
Appreative Responsive Landing Page Template
Appreative – адаптивный шаблон, предназначенный для краткого информирования. Подходит для различных типов задач.
SaptaApp Landing Page Template
Вам будет достаточно изменить основной цвет сайта/шаблона изменяя шестнадцатеричный код цвета, как все связанные элементы примут новый оттенок. Это упрощает настройку/редактирование шаблона.
Entry – Startup Landing Page
Простой и быстрый LP-конструктор поможет вам создавать и редактировать лендинговые страницы в считанные минуты – просто изменяя позиции блоков, цвета, удаляя ненужные блоки. Шаблон включает 18 блоков под все лэндинговые нужды.
Stylio – Responsive HTML5 App Landing Page
Одностраничный шаблон лендинга адаптивен и готов к retina – протестирован для основных портативных устройств. Главной изюминкой шаблона является многослойный слайдер со скриншотами и различными сценариями. Другие особенности шаблона: построен на Bootstrap 3.0 с шириной модульной сетки 1200 px, включает несколько лейаутов и видео версию, гладкие HTML5 & CSS3 переходы/анимации, иконочные шрифты Font Awesome 4.0.
NRG – Responsive Landing Page
NRG – одностраничное решение для развивающегося стартапа или небольшой студии. Шаблон включает все необходимое, чтобы обозначить свое присутствие в WEBе. Главные собенности: фокус на юзабилити, пегковесная структура, 100% валидный код и сжатая графика.
EventLand Landingpage
Красиво оформленный одностраничный HTML5 шаблон для лэндинга, идеально представит бизнес мероприятия, торговые выставки, конференции, семинары. EventLand располагает интегрированной рассылкой новостей, лид-формой для регистрации клиента, эффективной одностраничной навигацией с грамотно расположенными вкладками, стильным слайдером. В составе: иконочные шрифты Font Awesome, карта Google Map и др. полезные опции.
Off the Shelf – Responsive E-Book Landing
Шаблон разработан для демонстрации и продаж электронных изданий e-book авторов. Хотите сделает вашу книгу заметной? Off the Shelf профессионально и быстро справится с этой задачей.
Neue – App Landing Page
Neue это новейший лендинг пейдж шаблон из этой подборки. Он оснащён впечатляющим функционалом, имеет великолепную поддержку.
EduTime – Online Courses & Education Landing
EduTime ориентирован на в область образования и продвижения онлайновых учебных курсов.
Plaza – Education – Hotel – Dating Landing
Универсальный лендинг-шаблон подойдет следующим типам проектов: ресторан отеля / сайт знакомств / образовательные курсы. Его гибкий адаптивный макет основан на Bootstrap фрейворке.
SpiceHub Restaurant Responsive Landing Page
Одностраничный ресторанный-шаблон на HTML5/CSS3 порадует корпоративным стилем и сочными цветами. Использует jQuery/AJAX, анимационные эффекты, совместим с Bootstrap 3.x. В составе: 2 лейаута (с параллакс и без), иконки Glyphicons/Font Awesome, PSD файлы. Дополнительно, SpiceHub предлагает WordPress тему под сайт ресторана / кафе / бара.
Katemi – Clean Product and App Landing Page
Шаблон предназначен для продвижения товаров/сервисов и приложений. Полностью адаптивный и чистый HTML5/CSS3 дизайн Katemi Landing Page v2.0 создан на Bootstrap 3.0.3. Ключевые особенности: SEO дружественная стуктура и код, стратегическое оформление первого экрана, CSS анимации.
Секреты удобного для преобразования дизайна
Кто бы ни сказал, что внешность — это еще не все, он явно не дизайнер целевой страницы.
Нравится вам это или нет, но внешний вид имеет значение, и он играет огромную роль в работе вашей целевой страницы. Однако это не означает, что ваша целевая страница должна быть красивой, чтобы получать хорошие результаты. Хотя эстетичный дизайн может быть полезен, он уступает место более важным факторам.
Разделы и элементы, включенные в макет целевой страницы, играют гораздо большую роль в коэффициенте конверсии, чем чистая красота.Если макет вашей целевой страницы не побуждает посетителей к действию, не имеет значения, насколько хороша страница, ваши коэффициенты конверсии все равно пострадают. Так что, я думаю, можно сказать, что красота в глазах смотрящего.
Но пока хватит клише, есть много чего, если вы хотите создать первоклассную целевую страницу.
Наука за макетом целевой страницыНе всегда нужно изобретать велосипед, чтобы создать высокоэффективную целевую страницу.На самом деле, все может быть совсем наоборот, потому что за оптимизацией коэффициента конверсии стоит много научных данных. Это означает, что включение некоторых часто используемых разделов почти всегда улучшит ваш коэффициент конверсии. Однако это не означает, что один и тот же макет целевой страницы всегда будет лучше других.
Наиболее распространенные разделы целевой страницы:
- Раздел героев
- Раздел социального доказательства
- Раздел функций
- Как это работает Раздел
- Раздел нижнего колонтитула
Ваша отрасль, тип бизнеса (B2B или B2C) и предложение продукта или услуги будут влиять на то, какие разделы вам нужно включить.Ниже мы дадим вам более подробное представление о каждом разделе, чтобы вы могли решить, какие разделы лучше всего подходят для вашей страницы.
Раздел «Герой»Первое, что видят пользователи при посещении вашей целевой страницы, — это ваш раздел героев. Он всегда будет отображаться в верхней части страницы и содержать наиболее важную информацию на вашей целевой странице. Чтобы разобраться во всем этом, давайте взглянем на главный раздел целевой страницы Bill’s Comfort Systems.
Прежде чем мы углубимся в детали, я расскажу вам немного о системах комфорта Билла.Bill’s Comfort Systems — это компания по отоплению и кондиционированию воздуха, которая заботится о том, чтобы вам и вашей семье было комфортно независимо от температуры на улице.
Теперь, когда вы немного знаете о Системах комфорта Билла, мы можем поговорить о каждом компоненте их раздела о героях и о целях, которым он служит.
Загляните в раздел о героях 👀
Раздел вашего героя обычно включает некоторые, если не все из следующих элементов:
- Основной заголовок
- Подзаголовок
- Призыв к действию (CTA)
- Выстрел героя
Ваш основной заголовок часто является самым крупным и наиболее заметным текстом на целевой странице.Чтобы быть эффективным, он должен быстро описывать предложение и представлять уникальное ценностное предложение.
В качестве примера можно использовать заголовок на картинке выше.
«Получите бесплатную проверку кондиционера»
Этот заголовок описывает предложение и уникальное ценностное предложение; это просто, но эффективно. Более того, он попадает в определенную категорию заголовков, называемых заголовками, основанными на ценности. Но это не единственный тип заголовка, который вы можете использовать. Вы можете протестировать несколько разных типов заголовков, чтобы определить, какой из них лучше всего подходит для вашей целевой страницы.
1. Задайте вопрос
Заголовок этого типа обращается к проблеме, с которой ваши клиенты уже сталкиваются, или задает вопрос, о котором они даже не подозревали.
Например, если вы хотите проверить заголовок, основанный на вопросе, он может выглядеть примерно так.
«У вас сломался кондиционер?»
2 . Будь лучшим
Покупатели знают, что у них есть большой выбор, когда дело доходит до совершения покупки.Заголовок, основанный на сравнении или различиях, указывает, почему они должны выбрать вас, а не ваших конкурентов.
Отличный пример, показывающий клиентам, почему вы лучший, может выглядеть примерно так.
« Самый быстрый ремонт кондиционеров в штате Юта»
3. Вдохновлять эмоции
Эмоции — мощная сила, и вашей целевой странице требуется вся сила, которую вы можете собрать, чтобы привлечь посетителей. Попробуйте связать ваш продукт или услугу с положительными эмоциями, которые люди испытают, если они конвертируют, или укажут на то, что они могут потерять, не конвертируясь.
Вот пример того, как использовать эмоции в заголовке.
«Держите семью в прохладе этим летом»
4 . Сделайте предоплату
Ценность, а не цена часто является определяющим фактором при любой покупке, и именно это делает этот тип заголовка таким эффективным. Сосредоточьтесь на том, что делает ваше предложение ценным, и укажите, что, как, когда и где.
Вы можете использовать приведенный ниже пример, чтобы лучше понять, как применить эту тактику к вашим заголовкам.
«Бесплатная проверка кондиционера может сэкономить вам тысячи»
5. Захватите внимание / используйте юмор:
Не бойтесь выделиться из толпы. Вы можете использовать тон и юмор, чтобы привлечь внимание к своему заголовку и сломать лед в отношениях с клиентами.
Пример забавного заголовка для систем Bill’s Comfort:
«Не переживайте из-за сломанного кондиционера этим летом!»
ПодзаголовокПодзаголовок обычно появляется сразу под основным заголовком, обычно имеет меньший размер шрифта и часто длиннее.Идеальный подзаголовок расширяет основной заголовок и предлагает больше деталей или стимулов.
Например, подзаголовок показан в нашем примере и предлагает более подробную информацию о том, как Bill’s Comfort Systems может помочь клиентам, упоминая «установку от начала до конца», «ремонт» и «диагностику».
CTA (Призыв к действию)Ваш CTA — это текст, отображаемый на вашей кнопке. Он должен сообщать посетителям, что вы от них хотите, и представлять вашу цель конверсии.Создавая свой собственный призыв к действию, будьте кратки и просите клиентов выполнить определенное действие. В конце концов, ваш CTA представляет собой общую цель вашей целевой страницы.
В приведенном выше примере раздела героев призыв к действию — «Запросить встречу сейчас», но также есть второй призыв к действию в правом верхнем углу «Поговорить с реальным человеком». Поскольку нашему клиенту нужны и звонки, и электронные письма, это нормально, но в целом один CTA часто работает лучше всего.
После тестирования сотен целевых страниц для наших клиентов мы обнаружили, что одни призывы к действию работают лучше, чем другие.Поэтому мы создали несколько формул, которые помогут вам создать свой собственный высокоэффективный призыв к действию.
Вот некоторые из них, которые вы можете попробовать:
- Попробовать
- Попробовать (продукт / услуга) сейчас
- Пробная версия (продукт / услуга) бесплатно (Срок действия пробной версии)
- Начало работы
- Начните сегодня
- Получите (особенность / выгода) сейчас
- Получи бесплатно (предложение, консультация и т. Д.)
- Купить сейчас
- Купи мой (продукт) сейчас
- Резервное назначение
- Забронировать встречу
Это лишь некоторые из множества различных призывов к действию, которые вы можете использовать на своей целевой странице или, я бы сказал, тестовой.Посмотрите на реальную выгоду от использования целевых страниц: в первую очередь, это дополнительная возможность проверять различные идеи и видеть, что работает лучше всего. Поэтому, когда дело доходит до повышения производительности вашей целевой страницы, вам следует начать с тестирования различных CTA. Мы наблюдали один из самых значительных приростов производительности от простых изменений призывов к действию.
Изображение герояИзображение вашего героя — это основное изображение / фоновое изображение, отображаемое в разделе вашего героя. Он должен быть связан с вашим продуктом или услугой и, если возможно, включать в себя направляющие сигналы, которые привлекают внимание посетителей к вашему призыву к действию.
Как видите, в разделе героев находятся некоторые из наиболее важных элементов целевой страницы, такие как заголовок и призыв к действию. Это означает, что раздел вашего героя может как повысить, так и снизить производительность вашей целевой страницы.
Бонусный совет: Элементы внутри раздела вашего героя будут иметь наибольшее влияние на производительность вашей целевой страницы. Попробуйте сначала провести A / B-тестирование, чтобы получить самые быстрые улучшения.
Раздел функцийВы можете легко переименовать этот раздел в раздел «Почему выбирают нас», потому что его цель — объяснить, почему посетители должны выбрать вашу компанию.Итак, теперь у вас есть шанс подробно рассказать о своем уникальном ценностном предложении и убедить посетителей в том, что вы лучший вариант. Давайте в качестве примера рассмотрим раздел функций системы комфорта Билла.
Особенности и преимущества
Обратите внимание, что они не выделили свои услуги. Вместо этого они говорят о конкретных преимуществах, которые получат клиенты, например, о быстром обслуживании, квалифицированных технических специалистах и бесплатных оценках.
Еще одним важным элементом в этом разделе является текст описания под каждой функцией.Описание позволяет раскрыть каждое преимущество и уточнить свое сообщение.
О, и не забывайте эти милые маленькие значки, которые говорят больше, чем вы думаете, и помогают разбивать стены текста. Помните, что люди не любят читать, поэтому чем больше вы можете сказать с помощью значков или изображений, тем лучше.
Ваша целевая страница должна быть сосредоточена на ответе на вопрос: в чем заключается наше уникальное торговое предложение (УТП)? Вы можете создать пару фраз, которые касаются этого вопроса, и повторять его на всей целевой странице.Последовательность и единообразие обмена сообщениями — ключ к конверсии.
Отдел наших услугРаздел услуг дает вам возможность показать клиентам, какие услуги вы предлагаете, и объяснить, как каждая услуга может помочь. Этот раздел поможет прояснить любые вопросы, которые могут возникнуть у посетителей о том, чем вы занимаетесь.
Как и в других разделах этой целевой страницы, вы заметите, что весь текст написан от второго лица. Кроме того, рядом с каждым элементом услуги есть значок, который помогает привлечь внимание пользователей и улучшить их общее понимание предложения.
Покажите посетителям, какие услуги вы предлагаете
Возможно, вы также заметили, что служебные секции выше следуют шаблону «Z», идущему слева направо и снова обратно влево. Причина, по которой этот шаблон так часто можно увидеть в макете целевой страницы, заключается в том, что он обычно является естественным способом просмотра целевых страниц.
Раздел отзывовВажной частью социального доказательства является наличие положительных отзывов клиентов в макете целевой страницы.Однако это не означает, что каждый пятизвездочный отзыв хорошо подходит для вашей целевой страницы.
Лучшие разделы с отзывами включают изображения ваших клиентов рядом с подробным предложением. Поскольку исследования показали, что взгляд на человеческие лица увеличивает доверие и делает заявления более правдоподобными, в том числе фотография особенно важна.
Когда дело доходит до самого предложения, постарайтесь выбрать такое, которое дает точный пример проблемы, с которой столкнулся клиент, и того, как ваша компания ее решила.
В приведенном ниже примере отзыв в крайнем левом углу является наиболее убедительным, поскольку он подробно описывает ее опыт. В частности, по ее словам, «они вышли в тот же день» и «Два дня спустя они установили нашу новую систему».
Отзывы уменьшают беспокойство и укрепляют доверие
. Вы также заметите, что в этом разделе под каждым именем клиента используется пять золотых звезд, иллюстрирующих рейтинг, который они дали Bill’s Comfort Systems. Это еще один пример того, как на целевой странице можно использовать значки и изображения для быстрой передачи сообщения.Один взгляд на пять золотых звезд, и посетители могут с уверенностью предположить, что эти клиенты остались довольны, даже не читая их отзывов.
Социальное доказательствоНаличие отзывов клиентов на целевой странице абсолютно необходимо, но это не единственный способ добавить социальное доказательство. Вы можете украсить свою целевую страницу наградами, логотипами клиентов, сторонними обзорами и даже логотипами известных брендов, которые вы обслуживаете.
Демонстрация брендов, которые предлагает Bill’s Comfort Systems, добавляет социальное доказательство благодаря ассоциации с известными брендами.Это также устраняет любые сомнения потенциальных клиентов относительно их способности работать с различными марками кондиционеров.
Демонстрация известных или «надежных» брендов, которые вы рекламируете, информирует посетителей и помогает установить взаимопонимание.
Есть бесчисленное множество способов добавить социальное доказательство на вашу целевую страницу, и им не всегда нужен отдельный раздел. Так что проявите творческий подход и постарайтесь аккуратно добавить социальное доказательство по всему макету целевой страницы.
Нижний колонтитулНаконец, у вас есть нижний колонтитул.Этот раздел — ваш последний шанс привлечь посетителей, так что качайтесь за заборы и не забудьте включить призыв к действию. Кроме того, вы должны использовать тот же призыв к действию, который вы использовали в разделе своего героя.
Разделы нижнего колонтитула— хорошее место, чтобы напомнить покупателю, что вы хотите, чтобы он сделал с CTA
.Вокруг нижнего колонтитула меньше ажиотажа по сравнению с разделом героев, но на самом деле они очень похожи. Как и ваш главный раздел, ваш нижний колонтитул должен быть ориентирован на одну цель — конверсии.
То, что подходит вам, раздел героя работает и в вашем нижнем колонтитуле. Это не означает копирование и вставку, но у них действительно есть одни и те же элементы. Это означает, что вы можете применить аналогичные принципы для создания высокопроизводительного нижнего колонтитула.
Даже если вам, возможно, придется увеличить масштаб или надеть очки для чтения, чтобы увидеть раздел выше, важно, чтобы вы включили его на все свои целевые страницы. Да, вы прочитали это правильно в первый раз из всех рассмотренных нами разделов, это один из немногих, который вам всегда нужно включать.Его можно рассматривать как часть нижнего колонтитула, но нам нравится называть его разделом об авторских правах.
Разделы авторских прав должны включать ссылки на условия использования и политику конфиденциальности вашего веб-сайта.
Важно включить, потому что это показывает посетителям (возможно, вашим конкурентам), что вы заявляете об авторских правах на содержание своей целевой страницы. Что еще более важно, он должен содержать ссылки на вашу политику конфиденциальности и страницы условий на вашем веб-сайте. Технически Google Реклама требует наличия этих ссылок, и они обратят на это особое внимание, если вы работаете в медицинской отрасли или в другой сфере, где важна конфиденциальность.
Вы можете украсить раздел об авторских правах, добавив свой логотип, но не хотите отвлекать внимание от более важных элементов в разделе нижнего колонтитула.
Разбивка элитного хиропрактика. Посадочная страницаМы знали, что одного примера макета целевой страницы будет недостаточно, поэтому мы проведем оставшуюся часть этой статьи, разбивая вторую целевую страницу для одного из наших клиентов Elite Chiropractic.
Чтобы дать вам краткую справку, Elite Chiropractic — это многопрофильная клиника хиропрактики, ориентированная на восстановление здоровья и правильного функционирования пациентов.
Раздел «Герой»Мы уже объясняли различные элементы раздела о героях ранее в этой статье. Вместо этого мы поговорим о том, как можно и нужно A / B тестировать различные элементы в разделе героев.
Вот две разные версии целевой страницы Elite Chiropractic.
CTA № 1
В первом варианте, показанном выше, мы использовали расплывчатый призыв к действию «Продолжить» в отличие от более конкретного призыва к действию, подобного тому, который мы видели во втором варианте.Однако это небольшое изменение — единственное различие между этими двумя целевыми страницами. И по уважительной причине, если мы внесем слишком много изменений одновременно, мы не сможем определить, какое изменение приводит к увеличению или снижению производительности.
CTA № 2
В нашем втором варианте используется очень специфический призыв к действию «Зарезервировать сейчас».
Чтобы проверить, какой из них обеспечит более высокий коэффициент конверсии, мы запускали эти две страницы бок о бок, пока не собрали достаточно данных, чтобы выбрать победителя.
Сможете угадать, какая страница выиграла?
Если вы угадали первое, то похлопайте себя по плечу.Первый вариант выиграл с огромным успехом, превзойдя более конкретный CTA на 300%. Это тоже не совпадение: в Linear мы заметили, что нечеткие призывы к действию, как правило, лучше подходят для целевых страниц лидогенерации.
Раздел «О нашем местонахождении»Elite Chiropractic — это местный бизнес, поэтому имело смысл включить раздел о местоположении вместе с некоторой динамической заменой текста. Это позволило нам автоматически отображать ближайшее к тому месту, где ищут потенциальные клиенты, без создания нескольких целевых страниц.
Совет. О разделах можно использовать динамическую замену текста.
Вы можете использовать конструктор целевых страниц, например Instapage, для добавления динамического текста на целевые страницы. Это может повысить коэффициент конверсии и сэкономить много времени и усилий по созданию целевой страницы для каждого местоположения.
Почему секции хиропрактики EliteХотя здесь нет надписи «Почему именно элитная хиропрактика», в этих разделах объясняется, почему вам следует посетить их клинику. Вы должны сделать эти разделы легко просматриваемыми, чтобы наиболее важные детали были выделены жирным шрифтом, легко читаемым текстом заголовка.Это позволяет читателям быстро получать самую важную информацию и должно значительно улучшить ваши показатели конверсии.
Этот раздел должен объяснить, почему ваши услуги лучше, чем у ваших конкурентов.
Изображения вашего продукта или услуги, подобные изображенному в этом примере, помогают проиллюстрировать, чего клиенты могут ожидать, гораздо эффективнее, чем просто текст.
Бонусный совет: По возможности делайте откровенные снимки сами, а не используйте стандартные фотографии. Мы обнаружили, что это особенно важно для предприятий здравоохранения и местных услуг.Фотографии ваших сотрудников и местоположения сделают вашу страницу более личной и дружелюбной, даже если они не идеальны.
Раздел отзывов клиентовХорошо, я знаю, о чем вы думаете. Это много текста, разве вы не сказали нам, чтобы он был коротким и приятным?
Хотя целевые страницы с меньшим количеством текста обычно работают лучше, из этого правила есть некоторые исключения.
Вы можете использовать A / B-тестирование, чтобы выяснить, предпочитают ли посетители более длинные отзывы или более короткие и сжатые отзывы.После проверки вы поймете, что лучше всего подходит для вашей страницы, но никогда не предполагайте, что будет работать лучше всего. Вместо этого думайте о своем предположении как о гипотезе. Вы можете подумать, что один вариант превзойдет другой, и это нормально, скорее всего, вы правы, но вы никогда не узнаете наверняка, пока не проверите его.
Люди верят тому, что говорят другие люди, похожие на них, — больше, чем они верят тому, что вы говорите о себе
И это именно то, что мы сделали для Elite Chiropractic, и оказалось, что посетителям больше нравились более длинные отзывы.Это небольшое изменение увеличило конверсию с полной прокруткой на 110%. Несомненно, стоящий тест.
Нижний колонтитулНижний колонтитул «Элитной хиропрактики» заканчивается так же, как и начинается, и это то, что вам нужно. Использование одного и того же призыва к действию в нижнем колонтитуле и разделе героев будет держать посетителей сосредоточенными на одной цели или на том, что мы называем соотношением внимания 1: 1.
Коэффициент внимания — это количество действий, которые вы можете сделать на одной целевой странице, по сравнению с количеством действий, которые вы хотите, чтобы клиенты делали.Чем жестче вы будете поддерживать это соотношение, тем выше будет коэффициент конверсии.
Заголовки в нижнем колонтитуледолжны резюмировать, что клиенты могут ожидать, нанимая вас или покупая ваш продукт.
Наконец, обратите внимание на заголовок, используемый в нижнем колонтитуле для Elite Chiropractic. Он повторно использует слово «Боль» и передает то же сообщение, что и в разделе героев страницы. Это помогает укрепить ожидания посетителей и добавляет эмоций.
Заключение по макету посадочной страницыПервое правило макета целевой страницы — это отсутствие правил макета целевой страницы.
Трудно усвоить урок…
Ладно, шучу, вроде…
Существуют передовые практики и множество отличных идей для тестирования, поэтому вам не придется каждый раз начинать с нуля. Я пытаюсь подчеркнуть, что каждая страница уникальна и требует отдельного набора инструментов для максимальной производительности. Поэтому важно не зацикливаться на одной и той же тактике, если она не работает. Вместо этого вам следует расставить приоритеты по наиболее важным элементам вашей страницы и поработать в первую очередь над ними.
Копия целевой страницы является наиболее важным аспектом вашей страницы, и если бы мы сузили ее еще больше, ваш главный заголовок и CTA были двумя наиболее важными элементами на вашей странице. Поэтому потратьте некоторое время на разработку и тестирование этих элементов, прежде чем переходить к другим разделам целевой страницы.
На очереди ваше социальное доказательство. По возможности убедитесь, что у вас есть отзывы и отзывы реальных людей и фотографии.
Наконец, если есть сомнения, проверьте это! Никогда не знаешь, как что-то будет работать, пока не попробуешь.Я оставлю вам несколько идей по тестированию, которые помогут вам начать работу.
- CTA — Протестируйте различный текст призыва к действию, цвет кнопки и размещение.
- Основной заголовок — проверьте заголовки разных типов, от вопросов до вдохновляющих или предлагающих скидку. Формы
- — попробуйте использовать длинные формы вместо коротких, а также одношаговые и многоступенчатые формы.
- Social Proof — Тестируйте обзоры с фотографиями и без, а также с длинными и короткими отзывами.
- Макет целевой страницы — проверьте длину страницы и попробуйте добавить новые разделы, удалить разделы и изменить порядок их расположения.
Мы будем рады узнать о вашем опыте работы с макетами целевых страниц, поэтому обязательно оставьте нам комментарий ниже.
Основные принципы оптимизации целевой страницы
Для того, чтобы любые маркетинговые усилия были эффективными и прибыльными, вы должны привлекать потенциальных клиентов на наиболее релевантные страницы вашего сайта. Превратить их в платежеспособных клиентов иногда может оказаться непростой задачей. Разве не было бы хорошо, если бы страницы, на которые попадают ваши посетители, предлагали именно то, что они искали в первую очередь? Именно поэтому мы используем целевые целевые страницы.
Получая трафик через выделенные целевые страницы, мы потенциально можем повысить вероятность преобразования этого трафика в платежеспособных клиентов.
Но сначала, что такое целевая страница?
В онлайн-маркетинге целевая страница определяется как веб-страница, которая служит первой страницей, на которую посетитель попал на , когда он или она посещает ваш сайт. Целевая страница может быть страницей, на которую пользователь попал после нажатия на результат поиска Google или после нажатия на ссылки с других сайтов, платные медиа-баннеры, сообщения в социальных сетях, ссылки электронной почты и т. Д.Например, когда вы размещаете рекламу в Google Рекламе, целевые URL ваших объявлений действуют как целевые страницы.
Целевая страница обычно включает четкий призыв к действию, связанный с желаемой основной целью, такой как привлечение потенциальных клиентов, увеличение продаж, увеличение числа подписок, увеличение загрузки контента и т. Д. Независимо от конкретной цели, как правило, общая цель остается неизменной: Превратить посетителей в квалифицированных клиентов .
Непрерывная оптимизация макета, копирования и дизайна ваших целевых страниц для улучшения общего впечатления от целевой страницы и ее соответствия конкретной целевой аудитории — важные шаги для обеспечения высоких коэффициентов конверсии и повышения производительности.
Целевые страницы обычно разбиваются на пять элементов:
1. Копия
Создайте четкую и увлекательную копию, которая вдохновит ваших потенциальных клиентов на действия. Развивайте их доверие и уверенность умным и творческим способом. Пишите для них; не им. Покажите свои преимущества перед функциями и объясните, что вы можете сделать для своих клиентов. Отформатируйте заголовки и основной текст в четком макете, чтобы его было легко читать и следовать за счет реализации простых для сканирования маркеров, выделенных слов, предложений, подзаголовков и т. Д.Никогда не недооценивайте эстетику.
Во многих отношениях текст сегодня имеет большее значение, чем когда-либо, но по некоторым причинам многие маркетологи не уделяют ему достаточно времени.
Вот несколько советов, которые помогут вам лучше писать текст:
- Пишите ясным и понятным языком. Бросьте модные словечки и маркетинговую ерунду. Пишите так, как вы говорите, от первого лица. Точно так же, как если бы вы написали электронное письмо другу.
- Структурируйте копию вокруг единственной цели. Должен быть сильный и четкий призыв к действию. Текст вокруг должен побуждать читателей к действию и усиливать призыв к действию.
- Включите социальное доказательство на основе реальных примеров. Заполните копию реальными примерами, от реальных людей и реальных брендов. Забудьте об использовании стандартных стоковых фотографий и фальшивых историй. Будьте искренними и настоящими.
2. Призыв к действию (CTA)
Создайте четкий и сильный призыв к действию (CTA) и выделите его в тексте и дизайне.Обычно хорошим практическим правилом является использование контрастных цветов или окружение кнопки CTA пробелом, чтобы отличить ее от других элементов. Учитывайте разные узоры, макеты, пропорции и размеры.
Выбор правильного размера и дизайна очень важен, так как вы хотите, чтобы он был привлекательным и мотивирующим, но вы не хотите, чтобы он был непропорционально большим; в противном случае он может подавить все остальное.
Что касается языка, то выбор правильных слов может иметь огромное значение для производительности преобразования.Будьте информативными и прямолинейными и не соглашайтесь на стандартные, скучные призывы к действию «отправить» или «отправить».
3. Индикаторы доверия
Продемонстрируйте положительные отзывы, связанные подтверждения, обзоры, успешные тематические исследования, известные логотипы клиентов, с которыми вы работали, профессиональные сертификаты, полученные вами, награды, которые вы получили, и т. Д. Преимущества использования элементов социального доказательства уже были продемонстрированы во многих тематических исследованиях целевых страниц.
Повысьте доверие к себе и уменьшите беспокойство или любые серьезные ограничения при принятии решений.Помогите потенциальному покупателю. И будьте искренними и настоящими, используя скриншоты твитов реальных людей, показывая реальные фотографии ваших клиентов, делясь скриншотами электронных писем с хорошими отзывами и т. Д.
Хотя для получения достоверных и впечатляющих социальных доказательств может потребоваться немало усилий, особенно для новых брендов, это один из самых влиятельных инструментов продаж, которые вы можете использовать на своей целевой странице. Это того стоит.
4. Герой выстрел
«Снимок героя» — это графическое представление вашего продукта или предложения, размещенное на видном месте на странице, при этом непосредственно поддерживая заголовок и общий обмен сообщениями — в правильном контексте и для нужных пользователей.Отличный снимок героя может пробудить чувство сопереживания и вызвать интерес к вашему предложению.
Фотография вашего реального продукта или членов команды будет выглядеть более заслуживающей доверия, чем стоковая фотография. Так что держите это в покое. Помните, что улыбающиеся лица могут повысить коэффициент конверсии.
5. Справка о выплате пособий
Включите подробное объяснение преимуществ вашего предложения. Для облегчения чтения всегда рекомендуется организовывать преимущества с помощью маркированного списка вместо параграфа, состоящего из одного блока.Опишите проблему, которую решаете, и удалите ненужные прилагательные.
Придерживайтесь сути и общайтесь со своими потенциальными клиентами ясно и целенаправленно.
Создание целевой страницы с высокой конверсией
Одним из самых серьезных препятствий на пути к достижению целей оптимизации опыта является отсутствие четкой и краткой стратегии. Хотя не существует единого идеального процесса создания целевой страницы, подходящего для всех случаев использования, я делаю четыре шага, которые выполняю всякий раз, когда разрабатываю новую целевую страницу:
Шаг №1: Знайте свою целевую аудиторию
Знание вашего рынка — самый первый шаг в любом процессе создания целевой страницы.Прежде чем планировать идеальную целевую страницу, задайте себе следующие вопросы:
- Кто, , является вашей идеальной целевой аудиторией?
- Почему им было бы интересно то, что вы предлагаете?
- Какую вы решаете?
- Как, , решить эту проблему?
Полностью понять характеры и уникальные потребности своей целевой аудитории, а затем соответствующим образом адаптировать свои сообщения. Если вы уже собирали данные о посетителях своего веб-сайта или других целевых страниц, вы можете получить некоторые из этих ценных сведений с помощью программного обеспечения для веб-аналитики.Например, я обычно использую отчеты «Демография и интересы» в Google Analytics, чтобы понять разбивку по возрасту, полу, сегментам рынка и категориям моей аудитории. Проведение дополнительных опросов и интервью может быть хорошим способом узнать больше о боли ваших потенциальных клиентов.
Шаг № 2: Определите свои бизнес-цели и ключевые показатели эффективности (KPI)
Тщательно определите цель и придерживайтесь ее на протяжении всего рабочего процесса. Убедитесь, что вы сосредоточены только на одной цели.Это особенно важно, чтобы исключить любой нежелательный выбор и ненужные отвлекающие факторы. Было бы неплохо придерживаться принципа KISS: не заставляйте посетителей слишком много думать о действиях, которые от них ожидают.
Безопасно направляйте их и показывайте им путь к быстрому и эффективному достижению их целей. Основная цель должна быть четкой и заметной на вашей странице. Каждый отдельный элемент на вашей странице, будь то изображение, простой текст или видео, должен напрямую поддерживать это единственное желаемое действие.
Шаг № 3: Дизайн целевой страницы с учетом бизнес-целей и клиентов
Создайте очень аккуратный и чистый дизайн и макет. Начните с простого каркаса и работайте над ним со своими UX-экспертами или веб-дизайнерами. Более эффективной тактикой было бы упрощение создания и редизайна целевой страницы, что также является одной из самых сложных тактик.
Обратите особое внимание на сгиб. Хотя в планировании длинных или коротких целевых страниц нет общего правильного или неправильного, очень важно размещать ваши основные уникальные торговые предложения в верхней части страницы, где существует первоначально видимая область страницы.Так вы сможете быстрее привлечь внимание пользователей. Не требуйте от посетителей прокрутки вниз для получения наиболее ценной информации. Сделайте это выскочить!
Шаг №4: Постоянно тестируйте и оптимизируйте
Примерно 90% компаний считают оптимизацию коэффициента конверсии важной и даже решающей для своей общей стратегии цифрового маркетинга (источник: Econsultancy). Постоянная оптимизация целевой страницы имеет решающее значение для успеха. Фактически, такие компании, как Google, Amazon, Netflix и Facebook, ежегодно проводят тысячи экспериментов.Как однажды сказал Джефф Безос: « Наш успех в Amazon зависит от того, сколько экспериментов мы проводим в год, в месяц, в неделю, в день. ”
Оптимизация требует тестирования, а A / B-тестирование всегда является хорошей методологией для оптимизации ваших целевых страниц, так как вы никогда не сможете просто полагаться на догадку или интуицию при угадывании того, что лучше всего подойдет для вашей целевой аудитории. Протестируйте различные заголовки, текст страницы, длину страницы, структуру и расположение элементов, использование меню навигации и любые изменения в общем дизайне.
Помните, что тестирование — это непрерывный процесс, а не разовая процедура. У продолжающегося процесса оптимизации конверсии целевой страницы нет финиша. ( P.S. Вы можете следовать нашему четырехэтапному плану оптимизации коэффициента конверсии, чтобы облегчить вам построение постоянной стратегии CRO!)
Имейте в виду, что ваши посетители очень разные, и один тип опыта не может вместить их всех. Используйте расширенные стратегии сегментации аудитории и персонализации, чтобы предоставлять нужные варианты контента нужным пользователям.Чем больше вы тестируете и настраиваете, тем больше вы сможете повысить конверсию и общее удовлетворение потребностей пользователей.
Читать далее
Психология маркетинга с социальными доказательствами для увеличения конверсии Как никогда не иссякнуть идеи оптимизации коэффициента конверсии8 лучших советов по созданию эффективной целевой страницы | by SteelKiwi Inc.
Отрасли промышленности по всему миру переместили свои маркетинговые кампании в онлайн. Целевые страницы помогают компаниям создавать эффективные маркетинговые стратегии для продвижения товаров и услуг.Целевая страница является важной частью процесса разработки дизайна и направлена на то, чтобы привлечь посетителей и продвинуть их дальше по воронке конверсии. Дизайн целевой страницы должен быть безупречным, и именно об этом мы и поговорим в этой статье. Как создать целевую страницу, которая будет достаточно эффективной, чтобы привлекать посетителей и побуждать их покупать или подписываться?
Содержание вашей целевой страницы должно быть по существу, подчеркивая ваше уникальное ценностное предложение (UVP). Предлагаемый вами контент будет зависеть от типа продукта или услуги, которые вы продаете.Помните, что у вас есть примерно восемь секунд, чтобы убедить пользователей в том, что ваше предложение заслуживает внимания. Избыточная информация может ошеломить посетителей и заставить их немедленно покинуть страницу. Говорите со своей аудиторией простым языком и расскажите, как вы можете сделать их жизнь лучше.
Вот 5 текстовых элементов с наибольшей конверсией.
Заголовок
Заголовок — это первый текст, который видят ваши посетители. Это одна из ваших первых возможностей повлиять на коэффициент конверсии.Используйте заголовок, в котором четко указаны самые большие преимущества, которые предлагает ваш продукт. В заголовке расскажите вашим посетителям, что они могут получить на вашей целевой странице.
Подзаголовок
Наиболее эффективные целевые страницы показывают, что предлагается с заголовком, и используют подзаголовок для дальнейшего объяснения предложения и распространения UVP. Подзаголовки могут показать все, что вы предлагаете, в новом свете. Некоторые целевые страницы предпочитают помещать свои ценностные предложения в заголовок и использовать подзаголовок для обсуждения реальных предложений.
В одном из наших проектов, показанных ниже, вы можете увидеть, как подзаголовок дополняет заголовок. Когда пользователи попадают на страницу, они четко понимают, что делает служба, и могут сразу же нажать кнопку с призывом к действию.
Источник: KidSmart, скоро появится приложение.Призыв к действию
Обеспечьте захватывающие и интерактивные кнопки призыва к действию (CTA), которые побуждают посетителей совершить покупку, зарегистрироваться, запросить демонстрацию или сделать что-то еще. Наилучший вариант — разместить призывы к действию вверху и внизу страницы, чтобы пользователям не приходилось прокручивать страницу до конца, чтобы нажать.Или вы можете добавить плавающую кнопку с призывом к действию, которая всегда видна. Ваши кнопки с призывом к действию будут хорошо выглядеть, если они меняют цвет или включают анимацию, чтобы развлекать посетителей, добавляя к общему впечатлению, которое стремится создать ваш бренд.
Еще раз проверьте, что ваше сообщение в CTA и заголовок целевой страницы соответствуют. Если заголовок читается иначе, чем ваш призыв к действию, это может привести к путанице, в результате чего посетители будут сомневаться, связан ли CTA не с той страницей. Устраните всю путаницу и убедитесь, что ваш текстовый контент отражает то, что вы обещали в своем призыве к действию — и наоборот.Если в вашем призыве к действию есть преднамеренная ловушка (например, отсутствие бесплатной пробной версии), вы потеряете доверие пользователей.
В другом проекте, над которым мы работали, есть кнопка CTA, которая текстуально и логически связана с заголовками и подзаголовками. Более того, у него есть приятная анимация, чтобы заинтересовать посетителей. Зарегистрированные пользователи могут просто нажать кнопку регистрации в правом верхнем углу, чтобы перейти на сайт.
Источник: Мевенто, платформа скоро появится.Преимущества
Совершенно необходимо, чтобы ваше уникальное ценностное предложение было ясным и убедительным.Для этого вы можете перечислить свои преимущества, используя формат маркированного списка. Маркировка преимуществ — это краткие описания продукта или услуги, которые выделяют их. Сначала укажите самые сильные преимущества вашего продукта, а в конце — самые слабые, представив вашей целевой аудитории так называемую иерархию ценностей. Ваш маркированный список не должен быть длинным: достаточно пяти-семи пунктов, чтобы не перегружать пользователей.
Платформа Marketplace, которая представляет собой пример списка преимуществ для предприятий и клиентов с поддерживающими изображениями:
Источник: snaapy.comФормы для привлечения потенциальных клиентов
При разработке целевой страницы делайте формы краткими и запрашивайте только важную информацию. Как маркетолог, вы хотите собрать как можно больше данных. Однако когда дело доходит до создания хорошего дизайна целевой страницы, придерживайтесь принципа «меньше значит больше». Помните, что вы всегда можете запросить дополнительную информацию на странице благодарности. Пользователи обычно не возражают предоставить свои имена и адреса электронной почты. Однако если вы попросите указать номера телефонов или дату рождения, когда это не обязательно, это может помешать посетителям заполнять эти поля из-за страха навязывания текстовых сообщений и телефонных звонков.Лучший способ определить, какая длина формы лучше всего подходит для вашего бизнеса, — это проверить ее самостоятельно.
Хороший дизайн целевой страницы — минималистичный и привлекательный, с ненавязчивым представлением информации. Чтобы не отвлекать людей от лишних визуальных элементов, используйте чистый, простой дизайн с большим количеством белого пространства, которое удерживает людей на вашем продукте и призывает к действию. Выберите крупный шрифт, чтобы посетители могли легко прочитать и понять, о чем ваша целевая страница. Также убедитесь, что ваш дизайн не увеличивает время загрузки страницы.
Проверьте макет своей страницы при разных разрешениях, чтобы убедиться, что даже люди со старыми мониторами смогут видеть ваш заголовок и призыв к действию без прокрутки. И обязательно проверьте, как ваш макет отображается на мобильных устройствах.
Большинство посетителей, скорее всего, прокрутят вниз для получения дополнительной информации, поэтому не бойтесь добавлять блоки, которые отображаются при прокрутке страницы.
Новое приложение под названием Your Living-room Trainer, которое применяет минималистский дизайн и пустое пространство, чтобы сделать целевую страницу светлой и помочь пользователям сосредоточиться на том, что предлагает услуга.
Источник: ylt-trainer.comФотографии могут улучшить взаимодействие посетителей с вашим предложением так же, как текст. Навык визуального мышления позволяет людям обрабатывать и интерпретировать значение того, что они видят. Визуальные подсказки могут передать вашим посетителям дополнительную информацию. Делайте высококачественные снимки, демонстрирующие лучшие стороны вашего продукта или услуги. Убедитесь, что вы нанимаете фотографа, который знает визуальные приемы, чтобы предложить вам преобразованные фотографии.
Приложение для люксового бренда, в которое мы добавили фоновое изображение часов на мужском запястье, чтобы подчеркнуть шикарный характер компании и создать впечатление изысканности.
Источник: Roman-mayer.ch, платформа скоро появится.Включите все возможные сигналы доверия, чтобы показать посетителям, что ваше предложение и бренд надежны. Большинство сайтов демонстрируют социальное доказательство в виде списка клиентов, упоминаний в прессе, статистики использования и отзывов.
На хороших целевых страницах широко используются отзывы, знаки доверия и значки. Отзывы считаются классическим сигналом доверия, который успокаивает посетителей. Значки доверия включают логотипы известных брендов, с которыми вы работали, одобрения и признания, которые вы получили, а также групп и коалиций, в которых вы состоите.Все эти знаки одобрения придадут вашим клиентам больше уверенности в вашем бренде и побудят их двигаться вниз по воронке конверсии.
При демонстрации логотипов как сигналов доверия держите их чистыми и целенаправленными. Сделайте логотипы квадратными и отобразите их в оттенках серого, чтобы сосредоточить внимание на своем предложении.
Недостаточно просто создать целевую страницу. Вам также необходимо проверить, работает ли он хорошо. Чтобы проверить, может ли ваша целевая страница стимулировать конверсии, вам необходимо выполнить A / B-тестирование, чтобы собрать ценную аналитику о том, как пользователи взаимодействуют с целевой страницей.
Что именно тестировать, зависит от источника вашего трафика, ваших конечных целей, которые вы можете установить в своем инструменте тестирования. Например, вы можете проверить, как часто посетители нажимали кнопку, смотрели видео или отправляли форму для лида. Кроме того, вы можете видеть, как пользователи попадали на вашу страницу и какое устройство они использовали. Чтобы понять, конвертируется ли ваша целевая страница, вы можете использовать Google Analytics или инструмент Hotjar.
Вы можете выполнить A / B-тестирование для следующих элементов:
- Заголовки
- CTA
- Изображения и графика
- Кнопки (внешний вид, текст и расположение)
- Сигналы доверия
- Цитаты из прессы
- Размещение элементов страницы (блоки)
- Навигационные ссылки
Чтобы расширить охват, бренды приняли стратегии, ориентированные на мобильные устройства, поскольку половина всей веб-активности приходится на мобильные устройства.Ваша целевая страница должна иметь адаптивный дизайн, чтобы повысить коэффициент конверсии. Эффективная целевая страница должна отлично смотреться на мобильных устройствах, быстро загружаться и быть ультра-кликабельной.
Включите значки социальных сетей, чтобы ваши клиенты могли рассказать о вашем бренде. Иконки социальных сетей становятся своего рода рекламной кампанией из уст в уста. Чтобы не загромождать вас, используйте кнопки только тех социальных платформ, которые использует ваша целевая аудитория. Не забудьте добавить опцию пересылки электронной почты, поскольку люди по-прежнему любят делиться информацией по электронной почте.
Целевые страницы с видео используют встроенные видеоролики, чтобы проиллюстрировать уникальное ценностное предложение. Видеоконтент не является обязательным, но он может дать вам полный обзор вашего продукта или услуги, чего нельзя сделать с помощью текста и изображений.
Люди положительно реагируют на эмоциональные сигналы, побуждающие зрителей щелкнуть мышью.
Видео предлагают развлечение, вызывают эмоции и несут самостоятельную ценность. Вы даже можете создавать короткие запоминающиеся фильмы, чтобы продвигать свой продукт или услугу и создавать незабываемые впечатления от вашего бренда.
Представители промышленности, а также индивидуальные предприниматели осознают, насколько важно присутствие в Интернете для связи с пользователями. Целевые страницы отличаются от домашних страниц веб-сайтов и предоставляют компаниям уникальную возможность проводить целенаправленные маркетинговые кампании, ориентированные на клиента. Все дело в том, насколько профессионально они созданы. Помните, что технически хорошие целевые страницы также должны иметь хорошо структурированный контент для повышения коэффициента конверсии. Каждая деталь имеет значение, так как влияет на посетителя.Чем проще и аккуратнее целевая страница, тем больше шансов, что она превратит пользователей в потенциальных клиентов.
Нужна помощь в оптимизации или разработке целевых страниц для вашего бизнеса? Свяжитесь с нами, и мы предоставим лучшую команду разработчиков для создания конверсионных целевых страниц.
9 советов по дизайну целевой страницы для повышения конверсии
Включите подробную информацию о продукте
Целевые страницы, особенно те, которые предназначены для того, чтобы помочь вам продавать больше товаров, дают вам прекрасную возможность выделить конкретный товар и рассказать вашим клиентам, почему они им нужны.Включите описательную информацию о продукте и не забудьте подробно остановиться на важных характеристиках продукта, например о размерах или размерах. Расскажите своим клиентам, что делает ваши продукты — и ваш бизнес уникальными, включая социальные доказательства. Помните: рассказывание историй часто приводит к обращению.
Напишите убедительное описание продукта
Одним из наиболее важных элементов любой страницы продукта является хорошо написанное описание продукта, в котором четко указано, что вы продаете и почему покупателю это просто необходимо.Как и в случае со всем вашим маркетингом, копия на странице вашего продукта должна быть брендовой и иметь отношение к вашей аудитории, чтобы иметь возможность превращать посетителей в клиентов, но есть еще несколько вещей, которые следует учитывать при написании описания вашего продукта. товар.
Прямой
Исследование показало, что 79% людей склонны сканировать веб-страницу, а не читать ее полностью, поэтому первое описание, которое клиенты видят на странице вашего продукта, должно быть четким и точным.
Ответьте на вопросы, которые могут возникнуть у покупателей о вашем продукте
Перед совершением покупки покупатели должны убедиться, что они точно знают, что они покупают.Хотя вы, вероятно, не сможете предвидеть все возможные вопросы, которые могут возникнуть, вам нужно убедиться, что у клиентов достаточно информации, чтобы покупать с уверенностью.
Если вы, например, продаете предмет одежды, расскажите покупателям, какой это тип ткани и как они могут рассчитывать, что этот предмет подойдет.
Оживите свой продукт с помощью изображений
Покупатели не могут физически взаимодействовать с продуктами во время совершения покупок в Интернете. Это означает, что они полагаются на фотографии ваших товаров, чтобы убедить их совершить покупку.Фактически, 92% потребителей говорят, что визуальные эффекты являются главным влиятельным фактором, влияющим на решение о покупке, поэтому убедитесь, что изображения на вашей странице передают текстуру, размер, запах или любые другие аспекты вашего продукта, которые могут быть интересны для вас. клиенты.
Несколько изображений лучше, чем одно
В своем отчете по исследованию потребителей за 2018 год Salsify обнаружил, что 73% людей хотят видеть 3 или более изображений, рассматривая покупку. К счастью, большинство мобильных устройств оснащены отличными камерами (а также встроенными инструментами редактирования), поэтому, даже если вы не профессионал в области фотографии, легко сделать как можно больше красивых, высококачественных и привлекательных изображений для своего интернет-магазина. как вам нужно.
Показать под разными углами
Помогите своим клиентам визуализировать, как товар выглядит лично, используя изображения с разных точек зрения или с разных точек зрения.
Планируя свои фотографии, обязательно включите хотя бы одно масштабное изображение; 42% людей попытаются определить размер и масштаб по изображениям на странице продукта.
Но убедитесь, что не снижаете время загрузки вашего бизнес-сайта.
Используйте образы образа жизни
ИзображенияLifestyle — отличный способ рассказать историю вашего продукта и помочь вашим клиентам представить, как они могут использовать его в своей повседневной жизни.Включите места, реквизит и людей, которые дадут вашей аудитории больше информации о том, что вы продаете.
Нужны еще несколько советов и идей, вдохновляющих на создание фотографии стиля жизни? Ознакомьтесь с этими полезными ресурсами от Shopify, Jungle Scout и Threadless.
Рекомендации по дизайну посадочных страниц
Как опытный маркетолог вы знаете, что для продвижения ваших предложений важно создавать целевые страницы после клика.Выделенные автономные страницы позволяют вашему предложению / кампании достичь поставленных целей:
Увеличьте количество конверсий.
При правильном дизайне целевые страницы после нажатия могут убедить посетителей нажать кнопку с призывом к действию и войти в вашу маркетинговую воронку. Щелчок с призывом к действию — это то место, где ваши посетители отправляются в путешествие с вашим брендом. Здесь вы превращаете их в потенциальных клиентов, а затем превращаете в своих постоянных клиентов.
Вопрос в том, не слишком ли много для одной страницы?
Абсолютно нет.
При правильной оптимизации целевые страницы после клика могут привлекать и удерживать клиентов. Ключ к успеху целевой страницы после клика заключается в количестве страниц, которые вы создаете для продвижения конкретных предложений, и в том, как вы их оформляете. Например, идеально создать отдельную целевую страницу после щелчка для продвижения вашей электронной книги и создать еще одну специальную страницу, чтобы предлагать посетителям посетить веб-семинар, на котором вы говорите об этой электронной книге — каждое предложение должно иметь отдельную страницу.
Наши предыдущие руководства показали вам, как оптимизировать отдельные элементы целевой страницы после щелчка, и продемонстрировали примеры целевой страницы после щелчка, чтобы дать вам вдохновение для правильной страницы. Пришло время показать вам точные принципы проектирования, которые делают все это возможным.
Но, прежде чем мы это сделаем, важно обсудить один важный аспект целевых страниц после клика. Этот единый принцип требуется для всех ваших страниц, независимо от вашей отрасли и типа создаваемой вами страницы:
целевых страниц после клика должны направлять посетителей к одному действию.
Это представляет собой цель конверсии на странице, и эта цель может варьироваться в зависимости от кампании, которую вы проводите — от регистрации участников веб-семинара до получения бесплатных пробных клиентов для обновления.
Однако все целевые страницы после клика должны иметь только одну цель конверсии.
Почему целевые страницы после клика должны иметь единую цель
Основным фактором, отделяющим целевую страницу после клика от вашей домашней страницы, является сингулярность.
Традиционная домашняя страница загромождена и продвигает множество предложений, тогда как специальная страница не отвлекает и заставляет посетителей сосредоточиться только на одном действии (действии, которое вы хотите, чтобы они совершили).Это существенное различие делает эти отдельные страницы более подходящими для создания конверсий по сравнению с вашей домашней страницей или любой другой страницей веб-сайта.
Если дизайн и копия целевой страницы после клика не соответствуют правилу сингулярности, эта страница не будет отличаться от любой другой загруженной страницы на веб-сайте.
Чтобы продемонстрировать это, вы не можете ожидать большого количества конверсий с такой загруженной домашней страницы:
И наоборот, эта выделенная страница с гораздо большей вероятностью приведет к конверсиям:
Если вы хотите продемонстрировать программное обеспечение Kissmetrics, какая страница, по вашему мнению, лучше всего подходит для увеличения числа регистраций?
Да, второй.
Создайте целевые страницы после клика таким образом, чтобы ваше предложение привлекало внимание. Вот в чем вам поможет это руководство. Мы не только изучим передовые методы создания целевой страницы после клика, но и покажем вам, какую роль психология играет в общем процессе дизайна.
Психология играет важную роль в успехе ваших маркетинговых материалов, в том числе целевых страниц после клика.Это потому, что ваши посетители — люди, которые делают иррациональный выбор, основываясь на своих когнитивных предубеждениях и прошлом опыте.
Использование правильных психологических принципов в ваших интересах в дизайне целевой страницы после клика убеждает ваших посетителей в том, что вы действительно являетесь тем брендом, который решит их проблему, и это направляет их курсор к кнопке CTA.
Это также известно как психология обращения.
Использование психологии на ваших целевых страницах после клика, чтобы повлиять на способность посетителей принимать решения, помогает вам превратить их в клиентов.
В следующем разделе руководства обсуждаются эти психологические принципы и объясняется, как можно практически использовать эти принципы на своих целевых страницах после клика.
Как создавать убедительные целевые страницы после клика
Что должно делать ваша целевая страница после клика?
Убедите посетителей достаточно, чтобы они совершили конверсию в вашей форме.
элементов целевой страницы после клика должны дополнять друг друга, чтобы убедить ваших посетителей достичь вашей цели конверсии.
Вот краткий обзор характеристик, которые должны быть убедительными для элементов целевой страницы после клика:
- Заголовок должен включать ваш UVP, чтобы посетители точно знали, как вы собираетесь решить их проблему.
- Изображение должно быть актуальным и сопереживающим, чтобы объяснять, что делает ваш продукт, а также эмоционально связывать с вашими посетителями.
- В вашем экземпляре должна быть исчерпывающая информация о ваших предложениях, преимуществах и возможностях.
- Индикаторы доверия, такие как значки клиентов, значки доверия, ссылка на политику конфиденциальности и отзывы клиентов, помогают вселить уверенность в конверсию в вашей форме.
- В форме сбора потенциальных клиентов не следует просить посетителей предоставлять информацию, которая не является необходимой для предложения. Кроме того, поля формы должны быть правильно расположены.
- Ваша кнопка CTA должна четко представлять ценность. Он должен вызывать чувство срочности, быть оформлен в контрастном цвете и написан с использованием персонализированной копии.
Существуют определенные психологические принципы, которые вы можете применить для создания целевых страниц после клика, которые влияют на конверсию ваших посетителей. В этой главе будут рассмотрены два основных принципа:
- Принципы воздействия
- Когнитивные искажения
6 принципов влияния Чалдини
Теория влиянияЧалдини состоит из следующих шести фундаментальных принципов, которые вы можете реализовать, чтобы убедить посетителей совершить конверсию:
1.Принцип лайки
Люди имеют тенденцию быть убежденными людьми, которые им нравятся. Один из способов сделать это — создать свои страницы так, чтобы на них были представлены вы и ваша команда. Включите индивидуальные фотографии вашей команды на работе или добавьте видео с человеческим голосом, которое сможет общаться с вашими посетителями.
Добавление реальных фотографий к отзывам клиентов также запускает принцип симпатии и убеждает посетителей совершить конверсию.
Чтобы продемонстрировать, когда Signal v.Компания Noise протестировала «человеческую» страницу по сравнению с исходным дизайном, и они увидели увеличение конверсии на 102,5%:
Видите, как улыбающаяся женщина на целевой странице после клика лучше привлекает вас? Ваши посетители, скорее всего, будут испытывать те же эмоции и останутся дольше, чтобы узнать больше.
Кроме того, включение изображения счастливого человека на вашу целевую страницу после клика может помочь в повышении коэффициента конверсии, поскольку оно вызывает эмоциональную реакцию у ваших посетителей.
2.Принцип взаимности
Людям нравится делать что-то для других, которые делают что-то для них. Итак, если вы ожидаете, что посетители подпишутся на вашу услугу только потому, что вы сказали им, насколько она хороша, ожидайте долгого ожидания.
Хотите информацию о ваших посетителях? Предложите им что-нибудь взамен — для этого и создается типичная сжатая страница.
На страницеCopy Hackers посетителей просят ввести свой адрес электронной почты в обмен на код купона со 100% скидкой на одну из их оригинальных книг:
Другой подход — сначала предложить вашим посетителям небольшой кусок информации, а затем дать им остальную информацию в обмен на их контактные данные.Вот что делает один из вариантов 10 лучших стилей целевой страницы после клика:
Если вы хотите увеличить количество подписчиков на вашу услугу, попробуйте сначала предложить им бесплатную пробную версию — это то, что делает Autopilot на своей целевой странице после клика:
3. Принцип социального доказательства
Принцип социального доказательства гласит, что люди склонны делать то, что, по их мнению, делают другие люди (например, они сами). Вот откуда взялось стадное мышление.Ваша целевая страница после клика должна включать убедительные отзывы клиентов от предыдущих клиентов, которые могут поручиться за ваш продукт / услугу.
В качестве альтернативы вы также можете указать количество довольных клиентов, которых имеет ваш сервис, как это делает Hootsuite, на своей целевой странице после клика:
4. Принцип согласованности
Нам нравятся люди, которые выполняют взятые на себя обязательства. Другими словами, люди ценят людей, которые остаются верными своему слову.
Вы можете применить этот принцип к выделенным страницам, установив соответствие сообщения между объявлением и самой целевой страницей после клика.
Это реклама Facebook для руководства Vidyard по персонализации вашего маркетинга с помощью видео:
Это целевая страница после клика, связанная с объявлением:
Страница и объявление имеют отличное сообщение, потому что:
- Заголовки объявления и страницы содержат одно и то же сообщение.
- Изображение в объявлении соответствует изображению на странице.
- Цвет кнопки CTA одинаков как на целевой странице объявления, так и на целевой странице после клика.
Чтобы повысить коэффициент конверсии, поддерживайте постоянный путь посетителей, убедившись, что сообщение совпадает между вашим объявлением и целевой страницей после клика.
5. Принцип авторитета
Принцип власти диктует, что люди склонны подчиняться авторитетным фигурам. Один из способов укрепить авторитет вашей целевой страницы после клика — это добавить бейджи клиентов от уважаемых компаний.Это поможет вашим посетителям понять, что надежные компании доверяют вашим продуктам или услугам.
Crazy Egg следует этому принципу на своей целевой странице после клика:
Авторитетность целевых страниц после клика может быть продемонстрирована путем включения отзывов от влиятельных людей в вашей отрасли. Хотя приведенный ниже пример взят с домашней страницы Backlinko, которая включает панели навигации и полный нижний колонтитул, он демонстрирует, что отзывы от влиятельных лиц (таких как Нил Патель) помогают укрепить доверие:
6.Принцип дефицита
Людям нужно больше того, чего они не могут иметь, то есть воспринимаемый дефицит влияет на способность посетителей принимать решения.
Вы можете сделать свое предложение более привлекательным, поставив на него часы (таймер обратного отсчета целевой страницы после щелчка сделает свое дело).
Вот как Instapage использует таймер обратного отсчета, чтобы стимулировать регистрацию на веб-семинары:
Вы также можете добавить срочности, предложив посетителям что-то в течение ограниченного времени.В предложениях по бесплатной пробной версии часто используется эта стратегия.
Это то, что делает целевая страница Animoto после клика:
Вы можете применить принцип дефицита к отдельным страницам в форме срочности. Для этого создайте свою копию таким образом, чтобы посетители понимали, что им лучше действовать сейчас, если они хотят получить то, что вы предлагаете.
Merlin’s Pest Control делает с их копией кнопки CTA:
Копия кнопки CTA делает предложение срочным.
Вот инфографика, которая суммирует принципы влияния Чалдини.
Когнитивные предубеждения
Когнитивные предубеждения — это склонности людей мыслить определенным образом, которые заставляют их делать иррациональные выборы и решения.
Ваши посетители — люди, и они не всегда действуют рационально. Ваша задача как маркетолога — понять, в чем заключаются эти отклоняющиеся тенденции, и использовать их в своих интересах при разработке целевых страниц после клика.
Эффект фон Ресторфа
Согласно эффекту Фон Ресторфа, мы склонны запоминать то, что выделяется. Ваши посетители запомнят вашу кнопку с призывом к действию гораздо ярче, если вы сделаете ее контрастным цветом и выделите ее.
Это то, что делает целевая страница после клика AWeber:
Зеленый цвет выделяется на сером фоне, заставляя посетителей запоминать кнопку перед тем, как покинуть страницу.
The Deictic Gaze
Когда мы видим, что кто-то смотрит на объект, наш мозг действует рефлекторно, и мы тоже смотрим на этот объект.Это Дейктический взгляд в действии. Что касается целевых страниц после клика, то с помощью ориентиров, указывающих на вашу кнопку с призывом к действию, вы привлекаете больше внимания посетителей к кнопке, убеждая их нажать на нее.
Postcard Mania использует указатель направления, чтобы указать на кнопку CTA, привлекая больше внимания посетителей к «приступить к работе»:
Эффект превосходства изображения
Согласно эффекту превосходства изображения, люди склонны понимать концепции и легче вспоминать их, когда концепции представлены в форме изображений, а не копий.
Включение релевантных изображений на целевые страницы после клика помогает посетителям лучше понять ваше предложение. А когда вы добавляете изображения вместе с полезной копией, люди с большей вероятностью нажмут вашу кнопку с призывом к действию.
Целевая страница после клика HubSpot не только демонстрирует преимущества сервиса с помощью копии, но также использует скриншоты панели управления вместе с копией. Это дает их посетителям оптимальные впечатления от просмотра:
Эффект фокусировки
Эффект фокусировки — это тенденция людей придавать слишком большое значение одному аспекту события.Вы можете использовать эту когнитивную предвзятость в своих интересах на целевых страницах после клика, заставив посетителей сосредоточиться на вашем уникальном ценностном предложении.
Ваш продукт или услуга имеет целый ряд преимуществ и функций для ваших целевых клиентов. Однако, когда вы выделяете свой UVP больше, чем какие-либо другие преимущества, клиенты в первую очередь привязываются к этому заявлению, которое убеждает их щелкнуть вашу кнопку с призывом к действию.
Это то, что Avast делает со своей целевой страницей после клика, добавляя их UVP в заголовок:
Конечно, на странице упоминаются и другие преимущества:
Но, сосредотачивая внимание на своей UVP в заголовке, они позволяют своим посетителям закрепиться и сосредоточиться на этом конкретном преимуществе.
лучших практик для целевой страницы после клика — это лишь половина уравнения конверсии. Чтобы максимально увеличить количество целевых страниц после клика, примените психологию конверсии к процессу создания целевой страницы после клика.
Порядок, в котором элементы появляются на вашей странице, также играет жизненно важную роль в получении конверсий.
При разработке макета важно учитывать, как посетители, скорее всего, будут просматривать вашу страницу.По сути, посетители могут сканировать ваши страницы двумя способами, как было отмечено в исследованиях слежения за глазами: F-образный и Z-образный.
Модель F
F-шаблон (он же «быстрый» шаблон) назван из-за направления, в котором движется глаз пользователя при сканировании страницы, которое выглядит примерно так:
Исследование с отслеживанием взглядов, проведенное Nielson Norman Group с участием 232 пользователей, показало, что основное поведение участников при чтении оставалось довольно постоянным на разных веб-сайтах.Этот метод чтения напоминал букву F и имел следующие компоненты:
- Сначала пользователи читают в горизонтальной строке, обычно начиная с верхней части области содержимого.
- Затем пользователи переместили взгляд вниз по странице и прочитали вторым горизонтальным движением.
- В конце концов, пользователи отсканировали страницу с левой стороны по вертикали.
Исследование с отслеживанием глаз не показало, что пользователь смотрит только на эти три области. Скорее, он пришел к выводу, что движение глаз было более быстрым и неравномерным на других участках страницы.
Что это означает для вашей целевой страницы после клика
Поскольку вы знаете, как люди будут просматривать вашу страницу, используйте эти знания, чтобы разместить наиболее важные элементы именно там, где посетители, вероятно, обратят наибольшее внимание.
F-шаблон подходит для страниц с большим содержанием контента, поэтому шаблон хорошо работает на более длинных рекламных страницах. Однако вы также можете создавать свои короткие страницы, учитывая этот шаблон.
Так посетители будут видеть страницу Fleetmatics:
- Пользователь начинает читать страницу по горизонтальной строке; здесь они увидят логотип компании и контактный номер.
- Затем они будут читать во второй горизонтальной строке; в этой области отображается основной заголовок и изображение.
- Наконец, они будут сканировать страницу в вертикальном движении; здесь они увидят кнопку CTA.
Z-образный узор
Z-шаблон, аналогичный F-образцу, — это имя, данное тому, как пользователь просматривает страницу. В то время как F-шаблон может быть более подходящим для страниц с большим количеством контента, Z-шаблон в основном предназначен для целевых страниц после щелчка, которые содержат минимальную копию.
Метод чтения Z-шаблона имеет следующий порядок:
- Пользователь начинает с левого верхнего угла страницы и быстро просматривает ее.
- Затем пользователь одновременно смотрит влево и вниз по диагонали.
- В конце концов, поле зрения пользователя снова перемещается по горизонтальной линии слева направо.
Давайте посмотрим на страницу Offerpop в качестве примера:
Вот как будет выглядеть Z-образ на этой странице:
- Посетитель начнет читать по горизонтали, начиная с верхней части области содержимого.Эта область содержит основной заголовок и изображение.
- Затем они будут двигаться вниз по странице и читать по диагонали. В этой области находится основная копия.
- В конце концов, пользователи будут сканировать страницу с левой стороны по вертикали. Здесь на странице есть форма для захвата лида и кнопка с призывом к действию.
Фальцовка страницы и ее значение для дизайна целевой страницы после клика
Фальца изначально пришла из газетной индустрии. Газеты помещали интригующий заголовок и привлекательную графику «над сгибом», потому что это была видимая часть газетных киосков.
В эпоху Интернета складка — это область веб-страницы, которая видна посетителям сразу после перехода на страницу. Сгиб не является определенной линией, потому что он варьируется от размера экрана, на который вы смотрите, до конкретной просматриваемой веб-страницы.
Чтобы продемонстрировать, что если разрешение вашего экрана составляет 1366 X 768, то область, выделенная красным ниже, — это место, где будет лежать сгиб страницы:
По мнению большинства веб-дизайнеров, средняя линия сгиба составляет примерно 1000 пикселей в ширину и 600 пикселей в высоту — это в основном верно для распространенных типов комбинаций монитора / браузера размером 1024 X 786 пикселей.Однако с ростом количества просмотров на мобильных устройствах наиболее распространенным размером сгиба страницы является либо 320 X 568, либо 360 X 640.
Споры о сворачивании перешли к оптимизации конверсии, потому что маркетологи ошибочно полагали, что посетители не будут прокручивать страницу. Это неправильное предположение заставило большинство маркетологов разместить каждый важный элемент страницы (относительно конверсий) над сгибом страницы.
Проблема с этой стратегией заключается в том, что вы часто будете видеть очень загруженную целевую страницу после клика, например:
Каждый элемент на этой «целевой странице после клика» размещен над сгибом из-за страха, что посетитель не прокрутит страницу.
Ну правда в том, что посетители действительно скроллируют.
Они прокручивают вашу страницу вниз, если вы убедили их сделать это, разработав дизайн страницы в верхней части страницы.
На самом деле, согласно отчету Google «Важность быть увиденным»: верхняя часть страницы не всегда доступна для просмотра, тогда как нижняя часть страницы обычно:
Если вы хотите, чтобы посетители выполняли прокрутку в нижней части страницы, убедите их в верхней части страницы, что прокрутка стоит их времени.
На этой целевой странице монитора кампании после клика размещены убедительные элементы в верхней части страницы, благодаря чему посетители будут прокручивать страницу ниже, чтобы получить оставшуюся информацию:
Как уменьшить трение на целевых страницах после клика
Формы захвата потенциальных клиентов могут быть устрашающими.Не все чувствуют себя комфортно, передавая свою личную информацию незнакомому бренду. Посетители также обычно не любят формы, потому что они создают требовательную атмосферу.
Когда вы размещаете форму слишком рано на целевой странице после клика (т. Е. До того, как вы адекватно описали свое предложение), вы отрицаете принцип взаимности, который мы упоминали в главе 2. Преждевременно размещенная форма просит посетителей дать вам что-то раньше. вы им что-нибудь дали. Это вызывает трение конверсии на целевых страницах после клика.
Из-за этого трения конверсии посетители не решаются совершить конверсию на целевой странице после клика.
По сути, есть два способа устранить трение с целевых страниц после клика:
- Добавьте ссылку на политику конфиденциальности или условия использования рядом с формой.
- Используйте двухэтапную форму подписки для сбора потенциальных клиентов.
Двухэтапная форма подписки позволяет вам «скрыть» вашу форму захвата лидов от глаз, потому что форма появляется только после того, как ваши посетители нажимают кнопку призыва к действию.Этот тип формы не вызывает затруднений при конверсии, потому что посетители могут увидеть форму только после того, как убедятся в вашем предложении.
Когда используется двухэтапная форма согласия, посетители чувствуют себя ответственными и более комфортно нажимают.
Вот как выглядит начальный экран на одной из целевых страниц после клика Instapage:
Когда пользователь нажимает синий CTA «Покажи мне методы», появляется двухэтапная форма согласия:
У вашей целевой страницы после клика должна быть только одна точка выхода
Назначение целевой страницы после клика может быть разным, но не количество целей на странице.
Поскольку существует только одна цель конверсии, также должна быть только одна точка выхода — точка, которая ведет ваших посетителей к этой цели конверсии.
Эта ссылка для выхода представляет собой кнопку призыва к действию на целевой странице после нажатия.
Не должно быть никаких навигационных ссылок, которые заставляли бы людей уезжать и приземляться в другом месте. Однако есть одно исключение из этого правила — ссылка на вашу политику конфиденциальности (как упоминалось выше), потому что она помогает установить доверие. Если вы решили добавить политику конфиденциальности, попробуйте открыть ее в «световом поле», которое удерживает человека на вашей целевой странице после щелчка (и не переводит его на новую вкладку или не открывает новый URL-адрес на той же вкладке. ).Это помогает удерживать их внимание на конвертации.
Чтобы это была настоящая целевая страница после клика, нельзя разрешать использование других ссылок, потому что единственное, что делают дополнительные ссылки, — это отвлекают посетителей от цели конверсии вашей страницы.
В качестве примера возьмем целевую страницу Act-On после клика:
Панель навигации вверху портит эту прекрасную страницу, потому что эти ссылки служат точками выхода и отвлекают от цели конверсии демонстрационного продукта Act-On.
Теперь давайте посмотрим на эту целевую страницу автопилота после клика:
На этой странице нет ничего отвлекающего. Единственная ссылка для выхода связана с целью конверсии — кнопкой с призывом к действию.
В конце концов, на целевых страницах после клика нет места для навигационных ссылок, особенно для целых верхних и нижних колонтитулов, которые могут легко повредить вашим коэффициентам конверсии.
Copy — это основная часть вашей целевой страницы после клика, потому что это преимущественно элемент, который вы используете, чтобы донести до посетителей преимущества и особенности вашего предложения.Если основным элементом вашей страницы не является видео, сценарий становится основным элементом, передающим информацию о продукте.
Количество копий вашей целевой страницы после клика может иметь прямое влияние на ваши коэффициенты конверсии. Слишком много текста, и ваши посетители не потрудятся прочитать его полностью. Слишком мало, и у них не будет достаточной информации для принятия осознанного решения.
Итак, сколько копий должно быть у вашей целевой страницы после клика? Это зависит от вашего предложения.
Если вы предлагаете бесплатное руководство или электронную книгу, написание большого количества текста, вероятно, не имеет смысла, потому что вашим посетителям не потребуется много убеждений, чтобы нажимать кнопку CTA.В этом случае хорошим вариантом будет сжатая страница, подобная той, которую использует OptinMonster:
С другой стороны, если ваше предложение представляет собой обширный консультационный курс или продукт SaaS — что-то, что требует оплаты (немедленно или в какой-то момент по воронке), тогда вам необходимо предоставить им все необходимые данные, чтобы они щелкнули кнопка призыва к действию.
Это то, что делает целевая страница SharpSpring после клика. Страница не только просит посетителей запланировать демонстрацию, как это делает страница сжатия OptinMonster, но и подробно объясняет преимущества услуги с помощью копии и отзыва клиентов.
Чтобы ваш текст выделялся, уместно отформатировать его с помощью маркированных списков, списков или коротких абзацев, чтобы сделать его более читабельным. Это связано с тем, что очень вероятно, что большинство посетителей будут сканировать только вашу копию целевой страницы после клика, поэтому ее правильное форматирование поможет гарантировать, что ваша копия будет прочитана.
Следуйте примеру AdFicient и как они отображают свой основной текст:
Сделайте вашу копию ориентированной на клиента
Ориентированная на клиента копия не только говорит о клиенте; он разговаривает с заказчиком.Все копии целевой страницы после клика должны быть ориентированы на клиента, потому что именно такие копии приносят вам конверсию. В конце концов, легче сопереживать проблемам посетителей, если текст ориентирован на них, а не на ваш бренд.
Использование слов «мы» и «нас» в заголовках целевой страницы после клика не способствует конверсиям. Придерживайтесь местоимений, которые относятся к вашим клиентам. Добавление слов «вы» и «ваш» в заголовок целевой страницы после клика заставляет посетителей видеть страницу со своей точки зрения.Этот тип копии дает им понять, что вы сопереживаете их проблеме и предлагаете решение для нее.
Заголовок целевой страницы сервиса HubSpot Leadin после клика подчеркивает проблему, с которой сталкиваются пользователи: «Вы действительно знаете, кто посещает ваш сайт?» Затем второй заголовок объясняет, как Leadin находит решение их проблемы:
Использование ориентированной на клиента копии на кнопке CTA также помогает побудить посетителей совершать конверсию с помощью кнопки CTA.
См., Например, копию кнопки CTA «Я готов к загрузке» на этой целевой странице после клика:
Стиль шрифта:
Выбор правильного шрифта важен не только для визуальной привлекательности, но и правильный шрифт обеспечивает единообразие бренда, а также влияет на удобочитаемость.
Вы можете выбрать один из двух основных типов шрифта:
- Шрифт с засечками
- Шрифт без засечек
с засечками более декоративны, чем шрифты без засечек, и используются для написания более коротких предложений, таких как заголовки и подписи.
Шрифтыбез засечек, с другой стороны, используются для длинных текстов, потому что, как было доказано, их легче читать.
Какой тип шрифта вы выберете, также зависит от аудитории, для которой вы создаете свою целевую страницу после клика.Если ваша целевая аудитория — маленькие дети, то лучше всего использовать шрифты без засечек.
Одна проблема со шрифтами с засечками — это воспроизведение шрифтов с засечками на темном фоне. Помните об этом, если цвета вашего бренда состоят в основном из темных оттенков и вы хотите использовать шрифт с засечками.
Шрифтыбез засечек лучше работают на целевых страницах и веб-сайтах после щелчка, поскольку шрифты с засечками обычно нечитаемы в Интернете.
Вот несколько примеров двух типов шрифтов:
Суть в следующем: убедитесь, что текст и шрифт на ваших целевых страницах после клика наиболее подходят вашей аудитории.Чтобы узнать, сколько копий писать и какой тип шрифта использовать, попробуйте выполнить несколько A / B-тестов.
Ваша целевая страница после клика может использовать медиа в следующих трех форматах:
- Изображений
- Видео
- Gif-анимации
А медиа помогают получать конверсии, потому что это:
- Помогает сопереживать посетителям
- Помогает объяснить, что делает ваш продукт
- Делает вашу страницу более привлекательной
Однако не все медиафайлы, которые вы размещаете на своих целевых страницах после клика, достигают этих трех целей.Чтобы оказать нужное влияние на посетителей, ваши медиа должны быть актуальными и способствовать конверсии.
Давайте обсудим три различных формата мультимедиа отдельно:
Изображения
Вы можете использовать изображения на своих целевых страницах после клика в следующих целях:
Пригласите своих клиентов на экскурсию по продукту: вместо того, чтобы писать абзацы текста на целевой странице после клика, чтобы продемонстрировать функции, используйте изображения и добавьте визуальную привлекательность на свою страницу.
Вот что делает один из вариантов целевой страницы Wrike после клика:
Помимо использования изображений для обзоров продуктов, вы также можете использовать их для выполнения следующих функций на целевой странице после клика:
Представьте свою команду: Персонализированные целевые страницы после клика убеждают посетителей нажимать вашу кнопку CTA, потому что они начинают идентифицироваться с вашим предложением и, соответственно, расширением вашей команды. Там, где это уместно, добавьте фотографии своих сотрудников, и пусть ваши клиенты увидят людей, стоящих за предложением.
Это то, что делает Ной Каган на своей целевой странице после клика:
Включение изображения докладчика и / или ведущего является важным элементом на целевых страницах вебинаров после кликов. Kissmetrics делает именно это на своей целевой странице вебинара после клика:
На странице представлены снимки как выступающего, так и ведущего вебинара.
Другой пример — Kapost, в котором есть главный снимок приглашенного оратора:
Расскажите историю: вы также можете использовать серию изображений или графиков на целевой странице после щелчка, чтобы рассказать историю.Повествования хорошо работают на более длинных целевых страницах после клика, потому что они помогают привлечь посетителей на более длинную страницу и побуждают их нажать кнопку CTA в конце.
Целевая страница VWO после клика делает именно это:
Видео
Статистика показывает, что 95% зрителей сохраняют сообщения в видео, поэтому мы настоятельно рекомендуем вам подумать о добавлении видео, чтобы повысить коэффициент конверсии целевой страницы после клика. Фактически, согласно EyeView Digital, доказано, что видео увеличивает конверсию на целых 80%.
Видео говорят за вас. Они придают вашему бренду человеческий голос, делая страницу более привлекательной. Они также помогают быстро объяснить ценность вашего предложения, позволяя потенциальным клиентам сделать выбор в вашу пользу и нажать кнопку с призывом к действию.
Веб-страницы с видео более интересны по сравнению со страницами с текстом и изображениями. В среднем пользователь остается на странице с текстом и изображениями всего 43 секунды, тогда как посещение страницы с видео длится около 5 минут 50 секунд.
видеоролика о целевой странице после клика объясняют, как работает услуга / продукт.
Целевая страница после нажатия кнопки Salesforce делает именно это:
Место размещения видео на странице зависит от типа создаваемой страницы. Для кратких страниц и страниц, содержащих меньше копий, видео следует демонстрировать достаточно быстро, поскольку это основной источник информации для посетителей. На более длинных страницах продаж видео можно разместить после того, как вы объяснили свое предложение с помощью текста.
Размещение видео — это вопрос суждения. Чтобы узнать, правильно ли вы разместили видео на своей странице, потратьте некоторое время на A / B-тестирование различных мест размещения видео.
Однако не все видео с целевой страницы после клика эффективны. Чтобы ваше видео увеличивало ценность предложения, убедитесь, что видео:
- Сделано профессионально — любительские видео не повышают вашу цель конверсии
- Не запускается автоматически и не раздражает зрителя
- Без звука, если вы выбираете опцию автоматического воспроизведения
- Записан правильно
- Имеет озвучивание, ориентированное на клиента, а не на компанию
Если у вас нет бюджета на создание правильного видео для целевой страницы после клика, вы можете вместо этого добавить на свои страницы гифки.
Gif-анимации
GIF — это анимированные изображения и хорошая замена видео на целевых страницах после клика. В отличие от статических изображений, гифки добавляют страницам больше глубины, поскольку помогают лучше и интерактивнее объяснять предложения.
Вместо того, чтобы добавлять снимок экрана с изображением того, как выглядит ваша панель инструментов, попробуйте добавить гифку и показать потенциальным клиентам, как они могут выполнять различные действия на панели инструментов, как показано в примере ниже:
Цвет влияет на то, как мы думаем, чувствуем и действуем.Это влияет на психологию человека, потому что цвета определяют настроение и влияют на наш выбор.
Понимание влияния психологии цвета на поведение человека помогает повысить коэффициент конверсии, потому что вы можете предсказать, как ваши потенциальные клиенты будут реагировать на ваши маркетинговые сообщения, если они выполнены в определенных цветах.
То, как кто-то воспринимает определенный цвет, зависит от личного опыта и культурных контекстов. Например, белый цвет на Западе символизирует невест и чистоту, тогда как в Индии белый цвет носят специально на похоронах.
Понимание психологии цвета — важная часть оптимизации коэффициента конверсии, потому что она дает вам представление о том, как ваши клиенты думают и, скорее всего, будут действовать. Понимание цветов необходимо маркетологам, потому что независимо от того, какие цвета вы выберете, они составляют большую часть каждого маркетингового сообщения, которым вы делитесь со своей аудиторией.
Типы цветов:
Есть три основных типа цветов:
Основные цвета: все остальные цвета составляют три основных цвета: красный, синий и желтый.
Вспомогательные цвета: Фиолетовый, зеленый и оранжевый — второстепенные цвета.
Третичные цвета: это гибриды, созданные путем смешивания основного и вторичного цвета. Третичные цвета имеют имена через дефис, например, красно-оранжевый, где красный цвет добавляется больше, чем оранжевый, и желто-зеленый, где желтый добавляется больше, чем зеленый.
Этот цветовой круг представляет первичный, вторичный и третичный цвета:
Чтобы понять, как работают цвета, важно понимать визуальную природу цвета.
Например, все они считаются синим цветом:
Они выглядят по-разному, потому что согласно системе Манселла все цвета содержат три компонента:
1. Оттенок: это название цвета, например красного, синего, оранжевого и т. Д. Простое ограничение оттенка в рекламных материалах — не лучшая идея, потому что все три компонента (оттенок, ценность и цветность) имеют свои индивидуальные особенности. роль для игры:
2. Значение: это уровень яркости — насколько светлый или темный является определенный цвет.Цвета с низким значением более темными (также называемые «оттенки»), цвета с высоким значением яркости (также называемые «оттенки»):
3. Цветность: это уровень насыщенности (т.е. насколько «яркий» цвет). Другими словами, цвета с высоким уровнем насыщенности яркие, а цвета с низким уровнем насыщенности выглядят размытыми:
Ник Коленда описывает, как выбрать три цветовых компонента в большинстве графических программ:
Согласно Коленде, люди предпочитают разные цвета другим, основываясь на четырех теориях:
1.Эволюция: исследования показывают, что наше предпочтение определенным цветам сформировалось еще в ранней истории человечества. Человек ассоциировал синий цвет с ночным временем, поэтому он символизировал пассивность, тогда как солнечный свет ассоциировался с ярко-желтым и символизировал действие. Вот почему самцы предпочитают такие цвета, как синий и черный, тогда как самки предпочитают желтый и розовый, потому что, как собиратели, самки должны были собирать разноцветные плоды с листвы.
2. Теория гендерной схемы: Согласно этой теории, когда вы начинаете идентифицировать себя со своим полом в детстве, вы ищите информацию, связанную с полом, и используете эту информацию для разработки концепции пола.Например, многие родители одевают мальчиков в синее, а девочек в розовое, что помогает детям ассоциировать эти цвета со своим полом по мере взросления.
3. Теория экологической валентности: EVT диктует, что у людей развиваются предпочтения к разным цветам на основе их эмоционального опыта с этими цветами.
4. Теория ассоциативных сетей: Согласно этой теории, наш мозг имеет взаимосвязанную сеть знаний, известную как ассоциативная сеть. Единица знаний представляет каждый круговой узел в этой сети.Например, разные эмоции будут составлять один узел, в то время как различные сенсорные ощущения будут составлять другой. Все узлы связаны друг с другом и образуют соединения; некоторые связи сильны, а некоторые слабы.
Ваш мозг также содержит узлы для разных цветов, информация в этих узлах изменяется по мере сбора дополнительной информации об определенном цвете. Все ассоциации, которые вы создаете с цветами, влияют на принимаемые вами решения.
Выбор цветовых комбинаций
Если вы выбирали цветовые комбинации наугад, значит, вы оказываете медвежью услугу своим коэффициентам конверсии.При выборе цветовых сочетаний необходимо учитывать три простых цветовых соотношения:
1. Аналогичные цвета :
Аналогичные цвета — это цвета с совпадающими оттенками (т. Е. Они располагаются рядом друг с другом на цветовом круге). Цвета имеют тенденцию преобладать друг над другом, и ни один из них не выделяется слишком сильно. Использование аналогичных цветов может создать красивую страницу, но разумно использовать дополнительный цвет, если вы хотите, чтобы один элемент (например, ваша кнопка CTA) выделялся среди остальных.
2. Монохроматические цвета :
Монохромные цвета — это один цвет с разными оттенками, оттенками и тонами. Различия между монохроматическими цветами даже более тонкими, чем у аналогичных цветов. Цвета отлично работают, когда сочетается с с правильным дополнительным цветом.
3. Цвета треугольника, прямоугольника и квадрата:
После того, как вы выбрали аналогичные или монохромные цвета, вы можете использовать цветовые комбинации, используя треугольник, прямоугольник и квадрат на цветовом круге:
Треугольник (триада) — это цветовая комбинация, состоящая из трех цветов, равномерно расположенных на цветовом круге.Прямоугольник (четырехугольник) — это четыре цвета — цветовое сочетание, состоящее из двух дополнительных пар. Квадрат подобен четырехугольнику; разница в том, что два набора дополнительных пар равномерно расположены на цветовом круге.
Цветовые и словесные ассоциации
Мы склонны ассоциировать разные цвета с определенными эмоциями. Например, красный цвет часто ассоциируется с опасностью, а золото — с роскошью.
ГрафикаCoSchedule отображает цвета с концепциями, которые они символизируют:
Инструменты, такие как Adobe Color CC, станут отличным подспорьем, когда вы не можете решить, какие сочетания цветов подходят друг другу.Вы можете выбрать цветовую комбинацию, выбрать оттенок или просто поиграть с цветными ручками, пока не найдете то, что вам нравится:
Затем все, что вам нужно сделать, это импортировать коды цветовой палитры в программу, которую вы используете.
Независимо от того, какую цветовую комбинацию вы выберете, помните, что контраст имеет значение. Контраст — это то, что выделяет элементы вашей страницы.
Вы можете добавить контрастности странице, используя один цвет с другим цветом. Два разных цвета могут не иметь контраста, потому что их тон одинаков.Чтобы убедиться в правильности контрастности, переведите цвета в оттенки серого и проверьте их контрастность:
Высокая контрастность обычно лучше всего подходит для целевой страницы после клика, потому что высокая контрастность привлекает внимание посетителей к определенному элементу.
На специальной странице компоненты цвета разбиты на три части:
- Фон
- База
- Акцент
По словам Джареда Кристоферсона из Yellowhammer, если вы выбираете три цвета для своей страницы, лучше всего следовать правилу 60-30-10.Это означает, что 60% цвета должно быть фоном, 30% — основой (форма или другой раздел страницы) и 10% цвета — акцентами (кнопка CTA).
Давайте посмотрим, как это правило применяется к целевой странице Shopify после клика:
Цвет фона — темно-серый, который составляет большую часть страницы. Базовый цвет — черный, (раздел с формой и кнопкой CTA). И, наконец, цвет кнопки CTA (акцент) зеленый, что хорошо контрастирует с темно-синим и черным.
Дизайн страницы не обязательно должен быть ограничен тремя цветами. Выберите цвета, которые, по вашему мнению, подходят вашей аудитории, перейдите к цветовому кругу и посмотрите, хорошо ли они дополняют друг друга. Ваша целевая страница после клика будет лучше для этого.
Используйте эту информацию на целевых страницах после клика
На 92,6% решений о покупке влияют визуальные факторы, причем до 90% этого влияния основывается исключительно на цвете.
Понимая, как работает цвет и как он влияет на наши решения, вы можете изучить цветовые предпочтения вашей целевой аудитории и соответствующим образом разработать свои целевые страницы после клика и кнопки CTA.
Пустое пространство (также известное как отрицательное пространство) — это пустая область на странице, которая помогает привлечь внимание или выделить определенный элемент.
Белое пространство не обязательно является «белым» пространством — это просто отрицательное пространство, поэтому оно может быть любого цвета, если оно выполняет свои функции.
На целевых страницах после клика пустое пространство используется не только с эстетической целью. Вместо этого он выполняет следующие три функции:
1.Улучшает понимание
Пустое пространство помогает уменьшить беспорядок в дизайне страницы. Доказано, что использование пробелов на левом и правом полях улучшает понимание до 20%. Когда вы окружаете элемент (например, ваш CTA) пустым пространством, он позволяет ему «дышать» и повышает удобочитаемость.
2. Выяснение отношений
Когда два объекта находятся рядом друг с другом, они начинают выглядеть похожими и группируются вместе. Это закон близости, и он применим к визуальной информации.Например, как вы интерпретируете эту картинку?
Вместо 20 отдельных точек мы видим две группы точек: одну из двенадцати точек, а другую — из восьми. Это кратчайший путь, по которому наш мозг обрабатывает визуальную информацию. Единственное, что разделяет эти группы точек, — это пробел между двумя группами.
Согласно принципу гештальта, люди упускают из виду элементы, если они расположены слишком далеко друг от друга. В формах захвата лидов этот принцип можно перевести как наличие слишком большого пространства между текстом поля формы и полем, в которое посетители должны вводить данные.Кроме того, рекомендуется группировать похожие поля форм вместе, чтобы их было легче заполнять.
Рисунок, сделанный Nielson Norman Group, демонстрирует разницу между двумя формами, сгруппировав связанные поля вместе и добавив достаточное количество пробелов:
Эта организационная структура особенно полезна, когда вы разрабатываете длинные формы с большим разнообразием полей.
3. Сосредоточьте внимание
Белое пространство позволяет отделить отдельные элементы друг от друга, что делает их более заметными и привлекает внимание.Белое пространство манипулирует вашими глазами и заставляет вас сосредоточиться на элементах, окруженных пространством, так что вы, кажется, не замечаете пространство, а сосредотачиваетесь только на элементе.
В качестве примера, целевая страница BirdEye после клика использует достаточно свободного пространства между визуальными элементами и текстом, чтобы привлечь внимание посетителей к самому важному — CTA.
Для сравнения, посмотрите на целевую страницу Trumpia после клика, где использование белого пространства не идеально:
Давайте посмотрим на страницу Intacct, отрицательное пространство вокруг элементов страницы не белое, но оно отделяет элементы друг от друга и уменьшает беспорядок:
Белое пространство похоже на клей, который скрепляет сломанный предмет.Вы не можете его увидеть, но он выполняет очень важную функцию и помогает повысить коэффициент конверсии целевой страницы после клика.
Формы захвата потенциальных клиентов помогают вам собирать информацию о ваших посетителях на целевых страницах после клика, что автоматически делает их важным элементом страницы. Форма — единственное место на отдельных страницах, где вы просите посетителя что-то вам дать. Остальные элементы страницы (такие как заголовок, копия или отзывы) представляют собой то, что вы им предоставляете.
Однако в вашей форме вы просите посетителей доверять вам свою информацию.
Вот почему формы улавливания свинца могут быть причиной трения преобразования. Чтобы ваши формы не заставляли посетителей задумываться или сомневаться в предоставлении своей информации, при разработке форм учитывайте следующие аспекты:
Длина формы
Длина формы зависит от того, на каком этапе маркетинговой воронки находятся ваши посетители. Если это первый раз, когда ваш бренд и посетитель взаимодействуют; размещение длинной устрашающей формы только их отпугнет.На вершине воронки разработайте формы для захвата потенциальных клиентов, которые не требуют слишком многого и легко заполняются.
Вот почему на многих бесплатных пробных целевых страницах после клика нет длинных форм. В качестве примера рассмотрим форму целевой страницы WalkMe после клика:
Целевая страница после клика HubSpot, с другой стороны, имеет более длинную форму для посетителей, которые не новички в своих предложениях:
Длина формы также зависит от вашего предложения. Чем выше ставка в предложении, тем длиннее может быть форма.
Длина формы также зависит от того, где находится ваш посетитель в вашей маркетинговой воронке. Вы не можете рискнуть разместить слишком много полей для посетителей, находящихся в верхней части последовательности, но вы можете увеличивать количество полей по мере того, как посетитель спускается вниз.
Важно сосредоточить внимание посетителя на формах для захвата потенциальных клиентов, поэтому важно не размещать более одной формы на целевой странице после клика. Даже если ваша целевая страница после клика имеет дополнительную кнопку с призывом к действию, убедитесь, что на странице нет дополнительной формы, потому что вы не можете ожидать, что посетители заполнят две формы, чтобы воспользоваться одним предложением.Кроме того, вы не хотите путать их в том, какую форму следует заполнить, чтобы воспользоваться предложением.
Еще одна причина, по которой на целевой странице после клика не должно быть дополнительных форм, заключается в том, что их интеграция с другими инструментами может становиться все труднее.
Это приводит нас к многоступенчатым формам.
Многоступенчатые формы
Многоступенчатые формы разбиты на части, чтобы посетитель не был перегружен одной длинной формой.
Векселей.com использует многоэтапную форму на своей целевой странице после клика. Форма переходит к следующему шагу, когда вы вводите необходимую информацию. Вот первый шаг:
Это второй шаг:
Вот третий шаг:
И это последний шаг и форма на целевой странице после клика:
Двухэтапные формы согласия — это один из типов многоэтапных форм. В отличие от стандартной формы сбора потенциальных клиентов, двухэтапная форма согласия не отображается на странице до тех пор, пока посетители не нажмут кнопку CTA.
Таким образом, форма появляется только для посетителей, которые намерены ее заполнить. Еще одно преимущество двухэтапной формы состоит в том, что она не вызывает трения конверсии, потому что ее увидят только мотивированные посетители.
Целевая страница после клика Instapage использует двухэтапную форму согласия:
Вы также можете активировать формы, которые будут появляться, когда посетители собираются покинуть страницу. Эти формы намерения выхода могут заставить посетителей пересмотреть свое решение уйти, не нажимая кнопку призыва к действию.Вы также можете воспользоваться этой возможностью, чтобы предложить им что-то еще, чтобы они действительно конвертировали. Если посетители еще не готовы купить ваш продукт, вы можете предложить им что-нибудь бесплатно, например электронную книгу, технический документ или простую подписку на блог.
ThriveThemes делает это, размещая форму намерения выхода, которая предлагает посетителям возможность подписаться на их информационный бюллетень, когда они собираются покинуть страницу:
Формы намерений выхода могут раздражать посетителей, которые просто не готовы нажать кнопку с призывом к действию, поэтому лучше использовать их только в крайнем случае.
Вы можете создавать формы намерения выхода для своих целевых страниц после щелчка, используя такие инструменты, как OptinMonster, Sumo List Builder, Bounce Exchange, Optimonk и даже с Instapage, используя параметр настраиваемого кода.
Формы для захвата потенциальных клиентов — самый важный элемент страницы, который может отпугнуть посетителей, поэтому при разработке форм убедитесь, что этого не происходит.
Кнопка призыва к действию целевой страницы после клика — это место, где происходит конверсия.
На самом деле, было бы неправильно сказать, что судьба любого другого элемента целевой страницы после клика зависит от кнопки с призывом к действию. Разработайте его правильно и получите щелчок; спрячьте его среди остальной части вашей целевой страницы после клика, и вы рискуете отказаться от нее.
Чтобы правильно разработать CTA, примите во внимание следующие факторы:
Позиция
Положение кнопки CTA влияет на коэффициент конверсии. Место, где вы размещаете кнопку, не имеет ничего общего с загибом страницы и имеет прямое отношение к вашему предложению.
Кнопка всегда должна появляться после того, как вы представили свое предложение посетителям и представили свое уникальное торговое предложение. Если вы разместите кнопку слишком рано, вы можете отключить посетителей, потому что их не убедили другие элементы вашей страницы (например, заголовок и основной текст).
Как правило, чем короче страница, тем быстрее вы можете разместить кнопку CTA. Это правило размещения также применяется к сложности и денежной стоимости вашего предложения. Если то, что вы предлагаете своим посетителям, представляет собой сложное программное обеспечение, требующее от них оплаты, то кнопка CTA должна появляться только после того, как вы полностью объясните им предложение.Страницы продаж часто попадают в эту категорию.
Если у вас есть бесплатная электронная книга, вы можете разместить кнопку CTA рядом с основным заголовком, как это делает UserVoice с этой целевой страницей после щелчка:
Размещение меняется, когда посетитель должен заплатить за предложение.
Кнопка с призывом к действию «Купить сейчас» на целевой странице электронной книги Судана Пателя и Роба Уормли привлекает к себе внимание, потому что она представлена после описания предложения и изолирована от всего остального на странице:
Оба приведенных выше примера демонстрируют кнопки CTA, расположенные над сгибом страницы.Разница заключается в количестве копий перед каждой кнопкой. UserVoice считает, что для бесплатного предложения достаточно только заголовка и подзаголовка, чтобы убедить посетителей рассмотреть возможность нажатия кнопки CTA, тогда как 100 Days of Growth требует полного текста, объясняющего, почему покупка электронной книги — хорошая идея.
Размер
Здравый смысл подсказывает, что чем крупнее объект, тем заметнее это будет. Таким образом, имеет смысл сделать кнопку с призывом к действию относительно большой.
Закон Фитта гласит, что «чем крупнее и ближе цель, тем быстрее и легче ее выбрать». Для CTA это, по сути, означает, что чем больше кнопка, тем легче на нее указать и щелкнуть.
Помните, что размер кнопки является относительным, а не абсолютным. Вы хотите, чтобы ваш призыв к действию был легко заметен, но не раздражал глаза. Не добавляйте огромную кнопку, потому что это испортит внешний вид страницы и, скорее всего, помешает конверсиям.
Синяя кнопка «Посмотреть демонстрацию продукта» на странице Infusionsoft немного меньше окружающих элементов и не привлекает к себе внимания.
Убедитесь, что кнопка больше, чем окружающие ее элементы, чтобы выделяться. Сделайте то, что делает Рэйчил Кук на своей целевой странице после клика:
Теперь это кнопка с призывом к действию идеального размера для данной целевой страницы после клика.
«Идеального размера кнопки CTA» просто не существует, потому что все размеры кнопок должны определяться с учетом общего дизайна целевой страницы после клика.
Цвет
Выбирая цветовую схему вашей целевой страницы после клика, убедитесь, что вы создали кнопку CTA контрастного цвета.Это поможет кнопке «выскочить» со страницы, и посетители смогут ее легко найти.
Целевая страница после клика Elite Marketing Pro имеет хорошо контрастирующую кнопку CTA:
Несколько кнопок
Хотя это и не рекомендуется, на целевых страницах после клика нередко размещается несколько кнопок с призывом к действию. Дополнительная кнопка CTA не имеет отношения к количеству кнопок CTA. Скорее, он предлагает посетителям альтернативное действие-конверсию.
Для более длинных страниц продаж можно иметь 5-6 кнопок и не иметь ни одной дополнительной кнопки.
Вторичные кнопки следует использовать в крайнем случае, поскольку они нарушают основное правило сингулярности целевых страниц после клика. Не заставляйте главную кнопку с призывом к действию и цель конверсии бороться за внимание посетителей, размещая на своей странице отдельное предложение.
Копия
Как и общая копия целевой страницы, копия кнопки CTA должна быть ориентирована на клиента.Это связано с тем, что кнопки CTA предназначены для побуждения к действию, а текст должен быть ориентирован на действия.
Например, копия кнопки «Начать бесплатную пробную версию» на целевой странице Desk.com после клика побуждает к действию:
Копия кнопки, ориентированной на клиента, актуальна для предложения целевой страницы после нажатия, что делает процесс нажатия еще более оптимизированным для посетителей.
Копия кнопки целевой страницы Instapage после нажатия кнопки удерживает посетителя в памяти и делает еще один шаг вперед, персонализируя его с помощью «I:»
Использование слов «вы», «я», «ваш», «я» и «мое» заставит посетителей увидеть ваше предложение своими глазами, что поможет им убедить их нажать кнопку.
Это то, что CoSchedule делает со своей бесплатной пробной страницей:
КнопкиCTA могут создавать или разрушать целевые страницы после клика, потому что, если вы оптимизировали все остальное на странице — а CTA не предназначен для конверсии, — вы упускаете ценных потенциальных клиентов (и продаж). Убедитесь, что вы разрабатываете свои кнопки с учетом положения, размера, цвета и копии, если хотите максимизировать конверсию.
Что происходит после того, как посетители заполняют форму захвата лидов и нажимают кнопку CTA?
Вы отказываетесь от посетителей до тех пор, пока не сможете нацелиться на них с помощью следующего предложения? Или вы поступаете разумно и пользуетесь временем после конверсии, чтобы укрепить с ними отношения?
Страницы с благодарностями помогают поддерживать хорошие отношения с потенциальными клиентами после их конверсии.С помощью страниц с благодарностью вы сможете укрепить представление о том, что их решение вести с вами дела было правильным.
Помимо благодарности посетителя за отправку формы, эти страницы обычно информируют человека о следующих шагах, просят подписаться на вас в социальных сетях или предлагают им что-то еще, что может оказаться полезным, что подтолкнет их дальше по воронке.
Целевая страница веб-семинара Upwork после клика делает именно это после того, как вы конвертируете:
После отправки вы будете перенаправлены на их страницу с благодарностью:
Эта страница не просто благодарит вас за регистрацию на вебинар.Это также побуждает вас проверять другие ресурсы на их веб-сайте. Нижний колонтитул страницы также содержит ссылки на их профили в социальных сетях, чтобы посетители могли еще больше взаимодействовать с Upwork.
Помимо отправки потенциальных клиентов на страницу с благодарностью, еще одна хорошая практика во время конверсии после клика — это отправка электронного письма с благодарностью. Например, в электронном письме с благодарностью за регистрацию веб-семинара вы также можете использовать эту возможность, чтобы подтвердить, что вы сохранили их место, и отправить им напоминание о том, как они могут присоединиться к презентации, а также все технические требования, необходимые для участия.
Upwork делает и то и другое в своем электронном письме с благодарностью:
Убедитесь, что вы не бросаете посетителей после клика. Вместо этого укрепите свои отношения с ними на странице благодарности и продолжайте процесс взаимодействия, отправив благодарственное письмо, потому что каждая точка соприкосновения имеет значение.
целевых страниц после клика — бесценный инструмент, который поможет вам привлечь потенциальных клиентов для ваших маркетинговых кампаний. При правильном дизайне целевые страницы после клика могут заполнить вашу воронку продаж большим количеством потенциальных клиентов, чем когда-либо могла бы ваша домашняя страница или страница продукта.
Чтобы применить эти передовые методы создания целевой страницы после щелчка мышью, создайте свою собственную страницу, зарегистрировавшись в учетной записи Instapage уже сегодня.
9 советов по созданию эффективной целевой страницы
Эффективная целевая страница — краеугольный камень успешного интернет-маркетинга. Ваше предложение может быть звездным, а ваша PPC-реклама может быть оптимизированной идеальной частью, но без хорошей целевой страницы ваш бизнес обязательно пострадает.Макет вашей целевой страницы должен быть безупречным.
Хорошая, убедительная целевая страница привлекает внимание посетителей и заставляет их совершить конверсию. Узнайте, как создать успешную целевую страницу с помощью этих девяти простых советов по созданию целевой страницы.
Совет №1: Чистый, организованный дизайн
Внешний вид, ощущение и общая структура дизайна вашей страницы будут иметь огромное влияние на эффективность вашей целевой страницы и на то, насколько хорошо она способствует конверсиям. Основная цель вашей целевой страницы должна заключаться в том, чтобы посетителю было как можно проще совершить конверсию, поэтому важно, чтобы все элементы вашей страницы работали для достижения цели конверсии, будь то заполнение формы, совершение покупки и т. Д. подписка на информационный бюллетень или загрузку электронной книги.
В эффективном дизайне целевой страницы разумно используются цветные и привлекательные изображения. Считается, что определенные цвета кнопок, такие как красный или зеленый, увеличивают конверсию целевой страницы, но, прежде всего, убедитесь, что существует сильный контраст между цветом вашей кнопки и вашим фоном. Существует множество различных атрибутов кнопок, которые вы должны протестировать, чтобы обеспечить хорошую целевую страницу — проверьте цвет, расположение и размер, чтобы определить наиболее эффективный макет целевой страницы.
Совет № 2: Будьте минималистом
Обязательно поддерживайте чистую страницу с очевидной, естественной навигацией и без отвлекающих факторов (например, всплывающих окон).Хорошая целевая страница предоставляет всю необходимую информацию, чтобы побудить посетителей совершить конверсию, но ничего лишнего. Слишком много информации может ошеломить посетителей, поэтому сохраняйте простоту и предоставляйте только самую важную информацию, которая будет направлять посетителей по воронке продаж. Информация, которую вы помещаете с по спереди и по центру, должна легко сканироваться — в хорошем экземпляре целевой страницы для объяснения деталей используются маркированные точки, когда это возможно.
Учтите, какая ключевая информация должна отображаться в верхней части страницы в пределах прямой видимости посетителей, а какая — в нижней части страницы.Большинство посетителей, естественно, знают, что они могут прокрутить вниз для получения дополнительной информации, поэтому не бойтесь добавлять более подробные описания, где они будут незаметно скрыты. Хороший дизайн целевой страницы поддерживает чистое и привлекательное визуальное впечатление, но при этом позволяет посетителям получать информацию, которую они могут пожелать, в ненавязчивой форме, и использование пространства в нижней части страницы — отличный способ сделать это. Еще один способ добавить больше информации, не перегружая посетителей текстом, — это использовать целевые страницы с видео.Выделите ключевые моменты вашего предложения с помощью текста и используйте дополнительное интерактивное видео для объяснения деталей.
Совет № 3: используйте заголовок для трансляции значения предложения
Хорошая целевая страница должна содержать сильное предложение и четко и кратко объяснять, почему это предложение является ценным. Заголовок и подзаголовки целевой страницы предоставляют ключевую возможность повысить ценность вашего предложения. Наиболее эффективные целевые страницы подтверждают предложение заголовком и используют подзаголовок для дальнейшего объяснения предложения или для распространения ценностного предложения.Например…
Бесплатная электронная книга по маркетингу в Twitter
Получите больше качественных подписчиков в Твиттере — быстро!
Некоторые целевые страницы предпочитают выдвигать свое ценностное предложение к основному заголовку и использовать подзаголовок для обсуждения фактического программного обеспечения или предложения. Не забывайте, что у вас есть около 8 секунд, чтобы убедить пользователей, что ваше предложение заслуживает внимания, поэтому крайне важно, чтобы ваше предложение и ценностное предложение были ясными и убедительными.
Совет № 4: Доверяйте сигналам
Хорошие целевые страницы часто используют сигналы доверия, которые могут указывать посетителям на то, что их предложение и бренд заслуживают доверия.Сигналы доверия могут принимать различные формы: отзывы — это классическая форма сигнала доверия, основанная на молве, чтобы успокоить посетителей одобрением прошлых клиентов или клиентов. Это также можно сделать с помощью счетчиков «Нравится», которые продвигают более тонкую форму поддержки через «Нравится» и +1 из различных социальных сетей.
Комбинация сигналов доверия и отзывов
Еще одним мощным инструментом эффективных целевых страниц являются значки доверия.Значки доверия часто относятся к логотипам известных брендов, с которыми вы работали в прошлом, определенным одобрениям и признаниям, которые вы получили, группам и коалициям, в которых вы состоите, и т. Д. Они служат подтверждением вашей надежности и навыков. .
Даже неофициальные (и, честно говоря, бессмысленные) кнопки, вроде тех, что продаются на стоковых графических сайтах, добавляют элемент доверия и укрепляют доверие к вашему предложению.
Совет № 5: Сделайте свою страницу удобной для мобильных устройств
В наши дни очень важно, чтобы по вашей целевой странице можно было легко перемещаться на мобильных устройствах, поскольку почти 30% всей веб-активности происходит с мобильных устройств.Было доказано, что наличие сайта, оптимизированного для мобильных устройств, может даже удвоить количество конверсий. Ваша целевая страница должна отлично выглядеть на мобильных устройствах — с легкостью перемещаться, быстрой загрузкой и ультра-кликабельностью. Если вы хотите узнать больше о подготовке целевой страницы для мобильных устройств, ознакомьтесь с нашим руководством по созданию веб-сайтов, оптимизированных для мобильных устройств.
Совет № 6: Сохраняйте короткие формы
Когда пользователь посещает ваш сайт, естественно, как интернет-маркетолог, вы хотите получить от него как можно больше данных.Однако когда дело доходит до создания хорошей целевой страницы, лучше меньше, да лучше. чрезвычайно важно, чтобы вы заставляли пользователей заполнять как можно меньше полей формы. Чем больше полей вы попросите ввести посетителя, тем меньше у вас шансов, что он заполнил форму и завершил желаемую конверсию. Если для преобразования требуется форма, спрашивайте только самое необходимое из того, что вам нужно. Помните, вы всегда можете запросить дополнительную информацию на странице благодарности.
Эта форма запрашивает только адрес электронной почты и почтовый индекс
В связи с таким ограниченным объемом данных, какие записи в форме вам следует сделать обязательными? Большинство пользователей не прочь указать свое имя и адрес электронной почты, но при запросе номеров телефонов или даты рождения процент отказов может резко возрасти до 50%.Остерегайтесь этих полей формы!
Совет № 7: адаптируйте свои целевые страницы для индивидуальной аудитории
Если у вас есть отличное предложение и вы хорошо его продвигаете, вы, вероятно, будете получать трафик из разных источников. Если возможно, вам нужно настроить целевые страницы для разных аудиторий. Пользователь, который переходит на вашу целевую страницу из сообщения Facebook или Twitter, сильно отличается от пользователя, который переходит на вашу целевую страницу из рекламы PPC или ссылки из вашего ежемесячного информационного бюллетеня.
Совет № 8: Сопоставьте копию целевой страницы с рекламой PPC
Эффективные целевые страницы убедитесь, что слова, используемые в их копии страницы, совпадают с ключевыми словами и текстом, используемыми в их рекламе PPC. Повторение одного и того же языка и ключевых фраз убеждает посетителей в том, что они на правильном пути, и демонстрирует последовательность.
Также важно направлять пользователей непосредственно к тому содержанию, которое они ищут. Если пользователь нажимает на объявление с оплатой за клик о спальных мешках, не бросайте их в разделе кемпинга — вы хотите доставить их в нужное место назначения.Максимально соответствуйте потребностям пользователя — вот где происходят конверсии!
Совет № 9: Тестируйте!
Последний признак хорошей целевой страницы — тестирование. Эффективную целевую страницу просто невозможно создать без тщательного тестирования. Результаты тестирования и отслеживания важны для того, чтобы увидеть, что ваша целевая страница делает правильно, а что нет. Тестируйте, тестируйте и еще раз тестируйте!
Ознакомьтесь с еще 15 идеями целевой страницы.
Бонус: проверьте эффективность своей целевой страницы бесплатно!
AdWords Landing Page Grader — это бесплатный инструмент, который проверяет ваши целевые страницы PPC на наличие передовых методов, оптимизацию коэффициента конверсии и многое другое.Убедитесь, что ваша целевая страница стоит того, чтобы ее кликнуть: это быстро, легко и бесплатно!
Шаблоны посадочных страниц без кода
Почему важны целевые страницы
Целевая страница может быть первым опытом взаимодействия с брендом. Хорошая целевая страница с релевантной информацией и продуманным макетом может иметь значение, если кто-то хочет продолжить работу или отскочить и больше никогда не вернется.
Целевые страницы выделяются на просторах обычных веб-сайтов.Там, где стандартная домашняя страница отображает огромное количество контента, множество страниц и множество путей, которыми можно воспользоваться, целевая страница урезана. Дизайн целевой страницы сужает ее фокус, сосредотачиваясь на одном действии, которое пользователь должен предпринять. За короткий промежуток времени и места он привлекает внимание людей и побуждает их к действию.
Целевые страницы награждают посетителей за их усилия. Люди, нажимающие на цифровую рекламу или на результаты поисковых систем, не хотят, чтобы их перенаправляли на общий веб-сайт, не имеющий четкого представления о том, что им следует делать.Целевая страница представляет собой простую карту, направляя людей к ее целям.
Бренды не только дают посетителям сайта что-то полезное, но и получают что-то взамен.
Целевые страницы повышают узнаваемость бренда. Они являются важным элементом любой маркетинговой кампании, помогая в дальнейшем транслировать послание компании и рассказать о том, кто они такие и что они могут предложить. Будь то специализированная страница продукта для сайта электронной коммерции, страница сжатия для закрытого контента или отдельная страница для захвата потенциальных клиентов, различные типы целевых страниц помогают брендам наладить более тесную связь со своей аудиторией.
Целевые страницы также служат важной цели при сборе контактной информации. Генерируются новые потенциальные клиенты, создаются списки адресов электронной почты, и компании получают прямую связь с теми, кто уже проявил интерес. Информационные бюллетени, рекламные акции и другие маркетинговые материалы можно рассылать в надежде привлечь новых постоянных клиентов.
Некоторые маркетинговые кампании могут существовать только в течение короткого промежутка времени. Целевые страницы предлагают пространство для их дальнейшего продвижения, обеспечивая специализированный пользовательский интерфейс, который передает важную вспомогательную информацию и стимулирует конверсии.
Целевые страницы расширяют охват бренда
Думайте о целевой странице как о централизованном узле, куда посетители приходят по разным цифровым каналам. Нажимал ли кто-то платное объявление, попал в обычный поиск или перешел по ссылке в блоге или другом контенте, он предпринял определенные действия, чтобы посетить.
Эти каналы могут быть разными, но все они имеют ту же направленность, что и целевая страница.Целевая страница представляет собой следующий логический шаг, позволяющий людям пойти дальше в изучении того, чем они увлекаются и хотят узнать больше. Он адаптирован к тому, кто они есть, и дает им больше информации о теме, к которой они уже проявили интерес.
Кто-то, посещающий целевую страницу, уже потратил время на ее открытие. Брендинг, контент и дизайн должны объединяться для обслуживания пользователей, которые не только заставляют кого-то чувствовать, что они отбирают что-то стоящее, но и еще больше вовлекают их.
Поскольку их относительно просто создать, можно быстро собрать несколько версий целевой страницы. Различные типы целевых страниц могут быть настроены для конкретной целевой аудитории и цели. Они позволяют точно контролировать, кого они привлекают, и какие действия посетители предпринимают дальше.
Маркетологи любят целевые страницы за их прямую связь с цифровой рекламой и другим контентом, который привлекает людей. Но целевые страницы также играют еще одну не менее важную роль: генерируют органический трафик.
Качественный контент, наряду с поисковой оптимизацией, может повысить эффективность целевой страницы, когда люди вводят термины и ключевые слова, связанные с ней. Более высокий рейтинг в обычных результатах поиска дает еще большую видимость, и все это без увеличения маркетингового бюджета.
Что следует включить в целевую страницу
Хорошо продуманный раздел героя
Раздел героев — верхняя часть целевой страницы — это первое, что кто-то видит по прибытии.В этом ведущем разделе должно быть короткое сообщение о том, что посетитель принял правильное решение перейти на страницу. Текст и изображения должны отражать суть бренда и ценность того, что они предлагают, а также направлять посетителей к действиям, которые необходимо предпринять.
Изображение главного героя является центральным элементом этой части веб-дизайна. Хорошая визуализация помогает людям понять, о чем целевая страница, а также о продуктах и услугах, которые они на ней найдут.Это должно вдохновить посетителей вскочить и начать прокрутку.
Изображение должно дополнять эффектный заголовок. Это сообщение должно обращаться к целевой аудитории и показывать, как то, что находится на целевой странице, может им помочь. Сейчас не время утомлять их чем-то скучным и общим. Дайте людям заголовок, который их волнует. Также неплохо разместить под заголовком подзаголовок, чтобы дать немного больше информации и еще больше усилить заголовок.
Наряду с небольшим количеством текста, также включите социальное доказательство где-нибудь в разделе героев. Это могут быть отзывы, статистика или компании, которые работают в качестве клиентов. Люди хотят знать, что они могут доверять бренду и что у них хорошая репутация.
Краткое содержание
Целевая страница не должна быть забита бесконечной прокруткой текста. Содержание должно быть сведено к минимуму и сообщать только самые важные моменты.Хорошая целевая страница отвечает на вопросы людей и дает им информацию, о которой они, возможно, даже не подозревали.
Во-первых, расскажите тем, кто, возможно, только что наткнулся на вашу целевую страницу, кто вы. Это не обязательно должна быть длинная предыстория. Просто расскажите о ключевых моментах своего бизнеса и ценности того, что вы продаете.
Для целевых страниц электронной коммерции и связанных с товарами товаров: показывайте определенные товары и предоставляйте маркированный список и необходимую информацию, чтобы повлиять на чье-либо решение о совершении покупки.Сконцентрируйтесь на проблемах, которые решают эти продукты. Потребители хотят знать, как продукты и услуги помогут облегчить их жизнь.
Весь контент должен соответствовать целям целевой страницы. Все, что расходится с его высшей целью, следует исключить. Сообщайте только то, что важно.
Точный призыв к действию
Кто-то, просматривая стандартный веб-сайт, увидит несколько призывов к действию (CTA), которые служат разным целям.В отличие от домашней страницы компании в широком масштабе, целевая страница содержит всего несколько призывов к действию и, в некоторых случаях, может содержать только один четкий призыв к действию.
Поскольку на целевых страницах меньше призывов к действию, эти призывы к действию должны иметь еще большее влияние. Каждый призыв к действию должен соответствовать направленности конкретной целевой страницы и вести к тем типам конверсий, которых она надеется достичь. Не наводняйте целевую страницу призывами к действию, дико раскачиваясь в надежде, что на одну из них нажмут или последуют за ней.Имейте намерение за каждым.
Избегайте скучных кнопок и безжизненных призывов к действию. Создайте дизайн и копию вашего призыва к действию, чтобы они служили высшей цели целевой страницы.
Выбор количества ссылок
Призывы к действию сокращены на целевой странице, и количество ссылок должно быть тоже. Целевая страница — это неполный веб-сайт, и нет причин направлять посетителей на несколько страниц и разделов.Вместо этого сведите количество ссылок к минимуму. Призывы к действию и другие элементы, которые напрямую связаны с целями целевой страницы, — это единственные ссылки, которые вы должны включать.
Будьте осторожны при добавлении ссылки на главную домашнюю страницу. Вы не хотите перенаправлять людей с того места, где у вас уже есть их внимание, туда, где у вас меньше контроля над тем, чего вы хотите, чтобы они достигли.
Простая компоновка
Создание целевой страницы означает работу в рамках ограничений.Выбирайте макет с четкой организацией, в которой легко идентифицировать каждую часть. Излишний дизайн целевой страницы только создаст путаницу для пользователей. Кто-то, взглянув на него, должен понять, о чем идет речь и куда им следует двигаться дальше.
Z-шаблон — это распространенный макет для целевых страниц. Он облегчает быструю прокрутку страницы, направляя посетителей к призыву к действию или контактной форме для перехода. Кто-то на целевой странице попал сюда по какой-то причине и хочет мгновенно узнать, что ему нужно.Z-образный узор помогает им добраться туда.
Хорошая целевая страница упрощает работу, позволяя пользователям легко перемещаться по ней.
