Как автоматически размещать заголовок под первым разделом Divi каждой страницы

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и добавьте новый шаблон страницы.

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

Начните с перехода к Divi Theme Builder и добавьте новый шаблон.

Использовать на

Используйте этот новый шаблон на всех страницах.

• Использовать на: Все страницы

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

Продолжите, создав собственный заголовок внутри шаблона страницы.

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

Фоновый цвет

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

• Цвет фона: #FFFFFF

Интервал

Затем удалите верхнее и нижнее заполнение раздела по умолчанию.

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

Граница

Также добавьте верхнюю и нижнюю границу.

• Ширина верхней и нижней границы: 1px
• Цвет верхней и нижней границы: # 002d4c

CSS ID

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

• Идентификатор CSS: custom-header

Индекс Z

И последнее, но не менее важное: мы увеличим z-индекс раздела, чтобы он отображался поверх всего содержимого страницы.

• Индекс Z: 99999

Добавить новую строку

Структура столбца

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

Размеры

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

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

Интервал

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

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

Главный элемент

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

display: flex;
align-items: center;

Столбец 1

Интервал

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

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

Граница

Также добавьте правую границу к столбцу.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # 002d4c

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

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

Пора начинать добавлять модули! В столбце 1 нам понадобится модуль изображения. Загрузите свой логотип.

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

Перейдите на вкладку дизайна модуля и измените выравнивание изображения.

• Выравнивание изображения: по центру

Размеры

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

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

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

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

Во втором столбце нам понадобится модуль меню. Выберите меню по вашему выбору.

Макет

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

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

Текст меню

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

• Шрифт меню: Cabin
• Цвет текста меню: # 77848d
• Размер текста меню: 16 пикселей (рабочий стол), 15 пикселей (планшет), 14 пикселей (телефон)
• Высота строки меню: 1,8 м

Раскрывающийся текст

Затем измените некоторые цвета в настройках раскрывающегося текста.

• Цвет фона выпадающего меню: #ffffff
• Цвет строки раскрывающегося меню: # 002d4c

Иконки

И завершите настройку модуля, изменив цвет значка гамбургер-меню в настройках значков.

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

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

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

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

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

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

• Расположение кнопок: по центру

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

Продолжите, изменив стиль кнопки в настройках кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 13 пикселей
• Цвет текста кнопки: # 002d4c
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 2 пикселя
• Цвет границы кнопки: #ffffff (по умолчанию), # d1d1d1 (при наведении)
• Радиус границы кнопки: 0 пикселей

• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Кабина
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхний отступ: 16 пикселей
• Нижний отступ: 16 пикселей
• Отступ слева: 24 пикселя (настольный компьютер и планшет), 13 пикселей (телефон)
• Отступ справа: 24 пикселя (настольный компьютер и планшет), 13 пикселей (телефон)

Коробка Тень

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

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 2 пикселя (по умолчанию), 6 пикселей (при наведении)
• Цвет тени: # 002d4c
• Положение тени коробки: внутренняя тень

3. Автоматически размещать заголовок после первого раздела каждой страницы с помощью JQuery.

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

Теперь, чтобы автоматически разместить меню под первым разделом каждой страницы, нам понадобится немного кода JQuery. Чтобы включить этот код в наш настраиваемый заголовок, добавьте модуль кода в столбец 2.

Вставить код JQuery

Добавьте следующие строки кода JQuery между тегами сценария, как вы можете заметить на экране печати ниже , в модуль кода, чтобы применить эффект:

jQuery (функция ($) {
$ ('# настраиваемый заголовок'). insertAfter ('. et_pb_section_0');
});

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

И завершите настраиваемый заголовок, сохранив все изменения конструктора тем и просмотрев результат на своих страницах!

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

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

Рабочий стол

Мобильный

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

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

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