Нужно добавить Контактная форма в глобальный заголовок?
Когда вы создаете собственный заголовок для своего Веб-сайт Используя конструктор тем Divi, вы обнаружите, что ищете идеальный способ добавить CTA (призыв к действию). Один из способов сделать это — добавить Контактная форма прокрутка.
Это поможет вам сохранить общий вид вашего заголовка в чистоте, а также даст возможность попасть в обращайтесь без прокрутки.
В этом уроке мы покажем вам, как создать Контактная форма прокручивается с помощью кода Divi, JQuery и CSS.
Давайте начнем!
обследование
Прежде чем погрузиться в этот урок, давайте взглянем на предварительный просмотр результата, который мы собираемся получить.
Создать глобальный заголовок
Перейти к конструктору тем
Перейдите в Theme Builder из меню Divi на панели инструментов WordPress и нажмите «Добавить глобальный заголовок».
Выберите «Создать глобальный заголовок».
Создайте стиль заголовка
Настройки раздела
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел. Откройте этот раздел и измените цвет фона.
- Фон: #FFFFFF
расстояние
Затем удалите верхнее и нижнее внутренние поля по умолчанию из раздела.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Shadow box
Также примените легкую коробчатую тень.
- Box Shadow Blue Сила: 50px
- Цвет шрифта субтитров: rgba(0,0,0,0.15)
Добавить новую строку
Структура колонны
Добавьте новую строку в раздел, используя следующую структуру столбцов:
калибровка
Не добавляя никаких модулей, откройте настройки строки и измените параметры размера следующим образом:
- Использовать пользовательскую ширину желоба: Да
- Расстояние между столбцами: 1
- Гармонизация высоты столбцов: Да
- Максимальная ширина: 95%
- Максимальная ширина: 100%
расстояние
Затем добавьте пользовательский верхний и нижний отступы.
- Пиковое внутреннее поле: 1vw
- Нижнее внутреннее поле: 1vw
главный элемент
Выровняйте все содержимое столбца, добавив одну строку кода CSS к основному элементу строки.
align-items: center;
Z нижний индекс столбца 2
Мы также убедились, что второй столбец имеет более высокое значение z-index для адаптивного дизайна.
- Z-индекс: 12
Добавить модуль изображения в столбец 1
Скачать логотип
Пришло время начать добавлять модули! Начиная с модуля изображения в столбце 1. Загрузите логотип.
Alignement
Затем измените выравнивание модуля.
- Выравнивание изображения: по центру
калибровка
Также измените ширину.
- Максимальная ширина: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
Добавить модуль меню в столбец 2
Выберите меню
Во второй столбец мы добавим модуль меню.
Предоставление
Перейдите на вкладку «Стиль модуля» и измените стиль макета.
- Стили: по центру
Настройки текста меню
Затем измените настройки текста в меню модуля.
- Меню шрифтов: открыть нет
- Меню приглушенного света: полужирный шрифт
- Цвет текста меню: #000000
- Размер текста меню: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
- Расстояние между буквами меню: 1px
Настройки текста выпадающего меню
Затем измените цвет линии в раскрывающемся меню.
- Цвет строки выпадающего меню: #007dff
иконки
Изменить цвет значка меню гамбургера.
- Цвет значка меню гамбургера: #007dff
Добавить текстовый модуль в столбец 3
Добавить сообщение
Переходим к третьему модулю! Добавьте текстовый модуль с сообщением по вашему выбору.
Фоновый цвет
Добавьте цвет фона.
- Цвет фона: #007dff
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Open Sans
- Мягкий светлый текст: полужирный
- Цвет текста Текст: #ffffff
- Текст Размер текста: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
- Выравнивание текста: по центру
калибровка
Затем измените параметры размеров модуля.
- Максимальная ширина: 33%
- Выравнивание модуля: по центру
расстояние
Затем добавьте пользовательские верхние и нижние отступы.
- Верхнее внутреннее поле: 0,8 vw (настольный компьютер), 2 vw (планшет и телефон)
- Низкая внутренняя маржа: 0,8 vw (настольный компьютер), 2 vw (планшет и телефон)
граница
И заполните параметры модуля, добавив радиус границы.
- Прямоугольник со скругленными углами: 100 пикселей
Добавьте еще один текстовый модуль в столбец 3.
Добавьте символ в область содержимого
Давайте перейдем к следующему модулю, еще одному текстовому модулю. Добавьте следующий символ стрелки в области содержимого: «▼».
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Open Sans
- Цвет текста: #007fff
- Текст Размер текста: 3vw
- Высота строки текста: 0em
- Выравнивание текста: по центру
Z-индекс
Давайте также увеличим z-индекс модуля.
- Z-индекс: 11
Добавьте модуль контактной формы в столбец 3
Добавьте поля полной ширины по вашему выбору
Следующий и последний модуль, который нам нужен в третьем столбце, — это модуль контактной формы. Добавьте любые поля полной ширины, которые вам нужны.
Добавить заголовок
Также используйте заголовок.
Фоновый цвет
Далее давайте изменим цвет фона.
- Цвет фона: #e7f2ff
Настройки поля
Перейдем на вкладку Style модуля и изменим настройки поля.
- Поля цвета фона: #ffffff
- Цвет текста поля: #dddddd
- Цвет текста в фокусе: #007dff
- Поля заполнения вершин: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Нижние поля заполнения: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Поля шрифта: Открыть Нет
- Поля Размер текста: 0,7 vw (рабочий стол), 1,8 vw (планшет), 3 vw (телефон)
Настройки текста заголовка
Отредактируйте настройки текста заголовка.
- Вставьте третий заголовок: H3
- Мягкий свет Заголовок: Жирный текст
- Выравнивание текста: по центру
- Цвет текста заголовка: #007dff
- Размер текста заголовка: 1 vw (рабочий стол), 2,5 vw (планшет), 3,5 vw (телефон).
- Высота строки заголовка: 1,6 см
Настройки текста капчи
С настройками текста капчи.
- Капча шрифта: Open Sans
- Цвет текста капчи: #007dff
Настройки кнопок
Продолжите, настроив кнопку.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 0,8 vw (настольный компьютер), 2 vw (планшет), 3 vw (телефон)
- Цвет текста кнопки: #ffffff
- Кнопка фона: #007dff
- Кнопка ширины границы: 0 пикселей
- Радиус границы кнопки: 100 пикселей
- Кнопка шрифта: открыть нет
- Кнопка Soft Light: жирный текст
- Маржа кнопки: 1vw
- Верхняя кнопка заполнения: 1vw (рабочий стол), 2vw (планшет и телефон)
- Нижняя кнопка заполнения: 1vw (рабочий стол), 2vw (планшет и телефон)
- Кнопка левой панели: 2vw (рабочий стол), 7vw (планшет и телефон)
- Правая кнопка пэда: 2vw (рабочий стол), 7vw (планшет и телефон)
расстояние
Используйте настраиваемые значения отступов на разных размерах экрана.
- Пиковый внутренний запас: 4vw (настольный компьютер), 6vw (планшет и телефон)
- Внутреннее поле снизу: 4vw (настольный компьютер), 6vw (планшет и телефон)
- Левое внутреннее поле: 2vw (рабочий стол), 6vw (планшет и телефон)
- Правое внутреннее поле: 2vw (настольный компьютер), 6vw (планшет и телефон)
граница
Затем измените настройки границы.
- Входной прямоугольник со скругленными углами: 10px
Основной элемент, заголовок контакта и Captcha CSS
Завершите настройку модуля, добавив небольшие изменения CSS на вкладке «Дополнительно».
Основной элемент:
| 01 | border-radius: 20px; |
Название обращайтесь :
| 01 | margin-bottom: 1vw; |
Капча:
| 01 | margin-top: 1.5vw; |
Настройте элементы для создания контактной формы в один клик
Добавьте высоту столбца 3
Когда у вас есть все модули, пришло время создать эффект. Первый шаг к получению желаемого результата — открыть настройки из 3 столбцов и добавить пользовательскую высоту отклика на вкладке «Дополнительно».
Рабочий стол :
| 01 | height: 3vw; |
таблетка:
| 01 | height: 5vw; |
Вызов:
| 01 | height: 6vw; |
Добавьте класс CSS к кнопке и стрелке
Затем мы добавим тот же класс CSS к первым двум текстовым модулям в столбце 3.
- Класс CSS: показать-обращайтесь
Добавить класс CSS в форму контакта
Нам также понадобится пользовательский класс CSS для модуля контактной формы.
- Класс CSS: модуль контактной формы
Скрыть модуль контактной формы
Продолжите, добавив дополнительную строку кода CSS в основной элемент модуля контактной формы. Это позволит нам скрыть модуль перед нажатием.
| 01 | 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;
}
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
Заключение
В этой статье мы показали вам, как добавить выпадающую контактную форму в свой собственный заголовок.
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
