• 2. Виды лендинг пейдж
• 4. Особенности landing page
  • A/B тестирование посадочной страницы
  • Как должен выглядеть продающий лендинг и что должен содержать
• 5. Налоги с лэндинг пэйджа
• 6. Заключение

Лендинг, что это такое? Многие начинающие предприниматели и люди, которые собираются что-либо продавать интересуются данным термином. Если говорить кратко, landing page является обычной интернет страницей на вашем домене, поддомене в формате по типу html/css или в другом формате. О подобных страницах мы слышали, но никогда, скорее всего, не вникали в их суть и цель.

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

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

Из этой статьи вы узнаете:

• Лэндинг что это такое;
• Какие виды лендингов бывают;
• Как создать лендинг самому и бесплатно;
• Всё про ведение бизнеса и налоги с лендинг пейджа;
• и т.д.

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

В интернет сфере подобные странице имеют различные названия, в частности, их называют: страницами приземления, посадочные страницы, страницами захвата, одностраничными сайтами, landing page и т.д.

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

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

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

Вот несколько работ от них:

• http://olymp.winlanding.ru
• http://verserb1.bget.ru/dom
• http://autogazkz.kz
• http://zub.winlanding.ru

А все портфолио winlanding можно посмотреть здесь.

Особенно выгодно использование landing page следующим организациям:

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

Идеальный пример ЛЕНДИНГА

Таким образом, landing page выгодно использовать многим, кто заинтересован в увеличении клиентской базы и существенном увеличении целевой аудитории.

Основная цель таких страниц, как уже упоминалось, побудить к целевому действию:

• Подать заявку на получении бесплатной консультации;
• Приобрести товар;
• Подать заявку на осуществление разнообразных подсчетов (расчетов);
• Подписаться на какую-либо рассылку;
• Зарегистрироваться на участие в акции;
• Подать заявку на получение прайса;
• И еще масса разных вариантов…

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

2. Виды лендинг пейдж

Существует четыре разновидности «продающей страницы»:

Long page : лендинг пейдж – является длинной страницей приземления. Именно такие типы лендинговых страниц превалируют в интернете.

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

One step : лендинг пейдж – является одношаговой страницой;

Two step : лендинг пейдж – такая страница, соответственно, является двух шаговой. Суть страницы заключается в том, что на one step странице подогревается интерес клиента, а на two step странице происходит непосредственное оформление необходимого действия.

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

Примеры конверсий, в области туристических услуг (популярная и востребованная сфера бизнеса) уровень конверсии в 9-14% является хорошим показателем, а вот в сфере продаж элитных авто, конверсия на уровне 4-14%, не просто хороший, а отличный показатель конверсии в лендинг пейдже.

Минимальная конверсия лендинг пейдж, как правило, колеблется в пределах 1-4%, но не превышает уровня 30-45%. На практике достижение конверсии 25-30% является хорошим показателем.

Неплохой конверсией считается 5-10%. В случае инфобизнеса, конверсия может достигать уровня 25% - 30%.

К ним можно отнести следующие:

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

Средней конверсии не существует. Это связано с тем, что конверсия напрямую зависит от трех вещей:

Непосредственное качество вашей посадочной страницы лендинг пейдж;

Качество трафика, посаженное на соответствующую страницу;

Особенности бизнеса, уровень конкуренции.

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

3. Как создать лендинг пейдж бесплатно

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

www.setup.ru ;

landingi.ru ;

ru.wix.com ;

lpgenerator.ru ;

фриланс сайты - где за 1500-2000 рублей фрилансеры сделают вам landing под заказ.

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

Идеальная «посадочная страница - landing page» - видео

Алгоритм создания Landing Page - видео

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

4. Особенности landing page

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

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

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

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

B&O Play

Беспроводные наушники со встроенной тач-панелью - довольно футуристический девайс, мечта любого гика! Если представить хипстера образца 2050 года, то он будет в наушниках от B&O, Google Glass и верхом на робо-собаке от Boston Dynamics.

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

Brickfielder

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

Converse

Кастомизируйте! Создайте свои собственные кеды! Бренд “Converse” не только подхватил тренд к индивидуализации, но и грамотно его реализовал на своем сайте. Лендинг действительно фантастический, прост в использовании и позволяет настроить каждый элемент обуви. Посмотрите на наше чудовище: кастомные зеленые кеды с красными шнурками и фиолетовым язычком - после продолжительного зрительного контакта есть риск потери сознания, эпилептического припадка, расстройства желудка и выпадения волос.

