Как сделать лендинг самому. пошаговая инструкция (2019)

Разновидности лендингов

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

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

Страница сбора контактов

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

Само собой, на таком лендинге должен быть функционал сборщика. То есть просто знание HTML и CSS тут не подойдет. Либо придется дописывать специальный скрипт на Java, либо делать такую страницу на другой платформе. Отлично подойдут WordPress и Joomla

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

Товарный лендинг

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

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

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

Сайт-визитка

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

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

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

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

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

Лендинг с услугами

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

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

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

Брендированный лендинг

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

Допустим, тот же Apple. У них все просто и банально. Выходит новинка – iPhone XS MAX. Задача лендинга – представить не только новый продукт, но и повысить узнаваемость бренда компании.

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

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

Как сделать хороший лендинг

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

Есть несколько общих моментов на которые стоит ориентироваться.

Хороший лендинг:

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

На просмотр контента должно уходить 2-3 минуты, чтобы пользователь не успел устать. Закрываем очевидные проблемы и хотелки, лендинг должен отвечать на существующие вопросы, а не поднимать новые.

Альтернативная формула – PMPHS: проблема, ее обострение, надежда, решение. Например. Набрали лишний вес – диеты не помогают, вызывают проблемы с желудком – забудь о диетах диеты – таблетки помогут сбросить от 2 до 7 кг за месяц.

Формулы не универсальные, где-то лучше работает один формат, где-то другой. Но эти ориентиры помогут взять правильное направление.

Хороший лендинг имеет логическую структуру и закрывает все вопросы пользователя

К счастью, есть более объективные показатели качества landing Page, их можно измерить. Помним, что суть арбитража – получить прибыль. Поэтому смотрим на цифры:

  • время просмотра страницы;
  • процент отказов;
  • конверсия.

Оценить эффективность лендинга помогают различные инструменты: встроенная аналитика есть у большинства онлайн-конструкторов и CMS. Более подробную статистику дают специализированные системы. Например: Google Analytics, Яндекс.Метрика, К50, Serpstat, Oribi, SimilarWeb.

Мощные инструменты для аналитики есть у популярных трекеров: CPAtracker, AdsBridge. Оценить CR разных вариантов дизайна можно с помощью A/B-тестирования – сначала показывается один вариант лендинга, потом другой. После сравнивается отклик аудитории. Опция тоже есть у большинства онлайн-конструкторов (bloxy, tilda, GetResponse). Более гибкие тесты можно проводить через специализированные сервисы (например, Kameleoon).

Так выглядит хороший лендбинг

Распространенные ошибки

  • Лендинг должен быть длинным – нет. Нужно подробно рассказать о продукте – это означает снять все вопросы, а не породить новые. Идеально – донести суть за один экран.
  • Особенный, вкусный текст – иногда это работает, но в популярных конверсионных тематиках (гемблинг, дейтинг, нутра, товарки, финансы) чем проще написано, тем лучше.
  • Таймер с обратным отсчетом – когда-то это был железобетонный прием, сейчас пользователи раскусили фишку, счетчики отталкивают, а не мотивируют.
  • Расплывчатое УТП – это звучит банально, но юзер должен понимать, что ему продают и что нужно сделать;
  • Длинный список из преимуществ – никто его не будет читать, достаточно 3-5 пунктов.
  • Много отвлекающих факторов: часы, календарь, блоки с картинками, виджеты, пестрый разноцветный текст с разными шрифтами – такими были сайты из 2000х и они не работают в 2020-х.
  • Несколько целевых действий. Этот прием работает на сайтах, у лендинга одна цель и наличие выбора только оттягивает принятие решения, в итоге юзер не сделает ни одного.
  • Лендинг не соответствует объявлению. Например, баннер с рекламой “быстрого заработка” перенаправляет пользователя на лендинг “быстрых кредитов” или “онлайн-казино”.
  • Сложная форма обратной связи – не просите слишком много, не все юзеры готовы оставить даже номер мобильного. Если вы спросите адрес, семейное положение – ждите отказ. Идеальная форма Имя (без фамилии) и адрес электронной почты при подписке. Номер мобильного, мессенджер для формы продажи.

