Как создать одностраничный сайт на домене своего блога

Здравствуйте, уважаемые друзья. Как создать одностраничный сайт? Этот вопрос интересует многих. Одностраничные сайты или лендинги можно создать на специальных сервисах, а для владельцев сайтов на платформе WordPress существует готовое решение в виде плагина wPPage, и, конечно же, самостоятельно.

В сервисах и плагине wPPage применяются конструкторы для создания одностраничных сайтов. Такой подход существенно облегчает задачу. Можно достаточно быстро с минимальными усилиями создать лендинг всего за полчаса. Как правило, в вашем распоряжении будет множество готовых шаблонов, технических решений: видео, форм подписки, таймеров обратного отсчета, социальных кнопок, сервисов приём оплаты и так далее. Ваша задача разместить эти элементы на странице, простым перемещением.

Но за эти удобства полагается ежемесячная оплата и ограничение на количество созданных сайтов.

Если же вы хотите создать одностраничный сайт самостоятельно, то вам необходимы базовые знания HTML и CSS. Базовых понятий будет достаточно, чтобы создать свой первый одностраничный сайт. А если у вас есть собственный сайт или блог, вы можете разместить одностраничник в отдельной папке на вашем сайте. В таком случае одностраничник будет иметь адрес доменного имени вашего сайта и папки в которой он расположен.

Так, например, мой бесплатный курс «Как набрать текст голосом» расположен в отдельной папке, и адрес курса имеет вид: https://1zaicev.ru/spic/

Итак, если вы хотите создать такой сайт, на странице которого будете собирать свой подписной лист, делясь полезной информацией или раздавая какую-то полезность. Вам необходимо сначала посмотреть на примеры таких страниц.

Примеры одностраничных сайтов популярных инфобизнесменов.

Перечислять абсолютно всех не буду, покажу лишь несколько примеров. Речь идёт не о продающих сайтах, а о страницах подписки и раздачи полезности.

Пример от Азамата Ушанова:

Одностраничник Азамата
Пример одностраничника Азамата

Пример от Евгения Вергуса:

Одностраничник Вергуса
Пример одностраничника Евгения Вергуса

Пример от Александра Новикова:

Одностраничник Новикова
Пример одностраничника Александра Новикова

Надеюсь, вы обратили внимание на схожие элементы в структуре этих страниц. Это очень важно. Так как, понимая структуру, вы легче разберётесь с тем, где и как наполнять одностраничник.

Визуально вы должны были обратить внимание на блоги: шапка сайта, блок с формой подписки и полезностью, подвал сайта. Все эти блоки мы рассмотрим дальше в виде html кода.

Структура одностраничного сайта.

Весь сайт располагаться в отдельной папке. Вы можете создать этот сайт на отдельном домене или на вашем сайте. В таком случае и адрес сайта будет зависеть от вашего решения.

В папке сайта в обязательном порядке должны присутствовать следующие файлы:

Index.html – файл, отвечающий за html каркас страницы.

style.css – стили оформления страницы.

favicon.ico – иконка сайта, если у вас есть такая иконка.

Файлы изображений, скриптов и так далее являются вспомогательными для обеспечения функционала и дизайна страницы.

Пример моего односраничника:

Структура одностраничника
Структура одностраничника

Скачать архив с исходными файлами моего одностраничника вы можете здесь.

А также я рекомендую скачать бесплатный шаблон от Александра Новикова, в нём используется фишка с формой подписки, которая на 30% увеличивает прирост числа подписчиков. Кстати, у Евгения Вергуса предложения сделаны именно на основе шаблона Александра. Да и остальные инфобизнесмены используют эту фишку активно.

В моём же шаблоне используется стандартная форма подписки Смартреспондера. Красиво оформить которую вам поможет эта статья.

Структура html каркаса.

Теперь, когда вы знаете о структуре самого сайта вам важно понимать html структуру страницы. Практически каждая страница имеет следующие структурные элементы:

Шапка страницы (header). В шапке странице расположен заголовок title, ключевые слова и описание этой страницы. Здесь же подключается и файл со стилями (style.css).

Оболочка страницы (wrapper). Оболочка выступает общим каркасом для всего сайта.

Внутренние блоки. В нашем шаблоне это блок right и box. Блоки right и box служат для расположения формы подписки и изображения продукта, который вы предлагаете.

