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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

1. Построение структуры элемента заголовка внутри нового шаблона заголовка

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

Начните с перехода к Divi Theme Builder. Там начните создавать новый глобальный или настраиваемый заголовок.

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

Фоновый цвет

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

• Цвет фона: # 001b34

Интервал

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

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

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

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

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

Фоновый цвет

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

• Цвет фона: # 001b34

Размеры

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижняя обивка: 0
• Левый отступ:
  • Рабочий стол: /
  • Планшет и телефон: 5%
• Правый отступ:
  • Рабочий стол: /
  • Планшет и телефон: 5%

Столбец 1 Настройки

Фоновый цвет

Когда вы закончите с общими настройками строки, откройте настройки столбца 1 и примените цвет фона.

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

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

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

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

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

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

Фоновый цвет

Затем измените цвет фона.

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

Фоновая картинка

И загрузите фоновое изображение иллюстрации по вашему выбору. Вы можете найти и использовать тот, что ниже, загрузив бесплатный пакет в начале этого поста.

• Размер фонового изображения: По размеру
• Положение фонового изображения: по центру

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

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

• Размер текста меню: 18 пикселей

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

Затем соответствующим образом измените настройки раскрывающегося меню:

• Цвет строки выпадающего меню: rgba (0,0,0,0)
• Цвет фона мобильного меню: # ddc1a7
• Цвет текста мобильного меню: # 063765

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

Измените цвет значков в настройках значков на белый.

• Цвет значка корзины покупок: #ffffff
• Цвет значка поиска: #ffffff
• Цвет значка меню гамбургера: #ffffff

Размеры

Затем измените максимальную ширину логотипа в настройках размера.

• Максимальная ширина логотипа: 70 пикселей

Интервал

Затем примените некоторые пользовательские значения заполнения.

• Верхняя набивка: 1%
• Нижняя обивка: 1%
• Левый отступ: 5%
• Правое заполнение: 5%

Коробка Тень

Наряду с некоторой настраиваемой тенью коробки.

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

Преобразовать Перевести

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

• Верно:
  • Рабочий стол: 20 пикселей
  • Планшет и телефон: 0 пикселей

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

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

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

Выравнивание кнопок

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: # 2a2a2a
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Цвет границы кнопки: rgba (0,0,0,0)

• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 40 пикселей
• Отступ справа: 40 пикселей

Коробка Тень

Затем примените тень блока.

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

Преобразовать Перевести

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

• Верно:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 0 пикселей

2. Примените пользовательские эффекты залипания, чтобы добиться эффекта «Скрыть перед прокруткой».

Сделать строку абсолютно позиционированной

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

• Позиция: Абсолютная
• Расположение: вверху слева

Сделать раздел липким

Далее мы откроем настройки раздела и позволим ему оставаться наверху.

• Липкая позиция: придерживаться верха
• Нижний предел липкости: нет
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Раздел Анимация

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

• Стиль анимации: Затухание

Продолжительность перехода раздела

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

• Продолжительность перехода: 800 мс

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

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

• Справа: -300 пикселей

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

• Закрепление вправо: 0 пикселей

Свойство CSS видимости раздела

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

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

  visibility: hidden

Мы снова сделаем наш контент видимым в липком состоянии. Вот и все!

• Прикрепленный основной элемент:

  visibility: visible;

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

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

Рабочий стол

Мобильный

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

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

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