Как сделать лендинг самостоятельно с нуля: подробная инструкция

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

Главное преимущество конструкторов сайтов в том, что работать с ними может даже новичок.

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

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

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

Функционал ucoz.ru:

  1. Ucoz — бесплатный конструктор сайтов для реализации любых творческих задумок.
  2. Ukit — модуль для бизнеса. Современный сайт можно создать всего за несколько мгновений путем перетаскивания необходимых элементов. В общем-то так, как и должен работать любой конструктор.
  3. Ulanding — конструктор лендинга, на сборку которого уйдет не более 10 минут.
  4. Ushop — создание собственного интернет-магазина с огромным количеством функций.
  5. Ucalc — модуль не предназначен для создания лендингов. Это своеобразный калькулятор, на основе которого можно создать различные формы для сайтов, соцсетей и мессенджеров.
  6. Usocial — конструктор кнопок шеринга, предназначенных для сайтов.

Отдельно представлен набор шаблонов для установки на сайт. Шаблоны платные.

Тарифы

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

Довольно часто пользователи в Интернете ищут конструктор сайтов с бесплатным доменом и хостингом. Ucoz предоставляет в пользование бесплатный домен на тарифе Оптимальный при оплате сервиса на 12 месяцев.

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

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

Все подробности на скриншоте:

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

Wix.com

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

По аналогии с Ucoz этот конструктор сайтов поддерживает русский язык.

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

Wix предлагает 3 варианта взаимодействия с платформой:

  1. Самостоятельная работа в Редакторе, который позволяет собрать сайт своими руками буквально с чистого листа. По вашему желанию можно воспользоваться дизайнерскими шаблонами (более 500 вариантов), чтобы ускорить и облегчить процесс создания сайта.
  2. Помощь искусственного интеллекта Wix ADI. Уникальность этого способа в том, что вам достаточно ответить на несколько простых вопросов о вашей сфере деятельности, и конструктор самостоятельно соберет для вас профессиональный сайт из текстовых блоков и картинок. Все блоки редактируются, поэтому внести какие-то правки возможно всегда.
  3. Простое программирование. Этот модуль предназначен для тех, кто умеет работать с кодом. У вас есть возможность создавать собственные базы данных, добавлять свои коды и т.д.

Возможности конструктора Wix

  1. Создание современного блога (сайта).
  2. Подключение медиагалереи.
  3. Оптимизация под мобильные устройства.
  4. Создание интернет-магазинов.
  5. Персональное доменное имя.
  6. Возможность SEO-оптимизации.
  7. Создание одностраничников с нуля через редактирование специальных шаблонов.

  8. Бесплатный и надежный хостинг.
  9. Неограниченное количество страниц на сайте.
  10. Возможность загрузки видео и аудиофайлов.
  11. Возможность встраивания внешних HTML-кодов.
  12. Выставление счетов.
  13. Статистика сайтов.
  14. Почта на вашем домене.
  15. Круглосуточная служба поддержки.
  16. Обучающие материалы.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

Создание собственного логотипа бесплатно

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

  2. Для создания логотипа достаточно ответить на несколько вопросов, чтобы система предложила вам вариант дизайна.
  3. Готовый вариант всегда можно отредактировать (цвет, размер, текст) и настроить логотип под ваш бренд.

При необходимости логотип можно скачать и использовать вне платформы Wix. По желанию — даже распечатать.

Бесплатный домен и хостинг

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

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

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

На собственном домене создается электронная почта.

Тарифы Wix

Тарифы на Wix делятся на 2 категории: для сайтов и для бизнеса, и электронной коммерции (интернет-магазинов).

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

  • Как сделать лендинг самостоятельно с нуля: подробная инструкция
  • Для Бизнеса и интернет-магазинов цены, конечно, подороже:
  • Как сделать лендинг самостоятельно с нуля: подробная инструкция

Как создать лендинг: пошаговая инструкция | Блог Kwork

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

Чем лендинг отличается от сайта?

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

Хорошим показателем конверсии для сайта считается 2—3 % от всех посетителей. Для лендинга эта цифра — 14—15 %. Такого результата помогают добиться кнопки с призывом к действию.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

Принципы успешного лендинга

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

Принцип первого экрана или Above The Fold. Газеты продают сложенными вдвое, поэтому титульная страница делится на видимую и невидимую часть. Если заголовок или фотография на видимой части привлекают внимание, хочется купить газету и дочитать до конца.

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

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

Учет тепловой карты страницы. Важные смысловые блоки расставляют на виду так, чтобы пользователь находил нужные элементы на привычном месте. Есть несколько моделей поведения на сайте, актуальные из которых: Z-Pattern и Guttenberg Pattern

Z-Pattern на примере Фейсбука. Пользователи подсознательно знают, что кнопка действия находится в правом нижнем углу.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

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

Call-to-action элементы. Призыв к действию — логическое завершение длинного пути, который переводит читателя на новый этап воронки продаж. На лендинге размещают кнопки подписки или покупки, ссылки на товар и формы для электронной почты. На принятие решения влияют форма и цвет кнопки, ограниченное предложение («Осталось три места на вебинаре») и место размещения.

Читайте также:  Как провести анализ сайта конкурентов: обзор лучших сервисов

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

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

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

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

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

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

Рейтинги, отзывы, портфолио значительно упрощают выбор исполнителя.

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

Как сделать лендинг самостоятельно с нуля: подробная инструкция Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

To-do list для заказчика по созданию лендинга

Создание лендинга делится на следующие этапы:

  • продумывание структуры лендинга — создание примерного плана, который станет основой ТЗ для дизайнера и копирайтера;
    • Закажите сбор и анализ конкурентов. Сравните себя с конкурентами и международными лидерами в вашей нише. Выпишите ваши конкурентные преимущества, а также “фишки”, которые можно позаимствовать у конкурентов.
    • Ответьте для себя на вопрос, что должен совершить пользователь после прочтения посещения лендинга? Это будет целью лендинга. Эту цель обязательно нужно обозначить перед исполнителями
  • написание контента — текст, который будет «продавать» продукт. Основная рабочая схема написания текста “Боль клиента — Усиление боли — Идиллия — Решение — Предложение сделки”;
  • дизайн — создание полного макета. Подробнее про дизайн мы написали чуть ниже;
  • верстка — оформление сайта в соответствие с его функционалом и макетом дизайнера;
  • программирование — реализация необходимого функционала сайта;
  • настройка рекламы — запуск контекстной рекламы для генерации трафика на ваш лендинг.

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

Как сделать лендинг самостоятельно с нуля: подробная инструкция

При работе с дизайнером и верстальщиком нужно учесть следующие моменты:

  1. Макет и прототип страницы — согласуйте основные блоки, структуру и путь читателя от элемента к элементу.
  2. Логотип — если у компании еще нет логотипа, самое время добавить его на лендинге, чтобы сделать бренд узнаваемым.
  3. Шапка для сайта — с информацией о продукте, логотипом и навигацией.
  4. Иллюстрации — хороший дизайнер не будет наполнять страницу фотографиями с фотостока. Он отрисует иллюстрации самостоятельно или запросит у вас качественные изображения технологического процесса или продукта.
  5. Кнопки с призывом к действию — дизайнер поможет определиться, какие CTA-элементы нужны на странице и где их расставить.
  6. Форма обратной связи — это может быть номер телефона, кнопка «Перезвоните мне» или значок онлайн-чата в углу страницы.
  7. Иконки — помогают читателю разделить блоки и визуально выделить важное.
  8. Отзывы клиентов — важный элемент лендинга, который повышает доверие посетителя. Отзывы могут быть статическими или обновляться через 5—10 секунд.
  9. Фон для блоков и элементов сайта — люди боятся пустых мест и белых пятен, нужно продумать фон и заполнить пустоты иллюстрациями.
  10. Анимационные эффекты — ссылки должны менять цвет, если читатель на них нажал, а кнопка заказа двигается. Такие мелочи помогают читателю воспринимать информацию.

В задании для копирайтера нужны такие пункты:

  1. Цель текста: что должен сделать пользователь после прочтения.
  2. Кто читатель: чем точнее укажите целевую аудиторию, тем проще автору попасть в нужную тональность.
  3. План и смысловые блоки: структуру текста редактор может разработать самостоятельно, но чтобы она отвечала вашим ожиданиям, лучше обговорить план заранее.
  4. Основные тезисы: если есть моменты, которые нужно обязательно упомянуть в тексте, скажите об этом автору.
  5. Запретные элементы: слова и фразы, которых не должно быть в тексте.
  6. Если у вас подготовлены ключевые слова для SEO продвижения лендинга, передайте их копирайтеру, чтобы он включил их на страницу.

Бриф для программиста

