Как сделать лендинг самому

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

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

Более светлый называем, например “overlay2.png”, а более темный – просто “overlay”.

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

Далее таким же образом вы меняете весь текст в шаблоне, подставляя то, что вам нужно. Если вы сомневаетесь, что именно надо писать на вашем лендинге – используйте структуру лендинга из 9 блоков.

Создание лендинга посредством WordPress

Несмотря на обилие всевозможных плагинов и тем, позволяющих собрать посадочную страницу, мы выберем один — Free Landing Pages Builder by Wishpond — и рассмотрим, как создать лендинг самому бесплатно — пошаговая инструкция для всех. Мы не будем рассматривать процесс самого создания и запуска сайта, а также установки плагина, поскольку туториалов в Рунете на эти темы представлено предостаточно. Приступим непосредственно к обзору сборки лендинга.

Создание Landing Page с помощью плагина Вордпресс

Первым делом необходимо пройти регистрацию, потому после установки жмем «SIGN UP», далее «STAR TRIAL FREE». Вводим адрес электронной почты, создаем пароль. Кликаем по «NEXT», после чего выбираем создание новой страницы — «NEW LANDING PAGE».

Процесс сборки посадочной страницы выглядит следующим образом:

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

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

Плюсы и минусы плагина Free Landing Pages Builder by Wishpond

Преимущества Недостатки
Легкая настройка блоков, виджетов, дизайна путем перетаскивания мышью. Позволяет преобразовывать одну и ту же страницу в версии, совершенно отличные от исходного варианта Плагин англоязычный, отсутствует русифицированная поддержка. Что, впрочем, легко решается знанием английского языка на среднем уровне либо помощью сервисов перевода
Множество тем (более двухсот), созданных исключительно для одностраничных сайтов Хоть плагин и предоставляет бесплатную версию, разбор которой мы привели выше, она несколько ограничена в функционале, и весьма высока вероятность появления необходимости покупки платной версии в дальнейшем
Возможность отслеживания количества посетителей в любых временных интервалах Приложение тяжеловесно, что скажется на скорости загрузки сайта, однако и данная проблема решается путем оптимизации кода
Удобство управления страницами. Дополнительные всплывающие окна и кнопки анимации

№1. Создание лендинг пейдж при помощи бесплатных конструкторов

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

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

Однако, несмотря на свою простоту, конструкторы имеют и ряд подводных камней, которые не всем очевидны на первый взгляд. И связано это как раз с бесплатностью. Разработчикам, естественно интересно, чтобы вы платили им деньги за возможность создания лэндинга и поэтому часть разработчиков ограничивает возможности конструктора на бесплатных тарифах, либо предоставляют полный функционал, но ограниченный по времени (trial-версия). Поэтому красивая кнопка «попробовать бесплатно», пусть не вводит вас в заблуждение. Платные тарифы есть практически у любого конструктора.

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

Кстати, не лишним сразу будет посмотреть возможность интеграции / синхронизации с сервисами рассылки, CRM-системами и т.д., в случае, если вы планируете ими пользоваться или уже используете.

Помимо распространенных онлайн-конструкторов, есть и специальные программы, при помощи которых можно конструировать сайты, например, Adobe Muse. Правда эта программа считается скорее профессиональным инструментом, нежели предназначена для новичков, поэтому может уйти немало времени на ее изучение. И процесс создания лендинга уже не будет быстрым…

Продающие модели

Основная функция лендинга, как я уже говорила ранее, — это продажа. Контент вашей страницы должен отвечать на один вопрос: что делает ваш продукт или услугу уникальным?

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

Воспользоваться продающими моделями, разработанными выдающимися рекламщиками.

Модель AIDA

Расшифровывается как Внимание, Интерес, Желание, Действие

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

За интерес отвечает вступление, начинайте с главного, попадите читателю прямо в сердце – угадав его проблемы. Желание. Почему должны купить именно у вас, а не у Сереги из соседнего офиса? Распишите все возможные выгоды для будущего клиента. Действие. Не скромничайте и просите купить ваш товар немедленно.

  • Модель PMPHS. Не менее рабочая модель «Боль – Больше боли – Надежда – Решение». Обозначаем проблему, нагнетаем боль, даем надежду, предлагаем решение. Не стоит и здесь забывать про интригующий заголовок и выгоды.
  • Модель ОДП Структура: оффер — дедлайн — призыв.
  1. Оффер – это уникальное торговое предложение (УТП). Здесь нужно написать так, чтобы от вашего предложения практически невозможно было отказаться. Не юлите и не вводите в заблуждение, предложение должно быть действительно уникальным и отличаться от конкурентов.
  2. Дедлайн —  ограничение по времени или количеству. Например, «предложение действует до завтрашнего дня», «осталось всего 3 свободных места на курс» и т.п.
  3. Призыв. Снова провоцируем совершить целевое действие: «купите уже сейчас».

