Когда вы создаете собственный заголовок для своего Веб-сайт, используя конструктор тем Divi, вы обнаружите, что ищете идеальный способ добавить AAL (призыв к действию). Один из способов сделать это — добавить Контактная форма прокрутка. Это поможет вам сохранить общий вид вашего заголовка в чистоте, предоставляя возможность вводить обращайтесь с вами, без необходимости прокручивать вниз. В этом уроке мы покажем вам, как создать Контактная форма раскрывающийся список с использованием кода Divi и JQuery и CSS. Вы также сможете скачать файл JSON бесплатно!
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
1. Зайдите в Divi Theme Builder и начните создавать глобальный заголовок
Перейти к Divi Theme Builder
Начните с перехода к Divi Theme Builder в бэкэнде вашего сайта WordPress.
Создать глобальный заголовок
Нажмите «Добавить глобальный заголовок» и выберите «Создать глобальный заголовок», чтобы начать создание собственного глобального заголовка.
2. Создайте дизайн заголовка.
Настройки раздела
Фоновый цвет
Оказавшись внутри общего шаблона заголовка, вы заметите раздел. Откройте этот раздел и используйте белый цвет фона.
- Цвет фона: #FFFFFF
расстояние
Затем удалите верхний и нижний отступы по умолчанию из раздела.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Shadow box
Также примените тонкий оттенок коробки.
- Box Shadow Blur Сила: 50px
- Цвет тени: rgba (0,0,0,0,15)
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 95%
- Максимальная ширина: 100%
расстояние
Затем добавьте пользовательский верхний и нижний отступы.
- Верхняя обивка: 1vw
- Нижняя обивка: 1vw
Основной элемент
И выровняйте все содержимое столбца, добавив одну строку кода CSS к основному элементу строки.
align-items: center;
Столбец 2 Z Указатель
Мы также следим за тем, чтобы второй столбец имел более высокое значение z-index для реактивных целей.
- Индекс Z: 12
Добавьте модуль изображения в столбец 1
Скачать логотип
Пора начинать добавлять модули! Начните с модуля изображения в столбце 1. Загрузите логотип.
Alignement
Затем измените выравнивание модуля.
- Выравнивание изображения: по центру
калибровка
Также измените ширину.
- Ширина: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
Добавить модуль меню в столбец 2
Выберите меню
Во втором столбце мы добавим модуль меню.
Предоставление
Перейдите на вкладку дизайна модуля и измените стиль макета.
- Стиль: по центру
Настройки текста меню
Затем измените настройки текста в меню модуля.
- Шрифт меню: Открыть без
- Вес шрифта меню: полужирный
- Цвет текста меню: # 000000
- Размер текста меню: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Межбуквенный интервал: 1 пикс
Настройки текста выпадающего меню
Затем измените цвет линии в раскрывающемся меню.
- Цвет линии выпадающего меню: # 007dff
иконки
С цветом значка меню гамбургера.
- Цвет значка меню гамбургер: # 007dff
Добавьте текстовый модуль 1 в столбец 3.
Добавить копию
Переходим к третьему модулю! Добавьте текстовый модуль с копией по вашему выбору.
Фоновый цвет
Затем добавьте цвет фона.
- Цвет фона: # 007dff
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Open Sans
- Вес шрифта текста: жирный
- Цвет текста: #ffffff
- Размер текста: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Выравнивание текста: центр
калибровка
Затем измените параметры размеров модуля.
- Ширина: 33%
- Выравнивание модуля: центр
расстояние
Затем добавьте пользовательский верхний и нижний отступы.
- Верхняя обивка: 0.8vw (рабочий стол), 2vw (планшет и телефон)
- Нижняя обивка: 0.8vw (рабочий стол), 2vw (планшет и телефон)
Граница
И заполните параметры модуля, добавив радиус границы.
- Все углы: 100px
Добавьте текстовый модуль 2 в столбец 3.
Добавьте символ в область содержимого
Перейдем к следующему модулю, это еще один текстовый модуль. Добавьте следующую стрелку в область содержимого: «▼».
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Open Sans
- Цвет текста: # 007fff
- Размер текста: 3vw
- Высота строки текста: 0em
- Выравнивание текста: центр
Z индекс
Мы также увеличиваем z-индекс модуля.
- Индекс Z: 11
Добавьте модуль контактной формы в столбец 3
Теперь вы можете добавить Контактная форма прямо внизу текстового модуля, содержащего стрелку. Этот модуль довольно прост в использовании, поэтому вам нужно будет настроить, какие поля вы хотите сделать видимыми.
3. Настройте элементы для создания контактной формы в один клик
Добавьте высоту столбца 3
После того, как все моды установлены, самое время создать эффект. Первый шаг к достижению желаемого результата - открыть настройки в столбце 3 и добавить настраиваемую высоту на расширенной вкладке.
Офис:
height: 3vw;
таблетка:
height: 5vw;
телефон:
height: 6vw;
Добавьте класс CSS к кнопке и стрелке
Затем мы добавим тот же класс CSS к первым двум текстовым модулям в столбце 3.
- Класс CSS: показать-обращайтесь
Добавить класс CSS в форму контакта
Нам также понадобится собственный класс CSS для модуля контактной формы.
- CSS-класс: обращайтесь-форма-модуль
Скрыть модуль «Контактная форма»
Затем добавьте дополнительную строку кода CSS к основному элементу модуля контактной формы. Это позволит нам скрыть модуль перед нажатием.
display: none;
Добавьте модуль кода в столбец 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;}
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Что помнить
В этой статье мы показали вам, как добавить раскрывающуюся контактную форму в настраиваемый заголовок. Это отличный способ вызвать действие на ранней стадии.