Как показать свой глобальный заголовок при прокрутке вверх и скрыть при прокрутке вниз с помощью Divi

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

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите шаблон глобального заголовка БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Перейти в конструктор тем Divi

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

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

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

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

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

Фоновый цвет

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

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

Размеры

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

• Ширина: 100%

Интервал

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

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

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.08)

CSS ID

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

• Идентификатор CSS: раздел глобального заголовка

Главный элемент

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

position: fixed;
top: 0;

Индекс Z

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

• Индекс Z: 99999

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

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

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

Размеры

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

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

Интервал

Удалите также все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Главный элемент

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

display: flex;
align-items: center;

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

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

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

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

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

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

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

• Нижняя обивка: 0,5 Вт

Выравнивание

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

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

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

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

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

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

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

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

Граница

Завершите настройки модуля, добавив нижнюю границу в настройках границы.

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

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

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

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

Загрузить логотип

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

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

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

Макет

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

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

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

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

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

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

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

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

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

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

• Цвет строки раскрывающегося меню: # 000000

Иконки

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

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

Размеры

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

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

Ссылка меню CSS

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

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

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

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

К последнему модулю! Здесь нам нужен только текстовый модуль.

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

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

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

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

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

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

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

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

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

Размеры

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

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

Интервал

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

• Нижняя обивка: 0,5 Вт

Граница

Завершите настройки модуля, добавив нижнюю границу.

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

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

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

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

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

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

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Сохраните изменения Builder и просмотрите результат

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

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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