Как сделать так, чтобы ваш логотип пересекал основные и дополнительные панели меню внутри заголовка Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Создайте новый шаблон глобального заголовка

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

Начните с перехода к Divi Theme Builder в серверной части вашего веб-сайта WordPress. Оказавшись там, нажмите «Добавить глобальный заголовок».

Добавить новый глобальный заголовок

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

2. Создайте дизайн заголовка

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

Чтобы создать этот дизайн, мы собираемся использовать специальный раздел.

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

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

Цвет фона столбца 1

После того, как вы добавили специальный раздел, откройте его настройки и примените цвет фона столбца 1.

• Цвет фона столбца 1: rgba (255,191,0,0,27)

Размеры

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 1: 0 пикселей
• Отступ снизу столбца 1: 0 пикселей
• Верхний отступ столбца 2: 0 пикселей.
• Отступ нижнего столбца 2: 0 пикселей

Идентификаторы CSS столбца

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

• Идентификатор CSS столбца 1: header-first-column
• Идентификатор CSS столбца 2: заголовок-второй-столбец

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

Загрузить изображение

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

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

Затем перейдите на вкладку «Дизайн» и измените выравнивание изображения.

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

Размеры

Примените также максимальную ширину к настройкам размера.

• Максимальная ширина: 100 пикселей

Видимость

И спрячьте модуль на экранах меньшего размера.

Добавить строку №1 в столбец 2

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

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

Фоновый цвет

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

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

Интервал

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

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Далее примените следующие настройки границы:

• Ширина нижней границы: 3 пикселя
• Ширина левой границы:
  • Рабочий стол: 3 пикселя
  • Планшет и телефон: 0 пикселей
• Цвет границы: # 6c2eb9

Основной элемент CSS

И используйте следующие строки кода CSS внутри основного элемента строки:

display: flex;
justify-content: center;
align-items: center;

Скрыть столбцы 1 и 2 на экранах меньшего размера

Чтобы упростить дизайн на экранах меньшего размера, мы откроем настройки столбца 1 и 2 и скроем их оба на планшете и телефоне.

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

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

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

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

Измените цвет фона каждой социальной сети индивидуально.

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

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

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

• Цвет значка: # 6c2eb9

Граница

Также добавьте закругленные углы к настройкам границы.

• Все углы: 100 пикселей

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

Добавить содержимое

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

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

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

• Шрифт текста: Поппинс
• Выравнивание текста: по центру

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

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

В столбце 3 нам нужен только модуль Button. Добавьте какую-нибудь копию по вашему выбору.

Выравнивание кнопок

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

• Выравнивание кнопок:
  • Рабочий стол: справа
  • Планшет и телефон: Центр

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

Далее стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 14 пикселей
• Цвет текста кнопки: # 6c2eb9
• Цвет фона кнопки: #ffeeba
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

• Показать значок кнопки: Да
• Расположение значка кнопки: слева

Интервал

И примените следующие значения заполнения:

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 30 пикселей

Добавить строку №2 в столбец 2

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

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

Фоновый цвет

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

• Цвет фона: rgba (161,99,255,0.1)

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Затем примените следующие настройки границы:

• Ширина левой границы:
  • Рабочий стол: 3 пикселя
  • Планшет и телефон: 0 пикселей
• Цвет левой границы: # 6c2eb9

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

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

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

Загрузить логотип на планшет и телефон

Затем загрузите логотип только на планшет и телефон.

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

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

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

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

• Шрифт меню: Poppins
• Цвет текста меню: # 6c2eb9
• Размер текста меню: 16 пикселей

Параметры раскрывающегося меню

Далее примените следующий цвет строки раскрывающегося меню:

• Цвет строки выпадающего меню: rgba (0,0,0,0)

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

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

• Цвет значка корзины покупок: # 6c2eb9
• Цвет значка поиска: # 6c2eb9
• Цвет значка меню гамбургера: # 6c2eb9

Размеры

Нанесите логотип максимальной ширины на планшет и телефон.

• Максимальная ширина логотипа:
  • Таблетка: 70 пикселей
  • Телефон: 50 пикселей

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

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

Добавить теги стиля

Поместите несколько тегов стиля в поле кода.

Вставить код CSS между тегами стилей

И поместите следующие строки кода CSS между тегами стиля:

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. Сохраните изменения Divi Theme Builder.

Теперь, когда все на месте, остается только сохранить все изменения Divi Theme Builder и просмотреть результат!

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

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

Рабочий стол

Мобильный

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

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

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