Как создавать одностраничные сайты с Divi

Divi упрощает создание красивых одностраничных веб-сайтов.

Боковая панель навигации Divi

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

Включение одностраничной навигации

Включить одностраничную навигацию можно для каждой страницы. Каждый раз, когда вы создаете или редактируете страницу, ищите поле «Настройки страницы Divi» справа от текстового редактора. В этом поле вы увидите опцию «Точка навигации». В раскрывающемся меню выберите «Вкл.» И сохраните страницу. Теперь вы заметите, что плавающая панель навигации была добавлена ​​с правой стороны вашей страницы. Панель точечной навигации автоматически добавляет интерактивную ссылку в каждый раздел вашей страницы. Когда вы добавляете новый раздел, новая круговая ссылка (или точка) будет автоматически добавлена ​​в вашу плавающую боковую навигацию. Пользователи могут щелкать точки, чтобы переходить к различным разделам на странице. Это также упрощает определение того, где находится посетитель на странице, что упрощает навигацию по страницам большого формата.

Создание настраиваемых ссылок меню для одностраничных веб-сайтов

В дополнение к боковой навигации, также возможно преобразовать вашу основную навигацию в одностраничную навигацию. В одностраничном веб-сайте ссылки могут указывать на соответствующие разделы на той же странице. При нажатии они могут перенаправить вас в соответствующий раздел на странице, используя эффект плавной прокрутки. Это можно сделать с помощью идентификаторов CSS. Любому элементу на странице, созданной с помощью конструктора, можно присвоить идентификатор. Вы можете назначить идентификатор для раздела, щелкнув значок настроек раздела и выбрав в меню «Расширенный» поле «CSS ID». После того, как идентификатор назначен, добавьте его в меню навигации. Предположим, что у вас есть раздел «О нас», и вы хотите, чтобы он содержал ссылку на ту часть вашей страницы, которая описывает вашу компанию. Введите «ourskills» в поле «CSS ID»  текстового модуля или всего раздела и нажмите «Сохранить». Теперь, когда идентификатор был назначен, мы можем указать ссылку на него.

Указание ссылки меню на идентификатор

Создайте новое меню (если оно не создано), используя панель администратора WordPress: «Внешний вид> Меню». После того, как вы создали новое меню, вы можете начать добавлять ссылки. Мы создадим настраиваемую ссылку, щелкнув вкладку «Произвольные ссылки» в левой части страницы. После нажатия вам будет предоставлено два поля (URL-адрес и текст ссылки). Для «Текст ссылки» просто введите текст, который вы хотите отображать в своем меню (например, «О нас»). Для URL-адреса нам нужно указать идентификатор, который мы присвоили нашему разделу ранее. В этом случае мы добавили идентификатор «ourskills», но вы можете добавить любое имя идентификатора, которое вам нравится. Поскольку мы использовали идентификатор «aboutus», мы можем ссылаться на этот идентификатор, создав URL-адрес, указывающий на «/ # aboutus». Вы можете использовать этот же метод для создания любого количества настраиваемых ссылок. Просто введите URL-адрес «/ #», а затем идентификатор, на который вы хотите настроить таргетинг.