Вы хотите создать Контактная форма в Divi, который появляется после нажатия на кнопку?
В этом уроке Divi мы покажем вам, как создать Контактная форма который появляется после нажатия кнопки, используя только Divi, код jQuery и код CSS.
Также прочитайте наше руководство по: Divi: Как создать липкий футер с эффектом «Раскрыть»
Это отличный способ сохранить посетителей ваш сайт сосредоточены на действии, которое они совершили одним нажатием кнопки. Это не переводит их на другую страницу.
обследование
Ниже вы можете быстро взглянуть на то, что мы будем создавать, а затем перейти к руководству!
Предварительный просмотр на ПК
Предварительный просмотр на телефоне и планшете
Создайте новую страницу с предопределенным макетом
Начнем с использования предопределенного макета из библиотеки Divi. Для этого примера мы будем использовать контактную страницу Пакет макетов косметических продуктов .
Добавьте новую страницу в свой Веб-сайт и дайте ему название, затем выберите вариант «Использовать Divi Builder».
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Выберите макет».
Найдите и выберите Домашнюю страницу макета 'Компания Дизайна Интерьера».
Выбирать 'Выберите макет', чтобы добавить макет на вашу страницу.
Теперь мы готовы продолжить наш урок.
Создайте раздел с модулем Button
Первое, что нам нужно сделать, это добавить новый раздел, в котором мы разместим кнопку, которая позволит Контактная форма показывать.
Просто добавьте стандартный раздел
Затем выберите строку с одним столбцом.
Как только вы это сделаете, добавьте к нему модуль Button.
Вы можете настроить кнопку по своему усмотрению, но вам нужно убедиться, что URL-адрес кнопки начинается с «#», за которым следует что-то еще. Вы не можете просто оставить это поле пустым или просто использовать символ «#». При добавлении «#» и текста страница не будет двигаться после нажатия кнопки. Если оставить поле пустым, страница будет обновляться при нажатии. И если вы используете только «#», вы будете отправлены в начало страницы.
Следующее важное, что нам нужно сделать, это назначить класс CSS для кнопки. Мы будем использовать этот класс CSS позже в этой статье в коде jQuery, чтобы убедиться, что контактная форма появляется после нажатия. Класс, который нам нужно присвоить кнопке, — это просто «кнопка».
- Класс CSS: кнопка
Создайте контактную форму версии для ПК
Следующее, что нам нужно сделать, это создать контактную форму на рабочем столе, которая появится, когда кто-то нажмет кнопку, которую мы создали в предыдущей части этой статьи. Позже в этой статье мы также покажем вам, как создать мобильную версию.
Добавить новый стандартный раздел
Начните с добавления нового стандартного раздела на страницу, над которой вы работаете. В настройках раздела перейдите на вкладку «Дополнительно» и добавьте «всплывающее окно» в поле «Класс 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 см
Добавьте модуль «Подпишитесь на нас в социальных сетях»
Далее мы также добавим модуль «Подпишитесь на нас в социальных сетях» в первый столбец. В этом случае мы выбрали три значка социальных сетей; Фейсбук, Твиттер и Инстаграм.
Последнее, что нам нужно сделать, это добавить отступ (слева) к этому модулю на вкладке «Дополнительно». Добавьте следующую строку кода CSS к основному элементу:
padding-left: 40%;
Добавьте модуль контактной формы
Затем мы можем перейти ко второму столбцу в строке. В этой колонке первое, что мы собираемся разместить, — это модуль контактной формы.
Для этого примера мы выбрали только два поля; имя и электронная почта.
После добавления модуля «Контактная форма» перейдите на вкладку «Стиль» модуля «Контактная форма» и внесите следующие изменения в подкатегорию «Поля»:
- Цветовые поля текста: #002282
- Поля размера текста: #002282
- Высота линии поля: 1,7 см
На той же вкладке внесите следующие изменения в подкатегорию Button:
- Использовать пользовательские стили для кнопки: Да
- Кнопка размера текста: 20
- Цвет текста кнопки: #FFFFFF
- Фоновая кнопка: #0086c4
См. Также: Как создать скользящее и push-меню в DIVI
- Ширина границы кнопки: 2
- Кнопка «Радиус границы»: 3
Перейдите на вкладку «Дополнительно» и добавьте маржу 5%.
Добавить модуль сводки
Еще одна вещь, которую нам нужно добавить во второй столбец, — это модуль «Сводка». Единственное, для чего нам нужен этот модуль, — это значок выхода в правом верхнем углу всплывающего окна. Выберите следующий значок из списка значков и оставьте все остальное пустым.
Затем перейдите на вкладку «Дополнительно» и введите «закрыть» в качестве класса 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. Добавьте модуль кода и вставьте следующий код 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
