Advertisement
  1. Web Design
  2. WordPress

Как сделать простой одностраничный сайт: тема Parallax WordPress

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

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

Одна из причин привлекательности одностраничников заключается в том, что они отлично используют эффект параллакса для визуальной привлекательности, не замедляя ваш сайт. И это не все их преимущества:  

Зачем делать одностраничный  сайт (с эффектом Parallax)

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

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

Как всегда с WordPress, недостатка в one page themes с красивыми эффектами параллакса нет. В разнообразии корпоративных тем и портфолио можно найти тему, соответствующую вашей отрасли и характеру вашего бизнеса. Здесь представлены более популярные темы WP:

Как использовать одностраничную тему Parallax для создания сайта

В этой статье мы покажем, как использовать одну из замечательных тем WordPress, чтобы создать простой одностраничный сайт с эффектом parallax.

Что понадобится для начала

Давайте рассмотрим, как сделать one page сайт. Прежде, чем создавать сайт, вам нужно кое-что сделать. Помимо темы, которую вы будете использовать, необходимо приобрести доменное имя и хостинг. Поиск хорошего набора изображений, чтобы использовать эффект parallax, рекомендуется в полной мере. Итак, начнем:

1. Приобретите доменное имя

Прежде всего, вам нужен домен для нового веб-сайта. Это ваш онлайн-дом и лицо вашего бизнеса. Если есть название компании, очевидным вариантом будет его использование в качестве имени домена. Но если вы фрилансер, занимающийся бизнесом под своим именем, ваше доменное имя должно это отражать.

2. Выберите качественный план хостинга

После выбора имени домена следующим шагом будет покупка хостинг-плана. Большинство hosting компаний предложат выбор домена одновременно с подпиской на план хостинга. Большинство из них будут поддерживать доменное имя в течение года бесплатно. План совместного хостинга хорош для начала, вы сможете обновить свой план позже, если решите перейти на многостраничный веб-сайт.

3. Возьмите лучшую тему One Page WordPress 

Для WordPress доступны как бесплатные, так и premium темы, но часто рекомендуется выбирать premium тему, premium WordPress theme поддерживается разработчиком, поэтому она всегда будет обновляться в лучшем виде.

И если потребуется помощь в настройке premium темы, её разработчик своевременно откликнется. Можете приобрести дополнительную поддержку темы в момент покупки.

В этом уроке я использую мощную тему The Ark из ThemeForest. Эта one-page тема содержит несколько образцов макетов:

The Ark WordPress theme with multiple layout options ready to use quicklyThe Ark WordPress theme with multiple layout options ready to use quicklyThe Ark WordPress theme with multiple layout options ready to use quickly
The Ark WordPress theme с разнообразными настройками, готовая к работе.

Главное, она полностью отзывчива, поэтому ваш сайт будет отлично отображаться на разных экранах. Есть компоновщик страниц, который создаст совершенно уникальный макет one page сайта с нуля или добавит разделы на ваш сайт по усмотрению.

The Ark WordPress themeThe Ark WordPress themeThe Ark WordPress theme
Тема Ark WordPress позволяет быстро создать сайт на одной странице.

Просмотрите one page темы, чтобы найти ту, которая вам нравится. Когда найдете, купите её и загрузите файлы темы на свой компьютер.

The Ark one page WordPress theme comes with several demosThe Ark one page WordPress theme comes with several demosThe Ark one page WordPress theme comes with several demos
The Ark WordPress тема с примерами макета.

4. Подберите содержимое и изображения

Последнее в нашем списке -  контент и изображения. Хотя one page веб-сайты ограничены в плане количества контента, лучше приготовить его заранее, а не выдумывать на ходу.

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

Начнём

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

1. Установка WordPress

Ваша hosting компания отправит вам приветственное письмо со всей необходимой информацией о вашем плане хостинга. Откройте письмо и запишите имя пользователя и пароль для вашей cPanel. Нажмите ссылку, которая сразу приведёт вас на страницу входа cPanel. Введите предоставленное имя пользователя и пароль и вы будете готовы установить WordPress.

  1. В cPanel найдите установщиков веб-сайтов или установщика Fantastico или Softaculous. Нажмите на значок WordPress и на кнопку Install. Вам будет предложено указать имя пользователя и пароль и выбрать домен для установки WordPress.
  2. Выберите имя пользователя и надёжный пароль, который содержит как прописные, так и строчные буквы, а также цифры и специальный символ. Запишите имя пользователя и пароль в безопасном месте.
  3. Нажмите кнопку Install ещё раз, чтобы завершить процесс установки.

Когда WordPress завершит установку, вы увидите экран уведомлений со ссылкой на вашу панель инструментов WordPress. Нажмите ссылку и введите имя пользователя и пароль, которые вы выбрали в процессе установки.

2. Установка вашей темы WordPress  

Теперь, когда вы вошли в свой веб-сайт WordPress, выберите Appearance > Themes > Add new. На загружаемом экране выберите Upload Theme.

