Как создать целевую страницу в HTML
Ваша целевая страница имеет значение. Сделайте это правильно, и вы сможете собирать информацию о посетителях, предоставлять отличный контент и направлять их на путь конверсии. Совершите ошибку, и ваш сайт все равно заметят, но это не приведет к увеличению продаж.
В результате стоит знать, из чего состоит отличная целевая страница, чего следует избегать при разработке своего веб-сайта и какие варианты доступны, если вы возьмете на себя эту задачу.
Мы вам поможем: вот краткий обзор того, как создать целевую страницу в HTML, на которую посетители действительно хотят попасть.
Разрешено к посадке
Цель любой целевой страницы – побудить посетителей к действию. Посетители переходят по ссылкам с вашего WordPress, HubSpot или другого сайта, размещенного на CMS, чтобы получить дополнительную информацию о продукте или услуге, которые вы предлагаете. Затем ваша целевая страница просит их предоставить такие данные, как имя, адрес электронной почты или номер телефона в обмен на эту информацию.
То, что вы предлагаете, зависит от вас – официальные документы, электронные книги и информационные бюллетени являются обычным явлением – но вы должны сделать его достаточно ценным, чтобы посетители не возражали поделиться своей контактной информацией.
Рекомендации по использованию целевой страницы
Целевые страницы предназначены для захвата определенных потоков трафика – подмножества посетителей вашего веб-сайта, на которые нацелена ваша маркетинговая кампания. Например, если вы создали полнофункциональное мобильное фитнес-приложение с ежемесячной оплатой, на вашей целевой странице может быть предложен бесплатный пробный период для заинтересованных пользователей.
При правильной поисковой оптимизации (SEO) ваш сайт привлекает посетителей, ориентированных на фитнес; ваша целевая страница привлекает потенциальных клиентов, предлагая бесплатный пробный код, когда они сообщают конкретную контактную информацию.
Хотя ваш конкретный макет целевой страницы может быть разным, вот несколько общих рекомендаций «делайте то, а не то», которые помогут улучшить ваше воздействие.
- Дайте понять, не сложно – ваша уникальная торговая позиция (УТП) и призыв к действию (CTA) должны быть в центре внимания. Не вдавайтесь в подробности и не вдавайтесь в подробности: дайте понять, что вы предлагаете и что посетители должны предоставить взамен.
- Сделайте его чистым, а не загроможденным – пустое пространство – ваш друг. Сделайте свою целевую страницу простой и чистой с ограниченным количеством текста и тщательно подобранными изображениями для максимального воздействия.
- Тестируйте, а не угадывайте – как отмечает Forbes, тестирование критически важно для обеспечения того, чтобы ваша целевая страница привлекала потенциальных клиентов. Создайте его, воплотите в жизнь, а затем запишите результаты. Если не работает, внесите изменения.
Основы HTML
У вас отличное УТП и отличный призыв к действию. Пришло время создать свою целевую страницу. Один из самых популярных методов использует HTML – или язык гипертекстовой разметки – для того, чтобы веб-страницы отображали именно тот контент, изображения и ссылки, которые вы хотите.
Во-первых: это не язык программирования. Это язык разметки, который дает вам контроль над текстом, изображениями и ссылками, которые появляются на вашей веб-странице. Каждый элемент HTML использует «теги», чтобы указать, как будет изменяться контент. Всегда есть два тега – открывающий и закрывающий – в которых используются скобки , а закрывающий тег содержит косую черту.
Предположим, вы хотите создать строку текста, которая сама по себе будет абзацем на целевой странице. Вот строчка:
«Это моя целевая страница»
Вот как это выглядит в HTML:
Это моя целевая страница
«P» означает абзац, а теги с обеих сторон указывают, что модификатор абзаца применяется только к этому конкретному фрагменту контента.
Другие популярные теги:
– делает текст элементом заголовка. Размеры варьируются от h1 до h6.- – создает новую ссылку в вашем тексте.
- – Любой текст между и выделен полужирным шрифтом.
- – этот тег выделяет текст курсивом.
– Вставляет разрыв строки. Один из немногих тегов, для которого не нужны и начальный, и конечный теги.
HTML также использует CSS (каскадные таблицы стилей) для изменения стиля элементов на целевой странице. Используя так называемые таблицы стилей верхнего уровня, вы можете изменять определенные вещи, такие как цвет фона, цвет текста и тип шрифта. Эти изменения затем «каскадируются» по всем элементам, позволяя вам вносить изменения, которые применяются ко всей целевой странице сразу.
Как создать целевую страницу в HTML
- Создайте базовую структуру.
- Создайте панель навигации.
- Прикрепите панель навигации к верхней части экрана.
- Создайте отличный фон.
- Добавьте немного стиля.
Первое, что вам нужно для создания целевой страницы в HTML, – это текстовый редактор, поскольку и HTML, и CSS написаны в виде обычного текста.
Один из вариантов – открыть Блокнот для Windows или TextEdit для Mac, но если вы хотите упростить процесс, откройте свой сайт WordPress, войдите в систему и используйте функцию Custom HTML Block. Вы также можете щелкнуть определенный блок в редакторе WordPress, щелкнуть три точки и затем выбрать «Редактировать как HTML». Если вы хотите полностью контролировать свои HTML-элементы, начните с редактирования страницы или публикации, затем щелкните три точки в правом верхнем углу редактора и выберите «Редактор кода».
Независимо от того, какой метод вы выберете, вы захотите включить некоторые основные элементы:
- Заголовок с использованием тега вверху страницы.
- Некоторый текст, использующий
для определения абзацев и стилей CSS для цвета и шрифта
- Тег для создания полей формы, где посетители могут вводить свое имя и контактную информацию.
- Ссылки, использующие тег , который позволяет посетителям загружать контент или получать к нему доступ после того, как они предоставили свои контактные данные.
Чтобы создать целевую страницу HTML с нуля, лучше всего использовать простую структуру HTML, такую как MDB – Material Design for Bootstrap – доступную как в бесплатной, так и в профессиональной версиях.
После того, как вы загрузили и распаковали пакет MBD, вы готовы приступить к работе со своей первой целевой страницей, для которой требуются пять ключевых элементов: базовая структура, панель навигации, класс панели навигации, фон на всю страницу и некоторые таблицы стилей CSS.
На практике это позволяет вам создать краткое описание на целевой странице, включить ссылки на формы или листы регистрации и создать то, на что посетители захотят взглянуть. Давайте разберем каждый шаг.
1 Создайте базовую структуру.
Начните с открытия файла index.html в папке вашего проекта – обычно это место, куда вы распаковали MDB или другой пакет редактора HTML – и вставьте этот код под тегом :
<!--Main Navigation-->
<header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
</main>
<!--Main layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
Вставьте этот код между открывающими тегами
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar→
Совет от профессионала: не забудьте добавить .container, чтобы ссылки оставались по центру.
Добавление этой быстрой строки кода гарантирует, что даже при прокрутке страницы вниз панель навигации останется с вами в верхней части экрана:
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">
4 Создайте отличный фон.
Отличный фон поможет вашей целевой странице выделиться. Поместите этот код под панелью навигации и перед закрывающим тегом
:
<!--Mask-->
<div id="intro" class="view">
<div class="mask">
</div>
</div>
<!--/.Mask-->
5 Добавьте немного стиля.
Откройте файл style.css в папке вашего проекта и вставьте этот код:
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Установка высоты на 100% гарантирует, что элементы фона покрывают весь экран, а #intro позволяет вам установить URL-путь для вашего изображения и направить посетителей в нужное место.
Инструменты для целевой страницы HTML
Нужна помощь с целевой страницей? У вас есть варианты, такие как:
- HubSpot – HubSpot предлагает бесплатный конструктор целевых страниц, который поможет вам создавать и тестировать красивые целевые страницы, которые генерируют потенциальных клиентов и отлично выглядят на любом устройстве.
- Elementor. Если вы создаете целевую страницу в WordPress и предпочитаете выбирать из 300+ вариантов страницы профессионального уровня, а не создавать ее с нуля, Elementor поможет вам. Цена начинается от 49 долларов за один сайт на один год.
- Ucraft – Ucraft предлагает множество бесплатных вариантов целевой страницы, которые помогут привлечь потенциальных клиентов на ваш сайт и упростить сбор данных о посетителях.
- Leadpages – вы можете использовать Leadpages в качестве плагина WordPress для управления целевыми страницами сайта или загрузки HTML-страницы прямо на свой сервер, что позволит вам точно решить, какой объем HTML-работы вам удобен и сколько вы хотите разгрузить.
Превращение посетителей в ценных клиентов начинается с четких, чистых и содержательных целевых страниц. Используйте основы HTML и CSS, чтобы разработать и развернуть страницу, наиболее подходящую для вашего бизнеса.
Источник записи: https://blog.hubspot.com