Как добавить закрепленные навигационные ссылки страницы (следующий, предыдущий, первый, последний) в разделы Divi

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

В этом уроке мы покажем вам, как добавить липкие навигационные ссылки по страницам (следующая, предыдущая, первая, последняя) на страницу в Divi. Это позволит вам легко переходить к определенным разделам на странице.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Обратите внимание, как липкие навигационные ссылки меняются при прокрутке страницы.

Обратите внимание, насколько легко перейти к каждому разделу, щелкнув ссылки навигации.

А вот как дизайн выглядит на мобильном телефоне.

А вот код, демонстрирующий основные функции.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Добавление закрепленных ссылок для навигации по страницам в разделы Divi

Создание верхней секции

По умолчанию в Divi Builder есть обычный раздел, готовый к использованию. Используя стандартный раздел по умолчанию, откройте настройки раздела и удалите нижнюю прокладку следующим образом:

• Padding: 0px снизу

Настройки строки

Добавьте в раздел строку из одного столбца.

Затем обновите настройки дизайна для строки следующим образом:

• Ширина: 100%
• Макс.ширина: 80vw (настольный компьютер, планшет), 95vw (телефон)

Заголовок раздела

Чтобы создать заголовок раздела, сначала добавьте новый текстовый модуль в строку / столбец.

Затем обновите основной текст следующим заголовком H2:

<h2>Top</h2>

На вкладке дизайна обновите параметры текста для заголовка H2 следующим образом:

• Выберите вкладку H2
• Шрифт заголовка 2: Montserrat
• Толщина шрифта заголовка 2: жирный
• Стиль шрифта заголовка 2: TT
• Выравнивание текста заголовка 2: по центру
• Размер текста заголовка 2: 8vw (компьютер, планшет), 61,36px (телефон)

Создание раздела 1

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

Раздел 1 Цвет фона

Откройте настройки для Раздела 1 и обновите цвет фона:

• Цвет фона: # fec0f4

Раздел 1 CSS ID для навигации по якорным ссылкам

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

• CSS ID: один

Обновить текст заголовка

Затем обновите текст заголовка в текстовом модуле, чтобы он читался как «Раздел 1».

Создание липкой строки для раздела 1

После обновления раздела и заголовка мы создадим липкую строку, которая в конечном итоге будет содержать наши навигационные ссылки. Для этого добавьте новую строку в один столбец под существующей строкой в ​​Разделе 1.

Поскольку у нашего раздела нет нижнего отступа, строка должна хорошо сидеть в самом низу раздела.

Настройки закрепленной строки

Чтобы строка была липкой, нам нужно обновить настройки строки.

Прикрепленные параметры

На вкладке «Дополнительно» обновите параметры закрепленной позиции следующим образом:

• Липкое положение: придерживаться низа
• Верхний предел липкости: раздел
• Смещение от окружающих липких элементов: НЕТ

Это гарантирует, что липкая строка будет содержаться внутри раздела.

Настройки дизайна

На вкладке дизайна обновите следующее:

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 100%
• Макс.ширина: 25vw (настольный компьютер, планшет), 50% телефон
• Выравнивание строк: вправо (рабочий стол, планшет), влево (телефон)
• Padding: 0px сверху, 0px снизу

Чтобы скрыть строку (вместе с кнопками, которые она будет содержать), мы переместим строку за раздел под ней, используя настройки преобразования преобразования. Затем мы переместим строку вверх, чтобы она стала видимой, когда она находится в липком состоянии. Это гарантирует, что кнопки будут видны только в закрепленном состоянии.

Для этого щелкните липкий значок (эскиз) при наведении курсора на заголовок параметра преобразования, чтобы активировать липкую вкладку. Затем обновите параметры преобразования следующим образом:

• Трансформировать трансформировать ось Y (рабочий стол): 100%
• Трансформировать трансформировать ось Y (залипание): 0%

Смещение позиции

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

Чтобы переместить закрепленную строку, перейдите на вкладку «Дополнительно» и обновите параметры смещения позиции следующим образом:

