Как «поднять» липкий заголовок Divi при прохождении раздела героя вашей страницы

Опубликовано: 2020-11-18

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

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

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

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

Рабочий стол

забрать заголовок

Мобильный

забрать заголовок

Скачать шаблон БЕСПЛАТНО

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

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

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

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

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

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

В этом руководстве мы собираемся использовать пакет макетов обивки и его бесплатный шаблон верхнего и нижнего колонтитула, который вы можете загрузить в блоге. Хотя мы используем именно этот пакет макетов, вы можете применить этот метод к любому типу веб-сайта, который вы создаете. Чтобы предварительно просмотреть результат при изучении приведенного ниже руководства, мы рекомендуем вам настроить страницу, которая будет оставаться открытой, на отдельной вкладке. Чтобы соответствовать верхнему и нижнему колонтитулам, которые мы будем использовать, мы настраиваем новую страницу, используя выбранный макет, который поставляется с пакетом макетов обивки Divi.

забрать заголовок

2. Загрузите и установите бесплатные верхние и нижние колонтитулы для пакета макетов обивки Divi.

Загрузите бесплатные верхний и нижний колонтитулы в нашем блоге

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

забрать заголовок

забрать заголовок

Перейдите к построителю тем Divi

Чтобы использовать только что загруженный файл JSON, перейдите в Divi Theme Builder.

забрать заголовок

Загрузите шаблон веб-сайта по умолчанию с дизайном верхнего и нижнего колонтитула

Там нажмите кнопку импорта и экспорта в правом верхнем углу и загрузите файл JSON, который вы можете найти в папке загрузки.

забрать заголовок

забрать заголовок

Создать новый шаблон страницы

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

забрать заголовок

  • Использовать на: Все страницы

забрать заголовок

Удалить шаблон верхнего и нижнего колонтитула из шаблона веб-сайта по умолчанию

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

забрать заголовок

3. Поместите раздел заголовка под раздел героя

Открыть шаблон глобального заголовка

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

забрать заголовок

Назначьте пользовательский идентификатор CSS для раздела внутри глобального заголовка

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

  • Идентификатор CSS: custom-header

забрать заголовок

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

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

забрать заголовок

Добавьте код JQuery для размещения раздела под первым разделом каждой страницы

Там мы вставим некоторый код JQuery, который автоматически разместит раздел заголовка под первым разделом главного героя каждой страницы. 

jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});

забрать заголовок

Добавить код CSS в тот же модуль кода

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

#et_pb_root #custom-header {
display: none;
}

забрать заголовок

4. Примените закрепленное положение и стили к заголовку.

Добавить липкое позиционирование в раздел

Теперь, когда наш раздел помещен под первым разделом героя каждой страницы, пришло время применить эффект липкости. Для этого мы воспользуемся встроенными липкими настройками Divi на вкладке «Дополнительно».

  • Липкая позиция: придерживаться верха

забрать заголовок

Добавить тень от липкой коробки в раздел

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

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

забрать заголовок

Изменить фон градиента липкой строки

Затем мы применим к нашей строке липкий градиентный фон.

  • Цвет 1: #ffffff
  • Цвет 2: # e8e8e8

забрать заголовок

Изменить цвет текста модуля липкого меню

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

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

забрать заголовок

Изменить цвет значка липкого меню гамбургер

Мы также изменим цвет значка липкого меню гамбургера.

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

забрать заголовок

Добавить липкий логотип инвертировать фильтр

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

  • Инверсия изображения: 80%

забрать заголовок

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

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

Рабочий стол

забрать заголовок

Мобильный

забрать заголовок

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

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

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