Quechua

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

Bjorn Borg

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

Ikea

“A Good Day Starts Here” - интерактивное видео, которое презентует мебель и аксессуры для дома из каталога IKEA. Такой подход наглядно демонстрирует продукцию в условиях реальной жизни.

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

Bellroy

Пожалуй, это наш фаворит в этом обзоре. Лендинг Bellroy визуально демонстрирует продукт, создавая представление о том, как его "тонкий бумажник" поможет уменьшить занимаемое пространство в вашем кармане.

Geox

На физическом уровне товара - это просто куб, на котором можно сидеть. А вот на уровне эмоций, оказывается, товар от Sit on Everything приобретает совершенно иное восприятие. Загрузите 6-ть изображений для каждой из сторон этой геометрической фигуры, и ваша пятая точка будет приземляться каждый раз на новое изображение! Возможности для фантазии безграничны!

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

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

Дамы и господа! Знакомьтесь, самые крутые и лучшие продающие лендинги 2017-2018 по версии и популярного сайта behance.net.

Примеры лучших лендинг пейдж

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

Уникальное торговое предложение

Первый пример УТП лучшего лендинга 2019 года - фирма по продаже стульев.

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

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

Следующий пример лучшего, по нашему мнению, лендинга - посадочная страница фирмы по продаже меда

Сочно, ярко, интересно. Очень крутой дизайн первого экрана. При этом уникальное торговое предложение раскрывает главное преимущество - экологичность продукта. УТП написано в мягкой форме, но при этом вызывает доверие.

Следующий пример лучшего лендинга

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

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

Еще один пример крутого landing page

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

Хотите узнать больше о УТП? Читайте статью с рекомендациями по созданию УТП на сайте Импульс Дизайн.

Описание продукции

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

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

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

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

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

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

Лаконичность - лучший друг лендинга. И следующий пример лучшего лэндинга это подтверждает.

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

Выгоды и преимущества на одностраничнике

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

Преимущества

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

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

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

Аналогичное совмещение выгод и преимуществ показывает и следующий лендинг.

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

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

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

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

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

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

При этом компания демонстрирует выгоды для клиента не только тем, что использует во время процедуры качественные продукты, но и намекает о том, что косметика в продаже. Чему и свидетельствует кнопка с СТА.

Блок доверия на посадочной странице

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

Вариант 1. Отзывы

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

Вариант 2. Видео

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

Вариант 3. Фотографии

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

На сладкое. Призыв к действию (СТА)

Первый лендос имеет "сочный" СТА, оформленный в едином стиле с сайтом. Желание сделать заказ усиливается скидкой.

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

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

Завершает наш обзор еще один призыв к действию, оформленный в сочных тонах, привлекающих внимание.

Подведем итоги

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

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

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

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

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

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

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

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

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

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

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

Развлекательные сайты

Просто и со вкусом. Сразу ясна цель страницы — просмотр документального видео.

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

Этот сайт выше всех похвал. Блестяще продуманный дизайн и обилие интерактивных элементов никого не оставят равнодушным.

В дизайне этой страницы, посвященной франшизе о Гарри Поттере, использованы знакомые фанатам цвета, фразы и имена.

Эта страница не только выглядит красиво, она еще и очень функциональна: множество интерактивных элементов, интеграция с Google Maps, использование вкладок.

Uncrate и после редизайна не меняет своей традиции расположения всех разделов сайта в удобном верхнем навигационном меню.

Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.

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

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

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

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

Лендинги-портфолио

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

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

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

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

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

Пример необычного плиточного дизайна.

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

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

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

Страница-портфолио отображает самое главное — примеры работ.

Розничная торговля

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

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

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

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

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

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

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

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

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

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

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

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

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

Что такое Лендинг пейдж (landing page)? Это страница, на которую люди попадают, как правило, после клика по объявлению. Создается под одно предложение: товар, услугу или подписку. Эффективная посадочная страница - краеугольный камень успешного интернет-маркетинга. Товар может быть лучшим на рынке, объявления доведены до совершенства, но без хорошей landing page усилия не дают 100% результата. Она рассказывает посетителям, что предлагается, и почему они должны хотеть это получить. Ощущение срочности способствует быстрому принятию решений и переходу юзера в разряд клиента.