• Начало смещения: вверху справа
• Горизонтальное смещение: 25vw (компьютер, планшет), 0px (телефон)

Примечание. Смещение на телефоне установлено на 0 пикселей, потому что выравнивание строки будет установлено влево, а ширина - 50%.

CSS столбца с закрепленной строкой

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

На вкладке Advanced добавьте следующий CSS к основному элементу:

display:grid;
grid-template-columns:50% 50%;

Добавление разделителя и кнопки «Далее» в закрепленную строку (Раздел 1)

Пришло время добавить наши кнопки в столбец. Для этого первого раздела нам нужна только кнопка «Далее». Итак, нам нужен разделитель, который будет служить заполнителем для левой кнопки.

Делитель

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

Затем установите для параметра «Показать разделитель» значение «НЕТ».

Следующая кнопка

Под модулем разделителя добавьте модуль кнопок.

Затем обновите настройки содержимого кнопки:

• Текст кнопки: Далее
• URL ссылки на кнопку: #two

URL-адрес «#two» перейдет к следующему разделу, который мы создадим с идентификатором CSS «two».

На вкладке дизайна обновите следующее:

• Расположение кнопок: по центру
• Использовать пользовательские стили для кнопки: ДА
• Размер текста кнопки: 2.1vw (рабочий стол, планшет), 16.1px (телефон)
• Цвет текста кнопки: # 000000
• Фон кнопки: #eeeeee
• Ширина границы кнопки: 0 пикселей
• Значок кнопки: стрелка вниз (см. Снимок экрана)
• Показывать только значок при наведении курсора на кнопку: НЕТ

• Маржа: 2% справа

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

display:block !important; width: 100%;

Создание раздела 2

Теперь, когда мы закончили Раздел 1, продублируйте Раздел 1, чтобы создать Раздел 2 и соответствующим образом обновите метку в представлении слоев.

Обновить цвет фона раздела 2 и текст заголовка

Затем обновите цвет фона раздела:

• Цвет фона: # 8dc6c1

Затем обновите текст заголовка, чтобы он читался как «Раздел 2» в текстовом модуле верхней строки.

Обновить раздел 2 CSS ID

На вкладке «Дополнительно» обновите раздел с новым идентификатором CSS:

• CSS ID: два

Добавить кнопки "Далее" и "Назад" в закрепленную строку (Раздел 2)

Внутри липкой строки раздела 2 удалите модуль разделителя и продублируйте кнопку «Далее», чтобы у вас было две кнопки.

Обновить URL ссылки следующей кнопки

Откройте настройки для первой / левой кнопки Далее и обновите ссылку на кнопку следующим образом:

• URL ссылки на кнопку: #three

URL-адрес «#three» перейдет к следующему разделу, который мы создадим с идентификатором CSS «three».

Добавить текст предыдущей кнопки и URL-адрес ссылки

Чтобы сделать кнопку Назад, откройте настройки для второй / правой кнопки и обновите следующее:

• Текст кнопки: Назад
• URL ссылки на кнопку: #one

URL-адрес «#one» вернется в раздел с идентификатором CSS «один».

Добавить значок предыдущей кнопки

Затем обновите значок:

• Значок кнопки: стрелка вверх (см. Снимок экрана)

Создание раздела 3

Теперь, когда мы закончили Раздел 2, продублируйте Раздел 2, чтобы создать Раздел 3 и соответствующим образом обновите метку в представлении слоев.

Обновить цвет фона раздела 3 и текст заголовка

Добавьте в раздел новый цвет фона:

• Цвет фона: # 9fa5f4

Затем обновите текст заголовка, чтобы он читался как «Раздел 3» в текстовом модуле верхней строки.

Обновить раздел 3 CSS ID

На вкладке «Дополнительно» обновите раздел с новым идентификатором CSS:

• CSS ID: три

Добавить разделитель и предыдущую кнопку в закрепленную строку (Раздел 3)

Добавить разделитель и удалить кнопку "Далее"

