Как создавать активные ссылки в прокрутке для одностраничных сайтов Divi

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

Для тех, кому сложно представить себе этот эффект, мы предоставили предварительный просмотр ниже.

Результат

Давайте посмотрим на окончательный результат, которого вы сможете достичь после этого поста:

Как видите, выделенная активная ссылка изменяется автоматически, когда пользователь прокручивает разделы страницы (а также при нажатии).

Вдохновение

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

Как создавать активные ссылки в прокрутке для одностраничных сайтов Divi

Подпишитесь на наш канал Youtube

Начало работы: загрузка подключаемого модуля прокрутки страницы до идентификатора

Чтобы реализовать этот дизайн, мы собираемся начать с использования бесплатного и хорошо зарекомендовавшего себя плагина Page Scroll to ID, который вы можете найти здесь. Нажмите кнопку «Загрузить» и сохраните ZIP-файл плагина где-нибудь, где вы сможете его сразу найти.

Загрузить и активировать подключаемый модуль прокрутки страницы до идентификатора

Следующее, что вам нужно сделать, это перейти в панель управления WordPress> Плагины> Добавить> Выбрать только что загруженный ZIP-файл и загрузить его.

После этого не забудьте также активировать плагин.

Включить вертикальную навигацию

Прежде чем мы перейдем к настройкам плагина Page Scroll to ID, мы сначала включим вертикальную навигацию (и фиксированную навигацию на следующем шаге). Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> «Формат заголовка»> и включите вертикальную навигацию.

Включить фиксированную навигацию

Далее, давайте включим фиксированную навигацию на вашем сайте. Это необходимо, поскольку весь смысл использования активных ссылок при прокрутке заключается в том, чтобы посетители видели, в каком разделе они находятся, когда они находятся в нем. Если вы находитесь на панели инструментов WordPress, перейдите в Divi> Параметры темы> и включите фиксированную панель навигации на вкладке «Общие».

Прокрутите страницу до настроек плагина ID

В этой части мы собираемся вернуться к недавно загруженному плагину. После того, как вы активировали плагин, вам нужно будет использовать правильные настройки. Чтобы перейти к настройкам, нажмите «Настройки» прямо под названием плагина.

Как только вы это сделаете, вы заметите различные параметры, которые помогут вам определить, как активные ссылки будут вести себя на вашем веб-сайте. В нашем примере мы используем следующие настройки:

• Включить в ссылках меню WordPress: Да
• Продолжительность прокрутки: 200 миллисекунд
• Автоматическая настройка продолжительности прокрутки: Да
• Ослабление анимации прокрутки: линейное
• Всегда плавно прокручивайте при достижении конца страницы / документа: Да
• Остановить прокрутку страницы с помощью колеса мыши или касания: Да
• Макет страницы: авто
• Разрешить только один выделенный элемент за раз: Да
• Держать текущий элемент выделенным, пока не появится следующий: Да
• Выделить по следующей цели: Да
• Добавить хеш-значение нажатой ссылки в URL-адрес / адресную строку браузера: Да
• Прокрутка с / на разные страницы: Да
• Задержка 0 миллисекунд для прокрутки к цели при загрузке страницы
• Запретить другим скриптам обрабатывать ссылки плагина (если возможно): Да
• Нормализовать целевые точки привязки: Да

Добавить CSS ID и класс в разделы

Следующее, что вам нужно сделать, это назначить разные идентификаторы CSS и прокрутку страницы в классе CSS идентификатора различным разделам на вашей одностраничной странице. Для этого откройте настройки каждого из ваших разделов и перейдите на вкладку «Дополнительно». На вкладке «Дополнительно» выберите различные идентификаторы CSS, которые вы хотите использовать для своих разделов. Знайте, что для того, чтобы это работало, вам нужно будет назначить разные идентификаторы CSS для каждого из разделов на вашем одностраничном экране.

В этом примере мы используем «дом» в качестве нашего первого идентификатора CSS. Однако класс CSS одинаков для каждого из разделов и помогает связать раздел с подключаемым модулем Page Scroll to ID. Имя класса CSS - ps2id.

Добавить идентификатор в пункты меню

Затем пришло время создать элементы меню и убедиться, что они соответствуют разделам и подключаемому модулю Page Scroll to ID. Если вы находитесь на панели инструментов WordPress, перейдите в « Внешний вид»> «Меню» . Если у вас уже есть основное меню, вы можете работать с ним. Если нет, вы можете ввести заголовок и создать новое меню. Не забудьте сделать его основным меню.

Использовать настраиваемые ссылки

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

Включить классы CSS

Следующее, что вам нужно сделать, если вы еще этого не делали в прошлом, - это активировать классы CSS для ваших пунктов меню. Для этого нажмите на опцию «Параметры экрана» в правом углу. Как только возможности появятся, включите классы CSS.

Используйте прокрутку страницы для идентификации класса CSS

После того, как вы включили классы CSS для своих пунктов меню, вы можете продолжить и вручную связать класс Page Scroll to ID с каждым из пунктов меню. Класс CSS такой же, как мы использовали для присвоения идентификаторов нашим разделам, а именно «ps2id».

Внесение изменений во внешний вид

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

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

Настройщик тем

Начните с настройки темы> Заголовок и навигация> Основное меню и внесите следующие изменения в то, как будет выглядеть ваше основное меню:

• Скрыть изображение логотипа: Да
• Макс.высота логотипа: 83
• Верхнее поле меню: 0
• Размер текста: 14
• Расстояние между буквами: -1
• Шрифт: Lato Light
• Стиль шрифта: заглавные буквы
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: rgba (255,255,255,0)
• Цвет фона выпадающего меню: rgba (255,255,255,0)

Пользовательские параметры темы CSS

Чтобы изменить стиль активной ссылки, нам нужно добавить некоторый собственный код CSS. Если вы находитесь на панели управления WordPress, перейдите в Divi> Параметры темы> Прокрутите вкладку Общие и вставьте следующие строки кода CSS в поле Пользовательский CSS:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

Кроме того, мы также использовали перекрывающееся прозрачное меню, которое мы рассмотрели более подробно в этом посте. Чтобы применить эти изменения CSS к вашему веб-сайту, скопируйте и вставьте следующие строки кода CSS в поле Custom CSS:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

Полученные результаты

Выполнив все шаги, описанные в этом посте, вы сможете достичь конечного результата:

Вы, конечно, можете изменить стиль в соответствии со своими предпочтениями (или использовать его также для верхней навигации).

Последние мысли

В этом руководстве мы показали вам, как создать интерактивное вертикальное навигационное меню для одностраничных приложений. Мы показали вам, как вы можете использовать плагин Page Scroll to ID в сочетании с темой Divi, чтобы легко достичь желаемого результата. В одном из следующих постов мы вернемся к этому и покажем вам, как творчески стилизовать активные ссылки, которые вы используете с помощью этого метода. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Yurlick / shutterstock.com