Необходимо создать глобальный заголовок для вашего сайт с Диви?
Глобальный заголовок будет отображаться везде на вашем Веб-сайт, если только вы не назначили другой заголовок странице или сообщению.
Давайте начнем!
обследование
Вот предварительный просмотр глобального заголовка, который мы собираемся разработать.
Настройте главное меню
Начните с создания меню в настройках внешнего вида вашего сайта WordPress.
Получите доступ к опции Theme Builder в Divi
В вариантах Диви тема, щелкните Конструктор тем. Оказавшись там, вы заметите шаблон сайта По умолчанию.
Добавить и создать глобальный заголовок
Le шаблон сайта по умолчанию вы можете начать создавать свой собственный глобальный заголовок, глобальную основную часть и глобальный нижний колонтитул. Нажмите «Добавить глобальный заголовок» и продолжите, нажав «Построить глобальный заголовок», чтобы начать процесс.
Настройки раздела
калибровка
Откройте настройки раздела, которые вы найдете на странице, во вкладке Стиль измените размеры на разных размерах экрана.
- Максимальная ширина: 100%
- Максимальная ширина: 1280 пикселей (для ПК и планшетов), 100% (для мобильных устройств)
расстояние
Удалить все верхние и нижние внутренние поля
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
граница
Теперь добавьте радиус границы к нижнему левому и правому углам секции.
- Внизу слева: 50px
- Внизу справа: 50 пикселей
Shadow box
Давайте также добавим тонкую тень коробки.
- Box Shadow Blur Strength: 60px
- Цвет шрифта субтитров: rgba(0,0,0,0.13)
видимость
- Горизонтальный перелив: видимый
- Вертикальное переполнение: видимое
Посвятить новую строку заголовку
Теперь, когда мы завершили общие настройки раздела, мы можем начать добавлять строки. Всего нам понадобится две линии; один предназначен для заголовка, а другой позволяет отображать элементы меню. Мы начнем с заголовка, добавив новую строку, используя следующую структуру столбцов:
Настройки линии
Настройки фона
Не добавляя никаких модулей в линию, откройте настройки линии и измените цвет фона.
- Фон: #38383F
калибровка
Затем измените параметры размера линии.
- Использовать пользовательскую ширину желоба: ДА
- Расстояние между столбцами: 1
- Максимальная ширина: 100%
- Максимальная ширина: 100%
Просмотр
Теперь давайте убедимся, что столбцы отображаются рядом друг с другом на небольших экранах, добавив эту строку кода CSS к основному элементу строки.
01
display: flex;
Добавить модуль изображения в столбец 1
Скачать логотип
После того, как вы завершили настройку строк, пришло время начать добавлять модули. Добавьте модуль изображения в столбец 1 и загрузите свой логотип.
Alignement
Перейдите на вкладку Стиль и выровняйте изображение по левому краю.
калибровка
Также измените ширину модуля.
расстояние
Также добавьте пользовательские значения маржи.
Добавьте модуль отслеживания социальных сетей в столбец 2.
Добавить социальные сети
Переходим ко второй колонке. Там нам понадобится модуль отслеживания социальных сетей. Добавьте социальные сети по вашему выбору. Вы можете добавить столько социальных сетей, сколько захотите.
Цвет фона социальной сети
Далее откройте каждую социальную сеть по отдельности и измените цвет фона на полностью прозрачный.
- Цвет фона: rgba (0,0,0,0)
Alignement
Вернитесь к обычным настройкам модуля, а затем измените полное выравнивание модуля.
значок
Также измените настройки значков.
- Цвет значка: #FFFFFF
- Использовать пользовательский размер значка: Да
- Размер шрифта иконки: 16px (ПК и планшет), 12px (телефон)
расстояние
Добавьте верхнее поле.
Добавьте модуль Button в столбец 3.
Перейдите к третьему столбцу и добавьте модуль Button, содержащий текст по вашему выбору.
Alignement
Измените выравнивание кнопки на вкладке «Стиль».
Настройки кнопки
Настройте параметры кнопки следующим образом:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 12 пикселей (рабочий стол), 10 пикселей (планшет), 8 пикселей (телефон).
- Цвет текста кнопки: #ffffff
- Фоновая кнопка: #ffae25
- Ширина границы кнопки: 0 пикселей
- Кнопка «Радиус границы»: 0 пикселей
- Расстояние между буквами кнопки: 5 пикселей (рабочий стол), 3 пикселя (планшет и телефон)
- Кнопка шрифта: открыть нет
- Кнопка Soft Light: жирный текст
- Стиль кнопки копирования: TT
расстояние
Настройте значения маржи.
Выделить новую строку в строке меню
После того, как вы заполнили строку, предназначенную для глобального заголовка, вы можете добавить еще одну строку чуть ниже.
Настройки линии
калибровка
Пока не добавляя никаких модулей, откройте настройки линии и измените параметры размера на вкладке «Стиль».
расстояние
Затем удалите все нижние и верхние поля.
Добавьте модуль меню в столбец
Выберите меню
Затем добавьте в столбец модуль «Меню» и выберите меню, которое вы создали в первой части этого руководства.
Предоставление
Перейдите на вкладку Стиль и измените настройки макета следующим образом:
Ссылки
Также измените цвет активной ссылки на вкладке Стиль.
- Цвет активной ссылки: #ffae25
Выпадающее меню
Сделайте то же самое для цвета линии выпадающего меню в настройках выпадающего меню.
- Цвет строки раскрывающегося списка: #ffae25
значок
- Цвет значка меню гамбургера: #ffae25
Текст меню
С настройками текста меню.
- Шрифт меню: Prata
- Цвет текста меню: #000000
Сделать заголовок и панель меню сверху
Открыть настройки раздела
После того, как вы заполнили вторую строку, все, что вам нужно сделать, это убедиться, что раздел остается в верхней части наших страниц и сообщений. Для этого снова откроем настройки раздела.
Добавить пользовательский CSS к основному элементу
Далее мы перейдем на вкладку «Дополнительно» и добавим несколько строк кода CSS к основному элементу раздела.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Сохранить глобальные параметры заголовка и конструктора тем
После того, как вы завершили весь дизайн глобального заголовка, обязательно сохраните дизайн перед выходом из макета шаблона. Как только вы выйдете из макета шаблона, сохраните все изменения конструктора тем, и все готово!
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
Заключение
В этой статье мы показали вам, как создать собственный глобальный заголовок с помощью нового конструктора тем Divi. В этом уроке показано, как легко создавать красивые заголовки и применять их ко всему вашему сайту. Веб-сайт или определенные пользовательские типы сообщений.
Мы надеемся, что это поможет вам настроить свой веб-сайт с помощью Theme Builder.
Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте нам комментарий в раздел комментариев ниже.
...