Мы могли бы продолжить и создать столько разделов, сколько нужно, чтобы включить кнопки «Далее» и «Назад». Но в этом примере мы собираемся сделать Раздел 3 последним разделом со ссылками для навигации.

Итак, поскольку нам не понадобится кнопка «Далее», удалите кнопку «Далее» и замените ее разделителем, как мы это делали в Разделе 1.

Обновить URL ссылки предыдущей кнопки

Затем откройте настройки кнопки «Назад» и обновите URL-адрес ссылки:

• URL ссылки на кнопку: #two

URL-адрес «#two» вернется в раздел с идентификатором CSS «два».

Создание нижней части

Теперь, когда 3 раздела укомплектованы функцией навигации по закрепленным строкам и привязкой ссылки, мы создадим нижний раздел, который будет служить разделом страницы, который не включает закрепленную навигацию Next / Prev. Это сделано для того, чтобы продемонстрировать, есть ли на странице дополнительные разделы, которые могут не нуждаться в липкой навигации.

Чтобы создать нижнюю секцию, просто продублируйте верхнюю секцию и перетащите ее под секцию 3.

Затем обновите текст заголовка, чтобы он читался как «Внизу».

Создание липкой нижней части

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

В нижнем разделе создайте новый обычный раздел.

Затем обновите ярлык раздела в представлении слоев соответствующим образом (например, «Закрепленный нижний раздел»).

Создание строки для первой и последней навигационных ссылок

Чтобы добавить больше функций навигации на нашу страницу разделов, мы создадим две дополнительные кнопки (или якорные ссылки), которые будут переходить к первому (раздел 1) и последнему (раздел 3) разделам на странице.

Дублируйте липкую строку в разделе 2 и перетащите ее в липкую нижнюю часть

Чтобы создать строку для наших Первой и Последней навигационных ссылок, мы можем продублировать липкую строку (строка 2) из ​​Раздела 2 и перетащить ее в новую липкую нижнюю часть.

Обновить настройки строки

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

Откройте настройки строки и обновите следующее:

Затем обновите параметры позиции следующим образом:

• Позиция: Абсолютная
• Расположение: внизу справа
• Горизонтальное смещение: 0 пикселей
• Липкая позиция: не придерживаться

На вкладке «Дизайн» сбросьте параметры преобразования для строки.

Добавьте первую и последнюю кнопки для липкой нижней части

Чтобы создать первую кнопку, откройте настройки для кнопки слева и обновите следующее:

• Текст кнопки: первый
• URL ссылки на кнопку: #one

Затем замените значок кнопки другой стрелкой вверх.

Чтобы создать последнюю кнопку, откройте настройки для кнопки справа и обновите следующее:

• Текст кнопки: последний
• URL ссылки на кнопку: #three

Затем замените значок кнопки другой стрелкой вниз.

Обновить настройки раздела для липкой нижней части

Затем откройте настройку раздела и обновите следующее:

• Ширина: 100%;
• Высота: 0 пикселей;
• Padding: 0px сверху, 0px справа

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

Наконец, на вкладке «Дополнительно» обновите следующее:

• Вертикальный перелив: видимый
• Горизонтальный перелив: видимый
• Липкое положение: придерживаться низа
• Верхний предел липкости: область тела.
• Смещение от окружающих липких элементов: НЕТ

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

Обратите внимание, как липкие навигационные ссылки меняются при прокрутке страницы.

Обратите внимание, насколько легко перейти к каждому разделу, щелкнув ссылки навигации.

А вот как дизайн выглядит на мобильном телефоне.

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

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

Для достижения наилучших результатов в каждом разделе должно быть достаточно содержимого, чтобы выходить за пределы высоты браузера. В противном случае эти якорные ссылки могут не стать липкими (или видимыми). Один простой способ убедиться, что это происходит, - дать каждой из ваших секций минимальную высоту 100vh. Если вам это не нравится, вы всегда можете избавиться от закрепленной опции преобразования, перевода для каждой из закрепленных строк, чтобы кнопки оставались видимыми.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!