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

Теперь, когда здесь появился Theme Builder, нам не терпится погрузиться в новые учебные пособия, которые помогут вам настроить свой веб-сайт от А до Я. Это включает создание пользовательских заголовков с использованием встроенной опции Divi. В этом уроке мы сосредоточимся на создании глобального заголовка с помощью Divi Theme Builder. Глобальный заголовок будет отображаться везде на вашем веб-сайте, если вы не назначили другой заголовок для этой страницы или публикации.

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Скачать The Custom Header Design БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

1. Настройте основное меню

Начните с создания своего меню в настройках внешнего вида вашего веб-сайта WordPress.

2. Перейдите к настройкам построителя тем.

Затем перейдите к построителю тем в параметрах темы Divi. Оказавшись там, вы увидите пустой шаблон веб-сайта по умолчанию.

3. Добавить и построить глобальный заголовок

Шаблон веб-сайта по умолчанию - это то место, где вы можете начать создавать свой собственный глобальный заголовок, глобальное тело и глобальный нижний колонтитул. Нажмите «Добавить глобальный заголовок» и продолжите, нажав «Создать глобальный заголовок», чтобы начать процесс.

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

Размеры

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

• Ширина: 100%
• Макс.ширина: 1280 пикселей (рабочий стол), 100% (планшет и телефон)

Интервал

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

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

Граница

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

• Внизу слева: 50 пикселей
• Внизу справа: 50 пикселей

Коробка Тень

Мы также добавляем тонкую тень блока.

• Сила размытия тени коробки: 60 пикселей
• Цвет тени: rgba (0,0,0,0.13)

Видимость

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое
• Индекс Z: 99999

4. Выделите новую строку заголовку

Теперь, когда мы завершили общие настройки раздела, мы можем начать добавлять строки. Всего нам понадобится две строки; один посвящен заголовку, а другой позволяет отображать пункты меню. Мы начнем с заголовка, добавив новую строку, используя следующую структуру столбцов:

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

Фоновый цвет

Не добавляя никаких модулей в строку, откройте настройки строки и измените цвет фона.

• Цвет фона: # 38383f

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Отображать

И убедитесь, что столбцы отображаются рядом друг с другом на экранах меньшего размера, добавив одну строку кода CSS к основному элементу строки.

display: flex;

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

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

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

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

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

• Выравнивание изображения: по левому краю

Размеры

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

• Ширина: 100 пикселей

Интервал

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

• Верхнее поле: 5 пикселей
• Левое поле: 50 пикселей (рабочий стол), 20 пикселей (планшет и телефон)

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

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

Переходим ко второму столбцу. Здесь нам понадобится модуль отслеживания социальных сетей. Добавьте нужные социальные сети.

Цвет фона социальной сети

Затем откройте каждую социальную сеть по отдельности и измените цвет фона на полностью прозрачный.

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

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

Вернитесь к обычным настройкам модуля и затем измените выравнивание всего модуля.

• Выравнивание модуля: по центру

Значок

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

• Цвет значка: #ffffff
• Использовать нестандартный размер значка: Да
• Размер шрифта значка: 16 пикселей (компьютер и планшет), 12 пикселей (телефон)

Интервал

И добавьте немного верхнего поля.

• Верхнее поле: 10 пикселей

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

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

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

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

Измените выравнивание кнопки на вкладке дизайна.

• Расположение кнопок: вправо

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 12 пикселей (рабочий стол), 10 пикселей (планшет), 8 пикселей (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # ffae25
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопок: 5 пикселей (рабочий стол), 3 пикселя (планшет и телефон)
• Шрифт кнопки: Open Sans
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 50 пикселей (компьютер и планшет), 15 пикселей (телефон)
• Отступ справа: 50 пикселей (компьютер и планшет), 15 пикселей (телефон)

5. Выделите новую строку строке меню

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

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

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

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

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

Макет

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

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

Ссылки

Также измените цвет активной ссылки на вкладке дизайна.

• Цвет активной ссылки: # ffae25

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

Сделайте то же самое для цвета строки раскрывающегося меню в настройках раскрывающегося меню.

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

Иконки

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

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

Текст меню

Вместе с настройками текста меню.

• Шрифт меню: Prata
• Цвет текста меню: # 000000

6. Сделайте так, чтобы заголовок и строка меню были вверху

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

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

Добавить собственный CSS в основной элемент

Затем мы перейдем на вкладку «Дополнительно» и добавим несколько строк кода CSS в основной элемент раздела.

position: fixed;
top: 0;
left: 0;
right: 0;

7. Сохраните параметры глобального заголовка и построителя тем.

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

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

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

Рабочий стол

Мобильный

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

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

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