Как работает landing page. Что такое лендинг пейдж (landing page) и зачем нужно их создавать. Что такое лендинг пейдж в интернете

Мы попытаемся Вам объяснить, что такое лендинг простыми словами. И, так, landing page с английского дословно переводится, как посадочная страница. У нас окрестили, как целевая страница. Предназначена такая страничка для выполнения конкретного действия — нажатия на кнопку «Купить», «Подписаться» и т. п. В инете прозванная, как лендинг пейдж или просто лендинг, на сленге ленд.

Что такое лендинг — это денежный станок

Что такое лендинг? Лендинг это двигатель интернет торговли, локомотив продаж! Работает в связке с грамотно настроенной рекламной кампанией. При правильных настройках может стать Вашим денежным станком!

Данная технология пришла к нам из США, там появилась ввиду большой конкуренции интернет магазинов. По словам генерального директора ведущего интернет маркетингового агентства Антона Петроченкова, именно он вдохнул жизнь в посадочные странички у нас в России. Антон долгое время работал в Америке маркетологом в престижной фирме. В 2012 году вернулся в Москву и стал усиленно продвигать технологию продающих сайтов. Её цели и задачи далее и рассмотрим.

1.Что такое лендинг пейдж простыми словами

Если говорить простыми словами о лендинг пейдж, то это одностраничный сайт. Задачей таких сайтов одностраничников 90 % является продажа товаров или услуг. Ленд эффективно работает для сбора подписной базы. На лендингах никогда нет сторонней рекламы, ограниченное меню в пределах этого документа. Состоит из блоков, начиная от одного и более. Каждый блок расписывает товар поэтапно, подводя человека к выполнению конкретного действия. Предназначен практически для рекламы одного товара или услуги. Должен иметь хорошую графику, грамотно составленные продающие тексты.

2. Назначение лендинга

Лендинг, как правило применяется для сбора подписной базы, в этом случаи используется один, два, максимум три блока. Наиболее эффективными для подписки являются одноблочные landing page (одноэкранные). Где размещается форма подписки и перечисление выгод от регистрации, плюс какой-то подарок — купон на скидку, электронная книга и т. п.

Посадочная страница, подписная

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

3. Состав лендинга

Одностраничный сайт это набор из нескольких файлов и папок.

• CSS (таблицы стилей)
• img (картинки)
• (Ява скрипт)
• Сам лендинг с HTML кодом

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

Как уже говорилось выше, лендинг пейдж состоит из блоков. Грамотное построение блоков осуществляется по двум распространенным моделям. AIDA и PMPHS

Модель — AIDA

Attention — Внимание;

Interest — Интерес;

Desire — Желание;

Action — Действие;

Модель — PMPHS

Pain — Боль;

More Pain — Больше Боли;

Hope — Надежда;

Solution — Решение;

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

— Помните!!! У Вас есть всего 5 секунд, чтобы удержать пользователя на своем лендинге!!!

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

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

Первый экран должен содержать заголовок и подзаголовок, желательно закрыть 3 — 5 выгод.

Заголовок:

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

Пример первого экрана лендинг пейдж

Подзаголовок:

Расшифровка заголовка (товара), хорошо работают качественные прилагательные.

Выгоды:

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

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

4. Продвижение лендингов

Говоря простыми словами, лендинг не предназначен для SEO продвижения и вывода в ТОП поисковой выдачи. На такой ресурс льют платный рекламный трафик, через контекстную рекламу, баннерную, тизерную и т. п. В общем, используют платные рекламные интернет каналы. Такие, как Яндекс Директ, ГУГЛ Адвордс, ВК таргет и т. д.

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

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

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

Лендинг пейдж — пример

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

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

Самые дорогие каналы это на поиске, Яндекс Директ и Гугл Адвордс. Но и надо учесть, что это самые горячие пользователи, поскольку они конкретно искали Ваш товар и в принципе готовы к покупке. Хороший лендинг пейдж и грамотно подготовленная рекламная компания дадут хороший результат. (Вспомните про написание заголовков выше).

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

5. A/B тест лендинг пейдж

A/B тест или, как его еще называют сплит тест лендинга, это не тест рекламной компании, а именно тест продающего ресурса. Проводится он путем подготовки двух, трех одинаковых landing page с разными элементами и блоками. Тестируются кнопки, заголовки, тексты. Эти тесты проводят для того чтобы выявить какой элемент в каком исполнении лучше работает.

