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


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

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

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

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

Так, например, мой бесплатный курс «Как набрать текст голосом» расположен в отдельной папке, и адрес курса имеет вид: http://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. Когда всё готово копируете сайт на хостинг и проверяете работу в разных браузерах. Так как иногда в разных браузерах отображение страницы может отличаться.

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

  • Олег

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

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

    • Максим Зайцев От автора

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

      • Олег

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

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

        • Максим Зайцев От автора

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

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

  • Иван

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

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

    • Максим Зайцев От автора

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

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

  • Галина Нагорная

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

    • Максим Зайцев От автора

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

  • Ксенья Юрьевна

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

  • Ксенья Юрьевна

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

    • Максим Зайцев От автора

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

  • Vlad

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

    • Максим Зайцев От автора

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