4U. На десерт оставила самую эффективную модель. 4 составляющих, которые могут размещаться в произвольном порядке.

Полезность, как и в других моделях объясняем выгоду. Uniqueness — отстраиваемся от конкурентов. Ultra-Specificity — уповаем на специфику, сужаем аудиторию

Важно, чтобы человек понял – это то, что он так давно искал. Urgency — даем прямой намек на то, что действовать надо быстро.

Еще один важный момент, на который я хотела бы обратить внимание: не используйте часто в текстах местоимение Мы

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

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

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

Из чего состоит лендинг

Посадочная страница визуально разделена на две части. Первая часть – это то, что посетитель видит, открыв сайт. Главная цель – заинтересовать потенциального клиента. На ней размещают:

  1. Логотип: человек должен знать, куда попал.
  2. Дескрипт: пару предложений, чем занимается компания.
  3. Контакты: необходимо сразу указать, как обратиться.
  4. Заголовок, формирующий интерес посетителя.
  5. Изображение или видео продукции.
  6. Форму и кнопку с призывом к действию.
  7. Идентификацию: кому подойдет продукт.

Лендинги имеют чёткую структуру

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

Как сделать лендинг на Тильде

Конструктор Тильда позволяет создавать любой вид сайта. Посадочная страница разрабатывается за полчаса без знаний дизайна и программирования.

Преимущества Недостатки
Не нужно знать код. Ограничения по количеству создания сайтов.
480 готовых шаблонов Дорогой хостинг и мало места на нем.
Интеграция с 12 сервисами для лендинга. Некрасивый URL на бесплатном аккаунте.
Редизайн – замена заголовка и удаление блоков. Весь функционал доступен после покупки платной версии.

На Тильде получается красивая и удобная страница, но шаблон есть шаблон. Лендинг будет похож на тысячи других сайтов в интернете.

Роман Глебов подробно рассказывает о создании посадочной страницы на Тильде:

httpv://www.youtube.com/watch?v=embed/ad_birA6yqU

Как создать лендинг на Вордпресс

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

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

Благодаря шаблонам CMS можно выбрать наиболее подходящий дизайн страницы

Платформа Вордпресс подойдет для создания статичной страницы. Но и у этой системы есть недостатки:

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

Лендинг на Вордпрессе сделать быстро и просто. Необходимо минимальное знание основ создания сайта.

Создание landing page самостоятельно

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

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

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

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

Программист Станислав Быков рассказывает, как правильно сделать лендинг:

httpv://www.youtube.com/watch?v=embed/gF_KLKMdIxw

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

Как создать одностраничник

Имеется четыре пути создания landing page:

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

Landing page рассматривается с трёх точек зрения:

Чтобы разработать посадочную страницу правильно самому надо придерживаться правил.

Заголовок

Часто заголовок называется оффер, так как он включает предложение, адресованное потенциальному клиенту

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

Если нужно пояснить заголовок или указать преимущества – используют подзаголовок.

Персонализация

Необходимо продемонстрировать посетителю, что именно он важен. Для этого надо писать «Вы» или использовать другие способы персонализации.

Верная структура лэндинга

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

Нельзя перенасыщать дизайн landing page графикой или текстом: между ними должен быть оптимальный баланс.

Социальные доказательства

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

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

Правильно сделанный landing page включает СТА или мотивирует к действию. Подобный призыв должен быть в хедере и в конце лэндинга. Иногда размещается с лид-формой.

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

Лид-формы

Самостоятельно разработанный landing page содержит лид-форму

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

Счётчики

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

Дизайн landing page рассказывает о предоставляемой услуге. Лэндинг ориентируется на целевую аудиторию.

Как выбрать лучший курс по созданию лендингов?

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

  1. Создание продающего лендинга под ключ.
  2. Создание лендинга с нуля.
  3. Написание текста для лендинга.

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

Как создать продающий лендинг под ключ

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

  • дизайн;
  • основы написания продающего текста;
  • верстка;
  • выстраивание воронки продаж;
  • подключение рекламы.

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

Создание лендинга с нуля

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

Преимущества Недостатки
Умение работать на конструкторе. Узкая специализация курса.
Умение работать с кодом. Нет знаний, что делать с сайтом дальше.
Изучение дизайна. Нет знаний по сбору целевой аудитории.

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

Как написать текст для лендинга

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

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

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

  1. Навыки анализа целевой аудитории: чем живет человек, перешедший на лендинг, о чем думает и мечтает.
  2. Знание работающей структуры текста: яркий заголовок, минимум «воды», максимум конкретики, четкие выгоды и призыв к действию.
  3. Умение составить грамотное УТП и преподнести выгоды товаров и услуг в наиболее привлекательном для покупателя свете.

