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

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

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

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

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

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

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

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

Руки

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

Текст

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

Иллюстрации

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

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

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

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

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

Видео

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

  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, за счет трастовости сайта. Забираем больше тематического трафика, даем больше информации и получаем больше лидов.

Как копирайтеру сделать портфолио

Как сделать портфолио или прогореть — план копирайтера с Реддита

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

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

Пошаговое руководство копирайтера

7 шагов, чтобы сделать крутое портфолио копирайтера

Всего 7 простых шагов:

  1. Найти партнерскую программу.
  2. Найти продукт, в ценность которого ты действительно веришь.
  3. Сделать одностраничник и запустить рекламу в Фейсбуке или Гугле.
  4. Провести сплит тесты и улучшить текст.
  5. Задокументировать результаты, сделать туеву хучу скриншотов.
  6. А когда результаты станут действительно хорошими — добавить все это добро себе в портфолио, со словами: «Я сделал этот крутой лендинг, который принес тонну продаж. Могу и вам такой сделать».
  7. Еще вариант показать отдельные части продающего текста и объяснить почему так, как это работает. Сказать, что я реально знаю, как нужно создавать доверие.

Это одновременно и классная затея, и дорога в никуда

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

Рекламные сети Гугла и Фейсбука — не так просты, чтобы без знаний и опыта начать успешно с ними работать. Ну и изучение двух навыков одновременно — это конечно похвально, но как говорится «за двумя зайцами погонишься, ни одного не поймаешь».

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

С другой стороны, «кто не рискует, не пьет шампанского». Запустить самому весь комплекс — сделать лендинг, написать текст, настроить рекламу и аналитику, провести тесты, получить первые продажи — это сильно. Это мощно! И если все получится, то наличие такого взрывного кейса в портфолио копирайтера действительно будет иметь крутой эффект. Тем более, успешные кейсы по рекламе — это всегда интересно и увлекательно 😉

Если вы хотите подумать в этом направлении, то держите несколько инструментов, которые могут помочь:

А если, есть вопросы или знаешь еще полезные ссылки, то пиши в комменты или мне в телеграм
.

Типографская раскладка или как писать кавычки-ёлочки

Типографская раскладка для Windows и Linux

Как писать кавычки-елочки, среднее и длинное тире, апостроф и другие специальные знаки на клавиатуре без альтов и кодов. Для этого нужно просто установить типографскую раскладку. Самая популярная среди редакторского и копирайтерского сообщества — «клавиатура» Бирмана. Но мне она не подходит по двум причинам:

  1. Она не работает под линуксом — только Windows и MacOS
  2. В ней есть только русский и английский языки

Мне время от времени нужно писать на украинском, и использовать при этом разные знаки, те же кавычки-елочки или длинное тире. Бегать каждый раз откуда-то копировать не удобно. И если в Винде еще можно использовать разные комбинации типа alt+0151, то с линуксом немного сложнее.

Есть классное решение — раскладка Рукби с украинскими буквами

Типографская раскладка для Linux

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

Их крутость в том, что работают с несколькими языками. Есть даже русская раскладка с украинскими буквами (я ее использую сейчас). Рукби легко устанавливать на Линукс и на Виндоус, а именно в таких операционках я работаю. На официальном сайте есть инструкция. Покажу, как это делаю я на линуксе:

1. Скачиваем архив раскладок

Гуглим «Рукби» и скачиваем нужный архив.

2. Извлекаем папку с файлами из архива

Типографская раскладка Рукби

Папка с файлами раскладки

3. Открываем папку в терминале

Заходим в нее через команду cd или просто жмакаем правую кнопку в любом месте папки и выбираем пункт «Открыть терминал здесь»

Открываем паку в терминале Линукса

Открываем паку в терминале Линукса

4. Пишем команду «sudo install/install»

Вводим команду, жмем «Энтер» и вводим свой пароль

Вводим команду, жмем «Энтер» и вводим свой пароль

5. Раскладки установлены, теперь нужно просто их добавить в настройках клавиатуры

В настройках клавиатуры добавляем раскладки

В настройках клавиатуры добавляем раскладки

Для Винды все еще проще — скачал нужный инсталлятор, установил, добавил раскладку в настройках.

Кому будет полезно в первую очередь:

  1. Тем, кто работает с текстом на Linux.
  2. Тем, кто работает с текстом на русском, украинском и немецком языках.
  3. Тем, кого по каким-то личным причинам не устраивает раскладка Бирмана.

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