Наличие четких призывов к действию на ваших страницах является необходимостью для большинства веб-сайтов. И что может быть лучше для привлечения внимания к некоторым из ваших самых важных призывов к действию, чем размещение их в заголовке?
В сегодняшнем уроке мы покажем вам, как добавить две расположенные рядом кнопки в ваш глобальный заголовок с помощью конструктора кнопок. темы от Диви. Одна из кнопок основная, другая второстепенная. Вы также сможете бесплатно скачать файл JSON глобального заголовка!
обследование
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.
офис
1. Войдите в Divi Theme Builder и создайте глобальный заголовок.
Перейти к Divi Theme Builder
Начните с перехода в Divi Theme Builder и нажмите «Добавить глобальный заголовок».
Создать глобальный заголовок
Чтобы продолжить, нажмите «Построить глобальный заголовок».
2. Создайте общий дизайн заголовка.
Добавить новый раздел
расстояние
Оказавшись внутри редактора шаблонов, вы заметите раздел. Откройте настройки раздела и удалите все отступы по умолчанию сверху и снизу.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Z индекс
Также обязательно увеличьте z-индекс раздела в настройках видимости. Это будет гарантировать, что содержание глобальный заголовок появится вверху всей страницы и опубликует содержание.
- Индекс Z: 99999
Добавить новую строку
Структура столбца
После того, как вы завершили настройки раздела, добавьте новую строку в раздел, используя следующую структуру столбцов:
калибровка
Не добавляя модули, откройте параметры линии и дайте линии занимать всю ширину контейнера сечения.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Также измените значения заполнения слева и справа от строки.
- Левая обивка: 2vw (рабочий стол), 10vw (планшет и телефон)
- Правая обивка: 2vw (рабочий стол), 10vw (планшет и телефон)
Основной элемент
Центрировать все содержание столбцы, мы добавим эти две строки CSS-кода к основному элементу строки.
display: flex;align-items: center;
Удалите свойство отображения рабочего стола на планшете и мобильном устройстве.
display: block;
Колонка 1
Граница
Чтобы продолжить, откройте настройки в столбце 1 и добавьте правую рамку только на рабочем столе.
- Ширина правой границы: 1px (рабочий стол), 0px (планшет и телефон)
- Цвет правой границы: # d8d8d8
Z индекс
Также увеличьте z-индекс столбца.
- Индекс Z: 11
Колонка 2
Основной элемент
Затем откройте настройки для столбца 2 и добавьте следующие строки кода CSS к элементу основного столбца, чтобы превратить его в два столбца.
display: grid;grid-template-columns: 50% 50%;
Добавить модуль меню в столбец 1
Выберите меню
Пора начинать добавлять модули! Добавьте модуль меню в столбец 1 и выберите нужное меню.
Скачать логотип
Затем загрузите логотип.
Предоставление
Перейдите на вкладку дизайна модуля и убедитесь, что применяются следующие настройки макета:
- Стиль: по левому краю
- Направление выпадающего меню: вниз
Текст меню
Затем измените настройки текста меню.
- Цвет активной ссылки: # ef6f49
- Шрифт меню: Монтсеррат
- Вес шрифта меню: полужирный
- Стиль шрифта меню: верхний регистр
- Цвет текста меню: # 333333 (по умолчанию), # ef6f49 (при наведении)
- Размер текста меню: 0.7vw (рабочий стол), 1.8vw (планшет), 2.5vw (телефон)
- Межбуквенный интервал: 1 пикс
Текст выпадающего меню
Также внесите изменения в настройки текста в раскрывающемся меню.
- Цвет фона раскрывающегося меню: #ffffff
- Цвет линии в выпадающем меню: # ef6f49
иконки
Затем измените цвет значка меню гамбургера.
- Цвет значка меню Гамбургер: # 000000
калибровка
Также добавьте максимальную ширину логотипа к параметрам размеров.
- Максимальная ширина логотипа: 9vw (рабочий стол), 12vw (планшет), 15vw (телефон)
CSS Logo Menu
И завершите настройку модуля, добавив строку кода CSS к логотипу меню на вкладке «Дополнительно».
margin-right: 10vw;
Добавьте модуль кода в столбец 1
Добавьте пользовательский код CSS в модуль
Следующий и последний модуль, который нам нужен в столбце 1, - это модуль кода. Добавьте следующие строки кода CSS, чтобы настроить расстояние между элементами меню:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Добавьте модуль первой кнопки в столбец 2
Добавить копию
Переходим к следующему модулю! Добавьте первый кнопочный модуль и введите копию по вашему выбору.
Добавить ссылку
Затем добавьте ссылку на модуль кнопки.
Alignement
Перейдите на вкладку дизайна модуля и измените расположение кнопок.
- Выравнивание кнопок: вправо
Настройки кнопок
Также стиль кнопки.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 0.8vw (рабочий стол), 1.7vw (планшет), 2.5vw (телефон)
- Цвет текста кнопки: # 000000
- Цвет фона кнопки: # edeef0 (по умолчанию), # d6d7d8 (при наведении)
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 0 пикселей
- Интервал между кнопками: 2px
- Шрифт кнопки: Montserrat
- Вес шрифта кнопки: полужирный
- Стиль шрифта кнопки: заглавные
расстояние
Завершите настройки модуля, добавив собственные значения отступов для экранов разных размеров.
- Верхний отступ: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Нижняя обивка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Левый отступ: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
- Правая обивка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
Модуль кнопки клонирования
Как только вы закончили первый модуль кнопки, клонируйте его.
Изменить ссылку
Откройте модуль повторяющихся кнопок и измените URL-адрес.
Изменить выравнивание
Также измените выравнивание модуля.
- Выравнивание кнопок: слева
Изменить настройки кнопки
Также внесите изменения в настройки кнопки.
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # ef6f49 (по умолчанию), # e06945 (при наведении)
Шкала преобразования при наведении
Завершите настройки кнопки, добавив эффект наведения трансформации масштаба.
- Справа: 110%
- Низкий: 110%
3. Сохраните изменения в генераторе темы и в результате предварительного просмотра.
Как только ваш глобальный заголовок будет завершен, сохраните все изменения, внесенные в конструктор тем, и просмотрите результат на своем Веб-сайт!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этом уроке мы показали вам, как добавить две кнопки рядом с вашим общим заголовком с помощью конструктора тем Divi.
Одна из добавленных нами кнопок является основной, другая — вторичной. Добавление кнопок в общий заголовок поможет вам выделить некоторые из наиболее важных CTA в вашем Веб-сайт. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