Installing your WordPress themeInstalling your WordPress themeInstalling your WordPress theme
Быстрая установка темы WordPress.

Нажмите кнопку, чтобы выбрать папку с архивом файлов темы, а затем нажмите Upload. После установки темы нажмите Activate.

3. Установите и активируйте необходимые плагины.

После активации темы WordPress вы получите уведомление о необходимости установки дополнительных плагинов. Чтобы установить их, нажмите Begin Installing Plugins, выберите все плагины и нажмите Install в раскрывающемся меню.

WordPress Plugins to InstallWordPress Plugins to InstallWordPress Plugins to Install
WordPress плагины для установки.

После этого перейдите в Plugins > Installed Plugins и выберите все плагины, которые вы только что установили, и выберите Activate.

Activate your WordPress PluginsActivate your WordPress PluginsActivate your WordPress Plugins
Активация плагинов WordPress.

Как настроить одностраничный WordPress сайт 

Когда ваша тема WordPress активирована и установлены дополнительные плагины, пришло время настроить тему в соответствии с вашим брендом и добавить свой контент. Один из самых простых способов настроить сайт на одной странице - начать с готового макета.

К счастью, большинство premium тем WordPress содержат несколько макетов, которые уже настроены, поэтому всё, что вам нужно сделать, это заменить информацию своей. В этом уроке я выбрал основной пример, так как в нём есть множество готовых one page макетов. 

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

Сначала нажмите Settings > Reading > Front Page Displays a Static Page и выберите один из макетов страницы в качестве главной. Затем выберите нужный макет для страницы текстов и нажмите Save Settings.

Чтобы заменить контент, перейдите в Pages > All Pages, выберите домашнюю страницу и нажмите Edit.

Чтобы настроить изображения в заголовке, щёлкните значок Edit  раздела, который вы хотите настроить, а затем выберите Box Model. Прокрутите страницу до раздела Image или Parallax и замените изображение своим. Не забудьте использовать изображения, которые не отвлекают от текста о вашей компании.

Add your companys messagingAdd your companys messagingAdd your companys messaging
Добавление сообщений в WordPress.

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

Чтобы отредактировать содержимое, щёлкните раздел, содержащий текст, и введите свою копию в Visual Editor. Повторите этот процесс для каждого раздела, который нуждается в редактировании. Когда редактируете разделы, перейдите на вкладку element.style и введите ID маленькими буквами в ID field. Это поможет вам быстро настроить меню навигации.

Adding ID attributes to your WordPress themeAdding ID attributes to your WordPress themeAdding ID attributes to your WordPress theme
Вставка атрибутов ID в тему WordPress.
Кроме того, вы можете дополнительно настроить макет или создать его с нуля, перейдя в Ark> Sitemap.

Подменю Ark имеет опции для настройки headers, footers, sidebars и более.

Контент заменили, давайте настроим меню навигации. Перейдите в раздел Appearance > Menus и выберите One Page Navigation в раскрывающемся меню. Установите флажок рядом с Main Navigation в разделе Display Location и нажмите Save.

Adding a menu to your one page WordPress theme setupAdding a menu to your one page WordPress theme setupAdding a menu to your one page WordPress theme setup
Добавление меню на вашу тему WordPress.

Нажмите Custom URL и введите ID всех разделов, которые вы назвали в процессе редактирования контента в поле URL. Нажмите Update Menu и ваша навигация настроена.

Заключительный шаг - настроить тему WordPress в соответствии с вашим брендингом. На панели инструментов нажмите Ark > Theme Options. На этой странице вы можете изменить заголовки сайта, настроить цвета, добавить пользовательские шрифты или выбрать шрифты Google.

Work with the WordPress theme Options panelWork with the WordPress theme Options panelWork with the WordPress theme Options panel
Работа в панели Options темы WordPress.

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

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

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

Add sections to your one page website in your WordPress themeAdd sections to your one page website in your WordPress themeAdd sections to your one page website in your WordPress theme
Быстрое добавление разделов сайта на теме WordPress.

Вы можете создать совершенно новый макет, нажав Pages > Add New > Use Fresh Builder и добавив разделы в виде элементов так, как вы хотите их видеть. Можно создать новый макет, перейдя в Ark > Sitemap > Default Page и нажав на значок «+» внизу. Дайте вашему шаблону имя, нажмите Save, а затем добавьте нужные вам разделы и элементы.

Adding a new page layout to your WordPress theme setupAdding a new page layout to your WordPress theme setupAdding a new page layout to your WordPress theme setup
Добавление нового макета страницы темы WordPress.

На этом ваш one page сайт настроен. Теперь, когда вы узнали, как сделать сайт на одной странице из темы WordPress, настало время направить на него трафик.

Что делать, когда ваш сайт ожил (продвигайте его)

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

Ещё один простой способ продвижения вашего сайта - включить ссылку на него на визитные карточки и ваши letterhead, brochures или fliers. Включите свой веб-сайт в email signature, поскольку электронная почта по-прежнему широко используется.

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

Начните работу (быстро) с отличной One Page WordPress Theme

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.