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

Когда вы разрабатываете фиксированный глобальный заголовок, вы можете уменьшить высоту заголовка, когда ваши посетители прокручивают страницу. Это помогает уменьшить пространство, которое занимает глобальный заголовок на высоте окна просмотра посетителей. В этом руководстве мы проведем вас через этот процесс. Мы начнем с создания меню, а затем добавим код JQuery и CSS, чтобы вызвать эффект. Вы также сможете бесплатно скачать файл JSON!

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

Фоновый цвет

Оказавшись внутри редактора шаблонов, вы заметите раздел. Откройте раздел и измените цвет фона на белый.

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

Размеры

Перейдите на вкладку дизайна модуля и измените ширину.

• Ширина: 100%

Интервал

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

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

Коробка Тень

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

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

CSS ID

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

• Идентификатор CSS: раздел-заполнение

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

Перейдите на вкладку Advanced, перейдите к настройкам Custom CSS и исправьте раздел, добавив две строки кода CSS к основному элементу раздела.

position: fixed;
top: 0;

Индекс Z

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

• Индекс Z: 99999

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

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

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

Размеры

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

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

Интервал

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

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

CSS ID

Затем перейдите на вкладку «Дополнительно» и добавьте в строку идентификатор CSS. Нам понадобится этот идентификатор CSS позже в руководстве, чтобы эффект сжатия работал.

• Идентификатор CSS: ширина строки

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

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

display: flex;
align-items: center;

Добавить модуль изображения в столбец 1

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

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

Размеры

Затем измените ширину модуля.

• Ширина: 5vw (рабочий стол), 9vw (планшет), 13vw (телефон)

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

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

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

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

Затем удалите цвет фона модуля.

Макет

Перейдите на вкладку дизайна модуля и также измените макет.

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

Текст меню

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

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

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

Измените также настройки раскрывающегося меню.

• Цвет фона выпадающего меню: #ffffff
• Цвет строки раскрывающегося меню: # 2970fa

Иконки

И завершите настройку модуля, изменив цвет значка гамбургер-меню в настройках значков.

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

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

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

Переходим к следующему и последнему столбцу. Добавьте кнопочный модуль с какой-нибудь копией по вашему выбору.

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

Затем измените выравнивание модуля.

• Расположение кнопок: вправо

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

Создайте соответствующий стиль для кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 2970fa
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Рубик
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхняя прокладка: 0,8 Вт (рабочий стол), 1,8 Вт (планшет), 2,5 Вт (телефон)
• Нижняя прокладка: 0,8 (рабочий стол), 1,8 (планшет), 2,5 (телефон)
• Левое заполнение: 1.5vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Правая прокладка: 1.5vw (рабочий стол), 3vw (планшет), 4vw (телефон)

Коробка Тень

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

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 30 пикселей
• Цвет тени: rgba (41,112,250,0.2)

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

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

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

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

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

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

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

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

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

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создать сокращающийся глобальный заголовок с помощью Divi Theme Builder. Уменьшение заголовков - отличный способ сэкономить место на высоте окна просмотра вашего посетителя. Мы воссоздали дизайн с нуля и добавили специальный код для активации эффекта сжатия. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!

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