Даже если Вы содрали полностью landing у конкурента Васи, то далеко не факт, что он будет хорошо работать у Вас. Да и не известно действительно ли хорошо все работает у Васи.

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

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

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

6. Политика конфиденциальности

Размещение ссылки на политику конфиденциальности повышает доверие к целевой странице. Необходимо учесть, что с 1 июля 2017 года вступила в силу новая редакция ФЗ — 152 (Закон «О персональных данных»). Отсутствие такой политики может повлечь за собой штрафы со стороны гос. органов — «Роскомнадзора».

Такие ссылки на политику должны быть на каждой странице сайта. Как правило, их ставят в футуре. Чтобы не уводить посетителя с целевой странички на общий сайт ссылкой в футуре, сделайте файл в PDF формате с политикой и залейте его на сервер. На ленде поставьте ссылку на него: «вашдомен.ru/polic.pdf» target = «_blank». Политика откроется в новом окне, а посетитель прочтет документ и не отвлечется от ленда на общий сайт. Рекомендуем данный файл PDF закрыть от индексации в robots.txt

7. Разработка лендинга

Как же сделать целевую страницу? Да очень просто! В интернете есть много бесплатных шаблонов, их можно скачать и подогнать под себя (вставив свои тексты). Можно воспользоваться всевозможными конструкторами и генераторами. Из них можно выделить lpgenerator.ru и tilda, минусы таких площадок, это платные ежемесячные ресурсы, сложно перенести на свой домен и тому подобное.

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

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

Ваш промокод TZS52983 (просто скопируйте и вставьте при регистрации)

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

8. Заключение

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

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

P. S.

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

Подписывайтесь на наш проект, оставайтесь с нами.

Удачных Вам продаж через landing page.

Мы попытались объяснить, что такое лендинг простыми словами.

Обязательно ознакомьтесь с похожими записями

Понравился материал? Подписывайтесь на наш блог.

Задача каждой компании, создающей лендинг, — провести пользователя к конверсионному действию. Согласно правилам потребительского поведения, потенциальный покупатель проходит 5 основных стадий: внимание, интерес, желание, действие, удовлетворение/неудовлетворение. Но какая именно схема лендинг пейдж и структуризация блоков обеспечит максимальную отдачу? Сегодня мы постараемся разобраться в этом вопросе.

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

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

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

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

Простой пример от LPgenerator:

Этот и другие шаблоны вы можете взять за основу для создания своего первого лендинга в :

Логотип, название компании, контакты

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

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

Разобравшись, куда он попал, и увидев ваше предложение, пользователь задастся вопросом, как приобрести ваш товар или услугу. Именно поэтому главная страница должна проектироваться с блоком контактов, и чаще всего здесь же ставят CTA-кнопку «Заказать звонок».

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

Демонстрация продукта/услуги

Цель лендинга — продемонстрировать товар/услугу, а также создать у посетителя сайта ощущение, будто он лично тестирует продукт. Существует несколько способов достижения этой цели:

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

Вот удачный макет, сочетающий обе эти техники:

Преимущества бренда

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

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

Подходящие примеры находим в :

Описание оффера

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

Вот пример еще одного шаблона из :

Взаимная коммуникация

Лид-форма

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

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

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

Теперь о том, где же оптимальное место лид-формы: на первом экране или после «линии сгиба». Ответ нашелся у эксперта Майкла Огарда (Michael Aagaard) из компании ContentVerve. Он провел занимательное сплит-тестирование: сравнил две версии расположения поля. Первый вариант — выше «линии сгиба», второй — ниже.

В результате выяснилось, что второй вариант повысил уровень конверсии на целых 304%.

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

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

Лендинг пейдж (англ. landing page) в общепринятом понимании сегодня — это полный абсурд. Не ведитесь на рекламу — не используйте конструкторы лендингов с ежемесячной оплатой! В этой статье я объясню, почему не стоит использовать платные конструкторы с ежемесячной платой, если вам нужен одностраничный сайт. Расскажу, как создать лендинг пейдж бесплатно или за разумную одноразовую плату, а также дам ссылки на крутые конструкторы и бесплатные шаблоны лендингов. Закройте все другие сайты про «landing page», вам, кроме этой статьи, больше ничего не понадобится… Вы все уже нашли! В этой статье подробно рассмотрены пять способов создания лендингов: платные конструкторы, платные и бесплатные шаблоны, платные и бесплатные плагины.

