Образцы лендинг пейдж. Ясный призыв к действию


Здравствуйте, читатели финансового журнала «РичПро.ru»! Сегодня поговорим про лендинг, что это такое, какие преимущества и недостатки он имеет, и т.д.

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

Итак, что такое лендинг пэйдж? Краткое определение «landing page» можно озвучить следующим образом — это интернет-страница на домене, поддомене в формате html/css (либо другом).

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

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

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

  • Что такое лендинг пейдж и как его использовать;
  • Каковы преимущества landing page по сравнению с обычным сайтом;
  • Как самому создать лендинг бесплатно и продвинуть его в сети;
  • Какие конструкторы лэндингов самые лучшие и где скачать готовые шаблоны;
  • Как заработать на лендинге и какие налоги нужно платить.

Желаем вам продуктивного изучения материалов!

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


1. Что такое лендинг пейдж (или landing page) — его особенности и преимущества 📌

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

  • целевая или посадочная страница;
  • «лендос»;
  • страница захвата клиентов.

Главная задача landing page заключается в побуждении посетителей сайта выполнить какое-то активное действие — позвонить, оставить заявку, приобрести товар, подписаться на рассылку и т.д.

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

1.1. История развития лендинг пейдж

Лэндинг пэйдж придумали в США около 10 лет назад интернет-маркетологи.

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

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


Пример идеального продающего лендинг пейджа

1.2. Цели и задачи посадочной страницы

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

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

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

1.3. Воронка продаж и конверсия

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

Главными критериями, по которым определяется эффективность интернет-ресурса , являются «воронка продаж» и «конверсия сайта» . Разобравшись в сути этих понятий можно узнать уровень ваших продаж. Ознакомимся с данными определениями подробнее.

Конверсия и воронка продаж являются главными показателями эффективности лендинга

1) Конверсия сайта

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

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

Другими словами, конверсия сайта — это своего рода «маркер», отмечающий выполнение необходимых вам требований , а именно:

  • приобретение товара;
  • подписка на рассылку;
  • скачивание определенных файлов;
  • регистрация;
  • другие действия.

Например для туризма вполне нормальным уровнем считается 8-13% . А вот у сайта, на котором продаются элитные шубы, конверсия составляет до 10% , и это считается отличным показателем. (Дело в том, что здешние клиенты имеют более высокую покупательскую способность).

Важно! Как правило, уровень конверсии колеблется от 2-3% до 20-40% . Если конверсия составляет например 20%, то означает, что из ста целевых посетителей, которые зашли на сайт, двадцать выполнили целевое действие.

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

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

2) Воронка продаж

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

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

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

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

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

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

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

Пример — есть два человека, желающих приобрести средство передвижения.

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

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

  • Этап 1. Осознание;
  • Этап 2. Интерес;
  • Этап 3. Решение;
  • Этап 4. Действие.

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

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

3) В случая принятия решения о покупке товара, клиент переходит на следующий этап, в котором ключевая роль отводится ясности и четкости контента. Именно он способен побудить человека совершить покупку либо стать преградой для такого решения.

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

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

Важно! Информация о товаре должна быть специализированной. Ее цель — усилить мотивацию потенциального клиента совершить покупку.

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

1.4. Эффективность страницы захвата

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