По данным исследований, в 2018 году больше 60% посетителей заходят на сайт со смартфонов и планшетов, поэтому вам понадобится мобильная версия сайта.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

  • Если вам нужна форма для сбора данных, узнайте, где они будут храниться и как вам получить туда доступ.
  • Узнайте, как сократить время загрузки сайта — страницы, которые открываются быстро, лучше индексируются поисковыми системами.
  • Вот так может выглядеть задание для программиста:
  1. Добавить страницу лендинга к существующему сайту, создать новый поддомен.
  2. Сделать мобильную версию или адаптивную страницу.
  3. Добавить форму для сбора данных — телефон, почту или ссылку на соцсети. Не делайте много полей, людям лень их заполнять.
  4. Сделать доступ к админке страницы для сотрудников и разграничить роли.
  5. Посмотреть, как сократить время загрузки страницы.

Итоги

Современные исследования показывают, что 75% пользователей судят о вашей организации по ее сайту, при этом первое впечатление в 94% производит дизайн. Что не менее важно, 88% пользователей не вернутся на сайт после первого негативного впечатления.

Создание лендинга — целая наука, но с этой задачей не сложно справиться, если у вас есть хорошие исполнители. А Kwork вам в этом поможет. Успехов!

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

Сегодня будет гостевой пост от Галиулина Руслана (автора SEO блога firelinks.ru). Потенциальный покупатель почему-то уходит со страницы товара, начинает бесцельно бродить кругами или вообще покидает сайт, ничего не заказав. Знакомо?

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

Хорошая целевая страница быстро отвечает на четыре важных вопроса:

  1. Что предлагается?
  2. Каковы преимущества предложения?
  3. Почему посетитель должен решиться на покупку/заказ/подписку прямо сейчас?
  4. Как получить то, что предложено?

Лендинг пейдж создать бесплатно: как и что для этого нужно?

Подобный вопрос встает в рамках ограниченного бюджета. Рассмотрим бесплатные варианты.

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

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

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

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

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

Читайте также:  Форекс аналитика — принципы фундаментального (новостного) анализа

В результате потенциальный клиент видит по своим запросам десятки одинаковых сайтов. Влияет ли это на продажи? Несомненно. Неуникальность снижает доверие к странице.

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

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

Основные конструкторы:

  • lpmotor.ru;
  • leadkit.ru;
  • lpgenerator.ru;
  • bloxy.ru.

Смотрим лендинг от первого же конструктора из списка lpmotor.ru — выглядит аккуратно. Все, что нужно, есть.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

Заглянем в исходный код.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

Хорош ли лендинг, время загрузки которого придется ожидать так долго? Нет. За это время замученный клиент 5 раз успеет уйти на сайты конкурентов. И это всего лишь шрифты, а ведь в коде хватает и иных элементов, тормозящих загрузку.

Целевая страница с сумасшедше высокой конверсией может быть создана только двумя способами:

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

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

Лаконичность, ясность, призыв к действию

У тех, кто знаком с html и css, есть преимущество — они могут себе позволить сверстать с нуля легкий и удобный лендинг даже в блокноте на коленке. Ну а товарищам без навыков поможет Bootstrap. Это фреймворк — набор рутинных кодов, которые чаще всего используются при верстке с учетом респонсивности.

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

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

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

Шаг 1: добыть html. Воспользуемся любым сервисом, облегчающим эту задачу для бутстрапа. Мы выбрали layoutit.com. Жмем старт и переносимся в окно сборки.

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

В наборе будет полностью готовый html код будущего лендинга.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

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

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

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

Как сделать лендинг самостоятельно с нуля: подробная инструкция

Откуда взялась иконка домика? Из бутстрапа. Она задана шрифтом, который лежит в папке fonts по умолчанию. Достаточно изменить слово — и появится любая иконка набора.

В коде это выглядит так:

  • Html
  • fa-home — выбранная иконка.
  • CSS .navbar-brand { font-size: 30px; /* задаст размер иконки */
  • }

В CSS задан ее размер — можно делать больше или меньше, качество не пострадает.

Шаг 3: наводим красоту. Подключим шрифты для заголовков. Не в таком диком количестве, как в конструкторах — хватит одного или двух. Идем в гуглфонтс.

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

Как сделать лендинг самостоятельно с нуля: подробная инструкция

Затем вверху своего файла стилей вставляем:

Как создать Landing Page с нуля – Простыми словами о вариантах создания лендингов для новичков

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

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

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

Что такое Landing page простыми словами

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

Главное техническое отличие от “классического” сайта состоит в том, что ленгдинг состоит из одной страницы.

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

