0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Лендинг пейдж (landing page) это страница для продвижения товара или услуги. Она призвана «направить» посетителя на совершение определенного действия:

  • обращение за бесплатной консультацией;
  • заявка на покупку товара;
  • бронирование мест;
  • подписка на рассылку;

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

Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, landing page, целевая страница.

Разберитесь со структурой

В любой промостранице есть обязательные блоки. Все построено на психологии потенциального клиента:

  • Шапка — меню сайта. В лендингах обычно ставят «якоря» на блоки, указанные ниже. Кликнув по ним, пользователь переносится вниз по странице.
  • Главный блок — суть вашего предложения для будущего покупателя.
  • Преимущества/описание товара или услуги — подробности о продукте. Почему человек должен купить именно ваш продукт?
  • Рекомендации/отзывы — элемент социального доказательства. Если о продукте хорошие отзывы, доверие к компании повышается.
  • Формы захвата — блок, в котором вы собираете персональные данные. Имя пользователя, его телефон или email.
  • Подвал — краткая информация о компании, возможно, еще одна кнопка «купить» или повторение меню.
Статья в тему:  Приложение для bin файлов. Чем открыть файлы.bin

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

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

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

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

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

Тааак.. .ну про риски я Вас предупредил, переходим к конкретным этапам создания landing page самостоятельно.

Этап 1. Подготовка

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

– Определение цели лендинга

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

Перед созданием Вам нужно чётко определить цель Вашего лендинга. И запомните – цель должна быть одна:

  1. Получить новые заявки на товары/услуги;
  2. Увеличить узнаваемость бренда;
  3. Информировать о предоставлении товаров/услуг;
  4. Предоставить консультацию по услугам;
  5. Получить резюме от кандидатов;
  6. Привлечь партнеров, дилеров, представителей;
  7. Обеспечить доступ к сервису.
Статья в тему:  Топ 10 самых лучших браузеров. Сравнение браузеров

Запомните, что на одном сайте пытаться и продать товар, и привлечь дилеров нельзя. А все потому, что это разные задачи, а это значит разные landing page. Пускай это сократит охват потенциальных людей, но увеличит эффективность страницы, которая оправдает в финансовом плане всё.

– Определение целевой аудитории

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

На что нужно давить в будущем лендинге, какие слова использовать, какие изображения лучше вставить. Упрощённая схема итога выглядит так:

Целевая аудитория

– Поиск выгод

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

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

Статья в тему:  Обозначения на панели ноутбука. Клавиши на ноутбуке

Взгляните на это!

Чтобы Вы лучше уловили суть, вот Вам пример из 10 вопросов, которые помогут глубже копнуть в свою компанию и свой продукт и подать полученную информацию “под чудесным соусом”:

  1. Сформулируйте 3-5 “причины, почему объективно выгоднее покупать у Вас, а не у конкурентов”;
  2. Какие особенности производства есть именно в Вашей компании?
  3. Проводите ли Вы внутреннее обучение персонала?
  4. Сравните продукт с аналогами. Укажите преимущества и недостатки;
  5. Кто является лицом или лицами компании?
  6. Какие бонусы Вы готовы выдавать клиентам при покупке на большие суммы?
  7. Распишите детально этапы работы с клиентом от первого обращения до выполнения работ;
  8. Расскажите про финансовые условия работы (предоплата, рассрочка, отсрочка первых выплат, кредиты, скидки, продукт на реализацию, выкуп неликвида и т.д.);
  9. Какие о компании или от компании существуют публикации? (экспертные комментарии, интервью, жюри в телешоу, авторские колонки, статьи);
  10. Ваши клиенты-звёзды.

– Формирование структуры

Здесь на помощь приходит Лестница Ханта. Также, как и аватар клиента, она даст саму структуру будущего лендинга. Если очень коротко, то до момента принятия решения о покупке человек проходит 5 шагов/уровней осознанности, и Вам необходимо помнить об этом при создании лендинга:

  1. Этап “Безразличие”. Проблемы не существует, Вам нужно сначала создать её в голове человека. Показать, что если он этого не сделает/не купит, то все будет плохо;
  2. Этап “Осведомленность”. Проблема есть, но нет решения. На первых экранах демонстрируете, что существуют разные варианты решения проблемы клиента;
  3. Этап “Сравнение”. Варианты решения проблемы сравниваются. Донесите, что Ваше решение лучше других: сравнительной таблицей, обзором продукта, результатов исследования, консультации и т.д.;
  4. Этап “Выбор”. Вариант выбран, идет поиск продуктов. Показываете, какое предложение подойдёт пользователю, точнее, в каком в виде/комплектации – рассказываете о выгодах своей продукции;
  5. Этап “Покупка”. Выбор между поставщиками продукта. Указываете выгоды работы именно с Вашей компанией, а уже потом рассказывать о продукте и о том, что он самый лучший.
Статья в тему:  Что значит придумать логин. Как создать логин и пароль

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

Этап 2. Создание прототипа

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

Держитесь, держитесь!

– Структура

Прототип – это структура и последовательность блоков будущего лендинга. Лучше всего сделать это так: берёте лист бумаги и накидываете последовательность блоков/смыслов: шапка, выгоды компании, каталог, собственное производство, склад, команда и т.д.

Это мы с Вами прописываем блоки, но также должны не забывать про две классические структуры, по которым строится любой рекламный материал, и landing page не исключение:

  • AIDA (товары/услуги);
  • PmPHSA (инфобизнес). (Pain, more Pain, Hope, Solution, Action – боль, усиление боли, надежда, решение, призыв к действию).

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

– Детали

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

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

Статья в тему:  Как установить русский язык на Android

Прототип

Интересно. Не забудьте установить на сайт систему комментирования. Так пользователи смогут делиться своим мнением и даже подталкивать к покупкам других посетителей (а еще это положительно влияет на SEO). Кликайте и узнавайте подробнее -> Сackle

И вот так все выглядит в итоге в реальности:

Готовый лендинг

На этом шаге раскрывается весь Ваш концепт. И без общих знаний копирайтинга сюда лучше не соваться. Иначе Ваша фантазия закончится на избитых фразах в стиле “Почему 95% клиентов выбирают нас”, “Как мы работаем”, “О нас”. Чтобы хоть как-то подкачаться в этой области, рекомендую почитать наши статьи:

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

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

Лайфхак. Вывести сайт в ТОП поисковиков несложно с сервисом комплексного SEO-маркетинга. Буквально в два клика Вы узнаете текущие позиции вашего сайта по ключевым словам, посмотрите как продвигаются конкуренты и составит эффективную стратегию SEO-продвижения. Кликайте и тестируйте -> SE Ranking

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

Статья в тему:  Административная контурная карта. Контурная карта мира

Пойман!

Также call to action должен быть простым. Чем проще шаг, тем больше конверсия сайта, и тем больше шансов убедить человека стать Вашим навсегда.

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

Этап 3. Дизайн

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

  1. Цветовые пятна. Один экран = один основной цвет. Не нужно использовать несколько разных оттенков и создавать тем самым новогоднюю ёлку;
  2. Минимализм. Если опыта в дизайне landing page мало, то Ваш выбор – простая и стильная страница без лишних деталей. Чтобы Вам было приятно, называйте его “Как у Apple”;
  3. Воздух. Между элементами должно быть пространство, которое отделяет между собой смыслы. В идеале запомнить правило: 1 экран = 1 смысл;
  4. Акценты. У Вас должно всё быть в соподчинении. Что-то должно бросаться в глаза первым, потом взгляд должен перемещаться на второй элемент, а затем на другие.

Если уже сейчас Вы думаете, что лендинг создать самостоятельно – это для Вас слишком, есть мы:)))

Бесит!

Кстати. Интегрируете CRM-систему с Вашим сайтом, чтобы посетители сайта сразу попадали к Вам в базу, так Вы не потеряете ни одного клиента. К тому же там много фишек, которые помогут сделать из сайта просто бомбу продаж и еще автоматизировать бизнес-процессы. Кликайте -> Битрикс 24

Статья в тему:  Как заработать на просмотре игр дота 2

Этап 4. Верстка

Здесь собраны лучшие по нашему мнению конструкторы лендинга онлайн. Стоимость зависит от выбранного в тарифе функционала: интеграций, А/Б тестов, доп. пользователей и т.д., в таблице указал минимальную.

Как увеличить конверсию лендинга

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

Второй способ — получить контактные данные посетителя и постепенно подвести его к покупке. Для этого используют рассылки, автоматические серии писем, push уведомления.

Email рассылки

Рассылки помогают прогреть посетителей, которые пока не готовы к покупке. Вы можете добавить на лендинг форму подписки из SendPulse. Тогда контакты подписчиков будут сразу попадать в сервис. В справочном разделе Tilda описано, как вставить на страницу форму подписки SendPulse и собирать email адреса потенциальных клиентов.

Автоматические серии писем

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

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

Чтобы настроить авторассылки, нужно зайти в SendPulse и выбрать раздел «Авторассылки»:

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

Создание автоматических рассылок в SendPulse

Web push уведомления

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

Предложение подписаться на push уведомления

Если человек нажимает «разрешить уведомления», он в будущем будет получать сообщения в браузере или на рабочем столе компьютера.

Web push уведомления помогают решить несколько задач:

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

Push уведомление с напоминанием о начале вебинара

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

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

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

Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью рассылок и push уведомлений и превращать посетителей в покупателей!

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

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

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

Статья в тему:  Как отключить возможных друзей вконтакте

Добавление видеоплеера

Сразу под хедером на полоску с эффектом параллакса добавим плеер для воспроизведения промо видео. Для этого:

    В боковом меню редактора переходим в раздел « Добавить » — « Видео и аудио » и перетаскиваем на страницу виджет « Одиночное видео ».

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

Полоска с видео

Ниже полоски с параллаксом разместим еще одну. Для этого:

    В боковом меню слева переходим в пункт « Добавить » — « Полоска » — « Классика » и выбираем бесцветный вариант.

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

Управление слоями

Управление слоями осуществляется в специальной панели. Для ее активации:

    Перейдите в раздел верхнего меню « Инструменты » — « Слои ».

Обратите внимание, что видеоплеер находится вне основных слоев (полосок), а лежит поверх их.

  • Или выделите нужный элемент, в контекстном меню (вызывается правой кнопкой мыши) выберите « Слои » — « Все слои ».

Панель « Слои » позволяет скрывать отображение отдельных элементов, подсвечивать их. А также менять порядок родительских слоев путем перетаскивания. Кроме этого для изменения порядка слоев можно использовать панель « Инструменты ».

Статья в тему:  Какой программой сжать pdf. Сжатие PDF файлов

Слайдер

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

    В боковом меню перейдите в пункт « Добавить » — « Интерактив » — « Слайд-шоу », « На весь экран ».

Чтобы изменить содержимое слайдов:

    Кликните по слайду с помощью мышки и перейдите по ссылке « Управлять слайдами ».

Проделайте перечисленные выше действия со всеми остальными слайдами.

Мотивирующая полоска

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

Репитер

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

Для добавления репитеров выполните следующие действия:

    В боковом меню перейдите в раздел « Добавить » — « Списки и сетки » — « Репитеры ».

Каждый элемент репитера настраивается отдельно:

    Измените текстовое содержимое блока справа.

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

Блок «Наша команда»

После репитера добавим полоску « Наша команда ». Для этого перейдите в меню « Добавить » — « Полоска » — « Команда ».

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

Статья в тему:  Айфон промок под дождем. Что делать, если iPhone упал в воду

Для настройки порядка секций:

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

Блок с отзывами

После полоски « Наша команда » расположим блок с отзывами клиентов. Для этого выполните следующие действия:

  1. Перейдите в боковое меню.
  2. Кликните по пункту « Добавить » — « Полоска » — « Отзывы ».
  3. Перетащите курсором нужный элемент в рабочую область редактора страницы.

Форма лидогенерации

Ниже блока с отзывами добавим форму для лидогенерации. Для этого:

  1. В боковом меню редактора переходим в раздел « Добавить » — « Формы и связь », « Лид-формы ».
  2. Добавляем форму на страницу с помощью перетаскивания.

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

Дополнительные элементы

Призыв к действию. Этот элемент нужен, если лендинг состоит более чем из 5–6 блоков. Всё-таки посетителю надо периодически напоминать, зачем он здесь.

Фото и видео. Для некоторых тематик лендинга это просто необходимость. Например, фотограф, салон красоты, организация семинаров.

Этапы. В этом элементе пошагово показывается, как легко воспользоваться услугой или получить товар.

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

Как создать лендинг?

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

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

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

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

Что такое лендинг

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

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

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

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

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

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

Рисуем прототип

Прототип — схематичный рисунок лендинга. Он показывает длину сайта и то, что у него внутри: где расположен текст, где форма, а где картинки.

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

Алгоритм создания прототипа

  1. Начните с первого экрана. Обозначьте обложку (изображение на первом экране), заголовок, подзаголовок, форму и кнопку (или только кнопку).
  2. Нарисуйте столько секций, сколько блоков в тексте, и подпишите их справа.
  3. Наполните содержанием каждый блок. Если возникнут трудности, ещё раз просмотрите подобные разделы у конкурентов или даже на других лендингах.

Прототип легко поместится на листе А4, если не делать его широким. Чтобы оценить, насколько логично и удобно представлена информация на лендинге, хватит и 5 см.

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector