Как сделать Landing Page (лендинг) самостоятельно с нуля: пошаговая инструкция для новичков

Привет!

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

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

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

Как я строю свой дом с нуля

Мой канал "В СВОЁМ ДОМЕ" про переезд на землю, путешествия, жизнь

Перейти на канал и подписаться

Что такое лендинг

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

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

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

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

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

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

Выбор платформы

Начать стоит с выбора платформы. Их действительно очень много. Какие-то можно использовать бесплатно, какие-то доступны только по подписке или при единоразовой покупке. В любом случае от выбора CMS зависит очень многое.

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

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

WordPress

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

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

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

• Elementor

Бесплатный плагин-конструктор, который может помочь в создании лендинга. С помощью системы Drag&Drop вы можете воссоздать практически любую страницу. Большое количество элементов и функций, хорошая оптимизация, контроль размеров и адаптивность – все это есть в Элементоре. Кстати говоря, у плагина более миллиона активных установок, что говорит о его качестве.

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

• Visual Composer

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

Композера нет в бесплатном каталоге WordPress. Его придется скачивать с официального сайта и устанавливать в ручном режиме. Там есть бесплатная версия, но если нужен дополнительный функционал, придется покупать премиум. Его стоимость составляет 59 $ для одного домена.

• WPBakery Page Builder

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

В отличие от Композера WPB Page Builder не обладает бесплатной версией. Распространяется он сугубо через магазин Envato и стоит 46 $.

Лучше ли он, чем Visual Composer? Не знаю, я пользовался обоими продуктами и особой разницы не увидел. Правда, стоит отметить, что в WPB больше различных виджетов, они могут хорошо помочь при разработке лендинга. Однако в бесплатной версии Композера также много инструментов. Так что тут дело вкуса.

Но, выбирая между WPB Page Builder и Visual Composer, я бы выбрал первый, потому что, на мой взгляд, он более надежный и функциональный. Да, тут нет бесплатной версии, но зато есть премиум-поддержка, постоянные и регулярные обновления и уверенность в том, что плагин будет актуален еще долгое время.

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

Также вам будет легко обновлять информацию, ведь WordPress – это CMS (система управления контентом). Контакты, текст или картинки – все это можно поменять в считанные минуты.

Wix

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

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

Однако здесь есть один момент: бесплатный Викс – бесполезный Викс. Да, вы действительно сможете создать сайт, он будет красивым. Но здесь присутствуют существенные ограничения, например, вы не сможете привязать свой домен. Только поддомены от самого Wix, что не очень красиво.

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

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

Tilda

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

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

Другие платформы

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

Создание лендинга

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

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

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

Блок 1: заголовок и информация

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

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

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

Блок 2: преимущества и раскрытие темы

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

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

Блок 3: отзывы, партнеры

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

Блок 4: форма заявки, призыв к действию

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

Также в последнем блоке – футере, обычно располагается информация о конфиденциальности, ссылки на какие-то прочие разделы (более подробную политику, например) или информация о годах, а также о том, что “Все права защищены”.

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

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

Заключение

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

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

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

Если вы хотите создавать не только лендинги, но и информационные проекты для заработка, то я рекомендую вам посетить курс Василия Блинова «Как создать сайт». На нем вы узнаете, как можно сделать крутой сайт и зарабатывать на нем от 20 000 рублей в месяц пассивно.