Наш партнер GENESIS HACKSPACE

Хакспейс: Клуб — физическое место, где собираются увлеченные техникой, IT, электроникой, роботами и физикой люди. Первая сеть бесплатных хакспейсов в г.Тверь и области.

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

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«.


Мегаконкурс в апреле "Приведи друзей на codeby". Дарим деньги, подписку на журнал хакер и выдаем статус "Paid Access". Подробнее ...

Похожие темы

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