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

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

№1. Создание лендинг пейдж при помощи бесплатных конструкторов

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

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

Однако, несмотря на свою простоту, конструкторы имеют и ряд подводных камней, которые не всем очевидны на первый взгляд. И связано это как раз с бесплатностью. Разработчикам, естественно интересно, чтобы вы платили им деньги за возможность создания лэндинга и поэтому часть разработчиков ограничивает возможности конструктора на бесплатных тарифах, либо предоставляют полный функционал, но ограниченный по времени (trial-версия). Поэтому красивая кнопка «попробовать бесплатно», пусть не вводит вас в заблуждение. Платные тарифы есть практически у любого конструктора.

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

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

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

№2. Создание лендинг пейдж с помощью готовых HTML шаблонов

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

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

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

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

№3. Создание landing page на CMS WordPress

Третьим, завершающим способом сделать лендинг бесплатно – это использование CMS WordPress. Почему именно Вордпресс, спросите вы?! На самом деле, это не обязательно должен быть именно этот движок, можно использовать и совершенно иной, например — Joomla, OpenCart т.д. Если грубо, то суть в том, что вы на CMS прикручиваете шаблон лендинга, который всего лишь отличается представлением (дизайном / структурой) от классического шаблона. Движок WordPress используется достаточно часто при создании лендинга, поэтому пример приведу именно на нем. К тому же, я сам использую периодически этот вариант.

Этот способ по сравнению с предыдущим, позволяет делать лэндинги более профессиональными и функциональными (если так можно выразится). Конечно, хотя бы начальные знания HTML и CSS тут будут тоже не лишними. Также потребуются знания установки CMS на хостинг. Как правило в этом нет большой сложности.

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

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

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

Следующим этапом – нужно в этих блоках создать контент. Для этого нам потребуются готовые плагины к Page Builder’у, в частности «SiteOrigin Сборник Виджетов », который расширит функционал и добавит специальные виджеты, которые можно использовать в этом конструкторе.

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

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

Также этот способ позволяет делать интеграцию с рядом сервисов, например, с CRM-системами, сервисами для email-рассылок и пр. Правда, это может быть не всегда бесплатно (разработчики плагинов могут включать этот функционал только в платные версии плагинов).

Резюме

Подводя итог всего выше описанного, можно сказать, что в самостоятельном создании лендинг пейджа нет ничего сложного. Особенно, если у вас есть хотя бы небольшие познания в HTML и CSS. В зависимости от того, насколько сложный и функциональный лендинг вам нужен, можно выбрать тот или иной способ его создания. Однако, стоит понимать, что ограничения в функционале все же есть – реализовать нестандартный функционал или дизайн без специалистов может не получиться… Благо он нужен далеко не всегда и в большинстве случаев сделать собственный лендинг бесплатно и достаточно быстро вполне по силам каждому.

Лендинг пейдж (landing page) можно перевести как «посадочная страница». Она используется для продажи определенной услуги или товара, а также для других схожих целей (подписки и т.д.). Если посетитель нажимает на рекламный баннер, то он обычно оказывается именно на посадочной странице, которая позволит ему быстро сделать то, что было обещано в рекламе.

Подобные посадочные страницы используются как на больших сайтах, так и на маленьких. Есть даже такое понятие - «лендинги». Обычно это одностраничные сайты (в крайнем случае, до пяти страниц), которые создаются под реализацию конкретного товара или услуги. Именно о них я и расскажу в своей статье.

В чем смысл создания лендинг пейдж?

Смысл только один - повышение конверсии . По логике, любую страницу интернет-магазина с товаром, на которую пользователь пришел по рекламе, также можно назвать посадочной страницей, однако, по сравнению со специально заточенным лендингом, конверсия будет гораздо ниже. Согласно статистике, конверсия у лендингов выше в среднем на 15%. Объясняется это достаточно просто:

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

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

Какие подвиды существуют?

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

Автономная страница

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

Целевые страницы на крупном сайте

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

Микросайт

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

Сайт из целевых страниц

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

Как создать такой сайт?

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

Обращение к профессионалам

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

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

Создание самостоятельно

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

