Я уже некоторое время работаю с дизайном лендингов и накопил теоретическую и практическую базу. В целом эта статья не претендует на педивикию, но способна раскрыть пару моментов.
Итак, повторюсь, эта статья нацелена в первую очередь на заказчиков.
В последнее время ко мне стали обращаться клиенты за аудитом лендингов. Я честно всё оцениваю, причем не с целью переманить клиентов, а с целью разобраться в вопросе.
ЧТО ТАКОЕ ЛЕНДИНГ И ЗАЧЕМ ОН НУЖЕНЛендинги традиционно пришли к нам с Запада. Изначально они мыслились как новый маркетинговый инструмент - эдакий баннер во весь экран. Задачи у классического лендинга две: либо проинформировать потенциальных клиентов о новом товаре или услуге, либо заставить их совершить некое целевое действие.
Методом проб, ошибок и А/Б тестов выяснилась наиболее оптимальная схема лендинга:
1. Логотип и основная деятельность компании.
2. Заголовок. Собственно к чему всё это.
3. Коротенечко описание и картинка.
4. Блок преимуществ.
5. Для целевого лендинга - обязательна форма.
6. Желательно ограничение по времени или количеству.
Итак, смысл лендинга - коротко и ясно сделать выгодное заявление.
А ОДНОСТРАНИЧНИКИЭто тоже относительно свежая тема. Одностраничник - это сайт, но без отдельных страниц. Вся информация просто вываливается на одну "простыню". Меню работает только в рамках этой одной страницы.
Отдельными блоками, а часто просто строками на всю ширину экрана выводится информация о компании, команда, услуги, портфолио, контакты и так далее.
НУ И В ЧЕМ ПРОБЛЕМАДля меня, как веб дизайнера и веб аналитика, проблема оказалась в том, что большинство лендингов в рунете - это одностраничники. Клиенты, полагая, что они не зря платят бабки, активно давят на разработчиков и не понимают, что идеальный лендинг должен умещаться в один экран.
Разработчики, пытаясь оправдать оказанное им высокое доверие, в панике лепят лендинги дикой длинны, мешая всё в одну кучу, щедро перемежая малоинтересные блоки с экшн элементами.
Таким образом, проводя аудит лендингов, я постоянно натыкаюсь на одностраничники. Я не против них, я против тупого накидывания блоков да побольше да ещё.
ЛЁГКИЙ СТОРИТЕЛЛИНГСлучай раз.Прислали мне лендинг на осмотр. Всё вроде бы ничего, однако сразу под лого идет полоска с меню. Думаю - навигация неплохо. но оказалось, что меню уводит на основной сайт в том же окне.
Помимо дизайна, верстки и программирования, компания-разработчик ещё и некоторое время продвигала этот лендинг. Результат: за два месяца 1 звонок и всё.
При этом, кстати поставили колбэкхантера (ничего личного, но на лендингах бесит неимоверно), а вот метрику забыли. Ни статистики, ни вебвизора.
Случай два.Одни клиенты заказали лендинг у масковскава дизайнера. Вроде бы тоже туда сюда. Но разработчик переборщил с анимацией блоков. Забавно, не спорю. Но в итоге мотаешь пустую страницу на которой глаз успевает заметить только края появляющихся блоков. Даже блоки действий не пожалели.
Собственно, результат аналогичный - звонков нет, в продвижение вложены деньги. Метрика хоть была - можно было потыкать пальцем)
Смысл этой сцены1. Соблюдайте баланс между количеством и разумом.
2. Ставьте статистику, особенно перед продвижением.
3. Займитесь сначала маркетингом.
Всё, всем спасибо. Кто хочет внести свои пять копеек - прошу.
Бесплатно за репост в ФБ или ВК, потому что пока ещё набираю интересные кейсы.
Здравствуйте! Люди, которые интересуются бизнесом в интернете, наверняка хоть раз слышали термин «Landing page». Многие даже представляют, что это такое. Но о смысле лендингов задумывался далеко не каждый, а зря, ведь это действительно эффективный метод продвижения товаров и услуг в интернете. Об этом мы подробно расскажем в данной статье.
Что такое Landing pageLanding Page – одностраничный сайт, который выполняет одну определенную задачу. Разработчики должны донести четкую мысль до посетителей, и побудить их к совершению какого-то определенного действия. Чаще всего используется в интернет-продажах из-за того, что способен сфокусировать внимание пользователя на одном товаре и не отпускать его до самого конца.
У Landing Page есть несколько общепринятых названий, которые можно встретить в разной литературе:
- Лендинг;
- Ленд;
- Посадочная страница;
- Целевая страница.
Лендинги чаще всего используются для продвижения одного, конкретного товара. Изредка используется группа товаров, которые выполняют одинаковые функции. Использование лендингов позволяет увеличивать продажи на 20-30%, в сравнении с обычными интернет-магазинами.
Основное отличие Лендингов от полноценных сайтов – масштаб. Ленд – одностраничник, который содержит только основную информацию. В нем нет дополнительных блоков, ссылок, большого объема текстов – всего того, чем пестрят и привлекают внимание сайты.
Отличительные особенности ЛендинговГлавной особенностью Лендингов является полное управление вниманием посетителя. Работу Лендингов в этом отношении можно сравнить с магазинами. Есть определенные зоны, и дорожка, по которой маркетологи магазина ведут своих покупателей. В небольших магазинах алкоголь или овощи стоят в самом начале, чтобы человек сделал свою покупку, а на пути к кассе через основной зал сумел прихватить что-нибудь еще.
Существует еще много правил: быстрореализуемая продукция занимает гораздо больше места, мелочи типа жвачки должны быть в конце и т. д. Но суть одна — клиента ведут по четко определенному пути, подталкивая совершать определенные покупки. Примерно то же самое делается и с Лендингами.
Создатель ведет своего потенциального покупателя по пути, который сам для него определил. Никаких лишних блоков информации, ссылок и переходов, только то, что может совершить то действие, для которого . Вначале идет информация, раскрытие темы, постепенное подталкивание к выполнению одного действия, в середине – побуждение к действию, и в конце – закрытие на какое-либо определенное действие, чаще всего на то, чтобы клиент оставил свои контактные данные.
Одностраничники выгодно использовать для:
- Продажи одного вида товара;
- Оптовых продаж;
- Продвижения ;
- Продаже уникального товара;
- Платного обучения;
- Туристических фирм;
- Фитнес-тренеров и салонов.
К прибегают, когда клиенту необходимо предоставить либо много информации, либо продать много товаров или услуг. Интернет-магазины все еще остаются востребованными из-за того, что в них содержится большое количество товаров, а следовательно, и продажи по ним идут значительно лучше по одной какой-то группе. А еще один интернет-магазин гораздо проще в управлении чем 10-15 одностраничников.
Помимо продаж, сайты и лендинги могут соперничать в области создания визиток для бизнеса. Для компаний без вариантов подойдут только полноценные сайты, ведь они должны предоставить много информации, побудить к сотрудничеству и рассказать о себе как о надежном партнере. Но для частных лиц больше подходит продвижение через одностраничники ввиду того, что они менее требовательны к оформлению, дизайну и деньгам, нежели обычные сайты.
А еще, лендинги гораздо легче закрываются на совершение уникального действия, нежели обычные сайты. Увеличение будет порядка 10-20%, от общей массы клиентов, что довольно неплохо для относительно небольших вложений.
Итак, создавать лендинг нужно тогда, когда в продаже имеется один или группа уникальных товаров или услуг, которые планируется продавать оптом или в розницу.
Основные правила для создания целевой страницыТеперь о самом главном. Основные правила для того, чтобы создать эффективно работающую целевую страницу.
Только один товарРазработка landing page ведется под один конкретный товар. Это правило – основополагающее. Благодаря ему количество продаж с лендингов намного превышает спрос на аналогичные товары в интернет-магазинах. Когда все внимание посетителя приковывают к одному товару, у него нет выбора, нет возможности подумать, выбрать или оттянуть время.
Часто, когда на сайте есть несколько товаров, клиент теряется в выборе, оставляет себе какое-то время на размышление, а через какое-то время передумывает и покупает что-то совсем другое. Лишая посетителя выбора, мы ставим его в такое положение, когда все решили за него.
Ясный призыв к действиюСогласно статистике, около 80% потенциальных клиентов отсеиваются в первые 20 секунд, после прихода на сайт. Причины можно называть разные, но суть у них одна — клиент не понял, что ему нужно сделать. Соответственно, на лендинге изначально должен быть призыв к действию, которые смог бы показать клиенту, что здесь продается.
Основная ошибка – отсутствие яркого побуждения к действию. В конце лендинга всегда должно происходить закрытие клиента на совершение определенного действия. Если клиент этого не понимает, то возникают проблемы с тем, что посетитель заинтересовался товаром, но как его получить, он не понял и ушел к конкурентам, у которых на сайте просто-напросто будет призыв и объяснение действия.
Как сделать призыв к действию более ясным:
- Сделать большую красную кнопку заказа. Маркетологи проводили исследование и выяснили, что красный цвет больше всех побуждает к совершению определенного действия;
- Просто и ясно излагать мысли на сайте. Клиент, столкнувшись со сложными конструкциями, довольно быстро заскучает и закроет сайт;
- Отсутствие всего, что может сбить внимание;
- Конкретные выгоды от использования товара должны быть на виду. А рядом с ними еще одну красную кнопку заказа товара.
Первое, за что уцепится взгляд клиента – заголовок. Задача лендинга – удержать его внимание, плавно переместив в нужные места, и в конце его закрыть. Но все начинается именно с заголовка. Хороший заголовок должен указывать на проблему клиента, и сразу же предоставлять её решение.
Отличный заголовок был на сайте, который продавал двери-сейфы: «Мы продаем спокойствие». Они четко нашли проблему клиента – опасение по поводу безопасности, и предложили решение. Именно по этой схеме должен работать любой заголовок посадочной страницы.
Только продающий текстДизайн лендинга это очень важно. Но на первом месте все же стоит текст. Именно за него цепляется в первую очередь взгляд потенциального покупателя. Именно после его прочтения создается основное впечатление о товаре. И именно с текста начинается создание лендинга.
Для того чтобы , нужно либо воспользоваться услугами хорошего копирайтера, или писать самостоятельно, путем проб, ошибок и редактирования.
Чтобы создать хороший текст, надо:
- Составить портрет целевой аудитории . Пол, возраст, потребности, увлечения, страхи, стремления и т. д. Нужно ответить на как можно большее количество вопросов о потенциальном покупателе. Это делается для того, чтобы можно было воспользоваться слабыми местами покупателя и показать, что товар сможет ему помочь;
- Вовлечь посетителя в диалог . Это еще сложнее, чем составление портрета. Несмотря на то, что текст на одностраничнике будет монологом, нельзя дать возможность клиенту заскучать просто читая текст. Важно говорить с клиентом, и желательно на одном языке.
Гуру интернет-маркетинга продолжают заявлять о том, что текст – одна из самых основных составляющих хорошего лендинга. Даже большие страницы могут быть достаточно живыми и привлекать клиентов, если на них расположен грамотный текст. Нельзя дать посетителю возможности заскучать, переключить внимание или передумать. Нужно оставлять его на одной волне, постепенно отвечая на его вопросы, отрабатывая возражения и призывая к действию.
Не нужно бояться больших текстов. Для уникальных и дорогих товаров, которые редко можно встретить на рынке, объемные описания – то, что нужно. Они должны ответить клиенту на все вопросы о товаре, компании и побудить купить продукт. Информативность текста – главная составляющая.
Грамотное оформление текстовВажно не только написать хороший текст, но еще и оформить его. Важно, чтобы цвет шрифта был нейтральным, по отношению к фону и глазам посетителя. Яркие, маленькие и слишком большие буквы не подходят. Подойдут тона средней яркости и шрифты с 18 кеглем.
Некоторые создатели одностраничников грешат слишком кричащей рекламой. Большое количество заглавных букв, восклицательные знаки в конце некоторых предложений и прочая «реклама» подобного рода заставляет думать о том, что здесь что-то не так. А завсегдатаи интернета часто пугаются большого шрифта, ведь он символизирует повышение тона.
Поэтому дизайну текста нужно также уделять немало времени и сил.
Дизайн и структура лендингаМинимализм в моде. Это высказывание касается и лендингов. Для того чтобы целенаправленно и не отвлекая внимания вести клиента по заранее уготовленному коридору, нужно составить его правильно, без лишней воды и любых деталей, которые отвлекают от основной задачи.
Основная задача лендинга и дизайна – привлечь внимание к определенным словам. Нужно акцентировать внимание на преимуществах товара, надежности компании и совершении целевого действия самим клиентом.
Не стоит забывать, что кнопки ярких цветов (чаще всего красные) повышают конверсию, в сравнении с менее вызывающими тонами (к примеру, зеленым) на 12-15%.
Релевантность лендинга поисковому запросуТоже достаточно важный показатель, который будет напрямую влиять на количество клиентов, пришедших по рекламе и купивших товар. Соответственно, если в рекламном баннере или поисковом запросе будут часы определенной модели со скидкой в 50%, то на сайте должны быть именно эти часы, и именно с такой скидкой.
Ограничение сроковДостаточно распространенная схема, которая заставляет клиента определяться как можно быстрее – ограничение сроков продажи товара. Часто, для этого используются ложные фразы о том, что товар скоро закончится, таймеры скидок, и так далее. Все, что может дать понять клиенту о том, что товар скоро иссякнет, или выгодное предложение закончится.
Это еще один способ заставить потенциального клиента совершить определенное действие и закрыть его. Так, посетитель решается возможности думать большое количество времени, у него меньше шансов передумать, и как следствие, вероятность покупки повышается в несколько раз.
Отработка возражений клиентаКонечно, всех продажников учат, что не каждый клиент – покупатель. И это действительно правда. Не стоит гнаться за каждым посетителем сайта, которые считают, что товар дорогой, ненадежный, или что-то подобное. Но при этом, отработать все потенциальные возражения, хороший лендинг обязан.
Возражения отрабатываются чаще всего в двух направлениях: обоснованность цены товара и надежность продавца. И если с ценой часто проблем не возникает, ведь есть «ограниченное предложение», о котором говорилось выше, то с надежностью продавца постоянные сомнения придется развеивать.
Самый простой способ – давать протестировать продукцию в течение нескольких недель. Но этот способ не работает, если осуществляются продажи чего-либо, кроме программ и обучающих материалов в интернете. Но нужно убедить клиента в том, что компания – образец надежности. Для этого неплохо подходят отзывы, официальные реквизиты компании, схема проезда и так далее. Они позволяют понять, что это не мошенники, а вполне реальное зарегистрированное юридическое лицо.
Отсутствие сложных форм заполненияОдна из самых главных ошибок новичков. Иногда в лендинге делают такую неудобную форму для заполнения, которая напрочь отбивает желание заказывать продукт, даже если он уже понравился. Для того чтобы облегчить своему потенциальному клиенту жизнь, достаточно просто попросить его оставить телефон, и тогда уже после этого позвонить ему, уточнив все вопросы по телефону.
Также, не стоит забывать, что по многим направлениям преобладает мобильный трафик. А на мобильном телефоне очень сложно будет заполнить много необходимых полей в заявке. Именно поэтому нужно использовать по минимуму информации от клиента, и только связавшись с ним, уточнить детали.
Главное – помнить, что лучшие лендинг пейдж создавались далеко не сразу. Они являются трудом постоянного анализа и подбора лучшей стратегии для продвижения товара или услуги, и постоянного метода совершенствования продаж.
ТОП-5 конструкторов для создания лендинговИли доверить это дело профессионалам – выбор каждого. Каждый из этих способов имеет ряд плюсов и минусов, но только самостоятельно можно понять, как работать с рекламой, анализом продаж и изменениями в дизайне или тексте лендинга.
Для тех, кто хочет самостоятельно создавать лендинг, но не знает, как – топ 5 конструкторов:
№1: Начнем с самого популярного конструктора сайтов – WIX . Он по праву считается самым популярным в мире. На Российском рынке даже активно рекламируется в период 2012-2017 годов, благодаря чему на территории СНГ сумел стать почти монополистом в сфере быстрой разработки сайтов. Это бесплатный конструктор, который позволяет создавать лендинги с помощью более чем 400 различных шаблонов.
Простой и удобный дизайн, а также интересные инструменты. Имеет бесплатный тариф, позволяющий оценить основные моменты создания, а также дополнительные, платные тарифы, которые убирают рекламу – от 8 долларов в месяц. Что касается , то и здесь дела обстоят достаточно неплохо. Сайты, сделанные с помощью этого конструктора, достаточно неплохо индексируются и выходят в топ. Из минусов – слабая возможность сверстать сайт под мобильные аппараты.
№2: Чуть менее популярный условно бесплатный конструктор, от создателей легендарного Ucoz – uKit . Также как и WIX, предлагает большое количество шаблонов, которые разбиты на 25 различных тематик. Возможность бесплатно использовать различные виджеты. Существуют конкретные тематики для посадочных страниц. Одна из самых удобных функций, которая пригодится не только для лендингов, но и интернет-магазинов – дублирование страниц. С её помощью можно на одном сайте (или в нескольких разных) создавать одинаковые страницы, лишь немного изменяя содержание.
Что касается продвижения, то тут дела обстоят намного лучше. Очень удобная функция – «Продвижение», которая в автоматическом порядке рассчитает, готов ли сайт для сео. Новым пользователям предоставляется тестовый период на 14 дней, после этого нужно оплатить один из 3-ех тарифов. Минимальный – 200 рублей в месяц, максимальный – 600 рублей в месяц.
№3: Теперь конкретно о конструкторах для посадочных страниц. Одна из самых популярных — lpmotor . В России, на начало 2017-ого года, зарегистрировано более 385 тысяч сайтов с помощью этого конструктора. Пользователю предлагается на выбор 46 узконаправленных шаблонов и возможность самому из 9 блоков построить свой лендинг с уникальным дизайном.
Есть возможность проработать все поля, требуемые для хорошего лендинга, вроде отзывов, призыва к действию, основной информации, а также привязать и синхронизировать электронные кошельки. Также система сама в автоматическом режиме будет тестировать количество посетителей, формировать воронку продаж и выдавать статистический анализ. В целом – очень удобный конструктор для тех, кто хочет быстро начать продажи. Бесплатный период распространяется только на создание, чтобы поисковики индексировали сайт, нужно выбрать один из тарифов. Минимальная сумма тарифа – 300 рублей в месяц.
№4: Следующий конструктор только для лендингов — lpgenerator . Многофункциональный конструктор для продвинутых пользователей. Шаблонов для создания в бесплатном доступе не в пример больше, при этом на сайте еще есть магазин, который позволяет купить различные шаблоны. Средняя цена неуникального шаблона составляет 5 тысяч рублей, уникальный же обойдется гораздо дороже – 30 и более тысяч рублей.
Сервис обладает широкими возможностями, но новичку их все не реализовать. Из интересных моментов – возможность запустить до 50 лендингов, подключение автоматически всех виджетов и кошельков, возможность настроить до 5 вариантов одного лендинга и отследить конверсию по каждому. Цены достаточно высоки – от 1700 рублей в месяц за базовый тариф. Новым пользователям предлагается пробный период – 7 дней.
№5: И последний конструктор в нашем списке – Bloxy . Достаточно интересный конструктор лендингов с базой в более чем 100 различных тематических шаблонов. Есть несколько общих, сделанных довольно привлекательно. Опытные пользователи смогут сами создать свой вариант лендинга.
Существует уже привычная возможность привязать кошельки, протестировать страницы путем создания копий, анализ посетителей, продаж.
Выбирать конструктор нужно исходя из потребностей и возможностей. Для новичков могут подойти и простые бесплатные конструкторы сайтов вроде wix и ukit, но профессионалам все же стоит обращать внимание на специализированные сервисы, а особенно на lpmotor, bloxy и lpgenerator.
Где заказать качественный langing page недорогоЕсть множество студий, где можно заказать посадочную страницу. По сути можно обратиться куда угодно. Но на нашем сайте есть специалисты, кто сделает лендинг напрямую, без студийных наценок. В итоге вы получите высокое качество за невысокую цену.
Примеры лучших landing pageТеперь разберемся на конкретных примерах о том, . Это будут лендинги студий, со средним чеком более 120 тысяч за один сайт. Именно к их уровню нужно стремиться в будущем.
Первым на очереди сайт компании, продающей шубы в Дубаи: «lamafurs». Заслуживает особого внимания момент, представленный на фотографии ниже. Это своеобразная отработка сразу двух популярных возражений и опасений клиента.
Достаточно интересный лендинг в плане оптимизации и построения текстов. Возникает ощущение, что сайт ведет своеобразный диалог с посетителем, продолжая мотивировать его купить шубы именно в этом магазине.
Следующий пример в списке посадочных страниц – «Медиатренинги». Сайт, продающий тренинги для бизнесменов об ораторском искусстве. Две девушки учат говорить. Сайт уже не говорит с клиентом, но при этом рассказывает все на языке клиентов – обычных бизнесменов, без лишнего пафоса, но и без шуток.
Пристального внимания заслуживает именно этот блок информации. Здесь рассказывается о двух девушках ведущих. Яркие тона говорят о вкусе этих дам, а оригинальный дизайн позволяет ознакомиться подробнее с информацией о каждой из них. До выбора Ирины он выглядел так:
Последний, и самый неоднозначный из сайтов топа — «Жопокач». Креатив начался прямо с регистрации домена. Встретив такой хоть раз на просторах Рунета, пользователи вряд ли его забудут. Тем не менее название – не самый сильный козырь этого ленда.
Идеально подобранная картинка и текст, которые бьют в самое больное место – вот настоящий козырь этого лендинга. Вот яркий пример того, как можно сделать идеальный текст, который смог бы найти проблему, надавить на нее и заставить признать, что это действительно проблема. И опять появляется тот самый разговор на языке целевой аудитории. Простой, понятный, с долей юмора и жизненной иронии над собой – то, что нужно целевой аудитории.
Посмотрев на эти примеры, можно сделать однозначный вывод о том, что важность текста и подачи в лендинге сложно переоценить. В 2 из 3 случаев именно текст был гарантией того, что посетитель превратится в покупателя. Если прибавить к этому отличный дизайн и мастерскую подачу некоторых моментов, то получается сайт с достаточно мощной конверсией и высокими продажами.
В этом списке не было сайтов-одностраничников, которые продают какие-либо простые товары. Причина этого достаточно проста – они редко бывают по-настоящему привлекательными и высококонверсионными. Они берут больше количеством, а не процентом клиентов от посетителей. Именно поэтому лендинг фитнес-тренера должен быть гораздо лучше, чем та же посадочная страница от человека, продающего часы.
Но создать хороший лендинг недостаточно. Важно еще следить за показателями и вовремя реагировать на любые изменения трафика, продаж и отказов.
Оценка эффективности посадочной страницыКак уже говорилось ранее, одна из основных задач уже после создания лендинга – постоянный анализ эффективности его работы. Хороший одностраничник должен делать огромный объем работы: предоставлять клиенту всю необходимую информацию, закрывать его на определенное действие, отвечать на невысказанные вопросы, выявлять проблему и отрабатывать почти все популярные возражения.
При этом нельзя полагаться на то, что один раз настроив все, можно спокойно собирать деньги за продажи. Коммерция в интернете развивается просто стремительными темпами, и если раньше создание лендингов было чем-то вроде новшества, то сейчас это, наоборот, повсеместное явление.
Именно для того, чтобы постоянно быть в тренде и что более важно, не упускать выгоды, нужно анализировать эффективность посадочной страницы, мониторить основные её показатели, делать выводы и действовать согласно анализу.
Конверсия сайтаСамый главный показатель эффективности работы лендинга – его конверсия.
Конверсия – количество посетителей, которые совершили целевое действие, т. е. количество всех пользователей, зашедших на сайт. Соответственно, чем она будет выше, тем больше клиентов будут закрыты, и тем выше будет количество потенциальных покупателей, а соответственно и больше дохода.
Простой пример: на сайт за сегодня зашли 100 человек. Из них 10 совершили требуемое действие – оставили свои контактные данные. В итоге конверсия нашего лендинга составляет – 10%.
Средняя величина конверсии на различных продающих сайтах составляет 8-20%.
Зависит конверсия от нескольких причин:
- Качество продукта;
- Качество самого сайта;
- Температура клиента.
Если с первыми двумя все достаточно просто, то температура клиента вызывает достаточно много вопросов. Если говорить простым языком, то температура клиента – это состояние его готовности купить здесь и сейчас. Так, холодный клиент не имеет проблемы, и мы никак не можем его убедить в обратном. Теплый имеет проблему, но не уверен, что именно мы можем решить его проблему. И горячий клиент прекрасно понимает свою проблему и её решение.
Каждая компания сама должна решать, какое количество клиентов для нее нужно в каждый момент времени, и в зависимости от расходов на рекламу, можно выбирать «температуру» своих потенциальных клиентов и их запросов, и в соответствии с этим, привлекать различных посетителей на сайт.
Температуру также можно повысить искусственно, с помощью создания нужного эффекта с помощью текстов, картинок и видео. При грамотном лендинге, клиент должен сам осознать свою проблему и найти свои пути решения.
Повысить конверсию еще можно с помощью сео продвижения лендинг пейдж. Покупая рекламу, различные ссылки на сторонних ресурсах, досках объявлений, в социальных сетях, можно увеличить значимость лендинга для поисковиков, а соответственно и повысить его в поисковой выдаче.
С помощью сервиса вордстат от Яндекса можно анализировать количество запросов за месяц, и с помощью показателя конверсии можно вычислить количество закрытых посетителей, и примерно подсчитать прибыль. У Гугл подобный сервис называется Google Adwords.
Воронка продажТоже является популярным и эффективным методом оценки качества работы посадочной страницы.
- Количество уникальных посетителей;
- Количество посетителей, которые совершили целевое действие;
- Число покупателей.
Не всегда воронка продаж будет именно такая. Можно её расширять, сужать, искать дополнительные звенья, убирать ненужные, и так далее. Иногда к числу покупателей можно добавить тех, кто действительно заплатил за товар, вычитая из покупателей не выкуп. Также можно добавить повторные продажи, и уже получится достаточно широкая воронка, которая к концу сузится к минимуму.
С помощью этого инструмента, можно отслеживать людей, которые «выбыли» на определенном этапе. Он позволяет анализировать, какой из этапов следует доработать, определить основные ошибки менеджмента и оперативно их устранить. Говоря совсем просто, с помощью анализа воронки продаж, мы приобретаем знание обо всех слабых местах продаж.
К примеру , на сайт заходит 100 человек. 20 из них оставляют свои контактные данные (выполняют целевое действие). Число покупателей – 12. Количество возвратов – 2. Повторные продажи – 5.
Получается следующая воронка продаж:
Если один чек за первую продажу будет 1000 у. е., за повторную – 1500 у. е., то за один отчетный период доход будет равен 17 500 у. е. Если, проанализировав воронку продаж, будут найдены уязвимости, к примеру низкая конверсия по «горячему» запросу – 20%, то можно её будет поднять до 25%. Тогда количество клиентов, которые купят – 15%, заплатят из них 13%, а повторных продаж будет 7%. И тогда прибыль компании увеличится до 22 500 у. е. А это достигается лишь путем улучшения конверсии по запросу и более эффективного закрытия клиента на совершение действия.
Помимо этого, мы приобретаем возможность анализировать источники трафика, и выбирать из них наиболее оптимальный вариант. Также с её помощью можно прогнозировать финансовые результаты на будущие периоды.
Лендинг Пэйдж– отличный инструмент для интернет-продаж. Он обладает гораздо более высокой конверсией, нежели сайт, а также позволяет вести клиента по заранее определенному маршруту. Рецепта для того чтобы создать идеальный лендинг пейдж нет, но при этом, если следовать всем советам из этой статьи, можно создать эффективный метод продвижения своего товара или услуги.
Лучший сервис для создания первого лендинга. Комплект из пары десятков одностраничных шаблонов подскажет наилучшие варианты оформления и подачи предложения. Редактор позволяет в считанные минуты собрать из готовых адаптивных блоков эффективную страницу. Главное - расположить секции в логическом порядке и красиво преподнести оффер. Изображения, табы, таймер для акций, отзывы, наглядная карта, коммуникации, включая заказ обратного звонка, и многое другое присутствует в полном объёме.
Меню лендинга поддерживает анкорные ссылки для быстрого доступа к секциям. Эффект параллакса, широкоформатные блоки с красивой подачей изображений и видеофоны помогут создать насыщенную и полезную страницу. Всплывающие окна позволят акцентировать внимание посетителей на акциях. Бесплатное подключение SSL укрепит доверие клиентов, отправляющих вам личные данные через форму. Оптимальный рецепт: выбираете наиболее близкий по тематике шаблон, заполняете своим контентом и публикуете, ничего структурно не меняя.
Плюсы:
- Идеально подходит для предпринимателей, далёких от разработки сайтов;
- Большой набор профильных виджетов;
- Солидный пакет коммуникаций: консультант, заказ звонка, социалки, формы, всплывающие окна, почтовые рассылки, CRM;
- Адаптивные шаблоны, структура которых идеальна для подачи лендингов;
- Простота освоения - от 1 часа до 1 дня;
- Крайне доступная стоимость.
Минусы:
- Отсутствуют встроенные инструменты для анализа конверсии. Можно компенсировать сторонней аналитикой;
- Тариф, позволяющий осуществлять приём оплаты онлайн, существенно дороже «Премиума», который отлично подходит для сборки лендингов.
Специализированный конструктор посадочных страниц. Предназначен для тестирования маркетинговых гипотез, арбитража трафика и заработка на офферах веб-предпринимателями. Подходит и новичкам, и опытным пользователям. Редактор позволяет собирать страницы из готовых секций и виджетов, последовательно добавляя их один за другим. Выбор их достаточный: прайс, отзывы, этапы, таймлайн, таймер, таблица, заголовки, кнопка, галерея, свой код HTML, обратный звонок, живой чат, панели соцсетей и прочие.
Эффективные структуры дизайна для уверенных продаж, сдобренные эффектами переходов, корректно отображаются на всех типах экранов. Изюминка сервиса - отличная подача статистической информации. Конверсия в процентах, точки падения продаж, посещаемость по источникам и прочее - всё понятно для новичков и достаточно детально для опытных веб-мастеров. Подключение SSL бесплатное. Добавление всплывающих окон позволит получить ещё больше лидов. Простой в использовании и эффективный конструктор.
Плюсы:
- Понятная каждому подача статистических данных;
- Удобный интерфейс для одновременного тестирования нескольких страниц с подробной статистикой по результатам;
- Возможность вставки своего кода в макет страницы;
- Есть встроенный магазин (Ecwid);
- Доступна архивация лендингов и быстрое восстановление;
- Создание резервных копий в 1 клик;
- SMS с уведомлениями бесплатные;
- Интегрированная в панель управления amoCRM;
- Простой в использовании редактор;
- Хорошие по качеству адаптивные шаблоны, причём, поддерживается раздельное редактирование версий для ПК и смартфонов;
- Хорошая техподдержка.
Минусы:
- Небольшое количество готовых шаблонов;
- Мало готовых секций (не путать с виджетами).
Стоимость за месяц при оплате за год:
Wix - конструктор для создания лендингов с богатым, разнообразным дизайном и полным набором маркетинговых уловок. Можно нарисовать запоминающийся, уникальный шаблон либо воспользоваться одним из многочисленных готовых вариантов - заполняете своим контентом, и страница готова к публикации. Богатый набор приложений позволит добавить эффекты, таймеры, всплывающие окна, отзывы, интеграции социальных сетей, анимированные счётчики посетителей, подарочные карты, красивые формы обратной связи, сбора подписок, записи на приём и прочее по смыслу задачи.
Богатый набор виджетов, встроенный графический редактор, анимации, наборы иконок, растровых фигур и эффекты скроллинга позволят создать яркий лендинг, претендующий на высокую конверсию. Для работы с клиентской базой имеется встроенная CRM, возможность настройки маркетинговых и триггерных рассылок, для анализа результатов - Google Analytics. Использование Wix Code позволит настроить расписание вывода данных в зависимости от времени суток, региона и прочих вещей. Структура лендинга реализуется через анкорные ссылки на области макета.
Плюсы:
- Мощный редактор макетов страниц;
- Высокое качество и разнообразие готовых шаблонов;
- Множество виджетов, стоковых мультимедийных элементов;
- Возможность приёма онлайн-платежей;
- Встроенная CRM для обработки контактов;
- Множество маркетинговых приложений;
- Автоматизация сценариев поведения страницы при помощи Wix Code;
- Полный пакет приложений для коммуникаций: чат, заказ звонка, рассылки, всплывающие окна, комментарии, синхронизация с лентами социальных сетей и прочее;
- Возможность добавления своего кода на сайт: HTML/CSS, JavaScript.
Минусы:
- Новичкам потребуется время для освоения основной части возможностей редактора - он удобный, но не самый простой в обращении благодаря количеству и глубине настроек;
- Часть полезной функциональности доступна только в виде приложений - её нет из коробки в панели редактора, нужно подобрать и активировать приложение;
- Встроенные инструменты для анализа конверсии отсутствуют - воронки продаж, A/B-тесты, мониторинг по регионам/источникам трафика. Компенсируется подключением аналитических систем к странице.
Стоимость за месяц при оплате за год:
LPGenerator - один из самых мощных специализированных конструкторов лендингов. В принципе, это идеальный сервис в своей нише. Относительная сложность редактора компенсируется огромными возможностями по кастомизации дизайна и функциональности страниц. Более 250 профессиональных шаблонов из 22 категорий. Продуманный и гибкий процесс прорисовки страницы с нуля, можно править код макетов вручную и загружать собственные. Есть витрина товаров с пагинацией - качественный мини-магазин внутри лендинга.
Полный набор инструментов для анализа конверсии и маркетинга (всесторонняя статистика, A/B-тесты, воронка продаж, источники трафика, цели конверсии, CRM, рассылки и прочее) позволяют выжать максимум эффекта со страниц. Редактор визуальный, виджетов очень много, есть удобный конструктор секций, мониторинг версий страницы с анализом конверсии и т. д. Аудитория системы - веб-студии и опытные разработчики. Для новичков есть «Академия лидогенерации» - мощный курс, который окажется полезным большинству пользователей.
Плюсы:
- Большой выбор шаблонов и возможность загрузки собственных;
- Ультимативный набор средств для анализа и увеличения конверсии;
- Поддержка множества сторонних приложений и синхронизаций с сервисами;
- Встроенная качественная CRM;
- Продуманная витрина одностраничного магазина с кучей настроек;
- Оповещения о событиях по SMS;
- Отличная обучающая программа для новичков и не только;
- Опционально можно заказать услуги от разработчиков.
Минусы:
- Дорогие пакетные тарифные планы, рассчитанные на профи;
- Сравнительная сложность использования - слишком много всего внутри.
Стоимость за месяц при оплате за год:
uCoz - удачный выбор для продвинутых разработчиков. Позволяет работать с кодом, есть конструктор шаблонов, в котором легко выстроить блочную структуру одностраничника. Для новичков наилучший вариант - использование премиум-шаблона, их очень много и там всё есть: красивый дизайн, правильная структура, функциональность (формы, заказ чего-либо, витрина и т. д.). Кроме того, продвинутая система сбора статистики поможет отслеживать эффективность страницы и продвигать, ведь контекстную рекламу можно контролировать прямо из панели управления.
Редактор поддерживает подключение сторонних PHP-скриптов и загрузку собственных шаблонов. При наличии опыта собрать лендинг - дело 1-2 вечеров. Сервис поддерживает синхронизацию с социалками, онлайн-чатами, конструкторами форм, калькулятором услуг и прочими полезными штуками. Кастомизация страниц происходит, в основном, через правку кода, хотя визуальный редактор тоже есть. Это вариант для тех, кто знает, как нужно верстать лендинги либо новичков, желающих опубликовать страницу на основе подарочного премиум-дизайна.
Плюсы:
Минусы:
- Сравнительно высокая сложность освоения;
- Среди стоковых шаблонов нет одностраничных;
- Необходимость владения кодом хотя бы на базовом уровне.
Стоимость за месяц при оплате за год:
PlatformaLP - специализированный конструктор посадочных страниц. Около полусотни классных шаблонов, куча стандартных виджетов, а также профильных вроде счётчиков/вкладок/декораций/спойлеров и визуальный редактор, позволяющий гибко отрегулировать структуру, содержимое каждой секции страницы для десктопного и мобильного формата в отдельности. Есть корзина - можно продавать онлайн. Поддерживается вставка HTML-кода, а также интеграция сторонних сервисов - Bitrix24, amoCRM, GetResponse, RoboKassa, MailChimp, Яндекс.Касса, JustClick, Mailer, Unisender, SendPulse и LeadVertex.
Поддерживаются мультилендинги: можно создать несколько вариантов посадочной страницы для демонстрации в различных регионах. Эффективность можно измерять A/B-тестами, аналитические данные получать от Google или Яндекса. Ещё можно добавить реакции лендинга на поведение посетителя - всплывающие окна различного содержания при уходе со страницы, прокрутке до футера, повторном заходе, подачи заявки, заполнении формы и т. д. Основано это на работе с Cookie (сообщение на согласие их использования есть). Можно включить lazy load для изображений (ускоряет загрузку страниц), добавить анимации, использовать Google Fonts.
Плюсы:
- Отличный набор виджетов и готовых блоков различной функциональности;
- Удобство и гибкость настройки секций;
- Поддержка мультилендингов;
- Всплывающие окна по заданным сценариям поведения клиента;
- Встроенный магазин;
- Отдельная настройка мета-тегов для социальных сетей;
- Уведомления о заявках на почту и по SMS.
Минусы:
Стоимость за месяц:
Пакеты расширения для бизнес-планов:
Сервис, хорошо приспособленный для сборки посадочных страниц. Два десятка профильных шаблонов хорошего качества, удобный визуальный редактор плюс возможность бесплатной публикации лендинга на своём домене. Набор виджетов и готовых блоков достаточен для публикации страниц классической структуры, а в меру гибкая кастомизация поможет украсить дизайн. Можно просто заменить стоковый контент в секциях шаблона своим и публиковать страницу.
Поддерживаются интеграции 16 полезных сервисов (PayPal, Google, MailChimp и др.), стандартные SEO-настройки и приём онлайн-платежей. Значительно изменить стоковый шаблон можно при помощи инструментов дизайнера, идущих в комплекте. Новичкам пригодится шпаргалка прогресса сайта со списком задач и ссылками на области панели управления, в которых они решаются. Также есть эффекты, возможность командной разработки, гибкая настройка шрифтов и языков сайта. Всё это упаковано в приятный и простой интерфейс.
Плюсы:
- Возможность бесплатной публикации одностраничника со своим доменом и SSL;
- Множество готовых блоков, адаптивный дизайн;
- Поддержка мультиязычности сайтов и командной разработки;
- Возможность приёма оплаты онлайн;
- Встроенный конструктор логотипов, инструменты дизайнера;
- Шпаргалка прогресса для новичков.
Минусы:
- Отсутствие встроенных средств сбора статистики и анализа конверсии;
- Отсутствие некоторых характерных лендинговых виджетов вроде счётчика.
Стоимость за месяц при оплате за год:
LPMotor - специализированный сервис, предлагающий создание посадочной страницы с нуля, готовых блоков либо с использованием адаптивных шаблонов (около 100 штук, качество отличное). Визуальный редактор позволяет редактировать каждый элемент в отдельности, регулировать позиции, комбинировать в произвольном порядке блоки, секции и шаблоны секций, детально настраивать их внешний вид, создавать переходы между блоками (скос, закругление, угол), добавлять эффекты, а также скрывать отдельные блоки от показа на ПК или мобильных устройствах. Удобен для новичков.
Есть встроенная CRM хорошего качества, возможность тестирования вариантов одной и той же страницы (A/B-тест) и автоворонка продаж - интерфейс для настройки автоматических действий в случае выполнения пользователем заданного сценария (заполнил форму - получил письмо и т. д.). Поддерживаются всплывающие окна и множество интеграций: Jivosite, VK, Facebook, MailChimp, UniSender, GetResponse, Яндекс.Касса/Деньги, JustClick, amoCRM, PayPal, RoboKassa, Bitrix24, Yagla и прочее. Встроенная система сбора статистики приличная. Можно настроить получение уведомлений о заявках по SMS на почту или в Telegram. Есть анти-спам.
Плюсы:
- Классный редактор, гибкая настройка отдельных элементов и секций;
- Поддержка большого количества интеграций;
- Встроенные конструктор автоворонок, CRM, A/B-тесты и сбор статистики;
- Хорошие шаблоны, кастомизация, инструменты для создания дизайна с нуля;
- Возможность раздельного редактирования мобильной и десктопной версий страницы;
- Поддерживается вставка кода HTML;
- Есть встроенный магазин с корзиной и приёмом оплаты онлайн.
Минусы:
- Отключение подписи «LPMotor» в футере стоит дополнительные 600 рублей в год для каждой опубликованной страницы. Это отдельная услуга, не входящая в пакетные планы.
- В процессе работы нельзя сменить шаблон;
- В наборе элементов отсутствует таймер обратного отсчёта;
- Автоворонка подключается отдельно за дополнительную плату.
Стоимость за месяц при оплате за год:
Стоимость подключения автоворонки продаж (пробный период - 7 дней):
- Неделя - 990 рублей.
- Месяц - 2390 рублей.
- Год - 14990 рублей.
Flexbe - сервис, рассчитанный на сборку посадочных страниц только из готовых блоков. Подходит для новичков. Шаблонов около 20 штук, качество хорошее, блоки адаптивные. Для каждой секции можно выбрать набор отображаемых элементов и немного подкрутить дизайн. Готовых секций достаточно для сборки лендинга классической структуры. Доступно несколько шрифтовых пар для быстрой смены, есть эффекты параллакса и отдаления, настройки градиента и затемнения, поддерживаются якоря в меню. SSL подключается
автоматически при добавлении домена. Можно вставить свой HTML-код на страницу.
Сервис поддерживает интеграцию приложений базовой важности (amoCRM, Bitrix24, CallbackHunter, Jivosite, GetResponse, UniSender), создание мультилендигов/геолендингов и предоставляет доступ к API. Приём онлайн платежей возможен через Яндекс.Касса, RoboKassa и карту Тинькофф. Можно подключить почтовые сервисы Google, Mail.ru и Яндекс. Кроме того, есть встроенная CRM среднего уровня и система сбора статистических данных. Можно настроить формат показа страницы при шаринге в социальных сетях. Присутствует мобильное приложение iOS/Android и настройки появления всплывающих окон.
Плюсы:
- Предельная простота сборки/настройки страниц из готовых блоков;
- Наличие встроенных CRM, статистики, A/B-тестов;
- Автоматически подключаемый SSL;
- Интерфейс для работы со всплывающими окнами;
- Поддержка интеграции ключевых для лендинга сервисов;
- Оповещения по SMS и почте о новых заказах;
- Возможность добавления администраторов страниц.
Минусы:
- Скудный набор готовых шаблонов;
- Встроенная CRM так себе;
- Отсутствие отдельных элементов/виджетов (только готовые секции);
- Кастомизация дизайна базового уровня.
Стоимость за месяц при оплате за год:
Mobirise - бесплатная программа (Mac, Windows, Android), позволяющая собирать посадочные страницы из готовых блоков. Шаблоны представлены расширениями - платными наборами ($20-40) блоков, заточенных под конкретную задачу (бизнес, магазин, юрист, портфолио, ресторан и т. д.). Из коробки даётся 4 бесплатных шаблона. Также есть расширения для добавления интеграции социальных сетей и средств комментирования, перводчик, Soundcloud, Google Analytics, SEO-инструменты, а из платных - пакет иконок, корзина с оплатой через PayPal, редактор кода страниц и слайдер изображений.
Набор блоков (количество, структура, назначение) зависит от выбранного шаблона. Каждую секцию можно настроить, выбрав отображаемые элементы, цвета, эффекты, размеры и прочее. В целом, даже на бесплатном шаблоне блоков множество - их хватит с лихвой для сборки нормального лендинга со всеми фишками (отзывы, преимущества, колонки, табы, таймлайны, таймер, мультимедиа, прайс, карта, социалки и всё остальное). Страницы получаются адаптивные по умолчанию. Базовые SEO-настройки присутствуют. Для публикации страниц нужно купить хостинг и домен. Рекомендуем обратить внимание на пак со всеми платными расширениями.
Плюсы:
- Приложение бесплатно для коммерческого использования;
- Богатый набор адаптивных блоков в стоковой поставке;
- Простота сборки и редактирования дизайна страниц;
- Расширения значительно увеличивают область применения программы;
- Встроенный FTP-интерфейс для загрузки/обновления файлов на хостинге.
Минусы:
- Необходимо арендовать хостинг/домен отдельно;
- Обновление лендинга потребует наличия рабочих файлов проекта на ПК;
- Полное отсутствие средств сбора статистики и анализа конверсии ввиду формата сайтбилдера в виде приложения (можно подключить страницу ко внешним сервисам).
Стоимость:
Цель посадочной страницы - заинтересовать посетителя и подтолкнуть к совершению запланированного вами действия. Исходя из этого тезиса нужно выстраивать блоки в порядке, ведущем к максимальному эффекту в вашем конкретном случае. Любой из вышеописанных конструкторов лендингов способен реализовать эту формулу. Иногда можно просто заменить демо-контент шаблона своими данными, получив хорошую страницу, - структура этих дизайнов не с потолка берётся, их собирают со знанием дела.
Тем не менее, существуют общепринятые направляющие, по которым собирают лендинги. Уже всё выверено давно - что работает, а что нет. Хотя для каждого конкретного случая нужно тестировать индивидуально, шлифуя нюансы до блеска (поменяли местами кнопки/блоки, цвет акцента, основной шрифт, формулировку оффера, количество полей в форме, расположение блока социалок - всё это может играть роль, нужно искать удачное сочетание). В целом, схема создания лендинга во всех конструкторах примерно одинакова:
Алгоритм создания лендингаХарактер и порядок секций имеет огромное значение. Суть в том, что по мере листания страницы посетитель должен заразиться желанием последовать вашему предложению. И сделать это. А какие же блоки использовать для достижения цели? В каком порядке? 100% рецепта успеха любой страницы из любой ниши не существует, но кое-что можно обозначить:
- Шапка - качественное изображение или видеофон по теме, заголовок, передающий суть предложения, логотип, анкорное меню, и, возможно, здесь же кнопка (CTA - Call-To-Action, призыв к действию) - подписка, покупка, загрузка, переход куда-либо.
- Вторым блоком может быть таймер обратного отсчёта до конца какой-то акции с кнопкой CTA. Также сюда можно поставить описание вашего предложения (а уже после - CTA) - текст плюс изображение либо видео. Порядок зависит от того, насколько понятна суть оффера из шапки - нужно ли дополнительно показывать суть либо пора призывать к действию.
- Блок преимуществ предложения - буллитов. Можно оформить в виде слайдера (карусель) либо иконками с ёмкими, точными описаниями сильных сторон оффера. Лучше иконками с текстовыми подписями - так быстрее воспринимается информация, листать не нужно.
- Изображения или видео с продуктом в подходящем стилю страницы формате.
- Здесь может быть таймер до окончания предложения (если его не было вверху) либо тарифы, если речь идёт об услуге. Или короткий прайс в табах (2-5 позиций) на продукты. В общем, показ цен.
- Дальше можно поставить блок отзывов клиентов в формате табов или карусели.
- Здесь могут быть какие-то цифры, демонстрирующие популярность вашего продукта: количество скачиваний, довольных клиентов, подписок, сэкономленных средств, полученной пользы (смотря о чём речь), спасённых котятах и всего в таком духе.
- Форма - для совершения заказа, подписки, анкетирования либо чего-то ещё.
- Карта охвата географии вашей деятельности - реклама масштаба популярности (можно и без неё).
- Призыв к действию - кнопка CTA возле резюме предложения, подходящей иллюстрации либо в другом уместном формате.
- Футер логотипом, кратким содержанием оффера, адресом офиса, телефоном, мессенджерами, ссылками на социальные сети, основной сайт, блог и что-либо ещё в таком духе.
В зависимости от характера вашего предложения можно использовать расписания мероприятий, меню блюд, ответы на популярные вопросы, фото команды, корзину с витриной и прочее. Важно соблюдать анатомию страницы. Например, меню кафе - это часть оффера, должна идти в чуть выше середины страницы, фото команды - ближе к футеру, как и FAQ. Всё по логике, но суть одна.
Благодаря конструкторам, любой человек может быстро опубликовать лендинг, способный приносить доходы. Дело не только удобстве формата, но и в других нюансах: правильные шаблоны, подогнанная под решение задачи функциональность, удобство сбора статистики, наличие техподдержки, FAQ и прочего.
Оптимальными для большинства новичков будут uKit, uLanding и Wix - в них получаются хорошие лендинги. Недорого, быстро и красиво. Самый мощный профильный сервис - LPGenerator. Идущие следом PlatformaLP и LPMotor несколько уступают ему. uCoz может всё хорошо, и лендинги в том числе. Ucraft - неплохой вариант, Flexbe приятен и простоват, Mobirise - на любителя.
Не стоит рассчитывать на бесплатную публикацию полноценного лендинга. Какой бы вы сервис не выбрали, оплатите подходящий тариф - это даст кучу преимуществ, избавит от проблем и увеличит конверсию, в итоге. Универсального рецепта идеальной страницы не существует, но вы можете ориентироваться на средневзвешенную структуру и получать хорошую прибыль.
Приветствую Вас. Сегодня мы поговорим о том, что такое Landing Page и для чего он нужен. Если Вы являетесь инфобизнесменом, то скорее всего уже не раз сталкивались с такой страницей захвата. И более подробней о данной странице сейчас расскажет мой постоянный читатель Денис Тумилович. Встречайте!
Привет, дорогой посетитель замечательного блога сайт. Меня зовут Денис Тумилович и я, в основном, пишу о том с нуля, а после этого, к тому же и зарабатывать на нем.
Сегодня с радостью хочу поднять тему лендингов – что такое страницы захвата (лендинги), зачем нужны эти посадочные страницы, кого куда они садят? Для кого они? Чтобы собирать подписчиков или для продажи товаров? Кто из вас уже задумывался на эту тему – поднимите руки!
Вопрос мне этот задал один из читателей как раз в тот момент, когда я делал эту самую лэндинг пейдж для своей книги о заработке на текстах.
Так вот, очень мне понравился этот вопрос, захотелось сразу написать статью, но как-то все времени не было. Хотя, тема интересна, согласитесь...
Итак, как вы думаете, что же такое Landing Page?По основному определению из википедии – это “целевая страница”, или по-другому такие страницы называют «посадочными страницы», это такая страница, на которую попадает человек из каких-то источников. И именно на этой странице происходит взаимодействие с пользователем. Именно на этой странице пользователь принимает какой-то решение.
Будет он подписчиком блоггера, не будет или же будет покупателем. т.е. главное что нужно сейчас понимать — это отдельная страница, отдельный документ.
Страница эта может быть создана отдельно средствами HTML+CSS, или же с помощью специальных плагинов к WordPress.
Что примечательно — для таких посадочных страниц даже целые домены регистрируют, не то чтобы страничку на блоге!
Основная задача Лендингов.В чем же задача посадочных страниц? Основным пунктом является то что они нужны для того, чтобы получать клиентов. Другими словами это настоящая реклама вашего инфопродукта.И задача этой рекламы продукта одна — ЗАИНТЕРЕСОВАТЬ посетителя, который является потенциальным клиентом!
Конечная цель любого лендинга – сделать из пользователя клиента или в случае с блоггерами – сделать из пользователя подписчика.
Свою первую страницу я делал руками, средствами HTML+CSS. Получилось не очень, если честно, но это была действительно рабочий landing.
Страницы, ты видишь в поисковой выдаче – кстати, также являются целевыми. В курсе? Дело в том, что когда ты вводишь, например, «Как заработать в интернете» – ты ищешь ответ именно на этот вопрос, но ни в коем случае не рецепт торта «Наполеон».
Как раз поэтому тебе яндекс показывает как раз те странички, которые тебе будут максимально полезны, релевантны твоему вопросу, а значит, именно эти страничкиы будут для тебя максимально целевыми (посадочными, лендингами), ну, так думает поисковик.
И вот эти страницы, куда мы попадаем из поисковой выдачи – имеют точно такую же цель что и настоящий лендинг. Превратить человека, который зашел к нам в покупателя или хотя бы в подписчика.
И поэтому, для повышения релевантности, мы каждую свою статью будет оптимизировать под конкретные запросы, указываем нужные мета теги и все для того, что бы наша статья стала релевантней остальных, стала максимально ценной и полезной для максимального числа людей, посетителей.
Итак. Главная цель посадочных страниц (лендингов) – это их конверсия (превращение посетителя в покупателя или подписчика)!
Теперь этот факт точно всем понятен. Я очень на это надеюсь.
Особенности Landing Page.1. Самое главное — посадочные страницы не перегружены графическими элементами, рисунками, потому что много графики отвлекает. А нам нужно, чтобы посетитель был максимально сконцентрирован на нашем предложении. На заголовке!
2. Вторая особенность – это отсутствие рекламы. Тут даже комментировать не стоит. Реклама итак всем уже надоело. Будет совсем не логично рекламировать кого-то на странице, которая предназначена для рекламы ТВОЕГО продукта или услуги! Кто со мной согласен — прошу отписаться в каментах.
3. Третья особенность – На лендингах не должно быть ничего лишнего, не нужно левой информации. Многие блоггеры, в т.ч. и я, пишут о новостях из жизни, позволяют отклоняться от темы, обсудить погоду, президента или еще чего-нибудь. На лендингах — это не простительно. На лендингах — должно быть все четко и по делу. Что за продукт, что за услуга, кому она нужна, сколько стоит и кнопка «заказать». Помни, что задача твоих посадочных страниц — не научить кого-то чему-то, а получить клиента!!!
Какой должна быть конверсия?Однозначного ответа на этот вопрос нет. Дело в том что для каждой ниши – свои показатели нормальности конверсии. Но и это еще не все, не только ниша влияет на конверсию, но и метод получения трафика. Например, из контекстной рекламы – одна величина, из тизерных сетей – другая, из спамных методов – третья.
Конечно, не стоит надеяться, что спамом у вас будет конверсия больше 1% по-моему это миф.
Некоторые статистические показатели, которые могут вам пригодиться.
Решил я подсобирать немного циферок, чтобы вам было понятнее что хорошо, а что плохо. Просто просматривал сегодня группу в вк по лендингам от одной веб студии и нашел любопытные цифры. Даже лирического вступления не будет, сразу к делу:
Красная кнопка 5,6% конверсия
Зеленая кнопка 3,2% конверсия
Следовательно – используйте красную кнопку для основного действия!
Кнопка “Узнать цену” 5,6% конверсия
Кнопка “Заказать” 0,8% конверсия (ШОК!)
Да, это действительно шокирующая информация! Я до сих пор под впечатлением! Тчательно подбирайте слова!
Форма “Имя, Телефон” лучше чем “Имя, телефон, емейл” и хуже чем “Телефон”.
Людям все-таки приятно когда вы, позвонив им, назовёте человека по имени!
Открытая форма лучше чем закрытая.
Тут все понятно. Человеку не нужно гадать что нужно куда-то нажать чтобы форму заполнить. Все формы должны быть видны.
Заголовок “Закажи ЭТОТ курс и получи в подарок ВОТ ЭТО…” – хорошая конверсия.
Заголовок такого вида “Получи ЭТОТ подарок при заказе ЭТОГО курса…” — плохая конверсия.
На первом месте должно стоять основное действие «закажи курс» , а не «получи подарок». А уже вместе с основным заказом получаешь много плюшек. Плюшки не может быть целью лендинга.
Это реальный опыт одной их веб студий, которая специализируется именно на лендингах. Так что верить или нет… Странный вопрос 🙂
И помните еще одну штуку: адаптивность вашего лендинга – это +5% к конверсии! Сейчас достаточно большое количество людей используют планшеты и смартфоны для заказов через интернет – помните об этом. Адаптивность сейчас никак нельзя игнорировать!
Заключение.Вот собственно практически все что хотел вам рассказать о лендингах, о страницах захвата. Конечно, это самые основные моменты этой темы. Этими лендингами пользуется чуть ли не каждый блоггер (а скорее каждый), все потому что базу подписчиков нужно увеличивать. А скорость увеличения этой базы — зависит от качества лендингов. Для увеличения количества подписчиков и нужны эти лендинги.
Но как быть новичку, который не в курсе что такое landing page и как её создавать? Могу посоветовать научиться использовать конструкторы типа wp-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" //