Создание каркаса: формулы AIDA и PMPHS

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

AIDA

PMPHS

pain (боль): внимание на проблему («Не получается создать лендинг самостоятельно?»);

more pain (обострение боли): описание последствий нерешенной проблемы («Потеряете деньги на рекламе и не привлечете клиентов»);

hope (надежда): намек на возможность выйти из ситуации («Не обязательно тратить много денег и искать специалистов»);

solution (решение): ваш продукт, который решает проблему («Скачайте наше руководство по созданию лендингов — и разработайте сайт-визитку в десять простых шагов»).

Где еще быстро создать лендинг: 13 качественных сервисов

Это англоязычный конструктор. У него большая база (более 500 шаблонов), сконструированных для быстрого сбора лидов. Есть возможность менять контент в зависимости от пришедшей аудитории. Сервис предоставляет многопользовательское управление, что позволит управлять сайтом разным специалистам. Цены не самые гуманные для российских пользователей – 149 $ в месяц при годовой подписке. Но если нужен красивый лендинг с динамическим контентом, можно протестировать эту платформу.

Это также англоязычная платформа с большой базой шаблонов. Ее редактор напоминает фотошоп. Элементы добавляются путем перетаскивания, каждая деталь гибко настраивается. Всплывающие окна хорошо отображаются на разных устройствах. Лендинг можно интегрировать с MailChimp, подключать к Google Analytics, тестировать. Стоимость – от 29 $/мес. при годовой оплате. Тарифы ограничены количеством посетителей в том числе. 

Стандартный конструктор посадочных страниц, который на всех тарифах предлагает:

  • Интеграцию с внешними сервисами, Google Analytics и Яндекс.Метрикой;
  • Полную адаптивность;
  • Добавление всплывающих лид-форм;
  • Сбор базы подписчиков;
  • Хостинг и домен.

Минимальная стоимость – 400 руб./мес. 

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

Примеры лендингов, созданные на Bloxy

Конструктор предлагает 1300+ шаблонов, которые поделены на сферы деятельности. Есть пустая страница, позволяющая собрать одностраничник с нуля. Конечно же, страницы адаптированы под мобильные устройства, есть виджеты и онлайн-оплата. Бесплатный тариф действует 2 недели, затем минимальная стоимость будет составлять 315 руб./мес. 

Здесь можно сделать лендинг с абонентской платой от 210 руб./мес. Есть бесплатный тариф с поддоменом, возможностью добавить 5 товаров и 20 фотографий. Доступно 100+ шаблонов.

Сайты интегрируются не только с CMR, но и “Мой склад”, СДЭК. Есть выгрузка товаров в Яндекс.Маркет. 

А вот здесь можно создать лендинг, который будет бесплатен полгода. Правда, до этого нужно оплатить годовой абонемент и разместить пост о площадке в соцсети.

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

Можно подключиться к Bazium CRM, составлять свои формы. Содержание лендинга обойдется в 290 руб./мес. при годовой оплате. 

Конструктор предлагает посмотреть шаблоны лендингов и возможности редактирования до регистрации, что удобно. Базовый тариф стоит 190 руб./мес. В нем доступно 60+шаблонов, бесплатный домен (на год), но всего 50 Мб места на сервере. Платформа подойдет для стандартного лендинга, без тяжелой графики.

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

Платформа позволяет без регистрации просмотреть не только веб-версию шаблона, но и мобильную. Дизайны современные, отличаются простотой и большим количеством «воздуха». Стоимость начинается от 3.19 $/мес. 

Конструктор предлагает собрать лендинг самому на основе одного из 200 шаблонов или из 250 блоков. Есть AI-помощник, который будет подсказывать лучшие решения в процессе редактирования сайта. Создать посадочную страницу можно бесплатно на неограниченный период, правда, он будет на поддомене и содержать брендированную плашку Weblium.

Англоязычный конструктор с высокими ценами. Минимальный тариф составляет 80 $\месяц, причем действует ограничение по числу конверсий и посетителей. Сервис предоставляет качественные шаблоны, множество интеграций и аналитику.