Лендингом сегодня называют одностраничный сайт, заточенный под один-единственный продукт или услугу. При этом лендинг пейдж — это русский вариант английского «landing page», что переводится как посадочная страница и изначально означало самую первую страницу вашего сайта, на которую попал его посетитель. Некоторые набирают «landed page» в Яндексе, что является неверным написанием «landing page».

СOДЕРЖАНИЕ

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

Раньше все создавали конструкторы сайтов, а потом умные американцы придумали создавать конструкторы лендингов, в которых вы можете создать не целый сайт, а одну-единственную страницу, а потом ежемесячно платить $100 за ее аренду. Это прямо-таки американская мечта. И очень гениально!.. Молодцы, нашли, как создать конкурентное преимущество. А наши — русские — как всегда копируют, при этом как правило русские копии американских конструкторов поражают своей убогостью, обычно намного хуже американского оригинала и часто напоминают кривую китайскую подделку. Что поделаешь, если руки не из плеч… Не используйте никакие конструкторы с ежемесячной арендной платой, если вам нужен одностраничный сайт!

Конструктор landing page с арендной платой — плохое решение…

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

Все началось с того, что несколько лет назад я подробно изучил все имеющиеся России и за рубежом сервисы по созданию посадочных страниц. Я изучил много обзоров и прочел много отзывов, и выбрал самый лучший конструктор — instapage.com . Мне очень понравился этот сервис, он один из самых популярных и крутых в англоязычном Интернете для создания одностраничных сайтов, и раньше у него была бесплатная версия с ограниченным количеством лендинг пейдж, которые можно было создать, и полноценная платная версия, точно не помню цифры, но я платил немного, около 100 долларов в год, недорого, одним словом. Я сделал на нем много красивых лендингов для себя и своих клиентов без труда и особых проблем и был очень доволен. Потом я прекратил пользоваться сервисом и забыл про него на несколько лет.

Беда случилась, когда я захотел продолжить работу с ними, т.к. сервис очень хороший, открываешь его и сразу интуитивно понятно, что и как делать. И оказалось, что теперь бесплатной версии нет, а ограниченная по функционалу версия стоит $348 в год, или $39 в месяц, а самая приемлемая для меня версия по функционалу версия стоит теперь $1525 в год, т.е. они увеличили цену в разы и ограничили доступ к лендингам, если вы не заплатили. У меня теперь нет доступа к созданным мной ранее одностраничным сайтам, и могу я их увидеть, только если буду платить. По сути, созданные мной и нужные мне одностраничники теперь используются как заложники, а с меня вымогают деньги. Как называют людей, которые берут заложников и требуют деньги? Правильно — террористами… Тогда-то я и осознал все минусы использования платных конструкторов лендингов: это дорого, платить надо постоянно, и не вы владелец своего лендинга, который у вас могут забрать в любой момент.

Второй сервис, который я использовал для создания landing page уже в этом году, — Тильда . Это один из немногих конструкторов лендингов, у которого есть бесплатный тарифный план для одного сайта. Мы вдвоем с другом четыре дня пытались сделать лендинг, но этот сервис оказался не для тупых. Разобраться с ним так и не удалось, как не удалось и сделать то, что мы хотели. Мы испытывали очень неприятные эмоции от работы с этим конструктором. Для сравнения мы попробовали делать то, что не получалось в Тильде, в instapage.com , и все, что нужно было, делалось и получалось без проблем с ходу. Жаль 4 дня моей жизни, которые были потрачены зря!

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

Минусы использования конструкторов лендингов

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

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

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

Самые крутые и популярные платные конструкторы посадочных страниц

• американские: LeadPages , Instapage.com , Unbounce.com ;
• русский Lpgenerator.ru .

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

Обзор популярных конструкторов landing page

Конструктор	Бесплатная версия	Цена в месяц	Кол-во шаблонов
LeadPages.net	Нет	$25-199	160
Unbounce.com	30 дней бесплатно	$79-399	75-375
Instapage.com	14 дней бесплатно	$29-127	200
Pagewiz.com	30 дней бесплатно	$25-169	70
Wishpond.com	14 дней бесплатно	$49-199	100
Landingi.com	30 дней бесплатно	$39-109	100
Lander.com	14 дней бесплатно	$16-149	30
Lpgenerator.ru	7 дней бесплатно	560-11000 р.	300
Platformalp.ru	14 дней бесплатно	490-1990 р.	40
Tilda.cc	1 сайт бесплатно	500-1000 р.	100
Lpmotor.ru	Без публикации лендинга	300-2000 р.	90

