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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

Создать глобальный заголовок

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

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

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

Интервал

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

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

Индекс Z

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

• Индекс Z: 99999

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

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

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

Размеры

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

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

Интервал

Также измените значения заполнения строки слева и справа.

• Левое заполнение: 2vw (рабочий стол), 10vw (планшет и телефон)
• Правая прокладка: 2vw (рабочий стол), 10vw (планшет и телефон)

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

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

display: flex;
align-items: center;

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

display: block;

Столбец 1

Граница

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

• Ширина правой границы: 1 пиксель (рабочий стол), 0 пиксель (планшет и телефон)
• Цвет правой границы: # d8d8d8

Индекс Z

Увеличьте также z-индекс столбца.

• Индекс Z: 11

Колонка 2

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

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

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

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

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

Пора начинать добавлять модули! Добавьте модуль меню в столбец 1 и выберите нужное меню.

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

Затем загрузите логотип.

Макет

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

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

Текст меню

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

• Цвет активной ссылки: # ef6f49
• Шрифт меню: Montserrat
• Толщина шрифта меню: полужирный
• Стиль шрифта меню: прописные
• Цвет текста меню: # 333333 (по умолчанию), # ef6f49 (при наведении)
• Размер текста меню: 0,7 МВт (рабочий стол), 1,8 МВт (планшет), 2,5 МВт (телефон)
• Расстояние между буквами меню: 1 пиксель

Текст выпадающего меню

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

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

Иконки

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

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

Размеры

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

• Максимальная ширина логотипа: 9vw (рабочий стол), 12vw (планшет), 15vw (телефон)

Меню логотипа CSS

И завершите настройки модуля, добавив одну строку кода CSS к логотипу меню на вкладке «Дополнительно».

margin-right: 10vw;

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

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

Следующий и последний модуль, который нам нужен в столбце 1, - это модуль кода. Добавьте следующие строки кода CSS, чтобы настроить расстояние между пунктами меню:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

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

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

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

Добавить ссылку

Затем добавьте ссылку на модуль кнопок.

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 1.7vw (планшет), 2.5vw (телефон)
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: # edeef0 (по умолчанию), # d6d7d8 (при наведении)
• Ширина границы кнопки: 0 пикселей

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

Интервал

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

• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Правая прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

Модуль кнопки клонирования

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

Изменить ссылку

Откройте дублированный модуль кнопки и измените URL-адрес.

Изменить выравнивание

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

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

Изменить настройки кнопок

Также внесите некоторые изменения в настройки кнопок.

• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # ef6f49 (по умолчанию), # e06945 (при наведении)

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

Завершите настройки кнопки, добавив эффект наведения на масштабирование трансформации.

• Правильно: 110%
• Внизу: 110%

3. Сохраните изменения в построителе тем и результаты предварительного просмотра.

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

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

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

Рабочий стол

Мобильный

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

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

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