Актуален ли лендинг в 2019-2020?

  • Широкая их распространенность неизбежна привела к весьма противоречивому отношению к ним. И, справедливости ради, причины, почему многих интернет-пользователей одностраничники откровенно раздражают.
  • Большинство lading page на просторах сети откровенно убоги — это тяжеловесные, перегруженные текстом, картинками и видео тормозящие страницы, которые вызывают у посетителей только раздражение. Увы, но востребованность услуги всегда приводит к появлению множества низкоквалифицированных исполнителей.
  • В то же время грамотно построенный и написанный лендинг, предлагаемый аудитории, которой интересно данное предложение, отлично работает в 2019 году и будет работать и в дальнейшем. Потому что в его основе лежит простой принцип — людям нравятся короткие и доходчивые предложения. И “интернет-мода” на это не влияет.

Что нужно знать для того, чтобы сделать хороший лендинг

Классическая “формула”  — AIDA (Attention. Interest, Desire, Action). Каждый из этих пунктов отражает этап взаимодействия посетителя с сайтом и, зачастую, один из элементов структуры лендинга. Но обо всем по порядку:

  • Attention (Внимание) — первый и самый главный пункт, на который стоит обращать внимание при создании лендинга. Нужно “ухватить” внимание посетителя в первые несколько секунд его пребывания на сайте. За это в структуре лендинга отвечает заголовок и первый экран с оффером, кратко описывающим предлагаемый продукт. Классический оффер выглядит примерно так:

Как сделать лендинг самостоятельно с нуля: подробная инструкция

  • Interest (интерес) — на этом этапе нужно “подогреть” интерес посетителя дополнительным контентом — преимуществами вашего продукта, видео, изображениями и так далее. При этом не нужно использовать стоковые фото и видео — делайте свой, уникальный и интересный контент.
  • Desire (Желание) — заинтересовав посетителя, нужно сформировать у него желание купить ваш продукт или, на худой конец, подписаться на рассылку. Делать это можно несколькими способами, например публиковать отзывы пользователей или максимально персонализировать предложения

Как сделать лендинг самостоятельно с нуля: подробная инструкция

  • Action (действие) — покупка продукта, заказ консультации, оформление подписки и так далее. Под него обычно выделяется один из разделов лендинга, но кнопки действия должны быть распределены по всей странице. При этом важно помнить два момента:
    • Во-первых, все формы, кнопки и функции должны работать идеально. Без всяких оговорок и багов.
    • Во-вторых, формы должны быть максимально простыми. Если в ней больше 3-5 граф — лучше “повесить” переход на страницу с формой на кнопку, а не пытаться “впихнуть” ее в лендинг. Взаимодействие посетителя с лендингом должно быть максимально простым и быстрым.

Четыре главных мифа о Landing Page

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

  1. “Продающий” текст. Чтобы не говорили маркетологи, никакого “продающего” текста не существует. Текст в одностраничнике должен легко читаться, быть простым, понятным и четко доносить ваше предложение посетителю. Но никаких “волшебных” слов нет.
  2. Лендинг должен быть длинным. Этот миф очень любят конторы, “штампующие” шаблонные сайты в надежде получить с клиента побольше денег. Ресурс должен доносить ваше предложение максимально интересно и заинтересовывать посетителя. Растягивать его нет смысла — он должен иметь минимальную длину, необходимую для выполнения этой задачи. Если вам удалось сделать это за один экран — идеально.
  3. В лендинге должно быть много-много пунктов с преимуществами продукта. На деле вымучивать кучу никому не интересных текстов, заголовок и иконок не нужно — они все равно не сработают. Сосредоточьтесь на том, что действительно интересно вашей аудитории.
  4. Лендинг решает все проблемы. Увы, но он не способен обеспечить вам продажи сам по себе. LP помогает потенциальным клиентам увидеть преимущества вашего продукта и заинтересоваться им, однако сам продукт должен обладать этими преимуществами. Вдобавок, нужен и качественный источник траффика, благодаря которому на страницу будет попадать ваша целевая аудитория, а не те, кому ваше предложение не интересно в принципе.
Читайте также:  Roe – что это такое и как рассчитать финансовый показатель

Варианты создания Lading Page

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

Итак, основные способы сделать продающую страничку:

  1. Сделать самому
  2. Заказать лендинг “под ключ”
  3. Воспользоваться онлайн-конструктором

