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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

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

Начните с перехода к Divi Theme Builder на своем веб-сайте WordPress.

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

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

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

Добавить новый раздел

Фоновый цвет

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

• Цвет фона: rgba (0,0,0,0) (рабочий стол), #FFFFFF (планшет и телефон)

Размеры

Затем измените настройки размера раздела.

• Ширина: 5vw (рабочий стол), 100% (планшет и телефон)
• Мин. Высота: 100 Вт (рабочий стол), авто (планшет и телефон)

Интервал

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

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

Коробка Тень

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

• Горизонтальное положение тени блока: 32 пикселя (рабочий стол), 0 пиксель (планшет и телефон)
• Сила размытия тени коробки: 49 пикселей
• Сила распространения тени коробки: 0 пикселей (рабочий стол), 19 пикселей (планшет и телефон)
• Цвет тени: rgba (0,0,0,0.12)

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

Мы также позаботимся о том, чтобы повернутый глобальный заголовок оставался фиксированным с левой стороны, добавив несколько строк кода 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 пикселей
• Нижний отступ: 0 пикселей

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

Основной элемент (планшет и телефон)

На планшете и телефоне мы сделаем совершенно другой внешний вид. Мы разместим три разных модуля рядом друг с другом. Для этого нам нужно добавить немного кода CSS. Откройте настройки столбца, перейдите на вкладку «Дополнительно» и вставьте следующие строки кода CSS в основной элемент планшета и телефона:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

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

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

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

Размеры

Затем перейдите на вкладку дизайна и измените ширину для разных размеров экрана.

• Ширина: 4vw (рабочий стол), 12vw (планшет), 16vw (телефон)

Масштаб преобразования

Увеличьте размер модуля, изменив настройки масштаба преобразования.

• Справа: 170% (компьютер), 100% (планшет и телефон)
• Внизу: 170% (компьютер), 100% (планшет и телефон)

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

И сдвиньте модуль вправо, добавив нижнее значение transform translate на рабочем столе.

• Внизу: 1vw (рабочий стол), 0vw (планшет и телефон)

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

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

Следующий необходимый нам модуль - это модуль меню. Выберите меню по вашему выбору.

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

Затем удалите цвет фона модуля.

Макет

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

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

Текст меню по умолчанию

Измените также настройки текста меню.

• Цвет активной ссылки: #cecece
• Шрифт меню: Montserrat
• Толщина шрифта меню: полужирный
• Цвет текста меню: # 000000
• Размер текста меню: 0.9vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)

Текст меню при наведении

Измените цвет текста меню при наведении курсора.

• Цвет текста меню: #afafaf

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

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

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

Иконки

Затем измените цвет значка меню гамбургера.

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

Интервал

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

• Верхняя маржа: 18vw (ПК), 0vw (планшет и телефон)
• Нижнее поле: 18vw (рабочий стол), 0vw (планшет и телефон)
• Левое поле: -13vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: -13vw (рабочий стол), 0vw (планшет и телефон)

Преобразовать Повернуть

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

• Слева: 270 градусов (рабочий стол), 0 градусов (планшет и телефон)

Добавить модуль отслеживания социальных сетей в столбец

Добавить социальные сети

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

Сбросить стили социальных сетей

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

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

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

• Выравнивание: влево (рабочий стол), вправо (планшет и телефон)

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

И последнее, но не менее важное: измените также настройки значков.

• Цвет значка: # 000000
• Использовать нестандартный размер значка: Да
• Размер шрифта значка: 2.1vw

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

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

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

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

Рабочий стол

Мобильный

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

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

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