Создание landing page. Landing Page от A до Я. Верная структура лэндинга

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

Топ лучших конструкторов лендинг пэйдж в 2019 году

Шаблоны лендинга	На кого ориентирована	Стоимость от
90		360 ₽ в мес.	Попробовать
300+	Профессионалы	559 ₽. в мес.	Попробовать
10	Новички	6,15$ в мес.	Попробовать
62	Новички/Продвинутые пользователи	300 ₽. в мес.	Попробовать
12	Новички	3,5$ в мес.	Попробовать
19	Новички/Продвинутые пользователи	Бесплатно	Попробовать
29	Новички	123 ₽ в мес.	Попробовать

LPmotor — самый лучший конструктор по мнению нашей редакции

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

Есть 90 различных готовых шаблонов на выбор. Они разбиты по категориям (строительство, инфобизнес, фотограф, красота и здоровье и т.д.). Все шаблоны смотрятся отлично и адаптированы под мобильный трафик.

Есть дополнительные функции: собственная CRM, автоворонка продаж, аналитика, А/Б-тестирование, подключение онлайн платежей, совместная работа (доступы сотрудников), корзина товаров.

LPmotor можно интегрировать с другими сервисами. Среди них: amoCRM, Битрикс24, Яндекс Деньги, Яндекс Метрика, Google Analytics и т.д.

Бесплатного тарифа нет. Платных тарифов 4 (цены при оплате за год):

При оплате за год вы получите скидку в 40%.

Способы оплаты: карты Visa и Mastercard Мир, Сбербанк Онлайн, Альфа-клик, Яндекс Деньги, QIWI, Webmoney, Связной, Евросеть, МТС, Теле 2, Билайн.

Достоинства

Низкие цены
Хороший выбор готовых шаблонов
Все необходимые функции для организации продаж в интернете
Широкие возможности по интеграции с другими севисами

Недостатки

Нет бесплатного тарифа

LPgenerator — конструктор лендингов для профессионалов

В LPgenerator есть абсолютно все, чтобы сделать идеальный лендинг. Звучит немного пафосно, но на самом деле так оно и есть.

Сервис ориентирован на профессионалов. Если у вас уже есть опыт и базовые знания вы освоитесь довольно быстро.

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

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

Все шаблоны выглядят современно и адаптированы под мобильные устройства.

В LPgenerator есть все инструменты, необходимые для интернет маркетолога: управление источниками трафика, подробная аналитика и геостатистика, А/Б-тестирование, построение воронки продаж, собственная CRM.

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

Здесь нет бесплатного тарифа. Новому пользователю доступен 7 дневный бесплатный тестовый период. Потом нужно выбрать один из платных тарифов (в скобках цены при оплате за год): Базовый - 799 руб. в мес. (559 руб. в мес.), Продвинутый - 2375 руб. в мес. (1662 руб. в мес.), Безлимитный - 3999 руб. в мес. (2799 руб. в мес.), Корпоративный - 15730 руб. в мес.(11011 руб. в мес.).

Способы оплаты: Безналичный расчет, Web Money, карты Visa, Maestro и MasterCard, Сбербанк Онлайн, «Мир», «Альфа-Банк», «Яндекс.Деньги», Qiwi Wallet, Tele2, Beeline, «Мегафон», МТС, «Евросеть»

Достоинства

Большой выбор шаблонов.
Есть возможность создать лендинг с нуля
Доступ к HTML и CSS
Сплит-тестирование
Детальная аналитика и геостатистика
Собственная CRM
Телефония для обзвона клиентов из админки

Недостатки

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

Ulanding – молодой и перспективный

Ulanding новый конструктор лэндингов от создателей Ucoz и Ukit. Только недавно вышел из beta-тестирования и теперь доступен для регистрации.

Главная отличительная черта ulanding – простота и удобство. Этот конструктор целевых страниц идеально подойдет для новичков.

Шаблонов оформления пока не так много, так как проект только запустили. Надеюсь в будущем библиотеку шаблонов будут пополнять.

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

К каждой посадочной странице подключаются системы аналитики Google Analytics и Яндекс Метрика с помощью которых можно детально отслеживать посещаемость, источники трафика и поведение пользователей.

Все заявки можно посмотреть во вкладке “Лиды”. Кроме того, можно интегрировать конструктор с аккаунтом AmoCRM и сразу передавать все заявки в CRM систему.

Помимо этого, можно интегрировать лендинг с другими сервисами:

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

Тарифная сетка ulanding. Цены указаны при условии оплаты за год

Всего платных тарифов 3: “Начальный”, “Бизнес”, “Продвинутый”. Они отличаются только количеством проектов и лендингов.