Недостаток у курсов один – после обучения человек станет копирайтером, но этот специалист не создает сайты.

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

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

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

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

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

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

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

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

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

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

Общие правила создания лендинга

Следующие советы помогут сделать лендинг в соответствии с требованиями маркетинга:

  • Создаем запоминающийся логотип — это позволит повысить узнаваемость бренда.
  • Заголовок — должен «цеплять» и интриговать потенциального посетителя, но ни в коем случае не отпугивать призывом к немедленной покупке. Пусть лучше он будет информативным и провокационным.
  • Информация о компании и контактные данные — предназначены для создания атмосферы доверия для клиента. При наличии конкретного адреса он воспримет вашу фирму как серьезную организацию, а не как очередной сайт-однодневку.
  • Данные о товаре или услугах — этот пункт должен совмещать подробное описание продукции, его фото- или видеообзор, а также реальные отзывы клиентов в отдельном блоке или виджете. Не злоупетребляйте шаблонными «Почему большинство выбирает нас» и т.д. — это скучно и не привлекает, используйте воображение.
  • Плюсы сотрудничества должны быть представлены конкретным списком преимуществ бренда и покупки товара именно у вас. Никаких пространных рассуждений о том, до чего вы классные ребята. Только сухие факты и характеристики.
  • Форма обратной связи или подписка на рассылку позволит вам поддерживать контакт и «добыть» заинтересовавшегося клиента.

Готовим прототип

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

Наполнение контентом

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

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

Ваша страница должна придерживаться параметров маркетингового стандарта AIDAS, где:

A — attention — привлечение внимания посетителя.
I — interest — пробуждение интереса потенциального клиента.
D — desire — разжигание желания.
A — action — побуждение пользователя к действию (покупке, заказу).
S — satisfaction — удовлетворение клиента приобретением и закрепление его для дальнейшего сотрудничества.

Оформление landing page

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

Несколько советов по оформлению:

Не допускайте сильных разбросов в цветовой гамме — ваша страница должна привлекать взгляд приятным сочетанием, а не крикливостью красок.
Используйте минималистичный стиль, так как это, во-первых, упростит задачу, а во-вторых, согласно исследованиям, повысит доверие пользователя.
Не забывайте о структуре сайта — одни блоки (первостепенные) должны привлечь внимание раньше других (второстепенных), находящихся в соподчинении первым. Потому выделяйте их разными цветами и абрисами, задавайте им разные размеры.
Соблюдайте дистанцию между блоками и элементами, не позволяйте им слиться воедино.

Подведем итоги

Интернет дал миру огромный потенциал для создания сайтов практически любой тематики и направленности, в том числе и для Landing Page. Потому нет никакой необходимости отдавать деньги веб-студиям и фрилансерам, достаточно покорпеть в настройках и получить на выходе привлекательный и, главное, ни в чем не уступающий студийным или коробочным продуктам лендинг.

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

Не нужно делать «универсальный» лендинг со множеством категорий товаров в надежде охватить весь рынок. Лучшим вариантом будет запуск нескольких параллельных проектов с узкой специализацией.

Шаг 3. Сформируйте оффер

Оффер — это краткая формулировка преимуществ того, чем вы занимаетесь, в понятной клиенту форме. Оффер должен чётко ответить на вопрос, что вы продаёте. Почему именно вы это делаете? Почему именно вы лучше закрываете потребности клиента? Зачем ему вообще нужен ваш продукт?

Что должен включать в себя оффер?

Название продукта

Если человек ищет дрель, вы говорите, что у вас есть такая-то дрель.

Ключевые преимущества

Опишите главную боль и преимущества вашего продукта перед другими, закрывающие эту боль. Чем хороша эта дрель? Почему она лучше других?

Можно описать боль по-разному, надавить на неё, вскрыть проблему и предложить продукт в качестве решения. В 80 % ниш можно найти такую боль.

Если вы продаёте цветы, у вашей ЦА будет как минимум два портрета: тех, кто захочет цветов, и тех, кто покупает цветы в подарок. Это два разных УТП

Первым важно знать, как ухаживать за цветами, вторым — чтобы было, может, подешевле

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

Ориентируйтесь на то, какую пользу продукт принесёт клиенту. Это называется ВЫ-ориентированность.

Цифры и факты

Никаких «качественно и недорого»! Напишите, сколько стоит продукт, за какое время вы его изготовите или кто производитель, какая на него гарантия.

Сегментация

Укажите узкую географию, если вы работаете только в Иркутске или только в Сочи. Или, наоборот, скажите о том, что работаете со всем миром.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: