Divi: Как настроить модуль «Контактная форма»

Вы хотите создать Контактная форма на ваш сайт благодаря модулю Отправить запрос от Диви? Вот 3 идеи настройки…

. формы Контактная информация является неотъемлемой частью многих веб-сайтов. Их главная цель — быть интуитивно понятными и помочь посетителям легко войти в контакт.

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

Мы поделимся 3 уникальными дизайнами модуля Отправить запрос de Divi которые вы можете создать, используя только встроенные параметры Divi.

Давайте!

Обзор дизайна модуля контактной формы Divi

Настольные версии

Начнем с рассмотрения настольной версии различных конструкций модуля. Отправить запрос который мы будем разрабатывать в этом уроке.

добавьте контактную форму на свой веб-сайт, используя модуль контактной формы Divi

Мобильные версии

А вот как они выглядят на экранах меньшего размера:

Скачайте DIVI прямо сейчас!!!

Как настроить модуль контактной формы Divi: 3 примера

Читайте также: Divi: Как создать раздел участников команды в виде карусели

Создание контактной формы №1

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

Градиентный фон

Начнем с первого примера! Добавьте новый раздел, перейдите в настройки фона и добавьте градиентный фон.

Остановки градиента
- 34%: #4c00ff
- 34%: #ffd400
Тип: Круглый
Направление градиента: внизу слева

расстояние

Затем перейдите к параметру «Интервал» на вкладке «Дизайн» и измените настройки следующим образом.

Отступы (сверху и снизу): 200 пикселей

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

Структура колонны

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

Столбец 1: Цвет фона

Пока не добавляя никаких модулей, откройте настройки строки, затем настройки столбца 1 и добавьте цвет фона ниже.

Фон: rgba(255,255,255,0.55)

Столбец 1: Фоновое изображение

Также добавьте фоновое изображение в первый столбец.

Повтор фонового изображения: без повтора
Наложение фонового изображения: экран

Столбец 2: Фоновое изображение

И белый цвет фона для второго столбца.

Фон: #ffffff

калибровка

Затем измените параметры размера.

Выровнять высоту столбцов: ДА

расстояние

Также удалите все пользовательские отступы по умолчанию.

Отступы (сверху и снизу): 0 пикселей

Радиус границы столбца

Добавьте радиус границы к обоим столбцам на вкладке «Дополнительно».

border-radius: 10px;

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

Добавить контент

Пришло время начать добавлять различные модули! Добавьте текстовый модуль в первый столбец с содержимым по вашему выбору.

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

Затем перейдите на вкладку «Дизайн» модуля «Текст» и внесите некоторые изменения.

Текст:
- Шрифт: Удовлетворить
- Цвет текста: #333333
- Размер: 100 пикселей
- Высота строки: 1 см
- Выравнивание: по центру

расстояние

Также добавьте пользовательские значения заполнения.

Отступ (сверху): 600 пикселей
Отступ (снизу): 100px

Shadow box

Чтобы добавить глубины дизайну, используйте тонкую тень коробки.

Box Shadow Blur Strength: 80px
Сила распространения тени коробки: -16px
Цвет тени: rgba(0,0,0,0.3)

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

Загрузить изображение

Продолжите, добавив модуль изображения во второй столбец. Загрузите изображение по вашему выбору.

калибровка

Измените настройки размера для этого модуля.

Ширина: 25% (рабочий стол), 50% (планшет), 60% (телефон)
Выравнивание модуля: по центру

расстояние

Создайте перекрытие, используя отрицательное верхнее поле.

Маржа (сверху): -60%

граница

Измените границы изображения следующим образом:

Закругленные углы: 100 пикселей (все углы)

Добавьте модуль «Текст № 1» в столбец 2.

Добавить контент

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

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

Отредактируйте настройки текста для этого модуля.

Текст:
- Шрифт: Удовлетворить
- Цвет текста: #333333
- Размер текста: 44 пикселей
- Ориентация: Центр

Добавьте модуль «Текст № 2» в столбец 2.

Добавить контент

Затем добавьте еще один модуль Text.

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

Также измените настройки текста для этого модуля.

Текст:
- Шрифт: Ариал
- Цвет текста: #ffd400
- Цвет текста: 18px
- Расстояние между буквами: 2px
- Ориентация: Центр

расстояние

Затем добавьте нижнее поле.

Поле (снизу): 100 пикселей

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

Активируйте опцию «Сделать полной шириной» в поле «Имя и адрес электронной почты».

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

Сделать на всю ширину: да

Добавить поле темы

Для создания этого дизайна мы добавили еще одно поле для темы.

Защита от спама

Затем отключите опцию капчи.

Использовать базовую капчу: НЕТ

Настройки текста поля формы

Внесите некоторые изменения в настройки текста поля формы этого модуля контактной формы.

Поля:
- Цвет фона: rgba (255,255,255,0 XNUMX XNUMX)
- Шрифт: Ариал
- Вес шрифта: легкий
- Размер текста: 16 пикселей
- Расстояние между буквами: 2 пикселя

Настройки кнопок

Мы также меняем внешний вид кнопок.

Использовать нестандартный размер кнопки: ДА
Кнопка:
- Цвет текста: #ffd400
- Ширина границы: 0 пикселей
- Расстояние между буквами: 2px
- Шрифт: Ариал
- Стиль шрифта: U
- цвет подчеркивания: #4c00ff

расстояние

Затем добавьте некоторые пользовательские значения заполнения.

Отступ (снизу): 100px
Отступы (слева и справа): 50 пикселей

Граница

И добавьте тонкую нижнюю границу для каждого из полей.

Входная ширина нижней границы: 2px
Вводит цвет нижней границы: #efefef

Расстояние между отдельными полями

Наконец, добавьте нижнее поле к каждому отдельному полю, кроме поля сообщения.

Поле (снизу): 20 пикселей