Подвал страницы (footer). Подвал страницы служит для размещения счётчиков аналитики, и сведений о владельце, политике конфиденциальности и так далее.

html структура страницы
html структура страницы
html структура страницы 2
html структура страницы 2

В html странице, в отличие от структуры php все эти элементы представлены в одном файле. В php эти же элементы представлены в разных файлах.

Понимая эти основные структурные элементы, вы уже сможете создать свой первый одностраничный сайт.

Более подробно о структуре странице смотрите в видеоуроке.

Стили css для одностраничного сайта.

Для своего шаблона я использовал следующие стили:

/* Общие стили страницы */
body {
 font: 14px/18px Arial, Tahoma, Verdana, sans-serif; /* Стили шрифта */
 background-image: url("bgr.jpg"); /* Фон страницы */
 background-size: 100%; /* Стиль фона */
}
/* Стили изображений */
img {
 border: none; /* Убрать бордюр */
 margin-left: 10px; /* Отступ слева */
 width: 427px; /* Ширина */
 height: 466px; /* Высота */
 margin-top: 30px /* Отступ сверху */
}
/* Стили поля для ввода */
input {
 vertical-align: middle; /* Вертикальное выравнивание */
}
/* Стили подзаголовка Н2 */
h2 {
 margin: 0px; /* Внешний отступ */
 padding: 0px; /* Внутренний отступ */
 line-height: 1.2em; /* Межстрочный интервал */
 font-size: 24px; /* Размер шрифта */
 color: rgb(27, 41, 50); /* Цвет */
 text-shadow: rgb(210, 227, 236) 0px 1px 0px; /* Тень */
 font-family: Arial, Tahoma, Verdana, sans-serif; /* Шрифт */
 text-align: center; /* Выравнивание по центру */
}
/* Стили оболочки */
#wrapper {
 width: 1000px; /* Ширина */
 margin: 0 auto; /* Выравнивание по центру */
 text-align: center; /* Выравнивание текста */
 border: none; /* Стиль бордюра */
}
/* Стиль для слова "бесплатно" */
.style2 {text-decoration: underline;}
/* Стиль заголовка */
.style3 {
 color: #BB0000; /* Цвет шрифта */
 text-transform: uppercase; /* Все заглавные */
 text-shadow: 1px 1px 2px black, 0 0 1em #FFFFFF; /* Тень шрифта */
 font: normal normal bold 44px normal Arial, sans-serif; /* Стиль шрифта */
}
/* Стиль правого блока*/
.right {
 float: right; /* Обтекание справа */
 width: 600px; /* Ширина */
 outline: 0px solid #fff; /* Стиль рамки */
}
/* Стиль левого блока */
.left {
 float: left; /* Обтекание слева */
 width: 400px; /* Ширина */
 outline: 0px solid #fff; /* Стиль рамки */
}
/* Стиль блока с продуктом */
.box {
 width: 400px; /* Ширина */
 height: 505px; /* Высота */
}
/* Стиль формы подписки */
.form {
 width: 451px; /* Ширина */
 height: 321px; /* Высота */ 
 background-image: url("form_bg.png"); /* Подложка */
 background-repeat: no-repeat; /* Не размножать фон */
 margin: 0 0 0 67px; /* Внешний отступ */
 padding-right: 30px; /* Внутренний отступ справа */
}
/* Стили полей ввода формы подписки */
.form input[type=text]{
 padding: 10px; /* Внутренний отступ */
 width: 280px; /* Ширина */
 margin: 6px 0; /* Внешний отступ */
 font-size: 18px; /* Размер шрифта */
 color: #777; /* Цвет */
 -webkit-border-radius: 8px; /* Округлые края поля */
 -moz-border-radius: 8px; /* Округлые края поля */
 border-radius: 8px; /* Округлые края поля */
 border: 1px solid #aaa; /* Стиль рамки */
}
/* Стили кнопки в форме подписки */
.form input[type=submit]{
 padding: 10px; /* Внутренний отступ */
 width: 300px; /* Ширина */
 margin: 6px 0 3px 0; /* Внешний отступ */
 font-size: 22px; /* Размер шрифта */
 color: #fff; /* Цвет */
 -webkit-border-radius: 8px; /* Округлые края кнопки */
 -moz-border-radius: 8px; /* Округлые края кнопки */
 border-radius: 8px; /* Округлые края кнопки */
 background: #f54646; /* Цвет фона */
 background: -moz-linear-gradient(top, #f54646 0%, #cc2c2c 100%); /* Градиентная заливка */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f54646), color-stop(100%,#cc2c2c)); /* Градиентная заливка */
 background: -webkit-linear-gradient(top, #f54646 0%,#cc2c2c 100%); /* Градиентная заливка */
 background: -o-linear-gradient(top, #f54646 0%,#cc2c2c 100%); /* Градиентная заливка */
 background: -ms-linear-gradient(top, #f54646 0%,#cc2c2c 100%); /* Градиентная заливка */
 background: linear-gradient(to bottom, #f54646 0%,#cc2c2c 100%); /* Градиентная заливка */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54646', endColorstr='#cc2c2c',GradientType=0 ); /* Фильтр для старых браузеров */
 border: 1px solid #a32020; /* Стиль рамки */
 cursor: pointer; /* Курсор в виде пальца */
}
/* Стили кнопки в форме подписки при наведении курсора */
.form input[type=submit]:hover {
 background: #cc2c2c; /* Цвет фона */
}
/* Стили подвала */
.footer {
 clear:both; /* Очистка стилей */
 color: #384954; /* Цвет */
 text-shadow: 0 1px 0 #b6d0e0; /* Тень шрифта */
}

Изображения, указанные в качестве фонового изображения для страницы и формы подписки будут в папке с файлами сайта. Вы их меняете на изображения под свою страницу. После чего указываете их название в соответствующих стилях. Фон для формы можете и не менять, а вот изображения продукта и фон страницы следует изменить.

Схема применения шаблона одностраничного сайта.

А теперь разберём последовательность ваших действий при использовании шаблона:

1. Для начала скачайте архив сайта по ссылке, указанной выше в тексте.

2. Далее, распакуйте архив.

3. Откройте файл index.html. Для этого советую использовать бесплатный редактор кода Notepad++. Измените текст под свой продукт. Вставляете фору подписки, счётчики аналитики, социальные кнопки. Для формы подписки от Смартреспондера вам лишь нужно будет изменить идентификаторы формы. Как? — смотрите видеоурок.

4. В папку с сайтом, загрузите изображения продукта.

5. Откройте файл style.css и укажите название изображений, которые вы загрузили в папку с сайтом.

6. Когда всё готово копируете сайт на хостинг и проверяете работу в разных браузерах. Так как иногда в разных браузерах отображение страницы может отличаться.

Подробно каждый шаг смотрите в видеоуроке ниже.

Вот, и всё. После этого ваш одностраничный сайт будет доступен для всех посетителей. А если у вас остались вопросы, то буду рад ответить на них в комментариях.

Настоятельно рекомендую посмотреть видеоурок по теме, так как тема для новичков может показаться нелёгкой, а в видео я показываю на какие моменты обратить внимание и где внести необходимые коррективы.

Друзья, я желаю вам успехов и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 19
  1. Олег

    Максим, БлагоДарю!
    Как всегда ты делишься с нами. Взял на заметку, скачал, вдруг надумаю делать.

    Вопрос, немного не по теме:
    Как ты сделал «Оповещение о новых комментариях по почте» так, чтоб надпись эта была выше кнопки «Отправить комментарий» и сразу стояла галочка. Ты плагином пользуешься «Subscribe To Comments» или всё ручками сам сделал?

    1. Максим Зайцев (автор)

      Олег, привет. Да, оповещение о новых комментариях у меня организовано через плагин Subscribe To Comments. В моей нынешней теме всё сделано стандартными функциями плагина. А в прошлой теме я вставлял код чекбокса выше кнопки в файле comments.php.

      1. Олег

        Я просто заметил, что у тебя галочка сразу стоит, думал, что ты сам как-то так сделал.
        У меня по умолчанию галочки нет, нужно поставить самому, кто пишет комментарий и она ниже кнопки «Отправить комментарий».

        Хорошо, если пошёл разговор про комментарии, тогда ещё будет вопрос ))
        Как реализовал кнопку «Ответить» под каждым комментарием плагином «WordPress Thread Comment» ?

        1. Максим Зайцев (автор)

          Для того чтобы разместить галочку выше кнопки в файле comments.php нужно вставить этот код ?php show_subscription_checkbox(); ? выше кнопки. Её включенный вариант настраивается в настройках плагина.

          А вот по плагину WordPress Thread Comment ничего сказать не могу, так как сам его не использую, когда-то приходилось его даже дорабатывать, но сейчас без тестирования я даже не вспомню что может этот плагин.

          1. Олег

            Спасибо, Максим!

          2. Максим Зайцев (автор)

            Пожалуйста! ;-)

  2. Иван

    ПрИвЕт Максим, одностраничник это неплохо. Я даже знаю, как можно магазин на WP построить, правда там нужно немного денежек, зато всё удобно и просто. К слову, не так просто стать инфобизнесменом, например, те же платежи трудно реализовать. Да и вообще, тут нельзя сразу начать делать, нужно много изучать. Мне как-то ближе сайт под партнёрку, чисто хватаешь узкую тематику и работаешь с ней.

    Была мыслишка сделать одностраничник, но что-то передумал — мало знаний, квалификация не та. Целый день коту под хвост. Если делать, то под уже конкретную задачу. А то бывает построить какую-нибудь штукенцию, а основа не готова. В данном случае продукт.

    1. Максим Зайцев (автор)

      Вань, привет. При написании статьи я и хотел показать, как можно создать одностраничник использую мой шаблон, как раз под раздачу своей полезняшки. Так как я предлагаю свой бесплатный курс в обмен на подписку. Для партнёрских продуктов этот шаблон также можно использовать.

      А вот если запускать продажу собственного продукта, то тут конечно и продающая страница должна быть в формате все выгоды от покупки товара. И конечно подключение системы оплаты. Для начала можно через Глопарт запустить продажу продукта. Там и систему оплаты можно настроить и дожим на выходе и продвижение за счёт партнёров. Главное, как ты сказал — это продукт!

  3. Галина Нагорная

    Спасибо! Скачала и Ваш, и Новикова — у него в самом деле интересная фишка!
    Мне понравилась — вроде бы мелочь, но менее напрягает…
    Я за подписку отдаю свою книгу, о том, как увеличить количество комментов на блоге. Там уже есть одностраничник на шаблоне — переделывать впадло, а вот на новом блоге о здоровье со временем пригодится!

    1. Максим Зайцев (автор)

      Галина, здравствуйте. Да, такие вещи полезно иметь в своём арсенале, всегда пригодятся. У Александра действительно удобная форма. Я на своём бесплатном курсе переделывать страницу не хочу, — лень! А вот для нового курса буду применять эту фишку. ;-)

  4. Ксенья Юрьевна

    Здравствуйте , Максим, У меня получилось, но не совсем. Не получается самый последний момент. На наш хостинг можно загрузить лендинг только в архиве и хостинге его сразу разархивировать. Когда пишу в браузере название своего сайта, слеш, название лендинга, назвала его «kniga1». Ничего не находится, ошибка 404. Посмотрела у вас на видике, но у вас как раз ничего не видно, чем-то сверху браузер загорожен. Этот момент у вас тоже не понятен, а у меня не получается именно это.

  5. Ксенья Юрьевна

    Максим, тревога отменяется все получилось, после того, как написала в службу поддержки. Это у них не все кнопки работали, но раз заработало, написала им, что они большие молодцы. Надо у людей дух поддержать.

    1. Максим Зайцев (автор)

      Я я писал ответ на ваш предыдущий ответ. Так всё получилось? Ребята из поддержки решили вашу задачу. Очень рад, что всё получилось. Успехов с продвижением вашей книги.

  6. сергей

    Максим! спасибо вам за полезную информацию! давно искал.

    1. Максим Зайцев (автор)

      Пожалуйста, Сергей!

  7. Vlad

    Технически создать одностраничник есть возможности. Но очень важно то, какой контент будет на таком сайте! Мне кажется это намного сложнее.

    1. Максим Зайцев (автор)

      О, да! Наполнение лендинга, да и вообще любого сайта — это гораздо сложнее, чем его создание. И если сайт ещё можно вытянуть хорошими публикациями, то лендинг нужно доделывать или вовсе переделывать!

  8. Дмитрий

    Здравствуйте!
    А Смартреспондер теперь не работает. Как и с чем теперь связать форму?

    1. Максим Зайцев (автор)

      Дмитрий, посмотрите эту статью http://1zaicev.ru/obzor-servisa-mailerlite/ и следующую по настройке этого сервиса http://1zaicev.ru/nastrojka-rassylki-v-servise-mailerlite/

Добавить комментарий