Создание лендинга

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

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

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

Блок 1: заголовок и информация

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

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

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

Блок 2: преимущества и раскрытие темы

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

Цель этого блока – рассказать клиенту о том, что он должен купить, сколько это стоит и почему он должен работать именно с вами.

Блок 4: форма заявки, призыв к действию

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

Также в последнем блоке – футере, обычно располагается информация о конфиденциальности, ссылки на какие-то прочие разделы (более подробную политику, например) или информация о годах, а также о том, что “Все права защищены”.

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

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

Tilda

Tilda — еще одна популярная платформа, в которой можно создать лендинг бесплатно самому с нуля. В распоряжении у пользователя свыше 480 визуальных блоков, а также более 180 готовых шаблонов. Дополнительно стоит отметить коллекцию иконок, встроенный редактор изображений и возможность расширенного управления анимацией в Zero Block.

Кратко о конструкторе Tilda в таблице.

Количество шаблонов Более 180
Индивидуальный заказ дизайна Отсутствует
Пробный период 14 дней
Минимальный тариф От 750 руб. в месяц (скидка при оплате сразу за год)
Привязка собственного домена Есть
Адаптивность дизайна 5 экранов
Интеграция CRM, почтовые рассылки, сервисы приема платежей, банковский эквайринг (Альфа-Банк, Сбербанк, Тинькофф)
Аналитика А/Б тестирование, мультилендинги, отчеты в реальном времени, Google Analytics и Яндекс.Метрика
Регистрация доменов Отсутствует, подарочные предоставляются через Reg.ru

Интересный факт: несколько сайтов, созданных пользователями Tilda, были награждены известными премиями. Например, первое место в рамках номинации «Промышленность и оборудование» по версии Рейтинга Рунета 2016, а также победа в Bitrix Design Cup 2016.

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

Перейти на tilda.cc

HTML-шаблоны landing page + инструкция по установке

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

Структура одностраничника:

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

Для всех известных платформ – Джумла, Вордпресс и других – существуют свои шаблоны посадочных страниц. Хороших и бесплатных landing page для wordpress я не встречал. Более-менее приемлемые варианты продают по 17-25 у.е.

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

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

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

Несколько простых шагов как установить одностраничник:

  1. Зайдите на сайт своего хостинг-провайдера. Перейдите в панель управления аккаунтом.
  2. Найдите корневую папку сайта (она должна быть пустой). Название этой папки – заранее купленный вами домен.
  3. Нажмите кнопку загрузки, в появившимся окне выберите архив с шаблоном.
  4. Когда архив скопируется в папку домена, нажмите рядом с ним кнопку «Распаковать».
  5. Подождите секунд 20, пока закончится операция. Обновите страницу.
  6. Лендинг установлен!

Чтобы отредактировать landing page, перейдите в корневую папку вашего домена и ищите нужный файл. Меняйте текст, картинки, вставляйте видео. Научиться этому можно: прочитайте парочку статей по теме – и вперед, делать деньги.

Учебный центр Unibrains

Интенсивный тренинг по подготовке и продвижению Landing Page. Над разработкой алгоритмов продвижения посадочной страницы работали лучшие эксперты крупных интернет-компаний: BDBD, Kokoc, Sape, Arrow Media.

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

Что вы приобретёте в процессе обучения:

  • Навыки и знания. Курс охватывает все этапы создания и продвижения посадочной страницы. В результате вы научитесь создавать лендинги без помощи агентств или фрилансеров.
  • Готовый лендинг. В ходе обучения вы сами создадите лендинг под ваш продукт или услугу и будете его продвигать.
  • Эксклюзив. Секреты и хитрости при создании и продвижении посадочной страницы.
  • Персонализация. Индивидуальная работа преподавателя с каждым студентом, помощь в продвижении проекта и создании рекламных кампаний.
  • Полезные контакты. В процессе обучения вы познакомитесь с людьми, которые смогут стать вашими бизнес-партнерами или работодателями.
  • Много практики. Каждый модуль программы отрабатывается участниками на практике.

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

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

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

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

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

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

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

Adblock
detector