Как создать Лендинг? Неверно полагать, что ответ кроется в умении верстать. Хорошая посадочная страница - результат слаженной работы над целями, текстом, дизайном и кодом. Лендинг пейдж, примеры которых будут ниже, помогут освоить новичкам азы работы с версткой, но не заменят собой конверсионные тексты и понимание ЦА. Также вы можете создавать их с помощью различных конструкторов Лендинг пейдж .

Поэтому перед тем, как создать целевую страницу, спросите себя:

• Что сделает человек после попадания на landing page? Будет ли он что-то покупать? Заполнит форму? Подпишется на рассылку? Прежде, чем отслеживать коэффициент конверсии, определите четкие цели.
• Кто мои конкуренты? На самом деле, это три вопроса: кто, насколько они успешны и как можно применить их достижения? Имитация - самая искренняя форма лести. Если конкуренты делают то, что работает, повторите подобное на своем сайте.
• Кто моя аудитория? Чем лучше вы понимаете свою нишу и ЦА, тем больше шансов, что старания окупятся.

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

Примеры создания лендинг пейдж + кодинг для чайников

Перед тем, как приступить к делу, кратко рассмотрим HTML и CSS. Понимание, как они работают, поможет создать landing.

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

Тег открывается () и закрывается () вокруг начинки:

содержимое

Для точечной настройки после имени добавляются атрибуты:

содержимое

CSS - определяет, как расположить HTML элементы. Состоит из селекторов, свойств и значений:

#селектор {свойство: значение;}

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

5 начальных шагов

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

Выглядит скромно.

Из этой рыбы создается сайт на любой вкус за несколько этапов.

Структура каталогов в папке:

• index.html: Это главный файл, который будем редактировать.
• /assets: здесь лежат вспомогательные файлы:
• /css: каталог содержит стили бутстрап и иконок. Файл, который будем редактировать - main.css.
• /img: папка для картинок сайта.
• /fonts: шрифты иконок.
• /js: яваскрипт-файлы bootstrap.

Шаг 1: Использование заголовка

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

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

Шаг 2. Краткость - сестра конверсии. Добавление преимуществ и тарифов

Потребуется 4 секции:

• преимущества;
• тарифы;
• отзывы;
• призыв к действию.

Оформим раздел основного контента “main”, в который вставим необходимые секции:

…..
…..
…..
…..

Заполняем начинкой вместо многоточий.

Для секции преимуществ потребуется этот код:

Преимущества
Быстро

Надежно

Sed diam nonummy

Выгодно

Elit, sed diam nonummy

Технично

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Надежно

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Выгодно

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Технично

Lorem ipsum dolor sit amet, consectetuer adipiscing

Надежно

Lorem ipsum dolor sit amet, consectetuer adipiscing

Выгодно

Lorem ipsum dolor sit amet, consectetuer adipiscing

Содержимое для наглядности:

Пока смотрится неаккуратно, но поводов для паники нет, продолжаем.

Прописываем расценки. Содержимое меняется по аналогии с первым шагом. Общее описание с классом “tarifs” и три тарифа.

Тарифные планы

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Тариф №1
$10

в месяц/с человека

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Заказать
Тариф №2
$20

в месяц/с человека

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Заказать
Тариф №3
$30

в месяц/с человека

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Заказать

Выглядит так.

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

Шаг 3: Сигналы доверия и призыв к действию

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Установим "призыв к действию".

Выгода при заказе сегодня

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Заказать сейчас!

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

Имя клиента.

Шаг 4: Интеграция с сеткой и Mobile Friendly

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

Содержимое “main” обернем в контейнер. Для этого в его верхней части прописывается:

… .

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

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

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

Выставляем расценки в ряд, применив класс колонок col-lg-4. Внутри строк row уже не обязательно прописывать отдельные дивы для обертывания, можно комбинировать с имеющимися через пробел.

По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок col-lg-offset-2. Цифра в конце определяет, на какое количество базовых столбцов произойдет сдвиг.

Шаг 5. Шрифты и иконки

Мы реализуем шрифты для заголовков Google Font. При выборе открываем вкладку импорт и копируем данные из нее в файл main.css. Также добавляем в файл селекторы заголовков, для которых применяется новый шрифт.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* импорт шрифта для заголовков */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto Condensed", sans-serif; /* Гуглфонт вывод */
}

Для наглядности преимуществам прописан класс с говорящим названием text-center и иконки FontAwesome из набора бутстрапа.

На этом подготовка полностью завершена.

Лендинг пейдж: примеры кодов с предложением, параллаксом и счетчиком

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

Пример 1: с предложением

