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

Одностраничники (они же landing page) давно доказали свою эффективность в вопросе привлечения трафика в сети и увеличения продаж. Реально ли сделать качественный лендинг своими руками? Или лучше поручить это фрилансеру? На этот вопрос мы ответим в нашей статье. Мы рассмотрим возможные способы генерации landing page, их преимущества и недостатки, а также поговорим о примерной структуре такого ресурса. В заключение создадим одностраничник собственными руками на базе одного из популярнейших конструкторов.

Что такое лендинг и зачем он нужен?

Для начала сделаем короткий экскурс в теорию.

Лендинг (от анг. landing page) создается для решения одной конкретной задачи. Это может быть:

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

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

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

Обычно лендинг создается под очень «горячий» трафик из таргетированной и контекстной рекламы (например Google Adsense, Яндекс Директ). Некоторые лендинги получают SEO-трафик из поисковых систем, но это скорее исключение из правил. Как правило, поисковые системы плохо ранжируют одностраничные сайты.

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

Отличие от многостраничного сайта

Многостраничный сайт больше вам подойдет если:

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

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

к оглавлению ↑

Различные способы создания одностраничника

Если говорить о создании landing page, то путей решения у задачи может быть два:

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

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

к оглавлению ↑

Работа с фрилансерами: преимущества и недостатки

Аргументы “за” обращение к фрилансерам:

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

Аргументы “против” обращения к фрилансерам:

• Сложности поиска исполнителя. Придется потратить много времени на поиск грамотного исполнителя: просмотр портфолио, отзывов, согласование цены и сроков работы.
• Составление ТЗ. Для того, чтобы получить предсказуемый результат вам необходимо составить очень точное ТЗ (техническое задание).
• Трудности сотрудничества с фрилансерами. Не всегда удается с первого раза выбрать ответственного исполнителя. Поэтому вы можете потратить много нервов в связи с затягиванием сроков или периодической потерей связи. Кроме того, следует учитывать что готовую работу возможно придется несколько раз дорабатывать.
• Высокие цены. Если вы хотите действительно качественный результат, вам придется выложить за него хорошие деньги. Цены могут варьироваться в очень широких пределах в зависимости от ваших пожеланий и функционала лендинга.

Если вы решили остановиться именно на этом варианте, мы рекомендуем биржу фриланса Kwork.

к оглавлению ↑

Конструкторы сайтов: преимущества и недостатки

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

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

Несмотря на все достоинства использования конструкторов для создания одностраничника, нужно обратить внимание и на ряд недостатков этого метода.

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

Какой вариант выбрать?

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

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

• минимальный стартовый капитал;
• запускаете бизнес на небольших оборотах или хотите протестировать нишу;
• нет опыта разработки сайтов.

Если это про вас, тогда самый лучший путь:

1. Сделать лендинг самостоятельно;
2. Запустить продажи и получить оборотный капитал и статистику конверсии на всех этапах воронки продаж;
3. Если конверсия лендинга будет неудовлетворительная можно заказать разработку нового сайта у фрилансеров или веб-студии;
4. Протестировать конверсию нового лендинга и сравнить со старым;
5. Выбрать лучший.

к оглавлению ↑

Выбираем конструктор для будущего одностраничного сайта

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

LPMotor – простой и многофункциональный

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

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

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

Вот видео, которое поможет вам составить свое впечатление о создании landing page в LPmotor:

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

• сервисы приема платежей;
• веб-статистика от Google Analytics или Яндекс.Метрика;
• инструменты для работы с клиентами AmoCRM или Битрикс 24;
• автоворонка продаж;
• A/B тестирование
• корзина товаров.

Пользователям предлагается выбрать один из 5 доступных тарифных планов. Самый дешевый, для создания одного сайта, будет стоит 360 рублей в месяц. Полный безлимит обойдется в 1 283 руб./мес. Эта стоимость с учетом 40% скидки, которая предоставляется при оплате сразу годового периода обслуживания.

Произвести оплату можно с помощью дебетовой или кредитной карты, а также посредством перевода наличных с помощью центров Евросеть, Связной и мобильных операторов (Теле2, МТС, Билайн). Кроме того, LPMotor поддерживает переводы с электронных кошельков (Qiwi, Яндекс.Деньги или же WebMoney).

к оглавлению ↑

LPGenerator – конструктор для настоящих профессионалов

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

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

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

• управление каналами веб-трафика;
• статистика и аналитика поведения посетителей;
• сплит-тесты;
• воронка продаж;
• встроенная LP-телефония;
• воронка продаж.
• платежные системы (например, Robokassa),
• CRM (Битрикс24, Мегаплан, AmoCRM), а также с облачными хранилищами (например, Dropbox).

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

