Хотите создать боковой глобальный заголовок с помощью Divi?
В этом уроке мы покажем вам, как создать глобальный повернутый заголовок, который будет отображаться в левой части ваших страниц и сообщений. Цвет фона заголовка полностью прозрачен, что позволяет содержание страницы/публикации.
Мы позаботились о том, чтобы глобальный заголовок оставался фиксированным слева при прокрутке, а также сделали меню удобным для мобильных устройств.
В этом уроке мы покажем вам, как воссоздать дизайн с нуля!
Пойдем.
обследование
Прежде чем погрузиться в учебник, давайте кратко рассмотрим результат, которого мы хотим достичь.
Перейдите в конструктор тем Divi и начните создавать глобальный заголовок.
В панели управления WordPress перейдите к Divi > Конструктор тем
Cliquez-сюр- «Добавить глобальный заголовок»
выбрать «Построить глобальный заголовок».
Начните создавать глобальный боковой заголовок
Добавить новый раздел
Фоновый цвет
Попав в редактор шаблонов, вы можете открыть уже существующий раздел и изменить цвет фона на разных размерах экрана.
- Цвет фона: rgba(0,0,0,0) (рабочий стол), #FFFFFF (планшет и телефон)
калибровка
Перейти на вкладку Проект, вытащите опцию Калибровка а затем измените параметры размера раздела.
- Ширина: 5vw (рабочий стол), 100% (планшет и телефон)
- Минимальная высота: 100 vw (настольный компьютер), авто (планшет и телефон)
расстояние
Затем вытащите параметр «Интервал» и измените настройки следующим образом:
- Прокладка (сверху и снизу): 2vw
Shadow box
Затем перейдите к Box Тень и добавьте пользовательскую тень окна на разных размерах экрана.
- Коробчатая тень по горизонтали: 32 пикселя (рабочий стол), 0 пикселов (планшет и телефон)
- Сила размытия тени коробки: 49 пикселей
- Сила распространения: 0 пикселей (настольный компьютер), 19 пикселей (планшет и телефон)
- Цвет тени: rgba(0,0,0,0.12)
Добавление пользовательского CSS
Мы также убедимся, что глобальный заголовок остается фиксированным слева, добавив несколько строк кода CSS к элементу основного раздела.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
При наведении на раздел
Не забудьте также добавить эти строки кода CSS в основной элемент при наведении на раздел.
position: fixed;
top: 0;
Видимость по умолчанию
Затем увеличьте z-индекс в параметрах позиции.
- Индекс Z: 99999
Видимость при наведении
Убедитесь, что то же значение применяется при наведении курсора.
- Индекс Z: 99999
Добавить новую строку
Структура колонны
После завершения настройки раздела добавьте новую строку, используя следующую структуру столбцов:
калибровка
Пока не добавляя никаких модулей, откройте настройки линии и измените параметры размеров.
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
расстояние
Также удалите все поля по умолчанию.
- Отступы (сверху и снизу): 0 пикселей
Параметры столбца
Добавлен пользовательский CSS (планшет и телефон)
На планшете и телефоне мы выбираем совершенно другой дисплей. Мы разместим три разных модуля рядом друг с другом. Для этого нам нужно добавить код CSS.
Откройте настройки колонки, перейдите на вкладку Фильтр и вставьте следующие строки кода CSS в пространство Главный элемент для планшета и телефона:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Добавьте модуль изображения в столбец
Скачать логотип
Пришло время начать добавлять модули! Первый модуль, который нам нужен, это модуль изображения. Загрузите файл с изображением полупрозрачного логотипа по вашему выбору.
калибровка
Затем перейдите на вкладку Проект и изменить ширину на разных размерах экрана.
- Ширина: 4 vw (рабочий стол), 12 vw (планшет), 16 vw (телефон)
Масштаб трансформации
Увеличьте размер модуля, изменив впоследствии настройки масштаба преобразования.
- Справа: 170% (рабочий стол), 100% (планшет и телефон)
- Низкий: 170% (рабочий стол), 100% (планшет и телефон)
«Перевести, перевести»
И сдвиньте модуль вправо, изменив следующие параметры
- Внизу: 1vw (настольный компьютер), 0vw (планшет и телефон)
Добавьте модуль меню в столбец
Выберите меню, чтобы добавить
Следующий модуль, который нам нужен, это модуль меню. Выберите меню по вашему выбору.
Удалить цвет фона
Затем удалите цвет фона из модуля.
Предоставление
Затем перейдите на вкладку Проект и изменить настройки макета.
- Стиль: по центру
- Направление выпадающего меню: вниз
Настройки текста меню
Также измените настройки текста меню.
- Цвет активной ссылки: #cecece
- Шрифт меню: Montserrat
- Толщина шрифта меню: Жирный
- Цвет текста: #000000
- Размер текста меню: 0,9 дюйма (рабочий стол), 2 дюйма (планшет), 2,5 дюйма (телефон).
Текст меню при наведении
Изменение цвета текста меню при наведении.
- Цвет текста меню: #afafafaf
Выпадающее меню
Мы также вносим некоторые изменения в настройки раскрывающегося меню.
- Цвет строки выпадающего меню: #000000
- Цвет текста выпадающего меню: #000000
иконки
Затем измените цвет значка меню гамбургера.
- Цвет значка меню гамбургера: #000000
расстояние
И добавляйте собственные значения маржи для экранов разных размеров.
- Поле (сверху и снизу): 18 vw (рабочий стол), 0 vw (планшет и телефон)
- Маржа (слева и справа): -13vw (рабочий стол), 0vw (планшет и телефон)
Преобразование вращения
Теперь, чтобы создать эффект вращения, мы поиграем со значениями поворота преобразования модуля.
- Слева: 270 градусов (настольный компьютер), 0 градусов (планшет и телефон)
Добавьте модуль «Подписка в социальных сетях» в столбец
Добавить социальные сети
Давайте перейдем к модулю «Отслеживание в социальных сетях», который является следующим и последним модулем, который нам нужен для завершения нашего глобального сводного заголовка. Добавьте несколько социальных сетей по вашему выбору.
Сбросить стили значков социальных сетей
Продолжите, сбросив настройки для каждой социальной сети в отдельности. Это поможет нам избавиться от их фонового цвета.
Alignement
Затем перейдите на вкладку Проект модуля и изменить выравнивание модуля на разных размерах экрана.
- Модуль выравнивания: слева (рабочий стол), справа (планшет и телефон)
Настройки значка
Наконец, измените настройки значка.
- Цвет значка: #000000
- Использовать пользовательский размер значка: ДА
- Размер шрифта значка: 2,1 vw
Сохранить изменения конструктора и просмотреть результат
После того, как вы завершили все модули, вы можете сохранить модель, выйти из конструктора темы Divi и визуализировать результат на вашем Веб-сайт !
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
офис
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как создать повернутый глобальный заголовок. Если вы не выберете иное, созданный нами глобальный заголовок будет отображаться во всех ваших сообщениях и страницах.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Смотрите также наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