Что использовать вместо платных конструкторов лендингов

Идеальный вариант — это создать лендинг пейдж бесплатно. Решений, как создать лендинг бесплатно, множество, все я описывать не буду, а расскажу только про те, которыми пользуюсь сам. А я являюсь фанатом самого популярного в мире бесплатного движка WordPress , на котором создано 27% всех сайтов мирового Интернета и который используют такие популярные сайты, как Блумберг , Форбс , Звездные Войны , Vogue , BBC America и миллионы умнейших людей по всему миру. Это одно из лучших решений на сегодняшний день! Чтобы начать пользоваться WordPress, надо всего лишь бесплатно скачать его и потратить 5 минут на установку, хотя даже этих 5 минут не понадобится, так как на большинстве хостингов WordPress уже предустановлен. Итак, какие есть варианты:

• решение 1: . Их сотни! Выбирайте то, что нравится, и используйте на здоровье свой лендинг бесплатно;
• решение 2: платные шаблоны лендингов на WordPress. Их тоже очень много и стоят они от $30 до $250, которые надо заплатить всего лишь один раз (не ежемесячно!);
• решение 3: бесплатные плагины WordPress — конструкторы лендингов. Таких плагинов немного, но они есть и вполне подойдут для создания лендинг пейдж бесплатно;
• решение 4: платные плагины WordPress — конструкторы лендингов. Таких много, стоят они от $25 до $99 с разовой оплатой, без ежемесячного вымогательства и захвата лендингов в заложники (читайте о захвате лендингов в заложники конструктором лендингов Инстапейдж выше).

Бесплатные шаблоны

В Интернете доступно большое количество бесплатных шаблонов лендингов для сайтов на WordPress. Эти шаблоны созданы в виде одностраничных сайтов, основная цель которых — привлечь внимание потенциальных посетителей и заставить их совершить требуемое действие. Шаблоны WordPress одностраничных сайтов по-другому еще называют темами WordPress для landing page. Это один из лучших способов создать лендинг бесплатно.

Все эти бесплатные лендинги для WordPress хороши тем, что они выполнены профессиональными дизайнерами, очень красивые и если грамотно «допилить» их по свои нужды, то они способны обеспечить высокую конверсию. Кроме того, все эти шаблоны лендингов адаптивны, т.е. имеют мобильную версию и версию для планшетов. И они останутся с вами навсегда, и никто не сможет забрать их у вас. Вот пример такой совершенно бесплатной темы, которую можно сразу же скачивать и устанавливать на WordPress — One Engine :

Посмотрите демо-версию этого шаблона этого лендинга: One Engine Демо . По-моему, отличный шаблон, особенно учитывая, что он бесплатный. Но не факт, что он понравится вам и подойдет под ваши нужды.

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

Не могу не упомянуть родную тему, созданную основателями WordPress, — Twenty Seventeen , которая идеально подойдет, чтобы создать лендинг бесплатно. Она позволяет делать отличные лендинги такого вида: образец лендинга на Twenty Seventeen . Это замечательный лендинг, но, к сожалению, его функционал сильно ограничен, и если он вам не подходит «как есть», то придется нанимать программиста для его доработки. Хотя лучше найти другой бесплатный шаблон лендинга или купить платный шаблон лендинга.

Как установить шаблон лендинга на WordPress

Чтобы установить такой шаблон, Вам надо установить на свой хостинг сайт WordPress, что на большинстве хостингов делается нажатием одной кнопки, а затем установить шаблон (тему) WordPress. Сделать это очень легко! У вас займет это не более 10-15 минут. Узнайте у своего хостера как сделать это. Вы также можете установить WordPress “вручную”, если вам интересно, и это тоже не сложно. О том, как это сделать, подробно написано на сайте wordpress.org в статье: “Установка WordPress “.

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

Минусы бесплатных шаблонов лендингов

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