аудит компании или товара/услуги. Это необходимо для определения целевой аудитории;
анализ уже существующих конкурентов;
разработка концепции лендинга;
создание прототипа лендинг пейдж;
написание текстов, создание заголовков, seo-оптимизация (если требуется);
создание дизайна;
верстка.

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

Нужна ли оптимизация лендинг пейдж?

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

используйте для продвижения нч и сч запросы, их количество не должно быть больше 2–3;
текст должен быть хорошим, информативным и структурированным. страницы только с изображениями продвигать трудно, текст должен быть. хотя бы 2–3 тысячи знаков;
используйте заголовки h1–h2;
alt картинок, title и description страницы нужно заполнять обязательно;
если это уместно, добавьте карту и адрес компании. не лишним будет блок отзывов;
покупка ссылок поможет продвинуть ваш лендинг в поисковых системах, но тут не стоит гнаться за количеством, лучше купить несколько дорогих, но хороших ссылок. нч и сч запросы так можно продвинуть довольно легко;
домен лендинга должен содержать ключевые слова - это очень важно.

Сервисы для создания лендингов

http://lpgenerator.ru - хороший сервис, очень много шаблонов, есть пробная версия. Стоимость создания и размещения одной лендинг пейдж начинается от 560 рублей в месяц.

http://lpmotor.ru - шаблонов много, есть шаблоны секций, которые позволяют создавать индивидуальные решения. Стоимость - от 450 рублей в месяц, но есть возможность сперва создать лендинг пейдж, оценить результат, а уже потом оплатить.

http://wppage.ru - генератор страниц для Wordpress. Стоит 2162 рубля (уже он бесплатный). Представляет собой плагин, который позволит вам легко и быстро создавать одностраничники на базе Wordpress. Но необходим навык работы с данной CMS.

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

На всякий случай или этап 0

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

Получить новые заявки на товары/услуги;
Увеличить узнаваемость бренда;
Информировать о предоставлении товаров/услуг;
Предоставить консультацию по услугам;
Получить резюме от кандидатов (Что!? Лендинг для этого??? Вот вам пример — Альфа-банк );
Привлечь партнеров, дилеров, представителей;
Обеспечить доступ к сервису;
И прочее.

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

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

НАС УЖЕ БОЛЕЕ 45 000 чел.
ВКЛЮЧАЙТЕСЬ

ЭТАП 1 — Отдать или сделать самому

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

И выбираться будут они на основании Ваших денежных и временных ресурсов. Рассмотрим каждое из них с плюсами и минусами.

Конструктор

Как-то один клиент нам написал претензию после того как получил сайт. Суть её заключалась в том, что мы не обоснованно много взяли денег. Выглядело это всё очень странно, ведь он до этого со всем ознакомился, подписал договор. Но мы компания не бедная, поэтому нам проще отпустить клиента с миром (не всегда), чем пытаться что-то доказывать. Что мы и сделали.

А всё это произошло потому, что он нашёл в интернете конструктор лендингов и узнал, что всё можно сделать самому, потратив на это буквально 5-6 часов, и заплатив при этом не больше 1 000 рублей в месяц. Но мы то с Вами понимаем, что можно собрать и “машину” самостоятельно, но насколько она далеко поедет, насколько будет индивидуальный дизайн landing page, насколько будет корректное техническое оснащение… Подробно все этапы создания лендинга со сроками мы описывали в статье создание лендинга под ключ .

Плюсы:

Дешево. Прям очень. 500-1000 рублей в месяц и Вы — счастливый владелец одностраничного сайта;
Просто. Вам не нужно думать о верстке, адаптации под мобильные устройства, подключении смс-оповещений о новых заявках на Ваш телефон. Все это уже есть и сделано для Вашего удобства;
Быстро. Сделать и настроить можно реально всё быстро. Причём, внести изменения тоже не составит труда;
Техническая поддержка. У Вас есть вопрос? Вам ответят на него максимально быстро и подробно. Огромный плюс;
Бесплатный тестовый период. Сейчас практически у всех конструкторов лендинг пейдж 14 дней бесплатного тестового периода. Регистрируетесь и…

Небольшая жизненная правда. “ 14 дней халявы! За это время заработаю денег с помощью лендинга на конструкторе и закажу красивый сайт в агентстве”, — думали они. Через 14 дней, еле сумев победить конструктор, сделав все неправильно и не получив ни одного заказа через сайт, они поняли, что одностраничники не работают.

