Как объединить полосу прокрутки с фиксированным меню навигации в Divi

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

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

Такой дизайн идеально подходит для того, чтобы провести пользователя через целевую страницу, описывающую этапы процесса. Ну вот увидишь.

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

Sneak Peek

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

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

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

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

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

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

СКАЧАТЬ

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

https://youtu.be/Kf-ciVKEZFI

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

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

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

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

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

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

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

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

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

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

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

Часть 1. Создание макета страницы полноэкранного раздела

Верхняя часть

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

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

• Ширина: 100%
• Макс.ширина: 100%
• Padding: 0px сверху, 0px снизу

Внутри строки добавьте текстовый модуль.

Затем откройте настройки текстового модуля и вставьте следующий HTML-код, чтобы создать красочный заголовок:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

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

Обновлены следующие стили заголовков H2:

• Шрифт заголовка 2: Roboto
• Размер текста заголовка 2: 6vw

Откройте настройки раздела и обновите высоту до 100vh (или 100% высоты области просмотра / окна). Это обеспечит полноэкранный режим раздела. Затем выньте прокладку следующим образом:

• Высота: 100vh
• Padding: 0px сверху, 0px снизу

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

display:flex;
flex-direction:column;
justify-content:center;

Шаг первый раздел

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

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

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

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

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

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

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

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

• Цвет текста заголовка 2: # 00a4e0
• Макс.ширина: 40vh (настольный), 80vh (планшет)
• Выравнивание модуля: по центру

Это касается первого раздела.

Шаг второй раздел

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

Откройте настройки раздела и добавьте градиент фона поверх цвета фона следующим образом:

• Цвет фона левого градиента: rgba (255,255,255,0,85)
• Цвет фона правого градиента: rgba (255,255,255,0,85)

Затем обновите цвет заголовка:

• Цвет текста заголовка 2: # ee4266

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

Шаг третий раздел

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

Затем измените цвет заголовка текстового модуля.

• Цвет текста заголовка 2: # 26c485

Шаг четвертый раздел

Наш последний шаг - шаг четвертый. Чтобы создать этот раздел, продублируйте раздел второго шага и перетащите его в нижнюю часть страницы.

Затем обновите заголовок текстового модуля в этом разделе.

• Цвет текста заголовка 2: # 2a1e5c

Результат

Вот результат нашего макета.

Часть 2: Создание полосы прокрутки и меню

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

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

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

• Padding: 0px сверху, 0px снизу

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

• Позиция: фиксированная
• Индекс Z: 999

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

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

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

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу
• Позиция: Абсолютная

Откройте настройки столбца и добавьте следующий настраиваемый CSS к основному элементу:

height: 100%;
display:flex;
align-items:center;

Это обеспечит такую ​​же высоту столбца, как и секция. Это также позволит модулям иметь высоту 100%. Это будет ключом к тому, чтобы убедиться, что индикатор выполнения заполняет раздел.

Чтобы создать индикатор выполнения, добавьте в столбец модуль разделителя.

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

• Показать разделитель: НЕТ
• Цвет фона: # 222222

• Ширина: 100%
• Высота: 100%

ПРИМЕЧАНИЕ. Здесь мы устанавливаем ширину индикатора выполнения, равную 100%, чтобы вы могли видеть его в дизайне. Мы будем увеличивать и уменьшать ширину разделителя / индикатора выполнения с помощью JQuery.

На вкладке «Дополнительно» добавьте идентификатор CSS и укажите его абсолютное положение.

• Идентификатор CSS: scrollBar
• Позиция: Абсолютная

Добавление индикатора процентного текста

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

Под разделителем добавьте текстовый модуль.

Затем вставьте в тело следующий HTML-код:

<p><span></span></p>

Наш JQuery запишет процентный текст в этот HTML (между тегами span). Теперь ты ничего не увидишь.

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

• Шрифт текста: Roboto
• Стиль шрифта текста: TT
• Цвет текста текста: #ffffff
• Размер текста текста: 16 пикселей
• Отступ: 0,8 em сверху, 0,8 снизу, 15 пикселей слева

На вкладке «Дополнительно» дайте ему собственный класс CSS и отключите его на телефоне и планшете.

• Класс CSS: et-progress-label
• Отключить: телефон, планшет

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

Чтобы добавить код, добавьте модуль кода под текстовым модулем.

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

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Это касается индикатора выполнения и процентного текста. Перейдем к меню навигации.

Создание кнопок меню с помощью якорных ссылок

Теперь мы готовы создать меню навигации, которое будет включать четыре кнопки, охватывающие всю ширину браузера. Я подумал, что было бы здорово, если бы полоса прокрутки заполняла каждую кнопку, когда пользователь достигает соответствующего раздела, на который он ссылается. Вот идея. Каждая кнопка будет иметь ширину 25% от общей ширины браузера. И поскольку все наши четыре раздела имеют одинаковую высоту (100vh), каждый из четырех разделов составляет 25% от общей прокручиваемой области макета страницы. Это гарантирует, что индикатор выполнения достигает конца каждой кнопки точно по мере того, как соответствующий раздел заполняет область просмотра. Вы это уловили? Если нет, надеюсь, позже это станет более понятным.

Строка и столбец

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

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

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу

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

display:flex;
flex-wrap:nowrap;

Шаг первая кнопка

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

Обновите текст кнопки и URL-адрес ссылки следующим образом:

• Текст кнопки: Шаг 1
• URL ссылки на кнопку: #one
  (эта ссылка привязки переместит раздел с соответствующим идентификатором CSS, который мы добавим позже)

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

• Расположение кнопок: по центру
• Размер текста кнопки: 20 пикселей (рабочий стол), 14 пикселей (планшет)
• Цвет фона кнопки: прозрачный
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 0,2 м
• Шрифт кнопки: Roboto
• Стиль шрифта кнопки: TT
• Заполнение: 0.8em сверху, 0.8em снизу, 0 слева, 0 справа

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

display:block !important;
width: 100%;

Кнопка Шага 2

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

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

• Цвет текста кнопки: # ee4266
• Цвет фона кнопки: rgba (255,255,255,0,85)

Цвет полупрозрачного фона будет объединен с черным цветом индикатора выполнения (за ним), чтобы соответствовать фону соответствующего раздела второго шага.

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

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

Кнопка Шага 3

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

Затем обновите цвет текста кнопки:

• Цвет текста кнопки: # 26c485

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

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

Кнопка шага 4

Чтобы создать кнопку шага 3, продублируйте кнопку шага 2 (она имеет тот же цвет bg) и перетащите ее в столбец 4.

Затем обновите цвет текста кнопки:

• Цвет текста кнопки: # 2a1e5c

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

• URL ссылки на кнопку: # четыре

Добавление соответствующих CSS-идентификаторов разделов для якорных ссылок

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

Идентификатор CSS раздела первого шага

Откройте настройки для раздела первого шага и добавьте следующий идентификатор CSS:

• CSS ID: один

Шаг второй, раздел CSS ID

Откройте настройки раздела второго шага и добавьте следующий идентификатор CSS:

• CSS ID: два

Шаг третий раздел CSS ID

Откройте настройки для раздела третьего шага и добавьте следующий идентификатор CSS:

• CSS ID: три

Шаг четвертый раздел CSS ID

Откройте настройки для раздела четвертого шага и добавьте следующий идентификатор CSS:

• CSS ID: четыре

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

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

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

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

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