• время. Вам потребуется время, чтобы разобраться, как настроить и адаптировать под себя бесплатный шаблон одностраничного сайта. Установить его не проблема, а вот на настройку может уйти много времени. Зато это время надо потратить всего один раз, и следующие лендинги на этом шаблоне вы будете создавать намного быстрее;
• ограниченность функционала. Очень часто бывает, что бесплатный шаблон лендинга — это ограниченная версия платного шаблона. Выясняйте это заранее, чтобы не попасть впросак. Как правило, вам должно хватать базового функционала одностраничного сайта для основных нужд. Но все-таки лучше, чтобы это было бесплатной версией при платном шаблоне лендинг пейдж, потому что это гарантирует то, что шаблон будет обновляться, что за ним будут следить;
• отсутствие обновлений. Если у вас полностью бесплатный шаблон, то его автор, скорее всего, не будет обновлять его. Зачем ему? И в течение времени с этим шаблоном могут возникнуть проблемы. Не факт, конечно, но все может быть. В этом случае вам придется нанимать программиста для решения этих проблем. Поэтому бесплатная версия платного шаблона лендинга лучше, потому что ее будут обновлять;
• отсутствие поддержки. Если у вас возникнет какая-то проблема с шаблоном, то не у кого будет спросить, как ее решить. Тоже придется в случае чего нанимать программиста.

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

Платные шаблоны одностраничных сайтов

Платные шаблоны лендингов для WordPress — это так же круто, как и бесплатные шаблоны одностраничных сайтов, но только еще лучше, так у них нет недостатков бесплатных шаблонов лендингов, т.е. они обновляются, есть техническая поддержка и документация, они имеют полноценный функционал. Их настройка отнимет меньше времени, потому что если что-то не получается, то всегда можно обратиться в поддержку. Минус один — это шаблоны лендингов платные., вместе с которой вы получите 88 других прекрасных тем (включая Divi) и все плагины (включая конструктор лендингов) — с поддержкой и обновлениями на один год. Все эти темы и плагины вы можете использовать на любом количестве своих сайтов, тут нет никаких ограничений. Вы можете использовать все это пожизненно, но после того, как истечет один год, вы останетесь без поддержки и обновлений. Поэтому лучше сразу купить пакет с пожизненным доступом за $249. Он содержит все то же самое, но еще и пожизненную поддержку, и обновления. Это очень выгодно. Почему?

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

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

Таким образом, за $249 вы получаете конструктор лендингов c пожизненной поддержкой и обновлениями, что уже неплохо, и плюс к этому 88 шаблонов сайтов, которые тоже можно превращать в высоконверсионные одностраничные лендинги. Еще один плюс: тема Divi переведена на русский язык.

Если Divi вас не устраивает, то вы легко найдете другую платную тему (шаблон) для WordPress — их огромное количество в Интернете. Я изучил все, что только смог найти, и думаю, что достойных тем со встроенным конструктором посадочных страниц всего три: Divi , OptimizePress и Beaver Builder , и я думаю, что Divi — самый лучший выбор, потому что в ОптимайзПресс и БиверБилдер вы получаете за $100 только конструктор лендингов с одним годом поддержки и обновлений, а Divi за $249 дает конструктор плюс 88 тем, плюс пожизненную поддержку и обновления для неограниченного количества сайтов. Худшим из трех конструкторов является ОптимайзПресс, так как его можно использовать только для трех сайтов (Бивер — для неограниченного количества сайтов), да и дизайн их сайта какой-то очень простенький. В общем, мой выбор — Divi , а если не Divi, то тогда Бивер . Но есть еще много других платных тем лендингов и их легко найти в Интернете.

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

Платные и бесплатные плагины WordPress для создания лендингов

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

Сводная таблица плагинов-конструкторов посадочных страниц

Название	Плагин или тема	Активных установок	Кол-во отзывов	Ср. оценка	Цена

Виктория Кучинова

Главная проблема большинства современных лендингов – все они будто сделаны под копирку. А где же креатив, огонь, где дизайнерские безумства?

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

Смотрите, вдохновляйтесь, применяйте понравившиеся идеи на практике, миксуйте их со своими и не забывайте проводить A/Б-тестирования – вот единственно правильный рецепт создания убойных посадочных страниц.

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

Расширенная форма

Обычно на одностраничниках используют стандартную форму заявки с несколькими полями. Чаще всего клиенту нужно указать контактные данные – имя-фамилию, почту или телефон. Но в некоторых сложных сферах лучше раскрыть тему подробнее. Вот как это сделали в «Текстерре»: в форме лендинга dellservers.ru клиент может выбрать модуль, параметры, задачи сервера. Может сбросить значения, если что-то пошло не так.

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

