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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

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

Начните с перехода к Divi Theme Builder на бэкэнде вашего веб-сайта WordPress и нажмите «Добавить глобальный заголовок».

Создать глобальный заголовок

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

2. Создайте оба заголовка в одном разделе.

Изменить раздел

Размеры

Оказавшись внутри редактора шаблонов, вы заметите раздел. Откройте настройки раздела и убедитесь, что ширина раздела равна «100%».

• Ширина: 100%

Интервал

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

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

Коробка Тень

Мы также используем тонкую тень коробки.

• Положение прямоугольной тени по вертикали: 15 пикселей
• Цвет тени: rgba (0,0,0,0.06)

Позиция

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

• Позиция: фиксированная
• Расположение: Top Center

Добавить заголовок строки №1

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

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и измените цвет фона.

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

Размеры

Измените также настройки размера.

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

Интервал

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

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

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

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

display: flex;
align-items: center;

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

Загрузить изображение

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

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

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

• Выравнивание изображения: по центру

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

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

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

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

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

Макет

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

• Стиль: по центру

Настройки текста меню

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

• Шрифт меню: Roboto
• Толщина шрифта меню: полужирный
• Цвет текста меню: #ffffff (рабочий стол), # 000000 (планшет и телефон)
• Размер текста меню: 18 пикселей

Параметры текста раскрывающегося меню

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

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

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

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

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

Интервал

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

• Отступ слева: 30 пикселей (только для планшетов и телефонов)
• Отступ справа: 30 пикселей (только для планшетов и телефонов)

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

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

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

Цвет фона отдельной социальной сети

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

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

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

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

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

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

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

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

Граница

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

• Все углы: 100 пикселей

Добавить заголовок строки # 2

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

Переходим ко второму заголовку! Добавьте новую строку, используя следующую структуру столбцов:

Размеры

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

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

Интервал

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

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

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

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

display: flex;
align-items: center;

Цвет фона столбца 3

И завершите настройки строки, открыв настройки столбца 3 и используя цвет фона.

• Цвет фона: # 0042c9

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

Загрузить изображение

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

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

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

• Выравнивание изображения: по центру

Клонировать модуль меню и поместить в столбец 2 заголовка строки №2

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

Изменить настройки текста меню

Откройте дубликат модуля меню и измените цвет текста меню.

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

Изменить параметры текста раскрывающегося меню

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

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

Изменить настройки значка

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

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

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

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

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

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

Затем измените выравнивание кнопки.

• Расположение кнопок: по центру

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

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

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

• Шрифт кнопки: Roboto
• Толщина шрифта кнопок: полужирный

Интервал

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

• Верхний отступ: 33 пикселей (рабочий стол), 35 пикселей (планшет), 38 пикселей (телефон)
• Нижний отступ: 33 пикселей (рабочий стол), 35 пикселей (планшет), 38 пикселей (телефон)

2. Добавьте классы CSS.

Раздел

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

• Класс CSS: раздел заголовка

Заголовок строки №1

Затем откройте заголовок первой строки и используйте следующий класс CSS:

• Класс CSS: заголовок-1

Заголовок строки №2

Откройте и второй ряд. Используйте для этого следующий класс CSS:

• Класс CSS: заголовок-2

3. Добавьте код JQuery и CSS.

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

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

Добавить код JQuery (между тегами скрипта)

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

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Добавить код CSS (между тегами стилей)

Также добавьте следующий код CSS между тегами стиля :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

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

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

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

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

Рабочий стол

Мобильный

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

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

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