необходимость создать прозрачное плавающее меню в Divi ?
Вы ищете способ разместить общий заголовок над основными разделами ваших страниц? В учебнике Divi Сегодня мы собираемся показать вам, как именно это сделать.
Мы создадим потрясающий глобальный заголовок с нуля (используя конструктор темы de Divi), и мы применим плавающий эффект к строке меню.
Пойдем.
обследование
Прежде чем погрузиться в этот урок, давайте кратко рассмотрим результат, которого мы хотим достичь.
Перейдите в конструктор тем Divi и добавьте новый шаблон.
Allez в Divi > Конструктор тем.
Создайте глобальный заголовок с конструктором тем Divi
Нажмите «Добавить глобальный заголовок» и продолжите, выбрав «Создать глобальный заголовок».
Настройки раздела
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел на странице. Откройте этот раздел и измените цвет фона на полностью прозрачный. Это позволит показать все, что ниже раздела.
- Фон: RGBA(0,0,0,0)
калибровка
Затем перейдите на вкладку «Стиль сечения» и измените максимальную ширину.
- Максимальная ширина (см. скриншот): 100%
расстояние
Также удалите все стандартные верхние и нижние внутренние поля.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Z-индекс
И чтобы этот раздел всегда был на высоте содержание В разделе героев нам нужно будет увеличить z-индекс в настройках видимости.
- Z-индекс: 99999
Добавить новую строку
Структура колонны
После того, как вы завершили настройку раздела, вы можете добавить новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя никаких модулей, откройте настройки строки и измените параметры размера следующим образом:
- Гармонизация высоты столбцов: Да
- Максимальная ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем добавьте собственные внутренние поля (сверху и снизу).
- Пиковое внутреннее поле: 2vw
- Нижнее внутреннее поле: 0vw
Основной элемент
Затем перейдите на вкладку «Дополнительно» и убедитесь, что столбцы остаются рядом друг с другом на экранах меньшего размера, добавив одну строку кода CSS к основному элементу строки.
display: flex;
Колонка 2
Фоновый цвет
Продолжите, открыв настройки столбца 2 и измените цвет фона на полупрозрачный.
- Цвет фона: rgba (255,255,255,0.71)
граница
Также добавьте нижнюю границу столбца.
- Ширина нижней границы: 2px
- Цвет кнопки и нижней границы: #f4583f
Shadow box
И создайте плавающий эффект, добавив тонкую тень коробки.
- Shadow Box: [Просмотреть снимок]
- Начальная позиция: 20 пикселей
- Сила размытия теней лука: 50 пикселей
- Сила распространения тени коробки: -20px
- Цвет шрифта субтитров: rgba(0,0,0,0.23)
Добавьте модуль изображения в столбец 1.
Скачать логотип
После того, как вы завершили настройку строк и столбцов, пришло время добавить модули, начиная с модуля изображения в столбце 1. Загрузите логотип с прозрачным фоном.
Alignement
Перейдите на вкладку «Стиль модуля» и измените выравнивание.
- Выравнивание изображения: по центру
калибровка
Также измените ширину модуля в настройках размеров.
- Максимальная ширина: 8 vw (рабочий стол), 14 vw (планшет), 21 vw (телефон)
Добавить модуль меню в столбец 2
Выберите меню
Переходим к следующему столбцу. Там единственный модуль, который нам нужен, это модуль меню. Выберите меню по вашему выбору.
Удалить цвет фона
Затем перейдите в настройки фона и удалите цвет фона.
Предоставление
Перейдите на вкладку «Стиль модуля» и измените макет.
- Стиль: по центру
- Выпадающее меню: вниз
Текст меню
Также стилизуйте настройки текста меню.
- Шрифт меню: мулиш
- Цвет текста меню: #6f6666
- Меню размера текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Выпадающее меню
Затем измените настройки в раскрывающемся меню.
- Цвет строки раскрывающегося списка: #f4583f
иконки
Используйте этот же цвет для цвета значка меню гамбургера в настройках значка.
- Цвет значка меню гамбургера: #f4583f
расстояние
Завершите настройку модуля, добавив отступы сверху и снизу в настройках интервалов.
- Максимальный внутренний запас: 1,5 vw
- Нижнее внутреннее поле: 1,5 vw
Добавьте модуль Button в столбец 3.
Добавить текст к кнопке
Перейдем к следующему и последнему столбцу. Добавьте модуль Button с текстом по вашему выбору.
Alignement
Затем измените выравнивание модуля.
- Выравнивание кнопок: по центру
Настройки кнопок
Продолжите, настроив кнопку соответствующим образом:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 0,9 гласного текста (настольный компьютер), 1,5 виртуального экрана (планшет), 2,5 виртуального экрана (телефон)
- Цвет текста кнопки: #ffffff
- Фоновая кнопка: #f4583f
- Ширина границы кнопки: 0 пикселей
- Цвет границы кнопки: #f4583f
- Кнопка «Радиус границы»: 0 пикселей
- Шрифт кнопки: мулиш
- Кнопка затемнения: жирный шрифт
расстояние
Завершите настройку модуля, добавив пользовательские отступы для разных размеров экрана.
- Верхнее и нижнее внутреннее поле: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
- Левое и правое внутреннее поле: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)
Дополнительные параметры раздела
Основной элемент по умолчанию
После того, как вы завершили общую настройку, осталось сделать еще одну вещь; поместите раздел над содержание вашей страницы. Для этого нам нужно будет добавить две строки CSS-кода к основному элементу раздела.
position: absolute;
top: 0;
Основной элемент при наведении
Не забудьте добавить те же строки кода CSS в параметр наведения основного элемента. Это предотвратит мерцание раздела при наведении на него курсора.
position: absolute;
top: 0;
Сохранить изменения конструктора и просмотреть результат
После того, как вы заполнили раздел, вы можете сохранить глобальный заголовок и отобразить результат на своем сайте!
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Так ! Вот и все для этой статьи. Мы показали вам, как создать плавающую и прозрачную строку меню с помощью конструктора тем Divi. Заголовок размещается над первым разделом вашей страницы или сообщения.
Чтобы ознакомиться с конструктором тем Divi, вы также можете прочитать нашу статью о Как создать глобальный заголовок с помощью конструктора тем Divi
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