Лендинг своими руками

  • Самый дешевый и доступный вариант, который можно реализовать, даже не используя специализированные инструменты. В сети не так уж мало лендингов, которые владельцы сайта сделали в Photoshop и самостоятельно заверстали. Как правило они предельно простые, но если одностраничник выполняет свою задачу, то почему бы и нет?
  • Проблема этого способа очевидна — вам нужны навыки программирования, интернет-верстки, дизайна и копирайтинга. Хотя бы базовые.
  • Второй вариант создания лендинга самостоятельно — использовать популярную и недорогую CMS WordPress. Для нее существует специальный плагин — WordPress Landing Pages.
  • WordPress предлагает отличный и гибкий функционал — от готовых кнопок и элементов лендинга до возможности проведения сплит-тестирования. Однако работа с ним требует специальных знаний и интерфейс далеко не так удобен, как хотелось бы. Это скорее инструментарий для специалиста, чем для человека, который быстро хочет сделать пристойный одностраничник для себя.

Лендинг под ключ

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

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

Использование онлайн-конструкторов

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

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

  1. Самым популярным из таких конструкторов, несмотря на всю свою тяжеловесность, остается WordPress Landing Pages. Просто потому что компания, которой требуется одностраничник, в абсолютном большинстве случаев использует ту или иную CMS. И WordPress сегодня среди них наиболее популярна. Особого смысла искать другую платформу у компаний, использующих эту CMS, просто нет.
  2.  Следующим по интенсивности использования идет LPGenerator. Если WordPress любят заказчики, то LPGenerator горячо любим веб-студиями, создающими лендинги под ключ. Просто потому что на сегодняшний день это самый мощный и полнофункциональный из конструкторов, позволяющий делать с одностраничником все что угодно.
  3. Помимо банальных шаблонов, здесь присутствует богатый инструментарий для прорисовки страниц, добавления собственного кода и развитая система обучения начинающих веб-дизайнеров. Ценят его и за полный набор средств маркетингового анализа — от банального A/B-тестирования до самой подробной статистики о поведении посетителей на странице.
  4. Минусов у LPGenerator всего два: возможностей слишком много, чтобы в них мог быстро разобраться новичок, а тарифы на платформе одни из самых высоких на рынке — от 560 рублей в месяц за ограниченный базовый функционал до 11 тысяч в месяц за “полный фарш”. В конце концов, они рассчитаны на профи, которые зарабатывают созданием лендингов.
  5. uKit — Представитель противоположного лагеря конструкторов лендингов. Он предельно прост и не требует никаких специальных знаний для использования. Пользователь получает не только набор готовых элементов, которые он может размещать по своему усмотрению, но и полноценные шаблоны. В них нужно просто подставить нужные картинки и тексты — все блоки уже заранее размещены в логически верном порядке, кнопки и функциональные элементы расставлены по странице авторами шаблонов — ошибиться трудно. 
  6. Тарифы довольно демократичны — от 4 долларов в месяц. За эти деньги вы получаете функционал, достаточный для большинства лендингов. Но если хотите получить возможность принимать платежи онлайн — придется выложить уже 9,6 долларов в месяц. А вот инструменты для анализа конверсии отсутствуют в принципе — придется использовать стороннюю аналитику.

Фактически, uKit — это оптимальное решение для создания своего первого лендинга либо одностраничника для блога, а также во всех тех случаях, когда вам не нужны профессиональные инструменты. Грубо говоря, зачем покупать строительный пистолет, если вам нужно забить два гвоздя?

Создать адаптивный лендинг на Tilda

Эффективный Landing Page без программирования

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

Интуитивно понятный конструктор. Добавляйте блоки, меняйте контент, и сайт готов.

К сайту можно подключить свой домен или воспользоваться бесплатным доменом tilda.ws

Сайт хранится в облаке и защищён от DDoS-аттак. У страниц высокая скорость загрузки.

Как сделать лендинг самостоятельно с нуля: подробная инструкция

На платформе есть все блоки, которые необходимы для создания лендингов

Формы разной сложностиБлоки с призывом к действиюОбложкиКвизыКонтактыОтзывыПоп-апыТаймеры обратного отсчётаГеолендингВиджеты сервисов

+27 категорий

Zero Block. Редактор для собственных блоков

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

Готовые шаблоны лендингов

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

Подключите инструменты, с которыми вы привыкли работать

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

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

Подключите инструменты, с которыми вы привыкли работать

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

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

Сайт отлично выглядит на любом устройстве

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

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

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

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