Минусы:

Знания. Вам нужно знать какие блоки нужно использовать, их последовательность и прочее. Решили подглядеть у конкурентов? Отлично! Только откуда Вы знаете, что у конкурентов эффективный лендинг и показывает хорошие показатели?
Дизайн. Если Вы работете с конструктором первый раз, то на дизайн landing page по окончании работ “без слез не взглянешь”. Даже если это далеко не первый вариант. Крутого дизайна, такого, чтоб “Вау!”, не ждите.
Ограниченность. Количество готовых блоков ограниченно, как и их функционал. Дизайнерские решения тоже представлены не в самом широком ассортименте. Поэтому если Вы хотите, чтобы вот тут вылетала птичка, когда человек оставляет заявку (как будто его заявка улетела к Вам с почтовыми голубями), можете забыть о такой идее.

Лично мы можем посоветовать этот landing page конструктор . Обычно мы отправляем к ним клиентов, которые только начинают или тестируют нишу. И всё это не на правах рекламы, просто нам он реально нравится. Идеальное сочетание на наш взгляд цены/качества/функционала.

Фрилансеры

Давайте сразу по делу и из опыта. Найти фрилансера, который в одиночку создаст продающий лендинг с нуля и “под ключ” — НЕВОЗМОЖНО. Ну правда. Возможно найти отдельных специалистов: дизайнера, который создаст дизайн будущего сайта, или программиста, который его сверстает, но монстра, который КАЧЕСТВЕННО сможет сделать сайт от и до, не существует. Под всей работой я подразумеваю ещё таких людей как: интернет-маркетолог, копирайтер, менеджер-проекта. Просто невозможно во всём быть хорошим, физически, как минимум.

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

Плюсы:

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

Минусы:

Ответственность. Если сайт не будет работать, то никто кроме Вас не виноват. Так как Вы являетесь тем, кто ими управляет и говорит как нужно.
Поиски. Вам нужны специальные знания где их искать, как ставить им задания и… нужно также заполнять бриф, показывать ТЗ и прочее.
Время и нервы. Время, чтобы найти фрилансера, время на создание задач, время, чтобы сделать прототип лендинга, время на контроль. Потратите очень много времени и нервов. В большинстве своем фрилансеры-разгильдяи (извиняюсь, но так и есть), поэтому затягивание сроков, периодические потери с радаров связи будут. И это минимум, который можно ожидать, когда хотите сделать лендинг пейдж недорого.
Деньги. Вам придётся раскошелиться, так как хороший специалист без “связей” стоит немало. Дизайн среднего качества выйдет в районе 8-10 тысяч, вёрстка тоже в районе этой суммы. Опять же всё зависит от сложности проекта и самих исполнителей.
Кидалы. Работа строится следующим образом: 50 на 50. Предоплата и потом оставшаяся оплата после завершения проекта. Не хочу никого обижать, но среди фрилансеров очень много людей, которые… не берутся за выполнение проекта после получения предоплаты. Проще говоря, теряются.

Лайфхак. Если Вы решили работать с фрилансером, то рекомендую следующую схему оплаты: 50 процентов предоплаты проводите как безопасную сделку (почти во всех биржах есть), а оставшуюся часть суммы перечисляете уже напрямую фрилансеру. Переплатите 15%, но зато обезопасите себя. Кстати, если фрилансер собрался Вас кинуть, то от безопасной сделки он Вас будет отговаривать. Это будет Вам сигналом.

Этап 2 — кому и что?

Самый скучный (но самый нужный) блок в этой статье.

Неважно каким путем Вы пойдете. Будете делать эффективный лендинг пейдж своими руками или отдадите в специализированное агентство. В любом случае Вам нужно знать 3 вещи:

Свою целевую аудиторию,
Лестницу Ханта,
Внутренности вашей компании.

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

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

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

Лестница Ханта

Но что даст знание лестницы Ханта? Также как и аватар клиента, она даст саму структуру будущего лендинга.

Шаг 2. Детали

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

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

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

Техника: свойство-преимущество-выгода
Бизнес копирайтинг
4U заголовки: схватите вашего клиента за глаза
Как писать заголовки: 6 формул как сделать их цепляющими