Способы оплаты: Банковская карта (Visa, Mastercard), PayPal

Достоинства

Простой и удобный интерфейс
Интеграция с CRM
Подробная статистика и аналитика

Недостатки

Мало шаблонов
Мало способов оплаты

LPTrend — хороший генератор одностраничников

Конструктор посадочных страниц LPtrend ориентирован как на новичков, так и на продвинутых пользователей.

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

Еще из достоинств конструктора: аналитика, собственная СRM, А/Б-тестирование.

Можно интегрироваться с различными сервисами повышения конверсии и приема платежей, например: CallbackKILLER, Widget, Единая касса, Glopart и т.д.

Новому клиенту дается 7 дневный бесплатный тестовый период. Полноценного бесплатного тарифа нет. Платных тарифов 3: Стартовый 500 руб. в мес., Базовый 1000 руб. в мес., Премиум 2000 руб. в мес. При оплате на длительные сроки предусмотрены скидки: на 3 мес — 10%, 6 мес — 20%, год — 40%. Таким образом стартовый пакет при оплате за год будет стоить всего 300 руб. в мес., что довольно неплохо.

Способы оплаты: Visa, Mastercard, Связной, Евросеть, Мегафон, МТС, Единый кошелек.

Достоинства

Низкие цены
Качественные, разнообразные, адаптивные шаблоны
Хороший функционал
Много обучающих материалов

Недостатки

Нет бесплатного тарифа
Короткий триал всего 7 дней

Ukit — дешевый и надежный

Ukit — универсальный конструктор на котором можно сделать самые различные типы сайтов: лендинги, визитки, интернет-магазины, контентные сайты. Рассчитан на новичков.

Ukit ориентирован в первую очередь на создание сайтов-визиток для малого и среднего бизнеса. Шаблонов лендингов здесь совсем немного — всего 12.

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

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

В одной из прошлых статей я уже рассказывал . В этой статье я показал весь процесс создания сайта именно на примере Ukit .

При регистрации вам предложат выбрать домен 3-го уровня. После того, как сайт будет готов, к нему можно прикрепить домен 2-го уровня. Его можно купить отдельно у любого регистратора, а можно приобрести прямо в личном кабинете Ukit.

После регистрации вы получаете бесплатный тестовый период 15 дней. Дальше нужно выбрать один из платных тарифов. Есть 4 базовых тарифа (в скобках цена при оплате за 2 года): «Премиум» 5$ (3,5$) в мес., «Премиум+» 10$ (7$) в мес., «Магазин» 12$ (8,4$) в мес. и «Про» 15$ (10,5$) в мес.

Способы оплаты: безналичный расчет, Visa, Mastercard или PayPal.

Достоинства

Шаблоны выглядят современно и адаптированы под мобильные
Можно заказать свой уникальный дизайн
Неплохой функционал: SEO оптимизация, подключение «Яндекс.Метрики» и Google Analytics, SSL-сертификаты, почта, домен 2-го уровня.
Интеграция с соц.сетями

Так как спрос на Landing Page с каждым годом увеличивается более чем на 100%, даже новички, заинтересованные в бизнес-деятельности на просторах интернета, начинают задаваться вопросом – как создать лэндинг своими руками? Проведение распродаж, акций от крупных компаний, малый коммерческий бизнес, маркетинговое продвижение своего продукта, увеличение продаж, тестирование новой ниши – эти и многие другие факторы заставляют компаний заинтересовываться одностраничными сайтами.

Создаем Лендинг Пейдж с нуля без знаний и навыков

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

1. Создание лендингов с помощью онлайн-конструкторов

Онлайн-конструкторы – это настоящее «спасение» для новичка, который совершенно незнаком со сферой создания сайтов. Современные конструкторы позволяют создавать не только целевые страницы, но и интернет-магазины, сайты-визитки, информационные порталы компании так далее.

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

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

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

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

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

Пример создания лендинга с помощью Bloxy.ru:

Переходим на Bloxy.ru .
Кликаем по кнопке «Создать Landing Page».
Проходим краткую регистрацию, либо авторизуемся через социальные сети (сервис не получает ваши данные от страниц в соц. сетях).
Жмем по огромной кнопке со знаком «+» — «Создать сайт».
При желании проходим краткий курс обучения (новичкам рекомендуем не отказываться от него).
Перед нами открывается огромный визуальный редактор с инструментами, расположенными как внизу сайта, так и в самом верхнем меню. Каждый инструмент вполне понятен пользователям за счет своей иконки. Также при наведении на иконку появится подпись, поясняющая, что это за инструмент. Чтобы разместить его на сайте, нужно просто перетащить иконку в нужную область лендинга.
Выбираем шаблон из сотни представленных в соответствующем разделе.
Наполняем сайт контентом.
Добавляем необходимые модули – они также встроенные.

