Как сделать лендинг пейдж самому бесплатно

Как сделать лендинг пейдж самому бесплатно 

Узнайте здесь, как сделать лендинг пейдж самому бесплатно!

Адаптивная верстка лендинг пейдж в 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 стили

CSS стили

Намного лучше, неправда ли? Но это еще не все. Теперь давайте немного подправим наш текст и внесем некоторые изменения в стили 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>

А в браузере будет вот такая вот картинка:

HTML код

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 минут самостоятельно! Смотрите здесь!

Ну вот и все на сегодня. Ах да, забыл про подарок!

Вот здесь Вы можете скачать шаблон лендинг пейдж бесплатно:

Нажмите на любую кнопочку поделиться в соц сетях и пользуйтесь на здоровье!

Если вам понравилась статья? Поделитесь ею со своими друзьями и знакомыми в соцсетях нажав на кнопочки ниже!

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

 

Спасибо за внимание!

Всегда ваш Валерий Бородин

Подписаться на обновление блога

Введите свой e-mail адрес:

 

Похожие записи

Сайтостроение

Готовые лендинги — скачай бесплатно и пользуйся!

Сайтостроение

Скачать шаблон для лендинг пейдж бесплатно!

Полезные программы

Как создать одностраничник бесплатно новичку?