Установим фон главной части и отступы, чтобы был покрыт первый экран.

Jumbotron {
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Изменим размер заголовка джамботрона с h2 на h1. Далее прописываем стили для элементов, которые нужно изменить.

Начнем с иконок.

Benefits i{
color: #cac4c4;
}

После знака решетки задан цвет. Можно подобрать свой вариант, воспользовавшись таблицами html-цветов или редактором изображений.

Отступы для заголовков секций

section h2 {
padding-top: 30px;
margin-bottom: 25px;
}

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

Тариф №1
$10

в месяц/с человека

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Заказать

И много CSS. За какие места отвечают участки, прописано в комментариях - /* между слешами со звездочкой */

/* =========Tarif styles======== */
/* общий вид тарифа */
.pricing_item {
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;

flex-direction: column;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;

}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #daebef;
}
/* индивидуальная подложка ценника в каждом тарифе */
.pricing_item:first-child .price {
background: #9ba9b5;
}
.pricing_item:nth-child(2) .price {
background: #1f6098;
}
/* на широких экранах отступы и выделение средней колонки тарифа */
@media screen and (min-width: 66.250em) {
.pricing_item {
margin: 1.5em 0;
}
.featured {
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* заголовок */
.pricing_item h3 {
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* подложка ценника */
.price {
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* валюта */
.currency {
font-size: 0.5em;
vertical-align: super;
}
/* уточнение предложения */
.sentence {
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* список */
.pricing_item ul {
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* пункты списка */
.pricing_item li {
padding: 0.15em 0;
}
/* кнопка заказа тарифа */
.pricing_item button {
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* смена цвета при нажатии кнопки */
.pricing_item button:hover,
.pricing_item button:focus {
background-color: #285e8e;
}
/* фон тарифов*/
.bg-2 {
background: #dddddd;
}

Результат

Отзывы клиентов. Придадим им аккуратный вид, обозначим расположение.

/* =========Testimonials styles======== */
testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img {
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p {
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}

Осталось украсить последний призыв к действию и футер.

/* Action */
.action {
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 {
color: #fff;
font-weight: 300;

}
.action p {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container {
margin-top: 3em;
}
/* Footer */
footer {
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p {
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}

Кнопке для футера присвоен встроенный класс бутстрапа btn-default.

Оживляем шаблон. Внедрим плавную прокрутку и кнопки для разделов, а также анимацию текста на первом экране.

Чтобы переходы сработали, часть классов секций заменим на id - для преимуществ и тарифов. А ссылки на id пропишем к кнопкам. Скрин - что к чему привязывается, выделено желтым маркером.

Задаем отступы кнопкам - jbutton. Прокрутка при нажатии работает, но очень резко.

Плавные переходы создаются при помощи javascript или jquery. Последний по умолчанию подключен к шаблонам Bootstrap.

Теперь прокрутка стала плавной.

Добавление анимации к тексту с помощью Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ). Это готовый открытый код, он может использоваться на любом сайте. Файл с гитхаба помещаем в папку css и прописываем путь.

Подбираем эффекты здесь: https://daneden.github.io/animate.css/ . У нас выбран fadeInDown. Прописан в коде так:

Теперь при загрузке или обновлении страницы текст будет анимирован. Готово.

Пример 2: с формой и параллакс-эффектом

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

Собирается по аналогии. Менять будем фоны и цвета. И, разумеется, добавим форму.

Начнем с parallax .

Изменим бэкграунд jumbotron на прозрачный:

background: transparent;

Внутри head вставим скрипт:

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Первой строкой в body ставится контейнер для параллакса:

А в CSS его поведение:

Bgparallax {
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}

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

Делаем меню темным:

Navbar-default {
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}

Заменяем предложение в jumbotron на новое - с кодом формы:

Landing Page превращает посетителей в клиентов
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

И прописываем внешний вид

/* form */
.headform-list {
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform {
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea {
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa {
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li {
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p {
color: #fff;
font-size: 16px;
font-style: italic;
}

Сюда же попал текст джамботрона, так как он требовал перемен.

Перекрашиваем тарифы.

/* общий вид тарифа */
.pricing_item {
background-color: rgba(0,0,0,.4); /* строка изменена */
border-radius: 4px; /* строка изменена */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* строка изменена */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #ddd; /* строка изменена */
}

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

Шаблон готов.

Пример 3: со счетчиком обратного отсчета

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

Html





Время не ждет
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = new Countdown({
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //