Узнайте здесь, как сделать лендинг пейдж самому бесплатно!
Адаптивная верстка лендинг пейдж в bootstrap самостоятельно за 5 минут!
Приветствую Вас, уважаемые друзья и гости моего блога! Сегодня мы с вами займемся адаптивной версткой лендинг пейдж. И Вы самостоятельно сможете сделать для себя и не только, адаптивную подписную страничку захвата. И времени это у Вас займет всего лишь от 5 до 15 минут вашего личного времени.
Но самое главное, что это будет для Вас совершенно бесплатно, та как Вы сделаете лендинг пейдж самостоятельно!
И так, давайте приступим и узнаем с вами. Как сделать лендинг пейдж самому бесплатно?
А в конце этого коротенького мастеркласса Вас ждет небольшой подарок!
Вы сможете, скачать шаблон лендинг пейдж бесплатно!
Как только мы с вами закончим обучение в данной статье, я вам дам ссылку и Вы сможете скачать шаблон лендинг пейдж бесплатно и редактировать его под себя как угодно.
Но сначала давайте научимся с вами , как сделать лендинг пейдж самому бесплатно.
Начнем с того, что узнаем как сделать адаптивный шаблон для лендинг пейдж. Все довольно просто. Существует такой специальный, очень на сегодняшний день популярный фреймворк , это Twitter Bootstrap. В котором мы с вами и будем создавать наш лендинг пейдж.
Вы спросите, что такое за фреймворк такой, да еще с таким названием, Twitter Bootstrap.
Twitter Bootstrap – это такой специальный сервис, который содержит инструменты для создания веб-приложений. Включающий широкий набор HTML и CSS шаблонов для оформления, которые в свою очередь имеют огромную библиотеку типографики, веб-форм, кнопок, меток, блоков навигации и много чего еще, включая также наборы JavaScript.
Для создания нашего лендинг пейдж давайте возьмем уже готовый HTML код в библиотеке Twitter Bootstrap.
Вот он:
<!DOCTYPE html>
<html>
<head>
<title>Страница подписки - лендинг пейдж</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Это наша страница подписки!</h1>
</body>
</html> В этом коде содержится строка:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
которая служит для того, чтобы наш лендинг пейдж был адаптивным ко всем устройствам, включая мобильные, что на данный момент времени очень важно. Потому, что пользователей имеющих мобильные устройства, сейчас больше, чем пользователей, которые сидят за компьютерами и вывод от сюда делайте сами!
Следующим шагом, который нам нужно сделать, это подключить файл стилей CSS для нашего Twitter Bootstrap. И для этого служит вот такой коротенький код:
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Вот уже у нас с вами есть небольшая болванка лендинг пейдж, которую если открыть в браузере, то будет она выглядеть вот так:
Теперь нам нужно создать подписной текст, который будет захватывать нашего подписчика целиком и полностью и не будет отпускать, пока он не введет свой E-mail адрес и не подпишется на наш блог. Вот примерно такой:
<!DOCTYPE html>
<html>
<head>
<title>Страница подписки - лендинг пейдж</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Вы хотите получить бесплатно лендинг пейдж?</h1>
<p>
Но Вы не знаете как его создать?
</p>
<p>
Всё очень просто.
</p>
<p>
Введите свой E-mail адрес в поле расположенное под этим текстом, чуть ниже и получите свой готовый лендинг пейдж, готовый к редактированию под ваши нужды. А также и инструкцию по его адаптации.
</p>
<form action="/mailing-list" method="post">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="pribylwm@gmail.com" />
</p>
<p class="help-block"><small>Ваш E-mail адрес не будет передаваться или продаваться третьим лицам! Спама также не будет!!!</small></p>
<p>
<button type="submit" class="btn btn-success btn-lg">Хочу получить бесплатно!</button>
</p>
</span>
</form>
</body>
</html> И дальше смотрим, как он выглядит в браузере:
Не совсем то, что нам нужно. Все сдвинуто в сторону и смотрится некрасиво. Для улучшения нашего лендинг пейдж нам нужно вставить CSS стили в наш HTML файл. Делаем это немедленно, посредством вставки кода. И вот что у нас получается:
<!DOCTYPE html>
<html>
<head>
<title>Страница подписки - лендинг пейдж</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding-top: 20px;
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="margin-base-vertical">Вы хотите получить бесплатно лендинг пейдж?</h1>
<p>
Но Вы не знаете как его создать?
</p>
<p>
Всё очень просто.
</p>
<p>
Введите свой E-mail адрес в поле расположенное под этим текстом, чуть ниже и получите свой готовый лендинг пейдж, готовый к редактированию под ваши нужды. А также и инструкцию по его адаптации.
</p>
<form action="/mailing-list" method="post" class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="pribylwm@gmail.com" />
</p>
<p class="help-block text-center"><small>Ваш E-mail адрес не будет передаваться или продаваться третьим лицам! Спама также не будет!!!</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Хочу получить бесплатно!</button>
</p>
</span>
</form>
</div>
</div>
</div>
</body>
</html> А вот как это выглядит теперь в браузере:
Намного лучше, неправда ли? Но это еще не все. Теперь давайте немного подправим наш текст и внесем некоторые изменения в стили CSS. И наш HTML код теперь будет выглядеть вот так:
<!DOCTYPE html>
<html>
<head>
<title>Страница подписки - лендинг пейдж</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="margin-base-vertical">Вы хотите получить бесплатно лендинг пейдж?</h1>
<p>
Но Вы не знаете как его создать?
</p>
<p>
Всё очень просто.
</p>
<p>
Введите свой E-mail адрес в поле расположенное под этим текстом, чуть ниже и получите свой готовый лендинг пейдж, готовый к редактированию под ваши нужды. А также и инструкцию по его адаптации.
</p>
<form action="/mailing-list" method="post" class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="pribylwm@gmail.com" />
</p>
<p class="help-block text-center"><small>Ваш E-mail адрес не будет передаваться или продаваться третьим лицам! Спама также не будет!!!</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Хочу получить бесплатно!</button>
</p>
</span>
</form>
</div>
</div>
</div>
</body>
</html> А в браузере будет вот такая вот картинка:
Ну вот, теперь шрифт намного стал привлекательнее выглядеть. Но это также еще не все. Давайте с вами сделаем красивый фон для нашего лендинг пейдж, чтобы он смотрелся красивее. Для этого нам нужно скачать какую нибудь красивую картинку с размерами 1291х726 px в формате JPEG или PNG.
И далее добавить в наш HTML файл дополнительные стили CSS. И код наш будет теперь выглядеть вот так вот:
<!DOCTYPE html>
<html>
<head>
<title>Страница подписки - лендинг пейдж</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://yandex.st/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* https://pribylwm.ru/image/ */
html {
background: url(img/fon.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="margin-base-vertical">Вы хотите получить бесплатно лендинг пейдж?</h1>
<p>
Но Вы не знаете как его создать?
</p>
<p>
Всё очень просто.
</p>
<p>
Введите свой E-mail адрес в поле расположенное под этим текстом, чуть ниже и получите свой готовый лендинг пейдж, готовый к редактированию под ваши нужды. А также и инструкцию по его адаптации.
</p>
<form action="/mailing-list" method="post" class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="pribylwm@gmail.com" />
</p>
<p class="help-block text-center"><small>Ваш E-mail адрес не будет передаваться или продаваться третьим лицам! Спама также не будет!!!</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Хочу получить бесплатно!</button>
</p>
</span>
</form>
</div>
</div>
</div>
</body>
</html> А в браузере картинка будет вот такая с моим фоном, но Вы можете себе сделать любой фон, какой вам только понравится, а у меня вот такой лендинг пейдж получился:
Здесь Вы можете посмотреть “Как создать одностраничник бесплатно новичку?” не копаясь в кодах и не мороча себе голову, а просто скачав у меня программу для создания одностраничников и сделав его за 5 минут самостоятельно! Смотрите здесь!
Ну вот и все на сегодня. Ах да, забыл про подарок!
Вот здесь Вы можете скачать шаблон лендинг пейдж бесплатно:
[sociallocker]Ссылка для скачивания шаблона лендинг пейдж![/sociallocker]
Если вам понравилась статья? Поделитесь ею со своими друзьями и знакомыми в соцсетях нажав на кнопочки ниже!
А если хотите быть всегда в курсе всех новых событий на моем блоге, то подпишитесь на его обновления!
Спасибо за внимание!
Всегда ваш Валерий Бородин
Спасибо, Валерий! Очень полезная информация. Я не знала про этот сервис. Возможно воспользуюсь.
Маргарита, всегда пожалуйста!!! Жду в гости снова!
Я давно хочу сделать лендинг для личного кабинета в сетевой компании. Но когда увидела, что тут надо работать с кодами – все мое желание отпало. Это не для меня, так как я совершенно не разбираюсь в кодах, уж лучше это дело делегировать профессионалам. Иначе я так напортачу. что и не переделать нельзя будет.
Таисия! Вы немного не туда посмотрели. Вот мой следующий материал по созданию лендингов в специальной программе Web Page Maker. Которая расчитана как на новичка, так и на матерого вебмастера. Скачивайте здесь видеоурок и саму программу Web Page Maker+активатор: https://pribylwm.ru/samoobrazovanie/kak-sozdat-odnostranichnik-besplatno-novichku.html. Всего вам наилучшего, пользуйтесь на здоровье!!!!