Генеральный партнер codeby Genesis Hackspace

Genesis HS  - физическое место, где собираются увлеченные техникой, IT, электроникой, роботами и физикой люди.

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

np2

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

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

5

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

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

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

7

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

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

1

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

8

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

2


Спонсор публикаций HOSTLAND.RU

Hostland.RU уже более 10 лет является профессионалом в сфере предоставления виртуального хостинга и целого ряда сопутствующих услуг. Мы отвечаем за качество нашей работы.

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

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


Спонсор публикаций BlackDiver

Обучение тестированию на проникновение  - Обучению тестированию на проникновение от BlackDiver. Базовый курс

Похожие темы

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