Хотите создать контактную форму в Divi, которая появляется после нажатия кнопки?
В этом уроке по Divi мы покажем вам, как создать контактную форму, которая появляется после нажатия кнопки, используя только Divi, код jQuery и код CSS.
Также прочитайте наше руководство по: Divi: Как создать липкий футер с эффектом «Раскрыть»
Это отличный способ удержать внимание посетителей вашего сайта на действии, которое они совершили, нажав кнопку. При этом их не перенаправляет на другую страницу.
обследование
Ниже вы можете быстро ознакомиться с тем, что мы собираемся создать, а затем сразу же приступить к уроку!
Предварительный просмотр на ПК
Предварительный просмотр на телефоне и планшете
Создайте новую страницу с предопределенным макетом
Начнем с использования предопределенного макета из библиотеки Divi. Для этого примера мы будем использовать контактную страницу Пакет макетов косметических продуктов .
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Выберите макет».
Найдите и выберите Домашнюю страницу макета 'Компания Дизайна Интерьера».
Выбирать 'Выберите макет', чтобы добавить макет на вашу страницу.
Теперь мы готовы продолжить наш урок.
Создайте раздел с модулем Button
Первым делом нам нужно добавить новый раздел, где мы разместим кнопку, которая позволит отобразить форму обратной связи.
Просто добавьте стандартный раздел
Затем выберите строку с одним столбцом.
Как только вы это сделаете, добавьте к нему модуль Button.
Вы можете настроить кнопку по своему усмотрению, но обязательно убедитесь, что URL-адрес кнопки начинается с символа '#', за которым следует что-то ещё. Нельзя просто оставить поле пустым или использовать только символ '#'. Добавление '#' и текста не позволит странице загрузиться после нажатия кнопки. Если оставить поле пустым, страница обновится при нажатии. А использование только '#' переведёт вас в начало страницы.
Следующий важный шаг — присвоение кнопке CSS-класса. Мы будем использовать этот CSS-класс позже в этой статье в коде jQuery, чтобы гарантировать появление контактной формы после нажатия. Класс, который нам нужно присвоить кнопке, — это просто «button».
- Класс CSS: кнопка
Создайте контактную форму версии для ПК
Следующий шаг — создание контактной формы для настольных компьютеров, которая появится после нажатия кнопки, созданной в предыдущем разделе этой статьи. Далее в статье мы также покажем, как создать мобильную версию.
Добавить новый стандартный раздел
Для начала добавьте на страницу, над которой работаете, новый стандартный раздел. В настройках раздела перейдите на вкладку «Дополнительно» и добавьте «popup» в поле «Класс CSS».
Прокрутите вниз ту же вкладку и поместите следующие строки кода CSS в поле «До» подкатегории «Пользовательский CSS»:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Добавив это, мы гарантируем, что раздел заполнит всю вкладку. Вы можете настроить цвет фона в коде CSS, чтобы создать желаемое фоновое наложение. В данном случае мы используем черный цвет с некоторой прозрачностью. На той же вкладке добавьте следующую строку кода CSS к основному элементу:
display: none;
Последнее, что нам нужно сделать на вкладке «Дополнительно», — это отключить раздел «Видимость» для телефонов и планшетов.
Добавить строку в два столбца
Продолжите, добавив строку в два столбца, и перейдите на вкладку Стиль.
- Использовать пользовательскую ширину желоба: ДА
- Максимальная ширина: 1291 пикселей
Введите параметры каждой из колонок.
Отрегулируйте внутренние поля (верхнее, левое и правое) следующим образом:
- Внутреннее поле (сверху, слева, справа): 30 пикселей
Наконец, перейдите на вкладку «Дополнительно». В основной элемент добавьте следующие строки CSS-кода:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Добавьте первый текстовый модуль
После внесения всех изменений в раздел и строку, настало время добавить различные модули, которые вы хотите отобразить.
Первым делом добавим заголовок. Для начала добавим новый текстовый модуль в первый столбец строки и напишем текст на вкладке. Содержание и переключиться на вкладку Стиль.
На вкладке «Стиль» для подкатегории «Текст» мы использовали следующие настройки:
- Шрифт заголовка: лобстер
- Мягкий светлый заголовок: жирный шрифт
- Выравнивание текста: Жирный
- Цвет текста заголовка: #002282
- Размер текста заголовка: 37px
- Высота строки заголовка: 1,7 em
Добавьте второй текстовый модуль
Далее добавьте новый модуль «Текст» и введите текст, который хотите отобразить, на вкладке «Содержимое». Перейдите на вкладку «Стиль» и примените следующие настройки к подкатегории «Текст»:
- Выравнивание текста: по центру
- Шрифт текста: Arial
- Текст Размер текста: 13px
- Цвет текста Текст: #002282
- Высота текстовой строки: 1,7 см
Добавьте модуль «Подписывайтесь на нас в социальных сетях».
Далее мы добавим в первый столбец модуль «Подписывайтесь на нас в социальных сетях». В данном случае мы выбрали три значка социальных сетей: Facebook, Twitter и Instagram.
Последнее, что нам нужно сделать, это добавить левый отступ к этому модулю на вкладке «Расширенные настройки». Добавьте следующую строку CSS-кода к основному элементу:
padding-left: 40%;
Добавьте модуль контактной формы
Затем мы можем перейти ко второму столбцу в строке. В этой колонке первое, что мы собираемся разместить, — это модуль контактной формы.
В этом примере мы выбрали только два поля: имя и адрес электронной почты.
После добавления модуля «Контактная форма» перейдите на вкладку «Стиль» этого модуля и внесите следующие изменения в подкатегорию «Поля»:
- Цветовые поля текста: #002282
- Поля размера текста: #002282
- Высота линии поля: 1,7 см
На той же вкладке внесите следующие изменения в подкатегорию Button:
- Использовать пользовательские стили для кнопки: Да
- Кнопка размера текста: 20
- Цвет текста кнопки: #FFFFFF
- Фоновая кнопка: #0086c4
См. Также: Как создать скользящее и push-меню в DIVI
- Ширина границы кнопки: 2
- Кнопка «Радиус границы»: 3
Перейдите на вкладку «Дополнительно» и добавьте отступ в 5%.
Добавить модуль сводки
Во второй колонке нам также потребуется добавить модуль «Сводка». Этот модуль нужен нам только для значка выхода в правом верхнем углу всплывающего окна. Выберите следующий значок из списка значков и оставьте все остальные поля пустыми.
Далее перейдите на вкладку «Дополнительно» и введите «close» в качестве CSS-класса.
В той же вкладке добавьте следующие строки кода в основной элемент пользовательской подкатегории CSS:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Применение градиентной заливки к линии
Наконец, добавим к линии красивый градиентный фон. Откройте настройки и примените следующие изменения к параметру градиентного фона:
- Первый цвет градиента: #FFFFFF
- Второй цвет градиента: #0c71c3
- Тип градиента: Линейный
- Направление градиента: 124 градусов
- Исходное положение: 50%
- Итоговая позиция: 50%
Создайте контактную форму для планшета и телефона
Теперь, когда мы создали версию для ПК, версия для планшета и телефона будет работать намного быстрее. Большинство модулей, которые мы использовали для версии для ПК, такие же, как и для мобильной версии.
Дублировать предыдущий раздел
Вместо того чтобы отключать эту функцию для телефонов и планшетов, как мы это сделали для версии для ПК, мы отключим ее для версии для ПК в подкатегории «Видимость» в настройках модуля:
Измените код CSS модуля «Сводка».
Вместо кода для настольной версии используйте следующий:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Применение градиентной заливки к линии
Для мобильной версии мы используем другие настройки градиентного фона линии:
- Первый цвет градиента: #FFFFFF
- Второй цвет градиента: #0c71c3
- Тип градиента: Линейный
- Направление градиента: 180 градусов
- Исходное положение: 40%
- Итоговая позиция: 40%
Добавьте код jQuery
Последнее, что нам нужно сделать для этого урока, — это добавить код jQuery. Добавьте модуль Code и вставьте следующий код jQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Результат
Если вы будете следовать сообщению шаг за шагом, вы сможете получить следующий результат на компьютере:
И следующий результат на планшетах и телефонах:
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как создать контактную форму с переходом по ссылке. Использование этого метода для связи с посетителями является тонким, но эффективным.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...