Шаг 3. Призывы

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

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

ЭТАП 4 — Дизайн

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

Хотя с дизайнером тоже не мало мороки может быть. Поэтому перед тем как передать всё в его руки, обязательно нужно написать МАКСИМАЛЬНО ПОДРОБНОЕ . С примерами того, что Вам нравится, что не нравится. Какие где фото использовать (хотя бы примерно). На что сделать акцент. Фактически, для программиста и для дизайнера делаются разные технические задания.

Если Вы всё таки решили делать дизайн собственноручно. На что обращать внимание при разработке лендинга под ключ:

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

Если уже сейчас Вы думаете, что лендинг создать самостоятельно — это для Вас слишком, есть мы и банер ниже.

ЭТАП 5 — Вёрстка

Опять же, если конструктор, то проблем будет меньше. Собственно, как и возможностей. Если программист-фрилансер, то ему нужно отдельное ТЗ, где Вы указываете как что должно себя вести и какая анимация будет у каждого элемента. Если Вы её продумали, конечно.

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

Также при вёрстке нужно определить для себя нужна ли Вам админ-панель. Ведь если в Ваш landing планируется постоянно вносить правки, то стоит предусмотреть этот пункт. Но по практике, изменения всегда небольшие и поэтому достаточно обычного HTML-кода, в котором легко разобраться за 5 минут.

ЭТАП 6 — Вечность

Хотелось данному этапу дать более конкретное название, например, “Запуск и получение заявок”, но “Вечность” звучит более подходяще. После того как Вы сделали лендинг своими силами, начинается самое интересное:

“Сайт плохо работает”;
“Мне перенравился этот блок”;
“Люди хотят видеть на сайте калькулятор”;
“Ссылка должна открываться в новом окне”.

Всё это подводит к постоянной работе над сайтом и это нормально. Мы не стесняемся озвучивать руководителям, спустя 2-3 года после того как сделали сайт, что дайте нам доступ, мы изменим бесплатно несколько блоков. И это обусловлено новыми знаниями, наработками, опытом. Именно поэтому будьте готовы к и изменениям длиною в вечность.

Коротко о главном

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

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

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

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

Здесь мы рассмотрим вариант бесплатного создания лендинга из 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 — Затемняем фоновую картинку

Все вроде бы неплохо, но мне, например, кажется, что фон у нас слишком светлый, и белые буквы на нем теряются. Предлагаю наложить более темный фильтр на картинку. Для этого переходим в папку «assets -> css ->images» и меняем названия у двух файлов, которые там расположены.

Более светлый называем, например «overlay2.png», а более темный — просто «overlay».

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

#5 — Заменяем форму подписки

Единственное, с чем у вас могут возникнуть сложности — это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.

Предлагаю решить эту проблему просто — вместо формы подписки укажите ваш телефон. Так вы получите больше конверсий/заказов.

То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:

Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)

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

Самостоятельное создание лендинга

Об одностраничниках

Лендинг может создаваться представителями бизнес-ячейки не только для продаж. Его применение актуально также для:

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

Способы создания

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

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

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

На что нужно обратить внимание при разработке сайта

Лендинг с подзаголовком, в котором отображаются преимущества предложения

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

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

Заголовок

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

Лендинг сосредоточен на одной цели

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

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

Один лендинг преследует только одну цель

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

Читайте также: Удаленная работа на дому с ежедневной оплатой

В чем выгода потребителя

Как оформить преимущества сотрудничества

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

Персонализация

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

Проработка структура

Сведения, отображаемые на одностраничинике, должны быть структурированы.

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

Прием персонализации

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

Социальные доказательства

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

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

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

Структура лендинга со инструментами продвижения

В одностраничнике обязательно должен присутствовать эффективный Call to Action, мотивирующий пользователя к действиям. Кнопку опции призыва располагают в хедере или в конце лендинга. Допустимо его размещение с лид-формой. Недостаточно сделать СТА- кнопку яркой. На пользователя оказывает влияние ее текстовая часть, которая должна синхронизироваться с мыслями в голове пользователя и озвучивать его пожелание.

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

Призыв к действию в виде кнопки с призывающим текстом

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

Лид-формы

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

Лид-формы

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

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