Хотите создать красивый прозрачный и липкий заголовок с помощью Divi?
Когда дело доходит до настройки глобального заголовка для вашего Веб-сайт, есть много способов приблизиться к нему. Один из более тонких подходов — прозрачный заголовок.
Если вы решили использовать прозрачный заголовок, но хотите, чтобы он был липким при прокрутке, вам понравится этот урок. Переход между прозрачным и липким без усилий!
Пойдем.
обследование
Прежде чем погрузиться в учебник, давайте быстро взглянем на результат.
Создайте новый шаблон глобального заголовка
Перейдите в Divi > Конструктор тем.
Раздел №1 Настройки
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел. Этот раздел будет посвящен верхней панели заголовка, которую вы можете заметить в предварительном просмотре этой статьи. Откройте настройки раздела и добавьте черный цвет фона.
- Фон: #000000
расстояние
Перейдите на вкладку «Стиль сечения» и удалите все внутренние поля (верхнее и нижнее) по умолчанию.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
Добавьте текстовый модуль в столбец
Добавьте текстовый модуль в столбец строки и введите сообщение по вашему выбору.
Настройки текста
Перейдите на вкладку «Стиль модуля» и соответствующим образом измените настройки текста:
- Шрифт текста: Освальд
- Стиль копирования текста: ТТ
- Цвет текста Текст: #ffffff
- Текст Размер текста:
- Рабочий стол: 19 пикселей
- Планшет: 18 пикселей
- Телефон: 16px
- Выравнивание текста: по центру
Добавить раздел № 2
расстояние
Чуть ниже первого раздела добавьте еще один обычный раздел. Этот раздел будет посвящен нашему прозрачному меню, которое будет прилипать при прокрутке.
Откройте настройки раздела и удалите все внутренние поля (сверху и снизу) по умолчанию на вкладке Стиль.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
Прозрачный цвет фона
Откройте настройки линии и примените к линии полностью прозрачный цвет фона.
- Фон: rgba (255,255,255,0 XNUMX XNUMX)
калибровка
Перейдите на вкладку Line Style и измените настройки размера.
- Использовать пользовательскую ширину желоба: Да
- Расстояние между столбцами: 1
- Максимальная ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем добавьте собственные внутренние поля (левое и правое).
- Левое внутреннее поле: 10%
- Закон о внутренней марже: 10%
Shadow box
Затем примените прозрачную тень. Позже в уроке мы будем использовать эту коробчатую тень в липком состоянии с другим цветом тени.
- Box Shadow Blur Strength: 50px
- Цвет шрифта субтитров: rgba (0,0,0,0)
Позиция
Чтобы убедиться, что линия отображается вверху содержание страницы с прозрачным фоном мы будем использовать абсолютную позицию для нашей строки на вкладке «Дополнительно».
- Позиция: Абсолют
- Расположение: вверху слева
Столбец 2 Видимость
Мы также скрываем второй столбец нашей строки на планшете и телефоне, чтобы иметь менее сложный дизайн заголовка на экранах меньшего размера.
Добавить модуль меню в столбец 1
Выберите меню
Теперь, когда наши настройки строк установлены, пришло время добавить модули, начиная с модуля меню в столбце 1. Выберите меню по вашему выбору.
Скачать логотип
Затем загрузите логотип.
Удалить цвет фона
Также удалите цвет фона из модуля.
Настройки текста меню
Перейдите на вкладку Style модуля и соответствующим образом измените настройки текста меню:
- Меню шрифтов: Освальд
- Меню мягкого света: жирный шрифт
- Меню стиля копирования: TT
- Цвет текста меню: #efefef
- Размер текста меню: 18px
- Выравнивание текста: вправо
Настройки раскрывающегося меню
Также измените настройки раскрывающегося меню.
- Цвет строки раскрывающегося списка: rgba (0,0,0,0)
- Мобильное меню Цвет фона: rgba (0,0,0,0,95)
Настройки значка
Затем измените цвета значков в настройках значков.
- Цвет значка корзины: #ffffff
- Цвет значка поиска: #ffffff
- Цвет значка меню гамбургера: #ffffff
Настройки логотипа
Также меняем цвет нашего логотипа в настройках логотипа, изменив фильтр инверсии изображения.
- Инверсия изображения: 90%
калибровка
Далее мы назначим максимальную высоту для нашего логотипа.
- Логотип Максимальная ширина: 40 пикселей
расстояние
Далее мы добавим верхнее и нижнее заполнение для маленьких экранов.
- Пиковое внутреннее поле:
- Планшет и телефон: 10px
- Нижнее внутреннее поле:
- Планшет и телефон: 10px
Добавьте модуль Button в столбец 2.
Добавить текст на кнопку
В столбце 2 единственный модуль, который нам нужен, — это модуль Button. Добавьте текст по вашему выбору.
Выравнивание кнопок
Перейдите на вкладку «Стиль модуля» и измените выравнивание кнопок.
- Выравнивание кнопок: справа
Настройки кнопок
Настройте кнопку «Далее».
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 16px
- Цвет текста кнопки: #ffffff
- Фоновая кнопка: #ed4441
- Цвет рамки кнопки: #ed4441
- Кнопка «Радиус границы»: 0 пикселей
- Расстояние между буквами кнопки: 4 пикселя
- Шрифт кнопки: Освальд
- Кнопка Soft Light: жирный текст
- Кнопка копирования стиля: TT
- Показать значок кнопки: Да
- Цвет значка кнопки: #1a1a1a
расстояние
И заполните параметры модуля, добавив пользовательские значения интервалов.
- Верхнее поле: -70px
- Верхнее и нижнее внутреннее поле: 25 пикселей
Применение пользовательских липких эффектов
Сделать раздел № 2 липким
Теперь, когда мы заложили основу для нашего заголовка, пришло время применить эффект липкости! Для этого начните с открытия настроек во втором разделе и примените следующие фиксированные настройки на вкладке «Дополнительно»:
- Липкая позиция: придерживайтесь верха
- Верхнее смещение стержня: 0px
- Нижний липкий мимит: нет
- Смещение от окружающих липких элементов: ДА
- Переход по умолчанию и липкие стили: ДА
Цвет фона линии палки
Теперь, когда опция закрепления включена, мы можем внести изменения во все элементы в разделе. Мы начнем с того, что откроем строку, содержащую наше меню, и применим белый цвет фона к липкой опции.
- Цвет фона: #FFFFFF
Липкое расстояние между рядами
Далее мы собираемся изменить значения интервалов липкой функции линии.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Коробка теней для липких рядов
Мы также меняем цвет тени блока в липком состоянии.
- Цвет шрифта субтитров: rgba(0,0,0,0.08)
Позиционирование липкой линии
Далее мы вернем позиционирование строки в относительное в фиксированном состоянии.
- Должность: Родственник
- Смещение начала: вверху слева
Настройки текста меню закрепленного состояния
Далее мы изменим цвет текста меню на липкое состояние.
- Цвет текста меню: #000000
Настройки раскрывающегося меню в закрепленном состоянии
С цветом фона мобильного меню в настройках выпадающего меню.
- Мобильное меню, цвет фона: #ffffff
Цвета значков меню в липком состоянии
Также измените цвета значков в липком состоянии.
- Цвет значка корзины: #000000
- Цвет значка поиска: #000000
- Цвет значка меню гамбургера: #000000
Фильтр логотипа в липком состоянии
Затем удалите инвертирующий фильтр с изображения логотипа в липком состоянии.
- Инверсия изображения: 0%
Расстояние между кнопками в залипшем состоянии
И завершите урок, удалив отрицательное верхнее поле с кнопки, когда она находится в липком состоянии.
- Верхнее поле: 0px
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз взглянем на конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как объединить конструктор темы Divi с новыми липкими параметрами. В частности, мы показали вам, как переключаться с прозрачного заголовка на липкий заголовок другого стиля во время прокрутки.
Такой подход позволяет объединить дизайн страницы с меню, сохраняя при этом красивый липкий заголовок при прокрутке.
Если вы хотите узнать больше о Divi, не стесняйтесь посетить наш каталог Учебники Диви. Вы также можете проконсультироваться Как создать страницу блога с помощью модуля Divi Blog
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
А между тем, поделитесь этой статьей в разных социальных сетях.
...
