Как сделать лендинг страницу самому
Как новичку создать качественный лендинг пейдж самостоятельно: пошаговое руководство
Лендинг – специальная страница, которая нужна для того, чтобы подтолкнуть посетителя купить товар или услугу или оставить заявку. Для того, чтобы создать качественный лендинг не нужно быть маркетологом. Это под силу обычному человеку. Сегодня мы расскажем как это сделать.
Что такое лендинг и для чего он нужен
Лендинг пейдж (landing page) это страница для продвижения товара или услуги. Она призвана «направить» посетителя на совершение определенного действия:
В отличие от многостраничного сайта, лендинг не имеет сложной навигации, больших пластов текста, баннеров и лишних меню для перехода на другие страницы. Навигация по такому сайту осуществляется либо путем прокрутки, либо посредством специального меню, с помощью которого легко попасть на интересующий пункт на странице.
Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, landing page, целевая страница.
Делать самостоятельно или заказать работу «под ключ»?
Итак, мы разобрались с основами. Следующий вопрос, который обязательно возникнет у вас: стоит ли сделать лендинг самостоятельно или заказать у фрилансера или в студии веб/дизайна.
Распространенный миф: разработать качественный, высококонверсионный лендинг очень сложно, этим занимаются только профессионалы, и это недоступно для обычного человека.
Реальность: сделать хороший, рабочий лендинг не сложнее чем создать страничку в социальной сети.
Разумеется, лендинг, разработанный профессиональным маркетологом, скорее всего, будет показывать большую конверсию. Однако разница в конверсии существенно скажется на доходе только при больших оборотах.
Если вы попали в одну из трех категорий, то вам следует подумать о том, чтобы запустить лендинг самостоятельно. Это будет значительно быстрее и дешевле.
В дальнейшем, когда дела пойдут в гору, вы получите первые заказы, оборотный капитал и, самое главное, статистику. Тогда можно задуматься о том, чтобы «дожать» конверсию на всех этапах воронки продаж, в том числе и на лендинге. Вы можете обратиться к профессионалам и сделать еще одни лендинг (или даже несколько) и протестировать их конверсию по сравнению с первым, чтобы выбрать лучший.
Единственное, что вам действительно необходимо — это знание своего продукта: его достоинств, недостатков и целевой аудитории.
С другой стороны, если у вас есть хороший капитал для старта и нет желания тратить лишнее время на создание посадочных страниц, вы всегда можете обратиться к специалистам. Со своей стороны могу порекомендовать веб-студию Divly. У них довольно демократичные цены и хорошие отзывы.
Помните, что если вы решили заказать лендинг «под ключ», вам нужно составить как можно более точное ТЗ и согласовать все детали с разработчиками.
Итак, если вы решились делать все самостоятельно, то ваш следующий наш шаг это выбор качественной платформы. Я подобрал 4 самых и удобных и функциональных сервиса для создания landing page, и сделал короткие обзоры, которые помогут вам выбрать.
LPMotor — самый лучший конструктор одностраничников
Отличная платформа, как для начинающих пользователей, так и продвинутых веб-мастеров. Выделяется простым и интуитивно понятным интерфейсом, доступными расценками на услуги, набором необходимых функций для создания одностраничного сайта, выбором уже готовых шаблонов.
Сайт предлагает пользователям 90 готовых вариантов оформления. Для удобства поиска все шаблоны разбиты по категориям (фотограф, красота и здоровье, мероприятия, инфобизнес, праздники). Кроме того, можно сделать страничку с нуля из готовых блоков и секций.
Для каждого макета можно дополнительно подключить мобильную версию, которую можно редактировать отдельно.
Еще одна отличительная черта — наличие качественный обучающих материалов. По каждому этапу работы (создание и запуск сайта, работа с дизайном, подключение домена, оптимизация и продвижение, управление продажами, повышение конверсии) есть пошаговые обучающие видео ролики.
На сайте отсутствует бесплатный тариф. Есть возможность подключить четыре платных тарифа (цены при оплате за год):
При оплате за год вы получите скидку 40%.
Оплатить услуги и тарифы платформы можно с помощью банковской карты, через Сбербанк Онлайн, Альфа-клик, посредством перевода через Связной, Евросеть, МТС, Теле2 и Билайн. Поддерживаются электронные кошельки: Яндекс.Деньги, QIWI, Webmoney.
Как сделать лендинг самому – пошаговая инструкция
Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому – бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать продающую структуру лендинга из 9 блоков.
Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.
Итак, вот пошаговый план самостоятельного создания лендинга:
И прежде всего давайте скачаем основу для нашего будущего лендинга – готовый профессиональный html шаблон.
#1 – Скачиваем бесплатный html шаблон лендинга
Вообще, лендинги – это не такая уж и таинственная штука. Это просто отдельная страница в интернете, на которой вся информация “заточена” под конкретное целевое действие посетителя. В отличие от обычных сайтов, у одностраничников, как правило, нет меню и ссылок на другие разделы сайта (хотя бывают и исключения).
То есть все, что вам надо сделать – это найти подходящий html шаблон, и отредактировать его под свои нужды. Что делать с этой страницей потом, мы разберемся ниже. А сейчас – скачайте например вот этот бесплатный шаблон лендинга. С ним мы и будем работать.
#2 – Заменяем картинку на главном экране
Когда скачаете – откройте папку “blue” и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.
В вашем браузере откроется шаблон, как он выглядит сейчас. Согласитесь, неплохо?
Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++. Скачайте её и установите себе на компьютер.
Первое, что мы сделаем – это поставим нормальную картинку на главный экран нашего лендинга. Вам надо найти большое изображение, которое подходило бы под вашу тематику. Для этого зайдите, например, на Яндекс-Картинки, и введите свой запрос.
Укажите размер файла “Большой”. Пока для тренировки можете скачать вот это изображение. Мы как будто делаем лендинг для профессиональных юридических услуг.
Теперь копируйте это изображение в папку “images”. Поменяйте его название на “banner.jpg”. То изображение, которое уже называется “banner.jpg” в этой папке, переименуйте во что-нибудь другое.
Обновите страницу с лендингом в вашем браузере. У вас теперь должно выглядеть, как на скриншоте ниже.
Если выглядит что-то не так, то проверьте, правильно ли вы написали называние изображения, и точно ли вы скопировали картинку туда, куда надо.
Если все ОК, то переходим к редактированию текста.
#3 – Редактируем текст на главном экране
Кликайте правой кнопкой мыши по файлу “index.html” и выбирайте “Открыть с помощью – Notepad++”.
Перед вами откроется исходный код нашего шаблона, во всей его красе. Если вы раньше не имели дела с html, то вас этот вид может немного напугать – много циферок, буковок и непонятных значков. Но ничего страшного тут на самом деле нет. Нам надо просто заменять текст, который написан черным цветом.
И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.
Сначала поменяем заголовок. Вместо “Alpha” напишем что-нибудь по нашей теме. Напоминаю, что тут мы продаем юридические услуги. Значит можно сформулировать это примерно так: “Срочная подготовка и сдача налоговой декларации для вашего бизнеса”. Вставляем этот текст вот сюда, между тегами
После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:
Получилось не очень симпатично, потому что заголовок большой, и растянулся на весь экран. Попробуйте после слова “налоговой” вставить тег
. Он сработает как разрыв в предложении, и часть текста перенесется на новую строку. Мне кажется, что так получится лучше.
Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа – прописываем наши конкретные предложения. Например: “Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН – от 5400р. ЕНВД без сотрудников – от 2100р.” Вставляем этот текст вот сюда:
Теперь меняем текст кнопок таким же образом. Пишем на белой “Заказать”, на прозрачной – “Подробнее”.
В итоге у нас получается вот такой главный экран лендинга:
#4 – Затемняем фоновую картинку
Более светлый называем, например “overlay2.png”, а более темный – просто “overlay”.
После этого опять сохраняем наш html шаблон и обновляем страницу в браузере. На мой взгляд, так выглядит уже намного лучше:
Далее таким же образом вы меняете весь текст в шаблоне, подставляя то, что вам нужно. Если вы сомневаетесь, что именно надо писать на вашем лендинге – используйте структуру лендинга из 9 блоков.
#5 – Заменяем форму подписки
Единственное, с чем у вас могут возникнуть сложности – это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.
Предлагаю решить эту проблему просто – вместо формы подписки укажите ваш телефон. Так вы получите больше конверсий/заказов.
То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:
Теперь наш призыв к действию будет выглядеть так:
#6 – Загружаем лендинг на хостинг
Когда шаблон лендинга отредактирован, вам нужно выложить его в интернет. Для этого вы приобретаете домен и хостинг у любого провайдера (например у Reg.ru), и закачиваете вашу страницу на хостинг. Только переименуйте сначала папку “blue” во что-нибудь более подходящее. Например “services”. Тогда адрес вашего лендинга будет выглядеть так: yourdomain.ru/services/index.html
После загрузки вы можете сменить расширение html на php. Тогда ваш новый лендинг будет открываться просто по адресу: yourdomain/services/.
#7 – Привлекаем целевую аудиторию
Итак, мы рассмотрели пошаговый план, как сделать лендинг самому и бесплатно. Теперь вам надо позаботиться о том, чтобы на ваш лендинг приходила целевая аудитория. Для этого рекомендую почитать статью о том, как самостоятельно настроить контекстную рекламу.
Не забудьте скачать мою книгу «Автостопом к миллиону». Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет = )
Как сделать хороший лендинг. Самое важное в одной инструкции
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
В сети много информации о том, как делать лендинги. Встречаются и по-настоящему подробные инструкции, где прописаны все шаги, которые нужно сделать в идеале. Но в этом есть подвох.
Пока вы будете проводить исследования и досконально изучать аудиторию, кто-то по-быстрому склепает лендинг в конструкторе и заберёт клиентов.
Тратить кучу времени, чтобы с первого раза сделать самую лучшую посадочную страницу, бессмысленно:
Поэтому я расскажу, как сделать хороший лендинг с нуля, чтобы быстро запустить его в работу и приступить к другим задачам: подготовке рекламных кампаний, тестированию и совершенствованию.
Определяем цель
Прежде чем делать лендинг, надо понять, для чего он вам нужен.
Основные цели лендинга:
От цели зависит содержание лендинга. Чем ближе к покупке, тем больше аргументов и подробностей требуется.
Не распыляйтесь, поставьте только одну цель. Иначе велика вероятность, что посетители запутаются и уйдут.
Совет
Если вы только начинаете заниматься интернет-маркетингом, делайте лендинг для получения заявок. Так у вас будет больше шансов дожать клиента до покупки, если он пока сомневается. Кроме того, в разговоре вы поймёте, какой информации на сайте не хватает или какие блоки плохо работают.
Собираем информацию
Продающий лендинг нельзя сделать совсем без подготовки. Такой сайт получится оторванным о реальности и не принесёт результата. А придумывать его будет сложнее.
Прежде чем приступить к разработке одностраничника, важно изучить сайты конкурентов и целевую аудиторию. Я постаралась максимально упростить эти шаги, чтобы не тратить на них слишком много времени и сил.
Изучаем сайты конкурентов
Возьмите лучшие идеи конкурентов, адаптируйте под себя — и лендинг готов.
Зачем анализировать конкурентов:
Если конкурентов с аналогичным предложением мало, подумайте, какие ещё продукты закрывают ту же потребность. Например, отпраздновать День рождения человек может в кафе, а может пойти в боулинг или записаться на квест.
Результаты анализа занесите в таблицу:
| Название компании | Рога и копыта |
| Сайт конкурента | www.***.ru |
| Преимущества продукта | Доставка за 2 дня |
Собственное производство
Отзывы
Совет
Даже если вам известны основные конкуренты, не поленитесь проверить, какие ещё сайты выдаёт поиск по соответствующим запросам. Также поищите похожие предложения в соцсетях.
Анализируем целевую аудиторию
Рассказать о продукте можно по-разному. Надо понять, как и что рассказывать посетителям вашего лендинга, чтобы убедить их совершить целевое действие (нажать на кнопку).
Если у вас уже есть клиенты, покопайтесь в голове и поищите там ответы на вопросы:
Если на какие-то вопросы не знаете ответов, позвоните 4—5 клиентам и уточните.
Зафиксируйте информацию любым удобным способом. Важно, чтобы у вас в голове сформировалось целостное представление о покупателях. Это поможет вам при подготовке текста и материалов.
Если клиентов пока нет, попробуйте задать эти вопросы знакомым, которые покупали нечто аналогичное.
Если и таких знакомых нет, пропустите этот шаг и сосредоточьтесь на анализе конкурентов. Наверняка, самое важное они уже учли. Когда запустите лендинг, сможете пообщаться с клиентами и скорректировать информацию в нужную сторону.
Совет
Есть правило: один лендинг — один сегмент. Не пытайтесь впихнуть на одну страницу информацию для покупателей, которые предъявляют разные требования к продукту (например, физические лица и компании). Так вы только всех запутаете. Лучше на первом этапе создайте лендинг пейдж для самого важного сегмента, а потом постепенно сделаете для остальных.
Пишем текст
Лендинг — это история о вашем продукте и компании. Нет смысла браться за дизайн, пока вы не решили, что и в какой последовательности рассказывать посетителю.
Чтобы убедить человека оставить заявку, важно внятно ответить на его вопросы и разрешить сомнения. Об этом и пишите. При продумывании структуры текста и подачи материала опирайтесь на информацию о целевой аудитории и конкурентах, собранную на предыдущем шаге.
О чём писать
Обычно лендинг состоит из таких логических блоков:
Это основные блоки информации, которые используют в большинстве случаев. Всё остальное зависит от продукта и целевой аудитории.
Чтобы понять, насколько логичным получается рассказ, для начала напишите названия блоков, а потом приступайте к их наполнению.
Совет
Писать и редактировать текст для лендинга удобнее в текстовом редакторе. Я пользуюсь Google Docs, потому что так могу работать и с телефона, и с ноута, а также подключать к согласованию и редактированию любое количество человек.
Основные принципы копирайтинга
Пишите ясно. Люди приходят на лендинг за простым и быстрым решением проблем. Они не готовы по два раза перечитывать текст, чтобы уловить суть. Всегда можно найти более понятный сайт у ваших конкурентов.
Не увлекайтесь ключевиками. SEO-оптимизация для лендингов работает плохо. На лендинге мало текста, всего одна страница с единственным предложением, а информация обновляется редко. Поэтому надеяться на приличные позиции в поиске можно только по низкочастотным запросам. Например, если ищут какую-то конкретную модель товара или специализированный сервис. Если очень хочется, добавьте в текст одну группу ключей, по которой хотите продвигать лендинг пейдж. Однако не переусердствуйте: текст должен остаться понятным, а ключевые слова выглядеть органично.
Длинный vs короткий лендинг
Не существует оптимальной длины продающего лендинга. Нельзя сказать, что лендинг пейдж из 2 экранов работает хуже или лучше одностраничника из 10.
Размер лендинга зависит от:
Цели. Оставить почту в обмен на что-то ценное многие готовы, лишь бегло ознакомившись с предложением. А вот если просят заплатить кому-то деньги, хочется знать всё ОТ и ДО.
Продукта и его стоимости. Чем сложнее и дороже продукт, тем длиннее нужен лендинг, чтобы обосновать цену. Об очных курсах или крутом смартфоне мы хотим получить больше информации, чем о каком-нибудь дешёвом и простом сервисе.
Осведомленности аудитории. Если посетители лендинга знакомы с компанией или продуктом, их убедит и более короткий сайт. Популярный пример про Ренда Фишкина и его компанию MOZ (программное обеспечение для SEO). Увеличив лендинг в 6 раз, компания повысила конверсию на 52%. Однако в дальнейшем, когда MOZ приобрела мировую известность, маркетологи снова сократили длину сайта.
Короткий лендинг сделать проще, так как требуется меньше информации, а значит, меньше сил уйдёт на её подготовку и упаковку.
Делать длинный лендинг — это не значит «лить воду». В тексте не должно быть ничего лишнего. Если вы можете сократить лендинг без потери значимой информации о компании или продукте, сделайте это!
Рисуем прототип
Прототип — схематичный рисунок лендинга. Он показывает длину сайта и то, что у него внутри: где расположен текст, где форма, а где картинки.
Есть специальные программы для создания прототипов. Но если вы не занимаетесь этим профессионально, проще и быстрее нарисовать прототип от руки. Для одностраничника этого достаточно.
Алгоритм создания прототипа
Прототип легко поместится на листе А4, если не делать его широким. Чтобы оценить, насколько логично и удобно представлена информация на лендинге, хватит и 5 см.
Совет
Прототип — самый удобный шаг, чтобы скорректировать лендинг пейдж. Не поленитесь и нарисуйте несколько вариантов. Сравните их и выберите лучший. Убедитесь, что структура логична и удобна, что страница не перегружена текстом, что на ней достаточно визуальных материалов.
Основные принципы
Один экран — одна мысль. Если в тексте несколько идей, разбейте его на части и дополните изображениями или видео. Когда на одном экране слишком много информации, мозгу приходится напрягаться. А это неприятно.
Фото и видео лучше текста. Даже самый крутой текст уступает по воздействию визуальным материалам. Подумайте, какие предложения или даже абзацы можно заменить на фотографии или видео и обозначьте это в прототипе.
Не забудьте про шапку и футер. Это обязательные элементы лендинга. В шапке обычно размещают логотип и меню для удобства навигации по сайту, а в футере — контакты, кнопки соцсетей и ссылки на другие проекты.
Добавьте кнопки призыва к действию. Кнопка обычно присутствует на первом и последнем экранах продающего лендинга. Если сайт длинный, стоит добавить еще несколько кнопок: по одной на 2—3 экрана. Что касается текста на кнопках, попробуйте разные формулировки. Главное, чтобы они соответствовали одной выбранной цели.
Создаём лендинг
На этом этапе есть два пути. Можно нанять дизайнера и программиста, которые на основе прототипа, ваших материалов и пожеланий сделают лендинг. А можно собрать сайт в конструкторе.
Подробный обзор конструкторов — отдельная тема, поэтому здесь лишь перечислю самые популярные сервисы:
Современные конструкторы достаточно гибкие и функциональные, чтобы сделать приличный лендинг. Кроме того, у них есть ряд важных плюсов, которые имеют особое значение на первых порах работы с одностраничниками.
Преимущества конструкторов
Просто. В конструкторе любой человек сможет сделать лендинг сам без специальных знаний. Хороший сервис сам помогает и даёт подсказки. Там есть шаблоны и готовые продуманные блоки, а адаптация под мобильные делается автоматически.
Быстро. Сайт в конструкторе реально сделать за 1—2 дня. Не надо тратить время, чтобы искать специалистов, объяснять задачу, согласовывать дизайн, регистрировать хостинг. Да и любые изменения вносить гораздо быстрее.
Дёшево. У каждого конструктора есть бесплатные тестовые периоды, а у некоторых и бесплатные версии. Но даже абонентская плата по самому навороченному тарифу не сравнится со стоимостью работы дизайнера и программиста. Минус, правда, в том, что платить придётся регулярно.
Совет
Изучите каждый из этих конструкторов, прежде чем определиться, где делать лендинг. Оцените, насколько удобно работать в сервисе, какие возможности он предлагает, нравятся ли вам шаблоны, подходит ли функционал для создания сайта по вашему прототипу.