В этой заметке я расскажу как создать адаптивную Landing Page для привлечения подписчиков.
Если кто не знает, что же такое Landing Page.
Landing Page — это страница сайта, на которую попадает пользователь при клике по рекламному объявлению. Данная страница отличается от других страниц тем, что содержит некий призыв к действию и насыщена ключевыми фразами. Главный принцип Landing page – это дать посетителю именно ту информацию, за которой он пришел на данный сайт, скрыв при этом из его поля зрения все остальное, что может препятствовать его действиям.
Для создания Landing Page я буду использовать популярный фреймворк — Twitter Bootstrap.
Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.
В августе 2013 года вышла последняя версия — Twitter Bootstrap 3.0.
Посмотрите, что у нас получиться — перейти.
С начала мы возьмем готовый код для создания html-станицы с помощью Twitter Bootstrap.
Вот он.
Twitter Bootstrap - пример Landing Page
Добро пожаловать!
Поясню что здесь такое.
Строка
служит для того, чтобы браузер автоматически масштабировал нашу страницу под размер устройства, на котором она просматривается по ширине.
Далее мы подключаем файл с CSS-стилями для Twitter Bootstrap 3.0.
Подключаем его из хранилища скриптов Яндекса, для более быстрой загрузки.
У нас есть заготовка страницы.
Вот как она отображается в браузере
Теперь мы переходим к самому главному, тексту на Landing Page.
Какие требования к нему предъявляются?
Один из способов привлечь внимание посетителей Вашей целевой страницы это задать ему прямой вопрос о главной проблеме, которая его волнует.
А дальше предложите Ваше решение этой проблемы.
Чтобы получить решение посетитель должен заполнить простую форму из одного или двух полей.
Объясните пользователю что вы собираетесь делать с этими данными.
Я делаю шаблон для Landing Page, чтобы Вы могли его у себя использовать, поэтому текст для примера будет такой:
«Нужна подписная страница?
Не знаешь как её создать?
Всё просто. Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.».
Теперь добавляем наш текст и форму подписки на нашу страницу.
Получаем следующее
Twitter Bootstrap - пример Landing Page
Нужна подписная страница?
Не знаешь как её создать?
Всё просто.
Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
Посмотрим как он выглядит в браузере
Теперь размещаем наш текст с формой подписки по центру страницы.
Для этого добавляем еще код CSS и у нас получается следующее
Twitter Bootstrap - пример Landing Page
Нужна подписная страница?
Не знаешь как её создать?
Всё просто.
Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
Мы задали горизонтальное выравнивание по центру col-md-6 col-md-offset-3.
Затем добавили верхний отступ по умолчанию
и использовали специальный класс margin-base-vertical для регулирования вертикальных отступов для некоторых элементов.Вот что у нас получилось на данный момент.
Давайте немного поработаем над отображением нашей страницы.
Для этого добавим новый шрифт FontAwesome текста из сети и символ конверта icon-envelope , в место @.
Получим следующий код
Twitter Bootstrap - пример Landing Page
Нужна подписная страница?
Не знаешь как её создать?
Всё просто.
Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
Вот как он выглядит в браузере
Добавим фон для нашей страницы, чтобы она была более привлекательная.
Где взять хорошее изображение для фона страницы?
Приведу Вам три источника:
— заказать создание изображение фрилансеру;
— http://123rf.com — профессиональный банк изображений, там нужные картинки ищутся быстро и покупаются с лицензией;
— http://www.freepik.com/ — поисковик бесплатной графики.
Находите или покупаете готовое изображение и сохраняете его в формат JPEG размером 1291х726 (такой размер я использую в примере, Вы можете выбрать любой другой).
И добавляем CSS.
У нас получается следующий код страницы:
Twitter Bootstrap - пример Landing Page
Нужна подписная страница?
Не знаешь как её создать?
Всё просто.
Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
Смотрим результат — здесь
Неплохо получилось!
Смотрим, как это выглядит на cмартфоне под Андройд
Всё хорошо, но хотелось бы связать нашу подписную форму с каким-либо сервисом рассылок.
В продолжении данной заметки я расскажу, как можно наш шаблон связать с сервисом Smartresponder.ru.
Для написания использовался код из статьи: «Bootstrap in practice: a landing page».
P.S. — Коммерческий сайт своими руками от и до — это просто! Не верите? Щелкайте здесь — перейти