Максимально подробно о работе с Bloxy.ru мы рассказывали в . Отметим, что внизу Bloxy.ru есть кнопка «Посмотреть обучающее видео». Если нет желания проходить курс, посмотрите видеоролик, подробно рассказывающий, как создать свой лендинг с нуля.

Первая неделя работы с онлайн-конструктором – бесплатная. Далее ежемесячная плата будет составлять 590 рублей. В сравнении с другими способами создания лендинга, этот самый выгодный. Затраты на хостинг и домен будут примерно такими же, при этом работать над лендингом придется значительно дольше, чем в случае с Bloxy.ru.

2. Разработка лендинга с использованием готового шаблона

Создание лендинга с нуля возможно путем установки готового HTML-шаблона, скаченного из интернета. Но этот способ более сложен для новичков в сравнении с теми же конструкторами.

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

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

Если вы найдете подходящий по вашей тематике шаблон, то все, что останется сделать, это поменять демо-контент (видео, текст, изображения) на свой. После готовый HTML-шаблон нужно установить на купленный . В среднем он обходится в 200-500 рублей в месяц (это немного дороже, чем услуги Bloxy.ru).

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

Здесь мы не будем рассказывать, что можно создать лендинг своими руками при помощи HTML-редактора. Способ аналогичен всему вышесказанному, но в данном случае мы должны будем сами писать шаблон, либо собирать его по частям, находя нужные участки кода в готовых шаблонах. Нельзя сказать, что способ невероятно сложен, но новичкам браться за него необходимости. Идеальный шаблон вы с первого раза вряд ли сможете написать. Если сроки на создание одностраничника минимальные, лучше воспользоваться услугами онлайн-сервиса Bloxy.ru.

3. Создание одностраничника на движке WordPress

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

Все, что нужно сделать для работы с данной платформой, это:

Приобрести хостинг (от 200 рублей);
Купить домен (от 100 рублей);
«Прикрутить» на хостинг CMS;
Привязать домен;
Далее найти готовый шаблон в самой же системе WordPress и активировать его одним кликом.
Размещение текстового контента, изображений, видео – все это настолько же элементарные задачи, как и в случае с конструкторами. Но, опять же, домен и хостинг – это гораздо большие растраты, чем оплата услуг онлайн-сервисов.

Процедуру установки хостинга на CMS можно найти на сайте любого хостинг-провайдера.

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

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

Что такое Page Builder от WordPress?

Первое, что нужно сделать с помощью плагина, это разработать разметку. Она позволит нам грамотно распределить блоки своего одностраничника, установить цвет блоков, их размер, разместить фоновое изображение, настроить отступы, число блоков и так далее. Атрибутов в плагине действительно много.
Когда все нужные блоки готовы, необходимо разместить в них контент. В этом вам может помочь дополнительный плагин «SiteOrigin Сборник Виджетов». Очень много виджетов из всего сборника могут быть полезны для вашего лендинга, но и злоупотреблять ими ни в коем случае нельзя. Под виджетами мы подразумеваем слайдеры, иконки, заголовки, кнопки, формы и так далее.
Если у вас есть сторонние плагины, их также можно будет активировать. Например, установить таймер обратного отсчета акции или распродажи, сделать кнопки интеграции с социальными сетями, разместить форму, в которой клиенты будут оставлять свои контактные данные. Для WordPress сегодня в сети можно найти невероятное количество разношерстных дополнений.

Если мы создаем Landing Page своими руками, останавливаться на базовом функционале CMS точно не стоит. Современные целевые страницы совершенствуются именно за счет дополнений.

Выше мы говорили про CRM-системы, E-mail рассылки. Интеграцию с такими сервисами WordPress разрешает. Правда, не все подобного рода плагины бесплатные. Но в интернете можно найти и бесплатно скачать сторонние дополнения.

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

Подытожим

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

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

Недостатки landing page

Продажа одного товара. Тут всё просто, один товар - один лендинг.
Нет SEO оптимизации. Конечно, некоторые личности умудряются заточить свою страницу под какой-нибудь запрос и далеко продвинуть его, но много ли вы ключей сможете продвинуть с одной страницы? Ответ очевиден.

Преимущество landing page

