Как сделать лендинг

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

Как сделать лендинг самостоятельно с нуля

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress

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

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

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

Бесплатный плагин-конструктор, который может помочь в создании лендинга. С помощью системы 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 рублей в месяц пассивно.

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

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

Что такое лендинг и для чего он нужен

Лендинг пейдж (landing page) это страница для продвижения товара или услуги. Она призвана «направить» посетителя на совершение определенного действия:

  • обращение за бесплатной консультацией;
  • заявка на покупку товара;
  • бронирование мест;
  • подписка на рассылку;

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

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

Делать самостоятельно или заказать работу «под ключ»?

Итак, мы разобрались с основами. Следующий вопрос, который обязательно возникнет у вас: стоит ли сделать лендинг самостоятельно или заказать у фрилансера или в студии веб/дизайна.

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

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

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

  1. вы новичок в бизнесе;
  2. хотите протестировать новую нишу;
  3. у вас небольшой стартовый капитал.

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

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

Единственное, что вам действительно необходимо — это знание своего продукта: его достоинств, недостатков и целевой аудитории.

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

Помните, что если вы решили заказать лендинг «под ключ», вам нужно составить как можно более точное ТЗ и согласовать все детали с разработчиками.

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

LPMotor — самый лучший конструктор одностраничников

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

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

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

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

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

тарифная сетка lpmotor

При оплате за год вы получите скидку 40%.

Оплатить услуги и тарифы платформы можно с помощью банковской карты, через Сбербанк Онлайн, Альфа-клик, посредством перевода через Связной, Евросеть, МТС, Теле2 и Билайн. Поддерживаются электронные кошельки: Яндекс.Деньги, QIWI, Webmoney.

Как создать лендинг для любого проекта — пошаговая инструкция

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

Мода на лендинги или, как их еще называют, промостраницы, пришла вместе с кризисом. Предпринимателям нужно было тестировать новые продукты, для этого отлично подходили одностраничные сайты: не нужны система управления контентом, оптимизация под поисковые системы. Главное правило лендинга: «Один сайт — один продукт».

Разберитесь со структурой

В любой промостранице есть обязательные блоки. Все построено на психологии потенциального клиента:

  • Шапка — меню сайта. В лендингах обычно ставят «якоря» на блоки, указанные ниже. Кликнув по ним, пользователь переносится вниз по странице.
  • Главный блок — суть вашего предложения для будущего покупателя.
  • Преимущества/описание товара или услуги — подробности о продукте. Почему человек должен купить именно ваш продукт?
  • Рекомендации/отзывы — элемент социального доказательства. Если о продукте хорошие отзывы, доверие к компании повышается.
  • Формы захвата — блок, в котором вы собираете персональные данные. Имя пользователя, его телефон или email.
  • Подвал — краткая информация о компании, возможно, еще одна кнопка «купить» или повторение меню.

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

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

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

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

Познакомьтесь с разными подходами

Найдите на Behance дизайнеров, которые создают лендинги. Подпишитесь на коллекции, в которых пользователи выкладывают понравившиеся им прототипы. Например, арт–директор Wildberries Дмитрий Матвеев собирает промостраницы с необычным стилем — подборка постоянно обновляется.

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

Начните с понимания задачи

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

Подготовьте бриф. Вам нужны ответы на три главных вопроса:

Что нужно сделать

Это сайт, на котором люди будут сразу покупать? Или цель лендинга — побудить человека поверить в экспертность клиента и подписаться на рассылку? Может быть, важна запись на вебинар? Обязательно обсудите этот момент с заказчиком.

Вам нужно досконально изучить целевую аудиторию. Дизайн для презентации сериала для подростков и стиль для b2b-направления отличаются кардинально.

Как вы это реализуете

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

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

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

Уделите больше внимания блоку описания продукта

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

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

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

Переходите на новый уровень

Да, обычно лендинг — это быстро и недорого. Но в любом правиле есть исключения. Например, компания S7 Airlines сделала необычную презентацию нового самолета — это интерактивная картинка гаража с Airbus A320neo. Дизайнер создал 3D-анимацию снятия покрывала с самолета, взлета и возможность прогулки по салону.

Если позволяют ресурсы, попробуйте сделать подобное. Несмотря на распространение техники параллакса, такие эффекты все еще привлекают пользователей.

Старайтесь удивлять пользователя. Не обязательно использовать технологии, которые стоят тысячи долларов. Съемка 3D-фотографии, пусть без динамики, сейчас стоит не очень дорого (можно найти варианты от 600–700 рублей), но этот эффект заставит пользователей запомнить ваш лендинг.

Помните про UX

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

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

Не забывайте улучшать навыки

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

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

Ссылка на основную публикацию