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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

Фоновый цвет

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

• Цвет фона: rgba (0,0,0,0)

Размеры

Затем перейдите на вкладку дизайна раздела и измените ширину.

• Ширина: 100%

Интервал

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

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

Индекс Z

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

• Индекс Z: 99999

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

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

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

Размеры

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

• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

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

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

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

display: flex;

Колонка 2

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0.71)

Граница

Также добавьте нижнюю границу к столбцу.

• Ширина нижней границы: 2 пикселя
• Цвет нижней границы: # f4583f

Коробка Тень

И создайте эффект плавания, добавив тонкую тень блока.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 50 пикселей
• Сила распространения тени коробки: -20 пикселей
• Цвет тени: rgba (0,0,0,0.23)

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

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

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

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

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

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

Размеры

Измените также ширину модуля в настройках размеров.

• Ширина: 8vw (рабочий стол), 14vw (планшет), 21vw (телефон)

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

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

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

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

Затем перейдите к настройкам фона и удалите цвет фона.

Макет

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

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

Текст меню

Также задайте стиль настройкам текста меню.

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

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

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

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

Иконки

Используйте тот же цвет для цвета значка меню гамбургера в настройках значков.

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

Интервал

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

• Верхняя обивка: 1,5 Вт
• Нижняя обивка: 1.5vw

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

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

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

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

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

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

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

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

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

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

Интервал

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

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

Дополнительные настройки раздела

Основной элемент по умолчанию

После того, как вы закончили общий дизайн, остается сделать одно; размещение раздела над содержимым вашей страницы. Для этого нам нужно добавить две строки кода CSS к основному элементу раздела.

position: absolute;
top: 0;

Главный элемент при наведении

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

position: absolute;
top: 0;

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

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

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

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

Рабочий стол

Мобильный

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

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

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