Для создания качественной посадочной страницы (до её запуска в интернете) потребуется помощь следующих специалистов.

  • Менеджер проекта. Обозначает конечную цель при разработке лэндинг педж, следит за всеми этапами выполнения технического плана, рассчитывает окупаемость вложенных средств в рекламу, принимает все важные решения.
  • Маркетолог. Его работа заключается в разработке общей стратегии, создании прототипа будущего сайта, эффективных партнерских программ и УТП (уникального торгового предложения). Также определяет перспективность создаваемых концепций и проводит анализ полученных результатов.
  • Веб дизайнер. Взяв за основу утвержденный прототип сайта разрабатывает макет целевой страницы, отвечает за спецэффекты для сайта.
  • Front-end разработчик. Занимается программированием и последующей версткой landing page, проводит тестирование отображения страницы на разных устройствах, корректирует работу форм, предназначенных для отправки заявок и звонков с веб-сайта.
  • Копирайтер. Пишет «продающий» контент, создает заголовки по методу 4U. Также участвует в прототипировании посадочной страницы и оптимизации ее смысловых блоков.
  • SEM Специалист-контекстолог. Проводит анализ семантического ядра, подбирает целевые запросы для поисковиков, настраивает контекстную рекламу, проводит ее анализ и при необходимости доработку (Как собрать мы писали в специальной статье).

    • Только слаженная работа всех специалистов способна создать по-настоящему качественную целевую страницу.

    1.5. Для чего создавать одностраничный сайт - 3 главных преимущества лэндинга

    Рассмотрим основные преимущества landing page по сравнению с другими сайтами и интернет-магазинами. (Читайте также нашу статью — , где вы найдете пошаговую инструкцию по созданию и запуску успешного ИМ).

    Итак, начнем по порядку:

  • Одностраничник поможет увеличить количество посетителей, которые подписываются на новостные уведомления и e-meil рассылки, примерно на 20-30% , по сравнению с обычным сайтом!
  • Повышает на 50% вероятность покупки предлагаемого вами товара!
  • Убеждает посетителей сайта скачать и установить новую программу или приложение!


    • Правила и советы по созданию landing page

    2. 13 базовых правил по созданию своей Landing Page 📎

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

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

    Не смогли побудить посетителя нажать на кнопку «купить»?

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

    • внимание пользователя следует сосредоточить на каком-то одном продукте;
    • рассказывать клиенту о преимуществах только этой конкретной программы;
    • выставить цену со скидкой на один товар;
    • заинтересовать посетителя рассылкой по одной теме.

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

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

    Правило №2. Призыв к действию должен быть ясным

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

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

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

    • Отсутствие побуждения к действию. То есть, посетитель не нашел (не понял), что ему делать на сайте. Человеку не предлагают заказать, подписаться, узнать больше и т.д. Качественный лэндинг должен содержать конкретные призывы к кому-либо действию . Если на странице отсутствует «большая красная кнопка», на которой написано слово «купить», такой лэндинг не принесет желаемого результата;
    • Большая загруженность страницы, которая сбивает с толку посетителя. Человек не может понять, что ему конкретно предлагается. Множество наляпанных деталей, куча ненужной анимации и т.п., вызывают у пользователей только раздражение . Каждый такой элемент пытается привлечь к себе внимание человека. В итоге главный призыв к покупке либо подписке теряет свою значимость.

    Данные советы будут способствовать росту продаж вашего товара.

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

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

    Правило №3. Делайте продающие и цепляющие заголовки

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

    Примеры продающих заголовков: Если Ваш товар — люминесцентные лампы? Вот заголовок — «Экономьте энергию в 4 раза эффективнее» . Нужно пригласить толстушек в фитнес центр? Напишите в заголовке их мечту — «Кто хочет фигуру телезвезды?» .

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

    Правило №4. Используйте разумно составленный продающий текст

    Текст — это первоочередное.

    Важно! Заказывать дизайн лэндинга следует только после окончательно составленного качественного текста.

    Для написания первоклассного текста необходимо:

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

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

    Не нужно опасаться больших текстов, если:

  • Продукт неизвестный и сложный. Клиенту потребуется в подробностях описать каждое его преимущество. Привести много примеров, которые станут доказательством пользы товара.
  • Продукт дорогой. Чтобы заинтересовать человека, придется взять на «вооружение» все суперспособности лэндинга — скидки, подарки, гарантийное и послегарантийное обслуживание, кейсы, отзывы .
    • Правило №5. Оформляйте тексты правильно

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

    При оформлении текста следует придерживаться следующих рекомендаций:

  • Читаемый шрифт — 16 кегль. (Open Sans, Garamond, Georgia, PT Serif, Arial) .
  • В строке не должно быть более 80 символов.
  • Каждые 3-5 строк должны оформляться абзацем.
  • На каждые 2-4 абзаца необходим подзаголовок. Подзаголовки необходимо составлять таким образом, чтобы пользователь прочитав его, смог без труда понять о чем пойдет речь в последующем абзаце .
  • Обязательное наличие таблиц, цитат, списков (нумерованных либо маркированных).
    • Правило №6. Поменьше агрессивной рекламы!!!

    Три восклицательных знака в конце являются одним из признаков агрессивной рекламы. Помимо этого, есть еще «CAPS LOCK».

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

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

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

    Правило №7. Грамотная структура лендинга

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

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

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

    Правило №8. Лендинг должен быть релевантным - это очень важно!

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

    Релевантным лэндингом называется интернет-страница, которая соответствует ожиданиям посетителя.

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

    Правило №9. Нужно быть готовым к возражениям

    Примерно 9 из 10 клиентов перед тем как совершить покупку, обдумывают свое решение . Люди опасаются мошенников, боятся за собственную безопасность.

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

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

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

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

    Правило №10. Используйте принцип дефицита и эффект срочности

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

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

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

    Пример: Нужно постараться сделать так, чтобы алгоритм действий или мыслей покупателя был следующим: «Вчера в наличии было 100 хлебопечек со скидкой 50% , сегодня с утра уже 33, а ближе к обеду осталось только 5 штук. Надо срочно покупать, пока товар еще есть!»

    Правило №11. Убедите посетителя в вашей надежности

    Элементы доверия лучше размещать около призывов к действию.

    • Использование кнопок социальных сетей — создание группы (страницы), список подписчиков в группе ВК, лента твитов, лайки в Фейсбук. ( и раскрутить мы уже писали в нашем прошлом выпуске")
    • Публикации отзывов вместе с ссылками на компании либо людей , которые их оставляли.
    • Отображение сертификатов, наград. При необходимости все документы должны открываться в полном размере и легко читаться.
    Правило №12. Отсутствие сложных форм для заполнения на сайте

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

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

    Не мене распространенной проблемой является сложная капча!

    Капча — это всплывающая форма для внесение набора определенных символов (цифры и буквы). Заполняя капчу посетитель подтверждает, что он не робот .

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

    Не нужно использовать капчу . Пусть она будет у ваших конкурентов.

    Правило №13. Простота и доступность восприятия

    В этом правиле представлена суть всех предыдущих правил.

    Важно! Следует заказывать простую целевую страницу .

    Она должна быть:

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

    Идеальный Landing Page – это страница, которую можно получить путём тестирования, корректировки и замеров эффективности.


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

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

    Рассмотрим все преимущества и недостатки самостоятельного создания landing page:

    Плюсы (+)

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

    • Минусы (-)

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

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

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

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

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

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

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

    Заплатив за услуги 5-15 тысяч рублей, ваши продажи могут увеличиться на 2-3 единицы в сутки . За год набежит вполне приличная сумма, которая значительно превысит сумму, потраченную на «апгрейд» вашего сайта.

    Важно! Повышение конверсии всего на 0,5% способно за год принести миллионные прибыли.

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

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


    4. Современные конструкторы лендинг пейдж 🛠 — ТОП-3 самых лучших

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

    Конструктор лэндингов №1. "LPgenerator" (lpgenerator.ru)

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

    Цена простого тарифа — 2156 рублей в месяц. Данный тариф предполагает ограничение на количество посетителей — 9 тысяч в месяц.

    Есть тариф без ограничений . Его стоимость составляет 4000 рублей в месяц.

    Цены дороговаты, однако многие говорят, что Lpgenerator этого стоит.

    Конструктор лендингов №2. «Флексби» (flexbe.com)

    Конструктор сайтов «Flexbe» считается одним из самых надежных и простых конструкторов лэндинг пэйдж. Есть бесплатная версия , которая действует 14 дней. Этого времени вполне достаточно для оценки удобства конструктора и его соответствия вашему бизнесу.

    Самый доступный тариф — 750 рублей в месяц. В тариф входит: домен — 1, страницы — 10, СМС уведомления — 250, техническая поддержка, собственный почтовый ящик, бесплатный домен.RU и др.

    Наиболее дорогой тариф стоит 3 000 рублей в месяц. В него входит неограниченное количество доменов и страниц, 1000 СМС уведомлений и др.

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

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

    Конструктор лендингов №3. "LPTrend" (lptrend.com)

    «LPTrend» — понятный конструктор лэндинг пэйдж, который подойдет для новичков . Сервис может предложить 61 готовый шаблон с ограничениями по верстке.

    Имейте в виду! Создание лэндинга с нуля здесь не предусмотрено . Отсутствует интеграция с другими сервисами.

    Из функционала есть А/В тестирование, вкладка «полезные сервисы» , которая имеет ссылки на различные инструменты.

    Пробный период составляет 15 дней. Достаточный срок для проверки возможностей сервиса.

    Самый дешевый тариф — 500 рублей в месяц. Возможна генерация одной посадочной страницы.

    За самый дорогой тариф придется выкладывать по 2000 рублей в месяц.

    Подписка на премиум тариф дает возможность создания неограниченного количества landing page.

    Другие онлайн-конструкторы landing page

    Существует еще пару конструкторов сайтов, на которые стоит обратить внимание :

    «Базиум» — довольно неплохой конструктор сайтов. Сервис предлагает почти 400 вариаций дизайна, 53 блока и 27 разных настроек, способных полностью удовлетворить все потребности. Из положительных моментов особенно можно выделить возможность оплаты услуг по мере использования. За данный сервис придется платить 35 рублей в сутки .

    «Tilda» — предлагает модульную систему. Самый дешевый тариф стоит 500 рублей, при условии оплаты за весь год. Если оплата будет производится ежемесячно, в таком случае стоимость тарифа будет составлять 750 рублей.

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

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

    • landingi.ru;
    • www.setup.ru;
    • lpgenerator.ru;
    • ru.wix.com;
    • Создание лендингов (одностраничных сайтов) под заказ за небольшую сумму на фриланс сайтах (от 1000 р. и выше).
    6. Примеры лучших продающих лэндинг пейдж 📰

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

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





    7. Шаблоны Landing Page - где скачать + пошаговая инструкция по установке 📝

    Структура посадочной страницы состоит из нескольких элементов:

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

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

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

    Однако говорить о нормальном бесплатном лэндинге не приходится. В большинстве своем такие предложения — просто мусор . Достойных вариантов очень мало. Качественные шаблоны Landing Page можно попробовать найти на популярных лендинг-платформах (например, lpgenerator, wix и пр.)

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

    1. Nest Thermostat

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

    2. Boy-Coy

    Сайт дизайнерской студии, после которого вы вряд ли захотите даже искать предложения конкурентов. Четырехэкранный лендинг способен убедить обратиться именно к этим ребятам, даже если вы не прочитаете ни отзывов, ни списка компаний, с которыми сотрудничала студия. Скорее всего, вы просто пролистаете, любуясь эффектом параллакса и сами того не заметите, как начнете вносить свои данные в симпатичную форму обратной связи.
    http://boy-coy.com

    3. Водка «Валенки»

    Еще один пример красивого landing page с эффектом параллакса. Сугубо имиджевая страница, не заставляющая немедленно совершить покупку, но создающая положительный образ у целевой аудитории. Заметьте, информация о качестве продукта представлена в достаточном объеме, но её можно и упустить, наблюдая за тем, как красиво плавают кубики льда. Тем не менее, нужный эффект уже достигнут. Этот сайт слишком красив, чтобы предлагать что-то некачественное – такой подсознательный вывод возникнет у каждого посетителя любого со вкусом сделанного сайта.
    http://www.valenkivodka.com

    4. Интернет-магазин плюшевых медведей

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

    5. Smart Progress

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

    Примеры продающих лендингов с высокой конверсией 1. Производство и монтаж деревянных окон

    Как известно, лендинг не должен перегружать посетителя, а сразу давать ему то, за что можно зацепиться и оформлять заявку. Спорить не будем, но некоторые товары требуют тщательного выбора, и одним-двумя блоками тут не отделаешься. Лендинг данного производителя окон пошел по программе максимум и коснулся таких подробностей, о которых мы при выборе окон и не задумываемся. И хотя в паре блоков, как нам кажется, случился информационный перегруз, все равно эта страница является хорошим примером большого лендинга.
    http://goodwin-nnov.ru/

    2. Страхование КАСКО

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

    http://простокаско.рф

    3. Франшиза развлекательных аквариумов-автоматов

    Хороший пример продающего лендинга, обеспечивающего высокую конверсию за счет того, что четко объясняет выгоды потенциальному клиенту, но и оставляет интригу, желание узнать подробности бизнес-плана, обещающего пассивный доход. Дизайнеру – наша отдельная похвала.
    http://morewishes.ru

    4. Ремонт ноутбуков

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

    В этой статье мы рассмотрим 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 у нас .

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

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

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

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

    Пример продающего сайта № 1

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

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

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

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

    Пример лендинга № 2

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

    Разжигается интерес критериями.

    Профессиональные и яркие фото и видеоматериалы еще сильнее разжигают интерес к услуге.

    "Дожимаем" посетителя рядом преимуществ и закрываем потребности, вызываем "желание".

    Логический завершающий структуры AIDA - блок "действие".

    Пример лендинг пейдж № 3

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

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

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

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

    Пример страницы лендинга № 4

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

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

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

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

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

    И фотография директора компании с его обращением к клиенту.

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

    Пример посадочной страницы № 5

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

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

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

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

    Пример удачного лендинга № 6

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

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

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

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

    Пример посадочной страницы № 7

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

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

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

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

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

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

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

    Пример продающего сайта landing page № 8

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

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

    Блок выгод акцентирует внимание на удобство сотрудничества.

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

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

    Пример landing page № 9

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

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

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

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


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

    Напутственные слова

    Современный пользователь, изощренный бесчисленным количеством продающих страниц, попадающимся ему на глаза, уже устал от однотипности. Сегодня в моду вошла уникальность, чем интереснее и необычнее лендинг, тем выше вероятность того, что он привлечет внимание юзера. К тому же, хороший и эксклюзивный дизайн - это всегда плюс: и посетителя удивить, и себя порадовать. А приятно удивленный посетитель, как минимум, +10% к конверсии. Желаем оригинальных и вкусных идей! А если с этим возникли трудности, вы всегда можете заказать landing page в нашей веб-студии.

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

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




    

    2024 © gtavrl.ru.