Создание лендинг пейдж на сайте-многостраничнике

Посадочная страница, лендинг на сайте

Для чего нужны посадочные страницы на сайте-многостраничнике

Это один из способов привлечь больше трафика, раскрыть тему более глубоко, рассказать и показать больше выгод и от покупки товара/услуги.

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

Как выглядят карточка товара и посадочной страницы:

Что нужно, чтобы сделать такой лендинг пейдж:

  • Не самые кривые руки
  • Написать текст
  • Подготовить иллюстрации + видосики
  • Сверстать все это дело в одну страницу

Руки

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

Текст

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

Иллюстрации

Это важно. Как ни крути, а на одном тексте и стилях не вывезешь.

Редактор изображений Гимп — свободный аналог Фотошопа

Редактор изображений Гимп — свободный аналог Фотошопа

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

  • сфоткать (фотик, телефон, камера)
  • нарисовать (Фотошоп и Гимп в помощь)
  • купить (фотостоки, биржи фриланса)
  • украсть (Гугл картинки). Но это самый крайний вариант!

Видео

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

  1. отснять (видеокамера или OBS, если снимать нужно экран компа),
  2. смонтировать (Adobe Premiere, Openshot)
  3. залить в Интернет (YouTube, Vimeo, PornHub)

Что-то из этого можно сделать самому, а что-то лучше доверить спецу.

Верстка

Как не пиши и не фоткай, а нормально сверстать все это дело еще никто не отменял. Для себя я открыл Бутстрап — удобная штука. Особенно круто, если весь сайт сверстан на нем. Просто расставляешь «дивы», присваивешь им нужные классы и играешься с отступами.

Верстка посадочной страницы в Саблайме

Верстка посадочной страницы на Бутсрапе в Саблайме

Подробная инструкция по Bootstrap есть на официальном сайте. «« Tolko nuzhno anglijskij chutka poduchit’ »»

Как я делаю такие страницы

  1. Прикидываю, как будет выглядеть страницы. Можно сказать, что подготавливаю прототип. Вернее прототип прототипа =). Набрасываю схему страницы на листе А4. Выделяю блоки разными фигурами, какие-то подписываю.
  2. Пишу текст. Когда я знаю, что и где у меня будет стоять, описываю все то, чего не хватает.
  3. Подбираю иллюстрации. Где-то фото, где-то анимация или видео, где-то схема или таблица. Смотря что нужно именно этому блоку. Но иллюстрация должна быть. На этом этапе работаю в Gimp или в Openshot.
  4. Когда все есть, начинаю верстать. Первую посадочную страницу на многостраничнике я верстал полностью с нуля, без фреймворка, на чистом HTML и CSS. Намучался тогда знатно, но и многое узнал. Теперь же я пользуюсь Бутстрапом. С ним намного проще. Особенно, если сам многостраничник на нем сверстан. Всем рекомендую. Сам код пишу в Sublime, очень удобно, главное выставить подсветку синтаксиса.
  5. Когда все сверстал, заливаю на сайт и вношу правки. Без правочек никуда.

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

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

Что в результате

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