Когда вы создаете собственный заголовок для своего Веб-сайт, используя конструктор тем Divi, вы обнаружите, что ищете идеальный способ добавить AAL (призыв к действию). Один из способов сделать это — добавить Контактная форма прокрутка. Это поможет вам сохранить общий вид вашего заголовка в чистоте, предоставляя возможность вводить обращайтесь с вами, без необходимости прокручивать вниз. В этом уроке мы покажем вам, как создать Контактная форма раскрывающийся список с использованием кода Divi и JQuery и CSS. Вы также сможете скачать файл JSON бесплатно!

Пойдем.

обследование

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

Раскрывающееся меню Divi

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

Перейти к Divi Theme Builder

Начните с перехода к Divi Theme Builder в бэкэнде вашего сайта WordPress.

Глобальный заголовок divi

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

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

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

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

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

Фоновый цвет

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

  • Цвет фона: #FFFFFF
Регулировка фона

расстояние

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

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Конфигурация заполнения

Shadow box

Также примените тонкий оттенок коробки.

  • Box Shadow Blur Сила: 50px
  • Цвет тени: rgba (0,0,0,0,15)
Конфигурация Divi Shadow

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

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

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

Выберите макет

калибровка

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

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

расстояние

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

  • Верхняя обивка: 1vw
  • Нижняя обивка: 1vw
Конфигурация расстояния между секциями

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

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

align-items: center;

Пользовательские CSS

Столбец 2 Z Указатель

Мы также следим за тем, чтобы второй столбец имел более высокое значение z-index для реактивных целей.

  • Индекс Z: 12
Параметр столбца

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

Скачать логотип

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

Модуль изображения divi

Alignement

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

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

калибровка

Также измените ширину.

  • Ширина: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
раскрывающаяся контактная форма

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

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

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

Персонализация модуля меню divi

Предоставление

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

  • Стиль: по центру
Стиль модуля меню

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

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

  • Шрифт меню: Открыть без
  • Вес шрифта меню: полужирный
  • Цвет текста меню: # 000000
  • Размер текста меню: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Межбуквенный интервал: 1 пикс
Текст меню Divi

Настройки текста выпадающего меню

Затем измените цвет линии в раскрывающемся меню.

  • Цвет линии выпадающего меню: # 007dff
Раскрывающееся меню Divi

иконки

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

  • Цвет значка меню гамбургер: # 007dff
Иконки меню divi

Добавьте текстовый модуль 1 в столбец 3.

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

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

Свяжитесь с нами модуль divi

Фоновый цвет

Затем добавьте цвет фона.

  • Цвет фона: # 007dff
Divi фон

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

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

  • Шрифт текста: Open Sans
  • Вес шрифта текста: жирный
  • Цвет текста: #ffffff
  • Размер текста: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Выравнивание текста: центр
Цвет шрифта Divi

калибровка

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

  • Ширина: 33%
  • Выравнивание модуля: центр
Размер текста раздела divi

расстояние

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

  • Верхняя обивка: 0.8vw (рабочий стол), 2vw (планшет и телефон)
  • Нижняя обивка: 0.8vw (рабочий стол), 2vw (планшет и телефон)
Конфигурация интервалов текстового модуля

Граница

И заполните параметры модуля, добавив радиус границы.

  • Все углы: 100px
Конфигурация границы текстового модуля

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

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

Перейдем к следующему модулю, это еще один текстовый модуль. Добавьте следующую стрелку в область содержимого: «▼».

Текстовый модуль Divi fleche

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

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

  • Шрифт текста: Open Sans
  • Цвет текста: # 007fff
  • Размер текста: 3vw
  • Высота строки текста: 0em
  • Выравнивание текста: центр
Текстовый модуль шрифта divi

Z индекс

Мы также увеличиваем z-индекс модуля.

  • Индекс Z: 11
Положение текстового модуля Divi

Добавьте модуль контактной формы в столбец 3

Теперь вы можете добавить Контактная форма прямо внизу текстового модуля, содержащего стрелку. Этот модуль довольно прост в использовании, поэтому вам нужно будет настроить, какие поля вы хотите сделать видимыми.

Модуль контактной формы

3. Настройте элементы для создания контактной формы в один клик

Добавьте высоту столбца 3

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

Офис:

height: 3vw;

таблетка:

height: 5vw;

телефон:

height: 6vw;

Образец формы обратной связи

Добавьте класс CSS к кнопке и стрелке

Затем мы добавим тот же класс CSS к первым двум текстовым модулям в столбце 3.

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

Добавить класс CSS в форму контакта

Нам также понадобится собственный класс CSS для модуля контактной формы.

Добавить класс в форму divi

Скрыть модуль «Контактная форма»

Затем добавьте дополнительную строку кода CSS к основному элементу модуля контактной формы. Это позволит нам скрыть модуль перед нажатием.

display: none;

Модуль стиля css divi

Добавьте модуль кода в столбец 3 с помощью кода JQuery и CSS

А для создания функции щелчка нам понадобится код JQuery. Мы также будем использовать собственный код CSS. Добавьте новый модуль кода в столбец 2 с кодом. Не забудьте разместить код JQuery между тегами скрипта и код CSS между тегами стилей.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Добавить код javascript

обследование

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

офис

Пример дизайна

Что помнить

В этой статье мы показали вам, как добавить раскрывающуюся контактную форму в настраиваемый заголовок. Это отличный способ вызвать действие на ранней стадии.