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

обследование

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

1. Зайдите в Divi Theme Builder и добавьте новый шаблон

Начните с перехода к Divi Theme Builder.

Начните создавать глобальный заголовок

Там нажмите «Добавить глобальный заголовок» и выберите «Создать глобальный заголовок».

2. Начните создавать глобальный заголовок

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

Цвет фона

Внутри редактора шаблонов вы заметите раздел. Откройте этот раздел и измените цвет его фона.

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

калибровка

Перейдите на вкладку дизайна и назначьте 100% ширину следующему разделу.

• Ширина: 100%

расстояние

Также добавьте пользовательские верхний и нижний отступы.

• Верхняя обивка: 2vw
• Нижняя обивка: 2vw

Shadow box

Мы также применим легкий оттенок к нашему разделу.

• Box Shadow Blur Сила: 50px
• Цвет тени: rgba (0,0,0,0,08)

CSS-идентификатор

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

• CSS ID: раздел глобального заголовка

Основной элемент

Мы также сделаем раздел фиксированным заголовком, добавив две строки кода CSS к основному элементу раздела.

position: fixed;top: 0;

Z индекс

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

• Индекс Z: 99999

Добавить новую строку

Структура столбца

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

калибровка

Еще не добавляя модуль, откройте настройки строки и позвольте строке заполнить всю ширину экрана.

• Использовать произвольную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

расстояние

Также удалите все верхние и нижние отступы по умолчанию.

• Верхняя обивка: 0px
• Нижняя обивка: 0px

Основной элемент

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

display: flex;align-items: center;

Добавьте модуль отслеживания социальных сетей в столбец 2

Добавить социальные сети

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

Сбросить индивидуальные стили социальных сетей

Продолжите, сбросив стили каждой социальной сети на индивидуальный уровень.

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

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

• Нижняя обивка: 0.5vw

Alignement

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

• Выравнивание модуля: центр

Настройки значка по умолчанию

Также измените цвет значка в настройках значка.

• Цвет значка: # 000000

Настройки значка наведения

И измените цвет значка наведения.

• Цвет значка: # c2ab92

Граница

Заполните параметры модуля, добавив нижнюю границу в параметры границы.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 000000

Добавить модуль меню в столбец 2

Выберите меню

Переходим к следующему столбцу! Добавьте модуль меню и выберите нужное меню.

Скачать логотип

Затем загрузите логотип в модуль.

Удалить цвет фона

И удалите цвет фона.

Предоставление

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

• Стиль: по центру
• Направление выпадающего меню: вниз

Текст меню по умолчанию

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

• Цвет активной ссылки: # c2ab92
• Шрифт меню: Баклан Гарамонд
• Цвет текста: # 000000
• Размер текста меню: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)

Текст меню наведения

Изменить текст меню при наведении.

• Цвет текста меню: # c2ab92

Выпадающее меню

Затем измените цвет строки выпадающего меню в настройках выпадающего меню.

• Цвет линии выпадающего меню: # 000000

иконки

Мы также меняем цвет значка гамбургер-меню в настройках значка.

• Цвет значка меню Гамбургер: # 000000

калибровка

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

• Максимальная ширина логотипа: 5vw (рабочий стол), 10vw (планшет), 13vw (телефон)

CSS Link Menu

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

padding-bottom: 1vw;border-bottom: 1px solid #000;

Добавить текстовый модуль в столбец 3

Добавить копию

Переходим к последнему модулю! Нам нужен только текстовый модуль.

Добавить ссылку

Этот модуль будет служить призывом к действию. Добавьте ссылку по вашему выбору.

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

Настройки текста по умолчанию

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

• Шрифт текста: Баклан Гарамонд
• Цвет текста: # 000000
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)

Настройки наведения текста

Измените цвет текста при наведении.

• Цвет текста: # c2ab92

калибровка

Продолжите, изменив параметры размера модуля на разных размерах экрана.

• Ширина: 12vw (рабочий стол), 18vw (планшет), 22vw (телефон)
• Выравнивание модуля: центр

расстояние

И добавьте нижний отступ в настройках интервала.

• Нижняя обивка: 0.5vw

Граница

Заполните параметры модуля, добавив нижнюю границу.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 000000

Добавьте модуль кода в столбец 2

Вставьте код JQuery и CSS

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

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Сохраните модификации генератора и отобразите результат

После того, как вы заполнили глобальный заголовок, сохраните все изменения и просмотрите результат на своем Веб-сайт!

обследование

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

Заключительные мысли

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