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

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

Чтобы создать навигацию по прикрепленным якорным ссылкам заголовков, мы собираемся использовать только встроенные параметры Divi. Функциональные возможности настольных компьютеров и мобильных устройств уникальны. И результаты могут вас удивить!

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

Sneak Peek

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

Скачайте БЕСПЛАТНО макет навигации по ссылкам привязки прилипающих заголовков

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

• Во всплывающем окне «Загрузить из библиотеки» найдите и загрузите макет страницы рецептов комплекта еды из комплекта макетов комплекта еды.

Часть 2: изменение макета

Удаление строк

После загрузки макета удалите две нижние строки под вторым разделом «Инструкции».

Теперь у вас должна получиться одна строка с содержимым для «шага 01» рецепта.

Создание новой строки и заполнение ее содержимым

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

Используя mulitselect (удерживайте cmd / ctrl и щелкните), выберите три модуля, которые содержат контент для первого шага рецепта в строке готового макета выше.

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

Когда закончите, удалите пустую строку выше.

Часть 3: Создание закрепленных заголовков для каждой строки

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

Создание липкого заголовка для первой строки (шаг первый)

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

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

• Толщина шрифта заголовка 4: полужирный
• Стиль шрифта заголовка 4: TT
• Выравнивание текста заголовка 4: по центру
• Размер текста заголовка 4: 15 пикселей
• Заголовок 4 Расстояние между буквами: 3 пикселя
• Высота строки заголовка 4: 2em

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

• Маржа: 0 пикселей
• Отступ: 10 пикселей
• Закругленные углы: 3 пикселя

ПРИМЕЧАНИЕ. Из-за размера текста (15 пикселей), высоты строки (2em, что равно 30 пикселей), заполнения (10 пикселей) и нижнего поля H4 по умолчанию (10 пикселей) итоговая высота текстового модуля составляет 50 пикселей (30 пикселей + 10 пикселей + 10 пикселей). Это важно отметить, чтобы мы знали, насколько смещать каждое верхнее и нижнее положение ручки при движении вперед.

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

• Смещение липкого нижнего края: 150 пикселей (рабочий стол), 0 пикселей (планшет)
• Верхний предел липкости: раздел (рабочий стол), нет (планшет).
• Нижний предел липкости: раздел (рабочий стол), строка (планшет)
• Смещение от окружающих липких элементов: НЕТ

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

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

• Цвет липкого фона: # febd2d

Затем обновите индекс Z в липком состоянии:

• Индекс Z (липкий): 10003

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

Обновить фиктивный контент

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

Повторяющаяся строка 1

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

Создание закрепленного заголовка для второй строки (шаг второй)

Откройте настройки текста для заголовка в столбце 1 повторяющейся (второй) строки и измените текст H4 на «Step-02».

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

• Смещение липкой вершины: 50 пикселей (рабочий стол), 0 пикселей (планшет)
• Смещение липкого дна: 100 пикселей (рабочий стол)
• Верхний предел липкости: раздел (планшет)

Затем обновите индекс Z для липкого состояния:

• Индекс Z (липкий): 10002

Повторяющаяся строка 2

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

Создание закрепленного заголовка для третьей строки (шаг третий)

Откройте настройки текста для заголовка в столбце 1 повторяющейся (третьей) строки и измените текст H4 на «Step-03».

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

• Смещение липкой вершины: 100 пикселей (для ПК)
• Смещение липкого дна: 50 пикселей (рабочий стол)

Затем обновите индекс Z для липкого состояния:

• Индекс Z (липкий): 10001

Повторяющийся ряд 3

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

Создание закрепленного заголовка для четвертой строки (шаг четвертый)

Откройте настройки текста для заголовка в столбце 1 повторяющейся (третьей) строки и измените текст H4 на «Step-04».

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

• Смещение липкой вершины: 150 пикселей (для ПК)
• Смещение липкого дна: 0 пикселей (рабочий стол)

Затем обновите индекс Z для липкого состояния:

• Индекс Z (липкий): 10000

Обновить индекс Z столбца для каждого закрепленного заголовка

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

Для этого откройте настройки для каждого родительского столбца каждого прикрепленного заголовка (шаги 1-4) и обновите z-индекс столбца для каждого следующим образом:

Ряд 1, столбец 1

• Индекс Z: 20

Ряд 2, столбец 1

• Индекс Z: 19

Ряд 3, Столбец 1

• Индекс Z: 18

Ряд 4, столбец 1

• Индекс Z: 17

Часть 3: Создание прикрепленных якорных ссылок заголовков

Чтобы создать якорные ссылки для каждого заголовка, нам нужно назначить CSS ID строке, которая соответствует URL-адресу модуля для заголовка.

Шаг первый якорная ссылка

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

• CSS ID: один

Затем откройте настройки текстового модуля для заголовка «step-01» и добавьте следующий URL-адрес ссылки на модуль:

• URL ссылки на модуль: #one

Шаг второй якорная ссылка

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

• CSS ID: два

Затем откройте настройки текстового модуля для заголовка «step-02» и добавьте следующий URL-адрес ссылки на модуль:

• URL ссылки на модуль: #two

Шаг третий Якорная ссылка

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

• CSS ID: три

Затем откройте настройки текстового модуля для заголовка «step-03» и добавьте следующий URL-адрес ссылки на модуль:

• URL ссылки на модуль: #three

Шаг четвертый якорная ссылка

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

• CSS ID: четыре

Затем откройте настройки текстового модуля для заголовка «step-04» и добавьте следующий URL-адрес ссылки на модуль:

• URL ссылки на модуль: #four

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

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

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

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

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