Две кнопки СТА

На лендинге планировщика задач wunderlist.com/ru – сразу два призыва к действию, которые усиливают друг друга: «Создать бесплатную учетную запись» и «Загрузить Wunderlist». Пользователи кликают по обеим ссылкам, конверсия растет, а лендинг выполняет свою работу на отлично.

Конкретные цифры (результаты)

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

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

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

Удобная форма ответа

На многих лендингах и сайтах задать вопрос можно только через форму. А это значит, нужно указывать имя и фамилию, оставлять телефон и электронную почту. Иногда вообще приходится вводить капчи и коды – ужас! Понятно, что это делается для того, чтобы получить лиды. Но есть и другой вариант – как на лендинге «Церебро Таргет». Если вы зарегистрированы во «ВКонтакте», ничего заполнять не нужно – бери и пиши. И клиенту удобно, и владельцу хорошо – контакт оставлен, можно работать дальше.

Отзывы клиентов

Можно попросить клиентов рассказать о своих впечатлениях и опубликовать полученные тексты на лендинге. Но загвоздка в том, что посетитель никак не проверит – реальные это отзывы или фейковые. Лучше пойти дальше и убедить посетителей в этом. На лендинге huskypark.info , который разрабатывала «Текстерра», приводятся слова клиентов из «Инстаграма» со ссылками на их аккаунты. Все честно – зайдите и убедитесь.

Демонстрация результатов

Трехмерная графика и дополненная реальность

Лендинг создан для приложения Qubi . Это игра для детей 3+ лет и взрослых. Суть игры проста. На первом шаге пользователь по предложенной схеме склеивает реальный бумажный, картонный или деревянный кубик.

Потом он устанавливает приложение, открывает его на смартфоне и «смотрит» на кубик через камеру устройства.

На экране смартфона или планшета кубик оживает. Пользователь играет в трехмерный вариант «Змейки», «2048», «Лабиринта». При этом управлять игрой нужно с помощью реального кубика. Чтобы управлять кубиком двумя руками, нужно использовать специальную подставку для смартфона, которую можно собрать самостоятельно.

Трехмерную модель кубика можно увидеть на иллюстрации (gif).

Что хотел клиент

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

Что мы сделали

Мы реализовали трехмерность с помощью 3D-трансформаций CSS3. Переходы между гранями кубика сделаны с помощью чистого JavaScript с отслеживанием событий drag и touch. Благодаря необычным переходам между экранами у пользователя создается ощущение объемности экрана. Это особенно ярко выражено на рабочей версии посадочной страницы.

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

Лендинг полностью адаптивный.

Интерактивный выбор цветов окраски интерьера и мебели

Необычность лендинга «ДСК.Color» заключается в возможности самостоятельно выбрать цвет мебели и предметов интерьера с помощью интерактивной палитры.

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

Самая востребованная услуга – окраска мебели и предметов интерьера. На нее приходится около 80 % работ клиента.

Что хотел клиент

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

Что мы сделали

Мы предложили клиенту идею: дать посетителю возможность самостоятельно выбрать цвет мебели и предметов интерьера.

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

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

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

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

Необычные и обычные прелоадеры

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

Что такое прелоадер и какие задачи он решает

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

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

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

Прелоадеры реализуются с помощью стандартных инструментов фронтенд-разработки: HTML, CSS, JavaScript и дополнительных библиотек и фреймворков, например, jQuery, React.

Как мы улучшаем лендинги с помощью прелоадеров

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

• Qubi

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

• Levellen

На сайте Levellen Interiors мы использовали прелоадер в виде логотипа компании. Это дополнительный элемент брендинга сайта.

На лендинге представлена информация об аренде помещений в бизнес-центре. Главный секрет посадочной страницы находится в разделе «Офисы». Здесь пользователь может посмотреть наличие свободных офисов на каждом этаже здания.

При наведении курсора на свободный офис всплывает кнопка «Подробнее».

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

Особенности реализации

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

Собственно дизайн

В этом примере нет сложных технических фишек и дизайнерских эффектов – весь лендинг вывозит красивая картинка: фон, цвета, аппетитные фотографии астраханской икры. Одностраничник astrahancaviar.ru – хороший пример того, как благодаря дизайнеру продукт хочется приобрести. И немедленно съесть!

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