Для создания одного сайта подойдет тарифный план “Базовый” стоимостью 559 рублей в месяц (при условии предоплаты за год). Для тех, кто желает не иметь ограничений по количеству размещаемых ресурсов подойдет пакет “Корпоративный”. Его стоимость с учетом годовой скидки составит 11 011 рублей в месяц.

Оплатить выбранный тариф можно в салонах Евросети или мобильных операторов (МТС, Теле2, Билайн, Мегафон), через системы электронных платежей (WebMoney, Qiwi или же Яндекс.Деньги), а также с помощью дебетовой или кредитной карты посредством перевода через интернет-банкинг Сбербанка и Альфа-Банка.

к оглавлению ↑

Bloxy – новый подход к старой проблеме

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

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

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

• Битрикс24 и AmoCRM;
• Яндекс и Google Метрика;
• служба почтовых рассылок Mail Chimp;
• системы оплаты Яндекс.Касса, Robokassa.

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

Тестовый период у Bloxy составляет 7 календарных дней. Далее необходимо выбрать один из трех доступных тарифов. Самый дешевый стоит 190 рублей в месяц, за которые можно разместить один одностраничный сайт. Наиболее дорогой, рассчитанный на 10 одностраничников, имеет стоимость 2 970 рублей в месяц. Представленные цены рассчитаны с учетом скидки за предоплату годового обслуживания.

К оплате принимаются наличные и безналичные платежи. Оплату можно совершить посредством карт Visa, MasterCard, с помощью системы Альфа-клик. Также доступен перевод через PayPal, WebMoney, Qiwi Wallet.

к оглавлению ↑

LPTrend – простой и надежный

Это вполне удобный конструктор с интуитивно-понятным интерфейсом. Рассчитан как на новичков в отрасли, так и на профессионалов.

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

• Mail Chimp;
• AmoCRM;
• Битрикс 24;
• Яндекс.Касса;
• Robokassa.

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

Тестовый период у конструктора длится 15 дней. По истечении их можно выбрать один из трех тарифных планов. Минимальный (300 ₽ в месяц) рассчитан на 1 сайт. За стоимость 1200 ₽./мес. можно приобрести тариф, который не будет иметь ограничений по числу размещаемых одностраничников.

Оплата принимается переводом с дебетовых или кредитных карт Visa или MasterCard, Яндекс Деньги, PayPal, Евросеть, Связной, МТС, Мегафон.

Статья в тему: Рейтинг ТОП-8 самых лучших конструкторов лендингов

к оглавлению ↑

Типовая структура landing page

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

1. Первый экран.
   • заголовок;
   • логотип;
   • призыв к действию (CTA);
   • контакты.
2. Тело.
   • демонстрация продукта;
   • преимущества;
   • описание вашего предложения.
3. Нижний экран.
   • социальные доказательства;
   • форма обратной связи.

1. Первый экран. Задача первого экрана заключается в том, чтобы коротко и емко донести до посетителя выгоды от сотрудничества с вашей компанией и мотивировать его к обращению. Здесь важно выделить ключевые отличия от конкурентов.
2. Тело одностраничника. В этой части можно более подробно познакомить посетителя с особенностями продукта и самой компании, ее уникальным торговым предложением. Информация должна быть представлена в простой понятной форме. Можно включить в тело одностраничника инфографику, фото и видео-галерею. Тело также может содержать информацию о проводимой акции. Это поможет создать эффект срочности и дополнительно мотивировать к совершению целевых действий.
3. Нижний экран. Здесь можно расположить сертификаты, свидетельства, подтверждающие качество продукта, а также отзывы реальных клиентов. Форма обратной связи должна быть минималистичной и содержать кнопку призыва к действию.

Давайте теперь рассмотрим все это на конкретном примере.

к оглавлению ↑

Пример создания лендинга самостоятельно на базе LPMotor

Для примера мы сделаем простой одностраничный сайт с помощью конструктора LPMotor.

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

Далее конструктор предлагает три варианта создания сайта:

1. из готового шаблона;
2. из готовых блоков;
3. с нуля.

Мы выберем тот, что больше подходит новичкам, то есть по шаблону.

Затем выбираем нужную нам категорию в левой колонке.

И сам шаблон.

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

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

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

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

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

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

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

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

Первое, что нужно сделать, попав в административную часть — настроить домен своего одностраничника. Купить его или прикрепить существующий можно с помощью одноименной вкладки в разделе настроек.

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

В общих настройках можно загрузить иконку сайта и задать теги.

В разделе “Расширения” можно выбрать необходимые инструменты и интеграции с другими сервисами.

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

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

к оглавлению ↑

Заключение

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