Одностраничный веб-сайт отображает все на одной странице. После загрузки такая страница (веб-сайт) отображается целиком, и по мере того, как посетитель сайта нажимает на каждый пункт меню в заголовке, открываются и отображаются различные разделы страницы.
Такие сайты обладают множеством преимуществ, таких как простая и удобная навигация, адаптивность для мобильных устройств, повышение вовлеченности посетителей, более высокий коэффициент конверсии, а также простота создания и поддержки. Они подходят для целевых страниц , сайтов, посвященных мероприятиям, и для краткой и лаконичной демонстрации вашего портфолио .
Этого можно добиться, используя важный элемент, называемый идентификатором раздела (Section ID) , который можно указать в настройках раздела.
В этой статье описано, как создать одностраничный веб-сайт, используя идентификатор раздела и пункт меню «Ссылка».
В этой статье:
- Создайте страницу и добавьте разделы
- Укажите идентификатор раздела
- Сделать страницу главной
- Создайте пункты меню ссылки, используя идентификатор раздела
- Включить кнопку «Вверх»
- Включить липкую навигацию
Создайте страницу и добавьте разделы
- Первым шагом является создать новую страницу и добавьте нужные разделы к нему.
- Вам необходимо создать все разделы, которые будут связаны с соответствующими пунктами меню (например, страницы «О нас» и «Контакты»).
Укажите идентификатор раздела
- После того, как вы добавили разделы на страницу, зайдите в настройки разделов всех добавленных разделов и указать идентификатор раздела каждому из них.
Сделать страницу главной
Далее перейдите в раздел «Веб-сайт» , установите эту страницу в качестве главной (1) и скройте ее из меню/навигации веб-сайта (2).
Создайте пункты меню ссылки, используя идентификатор раздела
Теперь создайте пункты меню, такие как «Главная», «О нас», «Работа», «Контакты» и т. д.
Чтобы добавить новый пункт меню со ссылкой, введите «добавить ссылку» (1) в поле поиска и нажмите кнопку «Добавить ссылку» (2).
Чтобы связать элемент меню ссылки с разделом страницы, выполните следующие действия:
- Из издания Вебсайт раздел, наведите курсор на пункт меню ссылки и нажмите на значок значок трех вертикальных точек (1) рядом с ним.
- Выберите Настройки вариант (2) из выпадающего списка.
- Далее прокрутите вниз до Цель ссылки раздел (3), выберите Раздел страницы вкладку (4) и укажите Идентификатор раздела (5) раздела, который вы хотите связать.
- Идентификатор раздела должен быть таким же, как указано в разделе страницы без пробелов.
- Наконец, нажмите Сохранено кнопку (6).
Включить кнопку возврата наверх
Полезно иметь кнопку, которая исчезает при прокрутке вниз и плавает в нижней части браузера. Вы можете легко вернуться к началу, нажав на него.
- Чтобы включить кнопку «Вернуться к началу», перейдите к Дизайн раздел и нажмите кнопку нижний колонтитул вкладку или просто введите вернуться к началу в поле поиска таким образом:
- Далее прокрутите вниз до Вернуться к началу кнопки раздел и включите кнопку.
Включить липкую навигацию
Вы также можете включить фиксированную навигацию в шапке сайта, чтобы улучшить его внешний вид. Узнайте больше.
Проверьте демонстрационный сайт с фиксированной навигацией.
Вуаля! Ваш одностраничный сайт готов. Вы можете просто нажать кнопку « Просмотреть сайт» вверху страницы, чтобы увидеть свой сайт.
Ознакомьтесь со статьей « Создайте свой сайт на Pixpa — полное руководство» , чтобы узнать о других возможностях настройки вашего сайта.
- Идентификатор раздела чувствителен к регистру.
- Используйте только буквы, цифры и дефисы для идентификаторов разделов. Не используйте #, пробелы или специальные символы.
- Используйте тире для разделения слов в идентификаторе раздела.
Вот несколько демонстрационных одностраничных веб-сайтов: