Лендинг пейдж it компании. У вашего лендинг пейджа должна быть понятная инструкция. Производство и монтаж деревянных окон
Что такое landing page и в чем его особенности? Как самому быстро сделать крутой лэндинг с высокой конверсией? Какие конструкторы для создания посадочной страницы сейчас популярны?
Здравствуйте, уважаемые читатели! С вами один из авторов бизнес-журнала «ХитёрБобёр.ru» Александр Бережнов.
И я решил так – расскажу вам о лендингах, об основных приемах, которые использовал при их создании. Приведу примеры хороших одностраничных сайтов. А выводы каждый из вас сделает для себя сам. Договорились? Тогда начнем.
Тема создания лендинга не из легких, но весьма актуальная и интересная. Зная, как это делать, вы сможете зарабатывать деньги разными способами, например, как . Разбираясь в этом направлении, вы сможете начать свой малый бизнес, просто продавая товары или услуги через landing page.
1. Что такое лендинг пейдж - обзор для новичковПо теме создания посадочных страниц написаны сотни статей. В один материал сложно «впихнуть» все советы, весь опыт. Но я все-таки постараюсь рассказать вам о самом главном, что касается landing page.
Лендинг – это одностраничный сайт или просто страница, цель которой – побудить у пользователей желание совершить какое-то действие: купить, подписаться, позвонить, оставить заявку.
Landing page дословно переводится с английского: «целевая» или «посадочная страница».
Такие одностраничники вы наверняка видели в Интернете.
Почему делают лэндинги:
Лэндинги создают для:
Воронка продаж – это процесс продажи товара/услуги. На каждом этапе этого процесса отсеивается часть людей – потенциальных клиентов коммерческой компании. У нас на сайте есть отдельная статья о .
Процесс продаж через лендинг пейдж выглядит примерно так:
- увидели ссылку на посадочную страницу 100 человек;
- перешли по ссылке 40 пользователей;
- заявку оставило 10 человек;
- купили продукт 2 человек.
Из сотни – две продажи. Отдача – 2%. Это неплохой вариант. Не совершенный, но и не проигрышный.
Воронка продаж выглядит как перевернутая кухонная воронка: широкое основание и узкое горлышко.
Самая широкая часть – переход на страницу. На этом этапе мы тестируем работу контекстной рекламы, сообщений в соцсетях, публикаций на других сайтах. Определяем CTR.
CTR – отношение числа кликов к числу показов. Измеряется в процентах.
Средняя часть – заявка. Анализируем эффективность посадочной страницы – ее дизайн, текстовую часть.
Узкая часть – обработка заявок и продажа. Здесь мы оцениваем работу живых людей – операторов, менеджеров.
Когда анализируют лендинг, рассчитывают еще один показатель – EPC.
EPC – это усредненный показатель заработка с одной тысячи посещений лендинга.
Чем выше показатель доходности, тем выше эффективность вашей рекламной кампании.
В каких случаях необходимо создать лендинг?Ниже рассмотрим ряд случаев, когда вы можете столкнуться с необходимостью создания своего одностраничника.
Случай 1. Низкая конверсия (продажи) основного сайта компанииКогда сайт показывает низкий показатель конверсии – то есть покупатели уходят, ничего не купив. И денег на создание нового работающего большого сайта – нет.
Пример расчета: за 24 часа на сайте побывало 300 человек. Подписались на рассылку – 12 пользователей. Конверсия составит: 12 / 300 * 100% = 4%.
Средняя конверсия сайтов в зоне.РУ – 0,5%. Конверсия лэндингов 5–10%. В этих цифрах скрывается вся правда о том, почему предприниматели так любят продавать свои товары и услуги через одностраничники.
Случай 2. Запуск нового продуктаКогда вы запускаете новый продукт и желаете показать его в самом лучшем виде. Когда на новинке нужно сфокусировать контекстную рекламу.
Случай 3. Решение конкретной задачиКогда нужно решить конкретную маркетинговую задачу. И основной сайт компании для этого не подходит.
Создание landing page без в большинстве случаев поможет увеличит продажи.
Само по себе наличие посадочной страницы не привлечет сразу кучу клиентов. На самом деле лендинг – это лишь инструмент. Даже самая навороченная дрель не просверлит дыру в стене, пока вы не возьмете ее в руки. Так и здесь.
Чтобы страница заработала – нужно ее «включить».
Для этого можно предпринять следующие ходы:
Ошибочно мнение, что лэндинг может быть единственным местом общения бизнеса и аудитории. Если компания не ведет блог, не развивает свое присутствие в социальных сетях, не использует email-маркетинг – landing page будет неэффективным.
Пример из практикиМолодой человек заинтересовался предложением компании «Кверти». Парень никогда раньше не слышал об этой фирме, а потому ищет доказательства ее существования. Посещает сайт и блог компании, вступает в группу в соцсетях.
Он убедился: компания работает. В блоге постоянно обновляется контент. В соцсетях админы быстро реагируют на вопросы пользователей. Клиент возвращается на одностраничник, делает предварительный заказ.
А теперь задайте себе вопрос: чтобы бы сделал парень, если бы не нашел следов «Кверти» в Интернете? Если бы все существование компании начиналось и заканчивалось на одной-единственной посадочной странице. Стал бы он заказывать их продукт?
Вывод из этого примера: используйте вспомогательные инструменты для усиления эффекта от продаж через ваш одностраничник.
2. Сколько стоит создание лендинг пейдж и от чего зависит цена на одностраничный сайтЦена создания лендинг пейдж зависит от того, будете вы заказывать одностраничник или делать его самостоятельно.
- Первый вариант – дорогой. Фрилансеры берут от 100-200 у.е. за работу, дизайн-студии – от 1 000 у.е. Крутые агентства – от 5 000 у.е.
- Второй вариант – «почти» бесплатный. Если вы подключите к разработке программиста или копирайтера, если за основу возьмете платный шаблон – цена этого способа составит от 20 до 1 000 у.е. и еще выше. Для лучшего понимания цен на разные виды сайтов и лэндингов, прочтите нашу статью .
Если вы решитесь заказать лендинг, вас попросят заполнить бриф – специальный опросный лист: ответить на вопросы, что бы вы хотели видеть на сайте.
От ваших ответов и будет отталкиваться исполнитель при определении цены за работу.
Чем больше «фишек» и «наворотов» вы захотите видеть на своем одностраничнике, тем дороже обойдется лендинг пейдж.
Цена будет зависеть от:
- необычная структура и уникальный дизайн потянет на 7 00 у.е.;
- контекстная реклама и ее настройка – от 100 у.е. в месяц;
- текст от хорошего копирайтера – 50-100 у.е., от отличного коммерческого писателя – от 1 000 у.е.;
- уникальные картинки и иконки (не скаченные со стоков) – это еще как минимум 100-200 у.е.
Кроме этого, на цену landing page влияет анализ целевой аудитории, подборка ключевых фраз, тестирование структуры страницы, постоянный мониторинг и прочее.
Я встречал лэндинги, конверсия которых составляла 50–60% . То есть каждый второй посетитель оставлял свои данные или слал заявку на покупку продукта. Секрет такой большой отдачи заключался в двух факторах:
Я расскажу вам об этих правилах.
Совет 1. Размещайте на лэндинге один продуктНе сумели зацепить – читатель не дойдет до заветной кнопки «купить».
Следуйте следующим правилам:
Если вы разместите десять продуктов в рамках одного экрана – внимание посетителя рассеется. Он пробежит взглядом всю страницу. Быть может, обратит внимание на огромную скидку или на какую-нибудь веселую картинку. А потом закроет вкладку. Через пять секунд он уже забудет о вашем существовании.
Пользователь заходит на сайт. Первые мысли, которые его посещают: куда я попал, зачем я здесь? Если в ближайшие мгновения он не найдет ответа – вы потеряете клиента.
По статистике 80% потенциальных покупателей уходят со страницы в первые пятнадцать секунд. И вот основные причины:
Данные советы помогут вам увеличить продажи вашего продукта:
Но не будьте излишне страстны в своем желании одурманить клиента. Чрезмерное давление и переизбыток рекламных условок вызывает у читателей только тошноту.
Совет 3. Используйте продающие заголовкиПродаете люминесцентные лампы? Вот вам заголовок: «Экономьте энергию в 4 раза эффективнее».
Приглашаете толстушек в фитнес центр? Бейте в самое сердце: «Кто еще хочет фигуру телезвезды?»
При верстке заголовков обязательно используйте тэги h1 и h2. Если получится, включайте в них ключевые фразы – те слова и словосочетания, по которым вас будут находить клиенты через поисковик.
Совет 4. Составьте качественный продающий текстТекст – это первоочередное. Пока у вас не будет полностью сформулированного предложения, даже и не думайте заказывать дизайн лендинга.
Чтобы текст был первоклассным необходимо:
- Первое - знать кто он тот человек, которому нужен ваш продукт. Сформируйте портрет «идеального покупателя».
- Второе - читать книги о маркетинге и психологии продаж.
- Третье - уметь вовлекать клиента в разговор. Даже если этот разговор на самом деле является монологом. Представьте себе, какие вопросы возникают в голове у собеседника. Ответы логично вписывайте в текст. Пишите до тех пор, пока не расскажете о продукте всё. И не зацикливайтесь на количестве символов.
Я обратил внимание на то, как гуру интернет-маркетинга любят покритиковать большие лендинги. Если присмотреться к объекту критики внимательнее, станет ясно – осуждают нудные и малоинформативные тексты. Интересные и стоящие длинные landing page критиканы почему-то обходят стороной.
Не бойтесь больших текстов, если:
70% посетителей не дочитают вымученный вами лэндинг и до середины. Не вините себя. Постарайтесь захватить внимание оставшихся 30% – это тоже неплохо.
Совет 5. Избегайте агрессивной рекламы!!!Как вам три восклицательных знака в конце предложения? Может, ЕЩЕ И CAPS LOCK стоило добавить?
Эти штуки – признак агрессивной рекламы. У нормального человека вид заглавных букв и трех восклицаний вызывает приступы паники: «Мне хотят впарить какую-то ерунду», «Опять эта навязчивая реклама!», «Я всегда говорил, что интернет – это помойка».
А для хороших копирайтеров, редакторов, контент-менеджеров – это еще и знак местечковости, непрофессионализма а иногда и, простите, идиотизма.
А еще я рекомендую исключить из текста следующие штампы: «гибкая система скидок», «лидер в области», «высокое качество и низкие цены», «огромный опыт», «индивидуальный подход». Удаляйте без сожаления все сырые и не подкрепленные цифрами фразы.
Этот этап очень важен для успешного продвижения и продажи товаров и услуг.
Сразу же перехожу к правилам:
Продумайте, по какой траектории будет двигаться взгляд посетителя. Когда все элементы стоят на своих местах, человек легко воспринимает информацию. А если клиент поймет ваш продукт, есть вероятность, что он тут же его и купит.
Используйте визуальную навигацию: стрелки, иконки, картинки. Привлекайте внимание контрастными оттенками: выделите цветом заголовки, используйте красную (желтую, оранжевую, зеленую) кнопку.
Релевантный лендинг – это страница, соответствующая ожиданиям пользователя.
Еще примерЕсли пользователь кликает на баннер «купите новый айфон со скидкой в 10%», то на landing page должно висеть предложение именно о покупке этого телефона и именно с этой скидкой.
Создавайте свой лэндинг не только под каждую маркетинговую кампанию, но и под каждый источник трафика. Например, клиенты идут из социальной сети в Вконтакте – это должно быть отражено на сайте.
90% покупателей думают, прежде чем купить что-то. Люди боятся мошенничества, опасаются за свою безопасность. Многие не хотят, чтобы об их покупке кто-то знал. Страхи порождают возражения: «Я боюсь потерять деньги», «Не верю, что цена может быть такой низкой».
Так как вы не в силах лично успокоить клиента, позаботьтесь об ответах на их возражения заранее. Сформулируйте убедительные аргументы и вставьте их в текст.
Даю подсказки:
Подобные маркетинговые ходы были и остаются актуальными при создании посадочных страниц.
С дефицитом будьте аккуратнее. Мало кто сейчас верит таймерам обратного отсчета. Тем более, когда счетчик постоянно обновляется при перезагрузке лендинга.
Действуйте благоразумнее. Укажите количество оставшихся продуктов. Постоянно и вручную обновляйте информацию. Пользователь должен видеть – товар разбирают.
Заставьте покупателя думать так«Вчера было 74 микроволновки с 50%-скидкой, сегодня утром – 23, а к обеду их осталось всего лишь 7 штук. Надо срочно брать!»
Совет 11. Убедите пользователя в том, что с вами надежно и безопасноРазмещайте элементы доверия недалеко от призыва к действию.
Сама по себе форма ввода данных не вызывает у посетителей неприятных эмоций. Большинство целевой аудитории готово взаимодействовать с вами. Если надо – они напишут свое имя, род деятельности и e-mail.
Трудности начинаются, когда на этапе регистрации пользователей просят рассказать о своей жизни более подробно. Я советую перенести момент более близкого знакомства на потом – когда посетитель подтвердит факт регистрации.
Еще одна проблема – сложная капча.
Капча - всплывающая форма в которую пользователь вносит набор символов (цифры и буквы на размытых картинках), подтверждая что он - не робот.
Над расшифровкой символов, над решением пазлов и головомок зависает каждый. А потому испытание проходят далеко не все – около 30-40% закроют вкладку и тут же забудут о вашем предложении. Забудьте о капче. Оставьте ее вашим конкурентам.
Этот совет объединяет суть всех предыдущих пунктов. Заказывайте простой Landing page.
Страница должна быть:
Идеальный лендинг – логотип, понятный заголовок и кнопка. Если ваш продукт позволяет сделать одностраничник в стиле минимализма – используйте это.
4. Что лучше: заказать лендинг у профессионалов или самостоятельно сделать посадочную станицу?Команда, необходимая для создания лендинг пейдж с нуля:
Услуги шести специалистов обойдутся вам от 3 000 у.е. Это цена за лендинг пейдж, который будет работать.
Если правильно спланировать каждый этап работы и заранее найти хороших людей – посадочная страница будет готова через 2-3 недели.
Теперь перейдем ко второму – «самостоятельному» варианту .
Если вы «обычный» человек – задачи по программированию, дизайну и верстке вы, скорее всего, провалите. Ничего не остается, как скачать готовый бесплатный шаблон или воспользоваться платным конструктором лендинг пейдж.
Работу копирайтера, менеджера, специалиста по контекстной рекламе и маркетолога придется взвалить на себя. Вот приблизительная схема действий:
Тяжело? Зато бесплатно! Правда, времени на это вы затратите немало: пожалуй не меньше 4-5 недель.
Давайте рассмотрим таблицу способов получения готового одностраничника.
5. Популярные конструкторы лендинг пейдж - ТОП-3 лучшихПопулярность лендингов дала толчок к появлению целого ряда конструкторов. Я расскажу сейчас о нескольких – русскоязычных и самых популярных.
Конструктор 1. «Флексби» (flexbe.com)- очень простой и надежный конструктор лендингов. Бесплатная версия действует 14 дней – времени достаточно, чтобы понять, удобен ли конструктор, подходит ли он для вашего бизнеса.
Самый дешевый тариф – 750 рублей в месяц. В эту сумму входит: один домен, 10 страниц, 250 СМС уведомлений, техподдержка, свой почтовый ящик и прочие «плюшки» вплоть до бесплатного домена в зоне.RU.
Самый дорогой тариф – 3 000 рублей в месяц. Это неограниченное число доменов, сколько угодно страниц, 1 000 СМС уведомлений и так далее.
Из минусов – создать что-то невообразимо крутое не получится. Набор инструментов «Флексби» без изысков.
Из плюсов – невероятная скорость. За 10 минут я создал приемлемый одностраничник. Он хорошо смотрелся на экранах мобильных устройств.
Конструктор 2. LPgenerator (lpgenerator.ru)Представим себе, что вы уже скачали понравившийся шаблон. Что у вас есть хостинг и доменное имя. Что делать дальше?
Инструкция по установки лендингаНесколько простых шагов как установить одностраничник:
Чтобы отредактировать landing page, перейдите в корневую папку вашего домена и ищите нужный файл. Меняйте текст, картинки, вставляйте видео. Научиться этому можно: прочитайте парочку статей по теме – и вперед, делать деньги.
7. Реальные примеры работающих лендинговЛет 15-20 назад лэндинги создавались для импульсивных покупок. В старые времена на людей еще действовали кислотные цвета, сумасшедшие гифки и прочий мусор. Сейчас мы стали разборчивее: проходим мимо пустых обещаний, доверяем спокойному тону и убедительным доказательствам.
«Те» времена прошли, но все еще остаются люди, которые считают, что лендинг должен быть «кричащим». Этот раздел я создал, чтобы убедить их в обратном. Перед вами примеры лендинг пейдж. Давайте разберем их плюсы и минусы, поймем, почему они работают.
Пример 1. Мастер Климат - компания по установке и продаже климатического оборудованияwww.masterclimat.pro - этот сайт мы сделали с другом, когда еще занимались .
Сайт имеет понятную структуру, приятный дизайн в стиле «вентиляции и кондиционирования». Также на данном лэндинге реализована адаптивная верстка, то есть сайт адаптируется под любые размеры экранов, в том числе под мобильные устройства.
Пример 2. Вакансии Альфа-Банкаwww.job.alfabank.ru - прокручиваем сайт и видим – как стартует карьера молодого человека в Альфа-Банке. Через некоторое время, наглядевшись на заманчивую визуализацию, посетители сайта наконец-то видят буквы. На странице опубликован годный текст – его качество ничуть не хуже анимированной картинки.
Прямо на поверхности размещено описание новых вакансий, опубликован раздел возможностей. Для соискателей – небольшая и очень простая форма.
Кнопка действия: наверху небольшая и слабозаметная кнопка «отправить резюме» – это минус; в самом низу страницы яркая ссылка «смотреть вакансии» – это плюс.
На лэндингах глобально можно заработать тремя способами:
Какой именно способ выбрать - решать только вам. В первом случае вы будете получать деньги от клиентов, которым нужны сами сайты, а во втором - деньги, которые будут приносить лэндиг-пейджи от продаж конечным потребителям.
9. ЗаключениеПо правде говоря, люди устали от лендинг пейдж. Им приелись одни и те же приемы – таймеры обратного отсчета, сумасшедшие скидки, «уникальные предложения», статичные отзывы, не меняющиеся на протяжении 2-3 лет.
Чтобы посетитель не закрыл ваш лэндинг – делайте его нешаблонным. Нет, шаблоны вы как раз использовать можете, но заполняйте их с умом. Не лгите, не гонитесь за мимолетной выгодой. Думайте о клиенте, о его потребностях.
Подведем итоги:
В завершение статьи – видео по теме изготовления идеального лэндинга:
Желаю вам удачи в бизнесе, запускайте 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" //