Необходимо объединить встроенные поля и поля полной ширины модуля. Отправить запрос de Divi ?
Le Контактная форма — это важный элемент, который следует включить на ваш веб-сайт, если вы хотите получать электронные письма и превращать посетителей в клиентов.
Модуль Отправить запрос de Divi можно легко настроить для создания формы привлекательные и увлекательные карточки контактов для всех типов веб-сайтов. Этот модуль поставляется с двумя параметрами отображения, которые можно применить к каждому полю формы: ан Ligne ou полная ширина.
В этом уроке мы представим четыре уникальных варианта макета для вашего Контактная форма Divi с использованием встроенных и полноразмерных полей.
Давайте начнем!
обследование
Вот предварительный просмотр того, что мы будем разрабатывать.
Первый макет
Второй макет
Третий макет
Четвертый макет
Что нужно для начала
Прежде чем мы начнем, установить и активировать тему Divi и убедитесь, что на вашем сайте установлена последняя версия Divi.
Теперь вы готовы начать!
4 примера макетов для модуля контактной формы Divi с использованием встроенных и полноразмерных полей
Выберите предустановленный макет
Каждый из 4 шаблонов изменен из макета страницы контактов по ремонту обуви Пакет макетов для ремонта обуви, который вы можете найти в библиотеке Divi.
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр Используйте Диви Строитель.
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите Просмотр макетов.
Найдите и выберите макет страницы контактов по ремонту обуви.
выбрать Использовать этот макет чтобы добавить макет на свою страницу.
Теперь мы готовы разработать наши примеры.
Первый макет
Сначала переместите строку, содержащую модуль Отправить запрос в раздел выше, чуть ниже строки с модулями Blurb. Затем вы можете удалить оставшийся пустой раздел.
Откройте настройки линии и добавьте отступы слева и справа,
- Набивка (слева и справа): 15%
Выберите адаптивные параметры и установите отступы для мобильных устройств.
- Набивка (слева и справа): 5%
Изменен макет контактной формы со встроенными и полноразмерными полями.
Для этого макета мы создадим два отдельных поля для имени и фамилии.
Откройте настройки модуля «Контактная форма» и измените поле «Идентификатор» и «Название» для поля «Фамилия» на «Имя».
Добавьте новое поле под полем «Имя». Установите в поле ID и Title значение Name.
В настройках поля имени откройте настройки макета и установите для параметра «Полная ширина» значение «Нет».
- Сделать на всю ширину: НЕТ
Затем в настройках Контактная форма, измените порядок темы и телефона, чтобы телефон был указан перед темой.
Откройте настройки макета поля «Тема» и установите для поля полную ширину.
- Сделать на всю ширину: ДА
Настройка дизайна контактной формы
Теперь давайте изменим несколько настроек, чтобы завершить дизайн. Перейдите на вкладку «Дизайн» в настройках модуля «Контактная форма».
Во-первых, измените цвет фона кнопки.
- Фон кнопки: #DBC2B3
Добавьте верхнее поле к кнопке.
- Поле кнопки (сверху): 10 пикселей
Наконец, перейдите к настройкам границ и добавьте к полям закругленные углы.
- Входные данные Закругленные углы: 30px
Смотрите также: Divi: Как добавить адаптивный логотип в модуль «Полноширинное меню»
Окончательный результат примера 1
Вот окончательный результат на десктопе и мобильном телефоне.
Второй пример
Для нашего второго примера мы переместим модули Blurb в левую часть страницы и разместим контактную форму в правой части страницы. Переместите модули Blurb в столбец.
Измените расположение строк.
Откройте настройки дизайна линии и выключите Использовать нестандартную ширину желоба.
- Использовать пользовательскую ширину желоба: НЕТ
Добавьте код в пользовательский CSS основного элемента для вертикального выравнивания модулей Blurb и Contact Form.
align-items:center;
Теперь нам нужно убрать тонкую границу между столбцами. Откройте настройки строки, затем откройте настройки столбца. 1. На вкладке «Дизайн» перейдите к настройкам границы и удалите границу.
- Ширина правой границы: 0 пикселя
Затем откройте настройки столбца 2 и повторите шаги, чтобы удалить границу.
- Ширина правой границы: 0 пикселя
Установите текст «Свяжитесь с нами» по центру.
Переместите контактную форму в правую колонку. Удалите оставшийся пустой раздел.
Изменен макет контактной формы со встроенными и полноразмерными полями.
Этот макет также будет иметь два отдельных поля для имени и фамилии. Откройте настройки модуля «Контактная форма» и измените поле «Идентификатор» и «Название» для поля «Фамилия» на «Имя».
Добавьте новое поле под полем «Имя». Установите в поле ID и Title значение Name.
В настройках поля имени откройте настройки макета и установите для параметра «Полная ширина» значение «Нет».
- Сделать на всю ширину: НЕТ
Измените порядок полей телефона и темы, чтобы телефон стоял перед темой.
Откройте настройки поля для электронной почты, телефона и темы и установите макет на полную ширину.
- Сделать на всю ширину: ДА
Настройка дизайна контактной формы
Откройте настройки строки, затем откройте настройки столбца. 2. Установите цвет фона.
- Фон: #DBC2B3
В настройках столбца 2 перейдите на вкладку «Дизайн» и добавьте отступы.
- Отступы (сверху, снизу, слева и справа: 50 пикселей)
Выберите значок мобильного телефона, чтобы изменить настройки адаптивности. Установите отступы для мобильных устройств.
- Отступы (сверху, снизу, слева и справа): 30 пикселей
Затем добавьте тень к столбцу.
Наконец, откройте настройки модуля «Контактная форма» и измените цвет текста поля.
- Цвет текста полей: #000000
Окончательный результат примера 2
Вот окончательный результат второго макета.
Третий пример
Для третьего макета у нас будет контактная форма слева и модули Blurb справа. Начнем с изменения структуры столбца строки, содержащей модули Blurb.
Переместите адресный модуль в правый столбец.
Затем переместите текстовый модуль «Связаться с нами» в левый столбец, затем удалите оставшуюся пустую строку.
Переместите модуль контактной формы в левый столбец под текстовым модулем «Свяжитесь с нами». Удалите оставшийся пустой раздел.
Откройте настройки линии на вкладке «Дизайн» и выключите Использовать нестандартную ширину желоба
- Использовать пользовательскую ширину желоба: НЕТ
Добавьте код в пользовательский CSS основного элемента для вертикального выравнивания модулей Blurb и Contact Form.
align-items:center;
Откройте настройки строки, затем откройте настройки столбца. 1. На вкладке «Дизайн» перейдите к настройкам границы и удалите границу. Повторите шаги, чтобы удалить границу из столбца 2.
- Ширина правой границы: 0 пикселя
Изменение макета контактной формы
Мы оставим ширину полей без изменений для третьего дизайна, однако откройте настройки контактной формы и измените порядок номера телефона и поля темы, чтобы номер телефона был первым.
Окончательный результат примера 3
Вот окончательный результат третьего макета.
Читайте также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме
Четвертый пример
Для четвертого и последнего макета модуль контактной формы будет слева, а модули рекламных объявлений — справа. Опять же, мы начнем с изменения структуры столбца строки, содержащей модули Blurb.
Переместите адресный модуль в правый столбец.
Затем переместите модуль контактной формы в левый столбец. Удалите оставшийся пустой раздел.
Откройте настройки линии, во вкладке Дизайн и отключите Использовать нестандартную ширину желоба.
- Использовать пользовательскую ширину желоба: НЕТ
Добавьте код в пользовательский CSS основного элемента для вертикального выравнивания модулей Blurb и Contact Form.
align-items:center;
Откройте настройки строки, затем откройте настройки столбца. 1. На вкладке «Дизайн» перейдите к настройкам границы и удалите границу.
- Ширина правой границы: 0 пикселя
Затем откройте настройки столбца 2 и повторите шаги, чтобы удалить границу.
- Ширина правой границы: 0 пикселя
Откройте настройки модуля «Текст» для текста «Свяжитесь с нами» и отцентрируйте текст.
- Выравнивание текста: по центру
Изменен макет контактной формы со встроенными и полноразмерными полями.
Для этого дизайна все наши поля будут на всю ширину. Откройте настройки модуля «Контактная форма», затем откройте настройки для каждого поля. На вкладке Дизайн выберите Планировка и определить Сделать на всю ширину из ДА.
После того, как вы создали каждое поле полной ширины, форма должна выглядеть следующим образом.
Теперь измените поле «Идентификатор» и «Название» для поля «Фамилия» на «Имя».
Добавьте новое поле под полем «Имя». Установите в поле ID и Title значение Name.
Измените порядок полей телефона и темы, чтобы телефон стоял перед темой.
Настройка дизайна модуля контактной формы
В настройках модуля на вкладке Дизайн установите цвет текста поля черным.
- Цвет текста полей: #000000
Откройте настройки раздела и добавьте цвет фона.
- Фон: #DBC2B3
Наконец, добавьте фоновую маску.
- Фоновая маска: Арка
- Трансформация маски: горизонтальная
Чтобы фоновая маска лучше работала на мобильных устройствах, давайте воспользуемся адаптивными настройками.
- Преобразование маски (телефон): горизонтальное и вращение
Конечный результат
Вот окончательный результат четвертого макета.
Конечные результаты
Давайте еще раз посмотрим на все наши примеры.
Первый пример
Второй пример
Третий пример
Четвертый пример
Скачайте DIVI прямо сейчас!!!
Заключение
Привлекательная контактная форма может увеличить ваши конверсии и позволить вашим посетителям напрямую связаться с вами.
Как мы продемонстрировали в этой статье, вы можете использовать параметры встроенного поля и поля полной ширины для создания различных видов и макетов для вашей формы, а встроенные параметры дизайна Divi позволяют создавать уникальные и привлекательные дизайны, чтобы форма выделялась.
Надеюсь, эта техника добавит еще один полезный дизайнерский навык для будущих проектов.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