Конверсия. Наибольшая конверсия наблюдается у landing page. Что позволяет ему с лучшим успехом.
Быстрое исполнение. Для того, что бы сделать от 1 до 3-5 страниц необходимо не так много времени, как например для создания того же интернет-магазина.
Цена. Один из основных факторов почему выбирают именно его. По цене он всё же уступает корпоративным сайтам и интернет-магазинам.

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

Думаю именно этот фактор привел вас на этот блог и на эту статью. Сейчас мы рассмотрим, как сделать лендинг самому , да ещё и бесплатно! Чтобы сделать landing page самому необходимо для начала:

Понять, для чего он нам нужен
Придумать структуру лендинга
Скачать Notepad++
Скачать Artisteer 4
Запастись временем
Приготовить чай

Для чего он нам нужен?

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

Придумать структуру лендинга

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

Скачать NotePad++

НотПад - это тот же блокнот, но с более высокими возможностями в плане разработок. Подсветка, изменение кодировок, макросы, нумеровка строк - всё рядом и удобно, советую. Найдете его на просторах интернета бесплатно.

Скачать Artisteer 4

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

Запастись временем

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

Приготовить чай

Или кофе/какао. Что любите больше. Я выбираю чай

Инструкция по созданию лендинга самому

Качаем картинки к будущему сайту, чем качественнее она будет, тем лучше. Плохие картинки лучше не берите.
Пишем контент к сайту. Весь текст, что будет у вас на сайте в виде доступной информации для посетителей.
Открываем Artisteer 4 и начинаем редактировать пустую страницу, или уже имеющийся шаблон. Вставляете свой текст и нужные картинки.
Отредактировав все необходимые страницы, вы экспортируете свою работу в виде HTML файла (назовите главную страницу "index.html " Без скобочек, это обязательно! ).
Далее открываете страницы с помощью NotePad++, нажимаете Ctrl + F и вводите фразу "Artisteer". Удаляете все упоминания о программе (разработано с помощью, ссылки на сайт программы и прочее).
Сохраняете всё это добро, нажав на кнопку сверху "Сохранить".
Вуаля! Вы сделали лендинг самостоятельно! Теперь осталось поставить ваш новоиспеченный .

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

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

Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.

Итак, вот пошаговый план самостоятельного создания лендинга:

И прежде всего давайте скачаем основу для нашего будущего лендинга — готовый профессиональный html шаблон.

#1 — Скачиваем бесплатный html шаблон лендинга

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

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

#2 — Заменяем картинку на главном экране

Когда скачаете — откройте папку «blue» и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.

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

Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++ . Скачайте её и установите себе на компьютер.

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

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

Теперь копируйте это изображение в папку «images». Поменяйте его название на «banner.jpg». То изображение, которое уже называется «banner.jpg» в этой папке, переименуйте во что-нибудь другое.

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

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

Если все ОК, то переходим к редактированию текста.

#3 — Редактируем текст на главном экране

Кликайте правой кнопкой мыши по файлу «index.html» и выбирайте «Открыть с помощью — Notepad++».

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

И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.

Сначала поменяем заголовок. Вместо «Alpha» напишем что-нибудь по нашей теме. Напоминаю, что тут мы продаем юридические услуги. Значит можно сформулировать это примерно так: «Срочная подготовка и сдача налоговой декларации для вашего бизнеса». Вставляем этот текст вот сюда, между тегами

После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:

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

Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа — прописываем наши конкретные предложения. Например: «Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН — от 5400р. ЕНВД без сотрудников — от 2100р.» Вставляем этот текст вот сюда:

Теперь меняем текст кнопок таким же образом. Пишем на белой «Заказать», на прозрачной — «Подробнее».

В итоге у нас получается вот такой главный экран лендинга:

#4 — Затемняем фоновую картинку

Все вроде бы неплохо, но мне, например, кажется, что фон у нас слишком светлый, и белые буквы на нем теряются. Предлагаю наложить более темный фильтр на картинку. Для этого переходим в папку «assets -> css ->images» и меняем названия у двух файлов, которые там расположены.

Более светлый называем, например «overlay2.png», а более темный — просто «overlay».

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

#5 — Заменяем форму подписки

Единственное, с чем у вас могут возникнуть сложности — это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.

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

То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:

Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)

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

В сентября 2015 года мне понадобилось сделать лэндинг для своего первого ифопродукта, ну, и естественно я воспользовался поиском гугл, чтобы найти хоть какую-то инструкцию. Но так уж вышло, что реальной информации, которую бы смог осилить любой новичок не нашлось. Куда ни зайду, везде реклама каких-либо дорогостоящих сервисов и услуг. Уверен, многие из нас ещё не готовы отваливать каждый месяц кучу денег за абонентскую плату, также уверен, что многим хотелось бы просто поэкспериментировать, попробовать свои силы в инфорбизнесе, за что, опять же, не хотелось бы лишний раз платить. «Нужно как-то исправлять эту ситуацию» - подумал я, и решил во всём разобраться сам.

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

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

