Как быстро создать Landing Page с помощью шаблонов

() translation by (you can also view the original English article)

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

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

Зачем нужен шаблон HTML?

Хотя есть несколько способов создания целевых страниц, шаблон HTML остаётся самым простым. Вот несколько причин, по которым вам следует использовать шаблон целевой страницы HTML, подобный тем, что доступны в Envato Elements.

1. Простота устройства

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

2. Быстрая загрузка

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

3. Не требуется обслуживание

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

Ключевые элементы целевой страницы

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

1. Броский заголовок и подзаголовок

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

2. Болевые точки

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

3. Предложения выгод

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

4. Доверительные сигналы

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

отзывы от существующих подписчиков или клиентов
доверенные значки, такие как VeriSign, Norton, Safe Payment и многое другое
гарантии возврата оплаты
Раздел FAQ с ответами на дополнительные вопросы
логотипы сайтов, которые обращались к вашему продукту

5. Призыв к действию

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

Как настроить шаблон целевой страницы

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

Как работают HTML-шаблоны

HTML-шаблоны обычно состоят из двух типов файлов:

HTML files
CSS files.

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

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

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

Теперь давайте посмотрим, как структурирован типичный HTML-шаблон. В этом уроке я использую шаблон Spot HTML landing page template из Envato Elements, поэтому ваши файлы шаблонов могут не совпадать. В основном это будут файлы CSS, изображения и папки JavaScript. Некоторое количество HTML-файлов и в некоторых случаях папка PHP, которая добавит дополнительные опции к шаблону.

Вот как организован шаблон Spot:

CSS. Эта папка содержит все таблицы стилей шаблона.
Изображения. В этой папке вы найдете все изображения-заполнители, используемые в шаблоне
JavaScript. В этой папке вы найдёте все файлы JavaScript, которые управляют различными анимациями и эффектами перехода.
PHP. Содержит код PHP, необходимый для формы контакта.
Video. Пример видео, используемый для демонстрационного макета, использующего фоновое видео.

Помимо вышеперечисленных папок, шаблон Spot содержит несколько HTML-файлов для разных вариантов разметки.

Как работать с шаблоном HTML целевой страницы

Самый простой способ начать редактирование и настройку шаблона целевой страницы - найти код, который вам нужно изменить. Для этого дважды щёлкните файл index1.html или любой файл HTML в папке шаблона с именем index.html. Обычно он обозначает домашнюю страницу, именно то, что мы будем редактировать в первую очередь.

После того, как вы дважды щёлкните файл, он откроется в вашем браузере по умолчанию. Щелчком правой кнопкой мыши и Open With можно выбрать свой интернет-браузер.

Посмотрим, где находится заголовок в файле HTML, чтобы его отредактировать. Щёлкните правой кнопкой заголовок, который гласит: “Spot is the best way to present your app to the world!” и выберите Inspect.

Внизу появится панель. Это панель Chrome’s Developer Tools, она состоит из двух частей: левой стороны, которая показывает код HTML и правую часть, которая показывает код CSS или стили, связанные с проверяемым элементом:

Заголовок, который мы проверяем, вложен между тегами <h2> Нам нужно его найти и отредактировать.

Для этого вернитесь в папку шаблона и снова щёлкните правой кнопкой мыши на index1.html. Нажав Open with выберите текстовый редактор, например Notepad.

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

В моем случае эта строка кода находится в строке 106.

Можно приступать к редактированию. Выделив текст между тегами <h2>, удалите его. Введите свой текст:

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

Повторяйте эти шаги, пока вы не замените весь демонстрационный контент своим.

Когда вы закончите внесение изменений, нажмите Save, а затем обновите вкладку «Шаблон» в окне браузера.

Теперь давайте посмотрим, как заменить изображение своим. Для этого используйте те же приёмы:

Сначала соберите все изображения в одну папку. Затем вернитесь в свой браузер, щёлкните правой кнопкой мыши изображение в области заголовка и нажмите Inspect. На скриншоте ниже видно, что фоновое изображение для заголовка задается через файл CSS. Вкладка Inspector даже сообщает вам, какой файл CSS вам нужно изменить:

Перейдите в папку вашего шаблона, откройте папку CSS и откройте соответствующий файл CSS. В этом примере мне нужно изменить color-palette-blue.css. Мне нужно отредактировать строку 66 в файле. Для этого я удалила всё после /images/ и внесла имя нужного изображения. Сохраните файл CSS, затем обновите окно браузера, и вы увидите новое фоновое изображение:

Как создать стиль шаблона

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

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

<link href="css/colors/color_palette_blue.css "rel="stylesheet"media="screen">

Измените имя на предпочтительную цветовую схему. В этом примере я заменила его на

<link href="css/colors/color_palette_red.css rel="stylesheet" media="screen">

Если ни одна из цветовых тем вам не по вкусу, вы можете отредактировать файл main.css и отрегулировать шрифты и цвета вручную. Найдите код в окне браузера и посмотрите в правой части экрана, чтобы узнать, какие стили используются. Затем найдите строку кода CSS и настройте. Например, вы можете отредактировать цвет кнопки в файле CSS, введя код HEX нужного цвета следующим образом:

background-color: #65b5c1;

Как загрузить свой шаблон на сервер

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

Начните с запуска вашего FTP-клиента, такого как FileZilla, который является бесплатным и кросс-платформенным. Используйте панель QuickConnect, чтобы ввести имя пользователя FTP и пароль, а затем нажмите Connect.

Найдите папку с шаблоном целевой страницы HTML в левой части экрана. Выберите все файлы и папки, перетащите их в правую часть экрана и поместите их в папку public_html.

Подождите до завершения загрузки и ваша страница оживёт.

Подробней о дизайне целевой страницы

Если вы хотите знать больше о дизайне целевой страницы, у нас есть ряд полезных ресурсов на Envato Tuts +. Вот несколько пособий для начала:

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

Landing Pages

Best of 2018: 20+ Great Landing Pages for Design Inspiration

Brenda Barron

Получите и быстро запустите свою целевую страницу с помощью HTML-шаблона

Как вы убедились, можно быстро запустить целевую страницу с помощью HTML-шаблона. Начните работу с посещения Envato Elements и найдя the perfect template. Вы также можете найти great landing page designs на ThemeForest. Следуя нашим учебным пособиям, настройте и запустите целевую страницу, чтобы сразу начать продвигать свое предложение.