Сегодня прекрасный день и мне хочется поделиться чем-нибудь хорошим, красивым и лёгким. Сегодня я покажу, как сделать одностраничный сайт. Причём нам хочется не унылую страничку, а многоуровневую, с навигацией, при клике на которую будет происходить плавное прокручивание к нужному месту. Я уверен, что вы уже видели достаточно много примеров таких страниц. Мы сделаем ещё круче — у нас будет фоновое видео. Вот так получилось у меня — живое демо — обязательно зайдите, посмотрите и покликайте по ссылкам, т. к. статическая страница не передаёт ощущения от сайта. Скажу честно, это мой первой одностраничник. Что-то подобное может сделать каждый за очень короткое время. Поехали!

np2

1. Естественно, нам нужен хостинг на котором будет размещён наш сайт. Переходим сюда, выбираем тариф «Простор 1» — для одностраничного сайта точно больше не надо. Кстати, каждому домен в подарок! После получения паролей на почту, зайдите в Панель управления и выберите любой не занятый домен в подарок.

2. Перейдите на вкладочку «Приложения»  . В поле поиска введите «wordpress»:

5

Теперь нажмите зелёную кнопочку «Выбрать»:

6
Выбираете ваш домен и нажимаете «создать заявку»:

Очень быстро к нам на почту придёт письмо, а мы уже можете зайти на ваш сайт, в строке браузера наберите домен, который вы выбрали. Вы увидите там следующее:

7

Т.е. сайт уже работает! Но он не заполнен материалом.

Заходим в сайт — для этого кликаем ссылку «Войти» и используем логин и пароль, который нам прислали по почте.

1

3. Нас встречает вот такая панель управления:

8

В консоли WordPress ищим вкладочку «Внешний вид» и в ней выбираем «Темы». Кликаем «Добавить новую» и в окошечке поиска набираем «onetone»:

2

Наводим курсор на тему и нажимаем «Установить». Теперь нажимаем «Активировать»:

3

Уже сейчас можете перейти на главную страницу своего сайта и посмотреть — выглядит потрясающе, при клике на ссылки происходит плавная прокрутка. Сайт красивый, но, не совсем наш.

4

Сейчас я покажу как его заполнить материалом. Это несложно.

4. Опять переходим в раздел «Внешний вид» и выбираем там пункт «Onetone Options» и переходим во вкладочку «Home Page»:

5

Section Num – сколько секций мы хотим сделать. Я пока оставлю как есть.

Раскрываем первую секцию («Section 1») и видим там «Section Background Video» — т. е. мы можем поменять видео на своё или удалить видео совсем. Если мы хотим вставить видео, то смотрим на его адрес. Например, я хочу вставить видео youtube.com/watch?v=n93yBOhvYS0 , из этого адреса нам нужно взять только n93yBOhvYS0 и вставить в соответствующее окошечко. Сохраняемся и смотрим:

6

Неплохо. Продолжаем.

Заполняем «Menu Title» и «Menu Slug». Первое — это то название, которое отображается в меню. Важно не оставлять пункт «Menu Slug» пустым!

7

В редакторе набираем информацию о себе, добавляем ссылки на социальные сети:

8

Продолжаем дальше — заполняем каждую секцию:

9

В результате у меня получилось вот так. Было ли это трудно? Нет, это было весело и интересно. Теперь у нас в Интернете есть свой собственный домик — наш сайт. Этот сайт каждому и всё время рассказывает о вас или о ваших услугах, о вашем бизнесе или ваших интересах — такого не может ни один работник. Затраченные усилия гарантированно стоили полученного результата.

Бонус: Обзор тем (10 ноывх тем!), специально подходящих для одностраничных сайтов в статье «Как создать лендинг на WordPress«.

Похожие темы

Как сделать свой сайт? Предположим, что у вас есть конкретная цель — создать свой сайт. Можно ли это сделать не имея большого количества денег? Да, можно! Причём сво...
Как создать свою фотогалерею в Интернете... Просмотр картинок в Интернете — популярнейшее занятие. Кому не нравится посмотреть интересную красочную подборку или какое-нибудь необычное изображени...
Про раскрутку сайта Сначала реальная история. Зашёл я однажды на торрент-трекер, но, даже не поняв как это произошло, оказался на другом сайте. На сайте была статья — с п...
Профессионально выглядящий бизнес-сайт своими рука... Возможно ли это — сделать сайт, который будет выглядеть профессионально, будет сделан своими руками (читайте - «бесплатно»), который станет источником...
Как начать зарабатывать делая сайты. Старт фриланс... Это продолжение, начало здесь. 6. Где искать своего заказчика? Итак, мы запаслись навыками и знаниями по созданию сайтов. Мы запаслись аргументами ...