]]>eTXT]]>


]]>]]>

Делаем своими руками бесплатный лендинг пейдж. Урок 1.

 

Что такое лендинг пейдж.

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

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

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

Примеры лендинг пейджПодробно я уже писала в статье «Создание идеальных посадочных (landing page) страниц».

Примеры лендинг пейджЗаказать лендинг пейдж по адекватной цене от 5 000 руб. до 10 000 руб. на cms Wordpress. На основе платной премиум темы вы получите в собственность лендинг страницу, за которую не придется платить ежемесячно. Вордпресс является гибкой платформой и позволяет разрабатывать продающие одностраничники с красивым дизайном, а не только многостраничные интернет-магазины.

Другой вариант - это одна страница для вашего бизнес предложения без админки и возможности добавлять новые страницы. Стоимость с подбором ключей и корректировки (оптимизации) вашего предложения или с вашим готовым текстом от 5 000 до 15 000 руб. 

Сегодня у нас с вами практический урок с техническими моментами. Итак…

 

Лендинг пейдж – это обычная веб-страничка в интернете, созданная по известным технологиям HTML, CSS, Java, с добавлением изображения и текста. Текст называется продающим и пишется по законам копирайтинга. Landing page можно сделать вручную или на любом движке с помощью плагинов.

 

Как создать лендинг пейдж своими руками. Пошаговые уроки и практика.

 

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

  1. Мы будем делать продающую страницу на HTML, CSS.
  2. Нам нужно написать короткий смысловой текст, побуждающий пользователя сделать нужное нам действие.
  3. Картинка, служащая либо фоном веб-странички, либо отдельным элементом.
  4. Код формы. Если вы ведете рассылку в e-mail сервисе, то подписную форму сгенерируете там же. Если это форма регистрации на сайте, то код возьмете с сайта.

 

2 шаг. Как сделать макет лендинг пейдж.

 

  1. Определимся со структурой папок.

В корне страница index.html;

Для картинок папка «images» или «image»;

Для файлов стилей папка «css».

 

 

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

 

Лучшая программа для создания лендинг пейдж. 

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

 

Основа для веб-документа:

<head>

<title>Тайтл </title>

<meta name="Description" content="Описание" />

<meta name="Keywords" content="Ключевые слова" />

<link href="css/style.css" rel="stylesheet" type="text/css" />  <!--Прикрепляем лист стилей -->

</head>

 

<body>

<div> Здесь будут блоки с Div версткой</div>.

</body>

</html>

 

Верстка может быть табличная, но лучше с дивами - <div> Тег Div</div>.

 

Вы можете пойти по двум направлениям:

 

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

 

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

Бесплатные уроки создания сайтовДля наглядности процесса я рекомендую воспользоваться моей подборкой бесплатных видео уроков.

Эти уроки высокого качества и они намного сэкономят время при обучении. Вы сможете делать целевые странички самостоятельно и профессионально.

 

Идеальная основа для макета лендинг пейдж – это три блока: заголовок, текст и форма или кнопка заказа, подписки.

Как создать лендинг пейдж самому: макет.

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

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

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

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

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

Все, ничего лишнего.

 

Дополнительные шашечки. Нужны ли они? Как провести анализ.

 

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

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

 

Для того, чтобы узнать какой вариант вашей страницы будет конверсионным, пользуйтесь А/Б тестированием. Сервисы для этого: Google Website Optimizer, сервис рассылок, которым вы пользуетесь. Сервис смартреспондер для тестирования лендинг пейджОчень удобный интерфейс и возможность провести тестирование разных вариантов одной продающей страницы.


Сегодня мы определились со структурой, дизайном и текстом для лендинг страниц.

Во втором уроке мы продолжим практическое создание целевой страницы. Хорошим подспорьем при этом будут эти бесплатные видео уроки HTML, CSS, Dreamweaver и другие.

 

Прочтите еще статьи о посадочных страницах:

Оптимизация посадочных страниц

Удачные и красивые дизайны посадочных веб-страниц

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

 

 
Все для сайтов: 

Комментарии

8

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

А я заказывал себе лендинг вот тут и мне сделали хорошо. Заявки идут, дизайном доволен.

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

Дорогие друзья! А я решил довериться профессионалам! Первые недели я просто парился по поводу лендинга сам,но потом понял,что это бесполезно и лучше,чтобы его сделали профессионалы! Ну и в принципе не прогадал) доверился и сделали мне всего лишь за 19000 рублей хороший лендинг!)

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

Все конструкторы, которые я видел, включая LPGenerator имеют визуальный графический редактор. То есть ты например рисуешь кнопку в любом месте и она появляется на сайте. Но проблема в том, что чтобы сделать красиво, нужно иметь талант дизайнера. В итоге получаются лендинги любительского уровня. Недавно наткнулся на один новый конструктор https://platformalp.ru/reg/EMETOECH Так вот там лендинг можно собирать из готовых блоков. Это намного проще и красивее, чем в графических редакторах и больше возможностей чем менять шаблоны (их там практически нет). Плюс порадовали ab-тесты, интеграции с crm, и анимация! В общем прошли те страшные времена, когда надо было геммориться с лендами и переплачивать балбесам-фрилансерам) Вот такой получился у меня лендинг promo.puzzle-lamp.ru

Видимо второй урок так и не был написан, а первый лишь для того чтобы увидели видео курс и купили. Замечательный пример ПРОДАЮЩЕЙ страницы, хоть и не лендинга

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

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
To prevent automated spam submissions leave this field empty.
CAPTCHA
Действительно ли вы человек?

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





Если вам понравилась статья, вы можете ]]>подписаться на RSS]]> или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму:

Введите Ваш email:

Подпишись с ]]>FeedBurner]]>

Другие сервисы почтовых рассылок

* Нажимая на кнопку "Подписаться!" я даю согласие на рассылку и соглашаюсь с политикой конфиденциальности