Лендинги, как маркетинговый инструмент, приобрели большую популярность за счет того, что они создаются под определённую категорию людей, а значит, дают большой процент конверсии в своей нише. Такие значения, как 10-20% являются очень хорошими и правильно сделанные лэндинги легко собирают подписную базу.

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

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

1.1. Основные принципы составления лендинга:

Каждый элемент лэндинга должен выполнить одну, самую главную цель: получить действие посетителя. Поэтому не стоит добавлять кучу мелочей, которые могут Вам показаться просто «миленькими», «красивенькими» и тому подобное.
Используйте маркетинговые фишки. В основном это срочность и дефицит. Практически на всех лэндингах есть таймер обратного отсчета или упоминание о том, что осталось столько-то копий до повышения цены. Это работает, проверено на личном опыте, причем работает так эффективно, что результат иногда поражает.
Свобода глазам! - Никто не ограничивает нас в размерах, не стоит громоздить элементы друг на друга. Решил упомянуть это, так как не раз видел примеры, где авторы видимо не знает, что такое «отступы».
Яркий и современный дизайн. Во время создания откройте 3-4 примера лэндингов, которые Вам очень нравятся. Смотрите, как сделали они и повторяйте до тех пор, пока идеи в голове не начнут генерироваться сами. У меня, например, было именно так.
После завершения работы, попросите своих близких посмотреть на результат. Любой вопрос, который у них может возникнуть, должен заставить Вас задуматься о том, что лэндинг не совершенен, так как хорошая работа в итоге должна оставить посетителя без вопросов.

1.2. Элементы, которые должны быть у каждого лендинга

Начнём с самого верха, где у нас обычно находится заголовок. Естественно, что должен он быть привлкательным, интересным и максимально интригующим, в общем его цель с первых секунд захватить внимание и в тоже время из его содержания должно быть понятно Ваше предложение.
Торговое предложение. Его стоит описать таким образом, чтобы донести суть, самый сок при этом не стоит злоупотреблять повторениями. Также не стоит думать, что если Вы вместо двух-трёх раз повторите Ваше переложение, то от этого увеличится конверсия, наоборот, действовать нужно постепенно по ходу всей страницы. Я предпочитаю в этой части лендинга, просто рассказать о том, что именно даст продукт и перечислить несколько плюсов, которые важны именно для моей аудитории.
Если лендинг пейдж небольшой, то сразу рядом размещайте кнопку призыва к действию, типа: «Получить», «Забрать», «Купить» и тому подобное. Здесь я использую яркие красные или контрастные фону цвета. Всё таки наша основанная задача заставить клиента нажать именно сюда.
Расскажите о преимуществах вашего товара над другими подобными, чем Вы лучше других?
Разместите карту действий, в которой подробно опишите процесс решения проблемы, указав каждый шаг с момента покупки.
Далее следует разместить несколько отзывов. Желательно не придумывать их, а узнать у тех людей, кто уже приобрёл товар. Ну, а если таких нет, то тогда уж придётся накалякать самому, причем не давать десять баллов из десяти, пишите отзывы на семёрочку-восьмёрочку. Можно дать попробовать продукт известным в вашей области людям, чтобы они дали свой отзыв, желательно в видео формате.
Обязательно укажите, гарантии безопасности платежа, анонимности, условия возврата товара и денег и так далее.
Ну и в самом конце, в футере - укажите свои реквизиты, ссылку на партнёрскую программу, можно поставить социальные кнопки рассказать о себе, как об авторе, указать контакты и так далее.

2. Делаем лендинг своими руками

После прочтения советов предоставленных выше, мы можем приступать непосредственно к самому созданию страницы на которой у нас будет лендинг. Использовать мы будем программу вебкоснтркутор: WYSIWYG Web Builder 9-ой версии. Хотя сейчас уже есть 10-ая, но там проблемы с русификацией, поэтому если Вы не опытный вебмастер, то рекомендую использовать 9-ую версию. Также нам понадобится:

Редактор изображений фотошоп;
Клиент для работы с хостингом FileZilla;
Сам хостинг;
Ну, и доменное имя.

У Вас может возникнуть вопрос о том, где брать эти программы бесплатно? Могу только посоветовать хорошо погуглить, давать же ссылки сайты с пиратским содержанием - это против моих собственных убеждений.