Создание нескольких целевых контактных форм при наведении курсора в одном дизайне с Divi

То, как вы отображаете контактные формы на своем веб-сайте, определенно может помочь повысить коэффициент конверсии. Помимо создания красивых и удобных контактных форм, вы также можете подойти к этому более целенаправленно. В этом посте мы покажем вам, как создать один дизайн с несколькими контактными формами, которые появляются в зависимости от того, какой сервис интересует ваших посетителей. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите макет целевой контактной формы БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету целевых контактных форм, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

После того, как вы загрузили макет на свою страницу, вам все равно придется добавить код CSS на страницу, над которой вы работаете. Вы можете найти код CSS в конце этого руководства.

Подпишитесь на наш канал Youtube

Начнем воссоздавать!

Добавить раздел # 1

Откройте новую или существующую страницу и добавьте новый обычный раздел.

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

Структура столбца

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

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

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

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

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

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H2:

• Толщина шрифта заголовка 2: Ультра полужирный
• Стиль шрифта заголовка 2: прописные
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 6vw
• Интервал между буквами заголовка 2: -0,4vw
• Высота строки заголовка 2: 0,8 em

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw

Добавить раздел # 2

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

Добавьте еще один раздел прямо под предыдущим и примените следующий градиентный фон (или любой градиентный фон по вашему выбору):

• Цвет 1: # 30fff1
• Цвет 2: # 4635ff
• Направление градиента: 110 градусов
• Конечная позиция: 85%

Верхний разделитель

Перейдите на вкладку дизайна и добавьте верхний разделитель.

• Стиль разделителя: найти в списке
• Расположение разделителей: содержание под разделом

Нижний разделитель

Также добавьте нижний разделитель.

• Стиль разделителя: найти в списке
• Расположение разделителей: содержание под разделом

Размеры

Затем измените высоту в настройках размеров.

• Высота: 200 пикселей

Интервал

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

• Нижнее поле: 30vw (рабочий стол), 45vw (планшет), 200vw (телефон)
• Верхняя обивка: 0vw
• Нижняя обивка: 0vw

CSS-класс

Позже мы собираемся добавить код CSS, чтобы эффект работал. Готовясь к этому, мы добавим в раздел класс CSS.

• Класс CSS: раздел контактов

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

Структура столбца

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

Переполнение

Откройте настройки строки и скройте переливы.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Переходы

Также удалите продолжительность перехода.

• Продолжительность перехода: 0 мс

Добавить модуль Blurb

Добавить заголовок в поле содержимого

Пора начинать добавлять модули! Добавьте модуль Blurb и введите название по вашему выбору, представляющее одну из ваших услуг.

Выбрать значок

Далее выберите значок.

Цвет фона по умолчанию

Продолжите, добавив цвет фона по умолчанию.

• Цвет фона: #ffffff

Цвет фона при наведении

Измените цвет фона при наведении курсора.

• Цвет фона: # 000000

Настройки значков по умолчанию

Перейдите на вкладку дизайна и соответствующим образом измените настройки значка:

• Цвет значка: # 000000
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 2.5vw (рабочий стол), 5vw (планшет), 7vw (телефон)

Настройки значка наведения

Измените цвет значка при наведении.

• Цвет значка: #ffffff

Настройки текста заголовка по умолчанию

Затем откройте настройки текста заголовка и примените следующие изменения:

• Плотность шрифта заголовка: Ультра полужирный
• Стиль шрифта заголовка: прописные
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 0.9vw (рабочий стол), 1.8vw (планшет), 3vw (телефон)

Настройки текста заголовка при наведении

Измените цвет текста заголовка при наведении курсора.

• Цвет текста заголовка: #ffffff

Размеры

Затем измените ширину для разных размеров экрана.

• Ширина: 10vw (рабочий стол), 17vw (планшет), 30vw (телефон)
• Выравнивание модуля: по центру

Интервал

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

• Верхняя маржа: 4vw
• Нижняя маржа: 4vw
• Верхняя прокладка: 2vw (рабочий стол), 3vw (планшет), 6vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 3vw (планшет), 6vw (телефон)

Граница

Мы также превращаем модуль в круг, добавляя «50vw» к каждому углу в настройках границы.

Коробка Тень

Также добавьте тень от коробки.

Масштаб преобразования по умолчанию

Перейдите к настройкам преобразования и убедитесь, что значения масштаба преобразования по умолчанию остаются «100%».

Масштаб преобразования при наведении

Измените эти значения при наведении курсора.

• Внизу: 120%
• Правильно: 120%

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

Сделать поля имени и электронной почты полной шириной

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

• Сделать полную ширину: Да

Удалить поле сообщения и вставить три поля ввода для вопросов, связанных с услугами

Затем добавьте три вопроса, которые относятся к этой конкретной услуге.

Отключить Captcha

Также отключите опцию captcha.

• Показать Captcha: Нет

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

Перейдите на вкладку дизайна и соответствующим образом измените настройки полей:

• Верхнее заполнение полей: 0,6 млрд (рабочий стол), 0,9 млн (планшет), 1,5 млн (телефон)
• Заполнение нижних полей: 0,6vw (рабочий стол), 0,9vw (планшет), 1,5vw (телефон)
• Размер текста полей: 0.8vw (рабочий стол), 1.6vw (планшет), 2.3vw (телефон)

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

Затем измените внешний вид кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Толщина шрифта кнопок: Ультра полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхняя обивка: 2vw
• Нижняя обивка: 2vw
• Левый отступ: 2vw
• Правое заполнение: 2vw

Параметры границы

И последнее, но не менее важное: перейдите к настройкам границы и добавьте «10 пикселей» к каждому из углов.

Клонировать строку три раза

После того, как вы закончите первый ряд, вы можете клонировать его три раза.

Измените содержимое и значок рекламного объявления для каждой повторяющейся строки

Убедитесь, что вы изменили заголовок аннотации и значок для каждого дубликата.

Измените вопросы, связанные с услугами, для каждой повторяющейся строки

Также измените конкретные вопросы контактной формы.

Дополнительные настройки строки

Высота по умолчанию

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

• Высота: 18vw (рабочий стол), 27vw (планшет), 38vw (телефон)

Высота наведения

Верните высоту автоматически при зависании.

• Высота: авто

Распространить настройки размера строки на все строки в разделе

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

Размещение строк рядом друг с другом на рабочем столе и планшете

Открыть настройки страницы

И последнее, но не менее важное: мы собираемся разместить все четыре строки рядом друг с другом на планшете и компьютере. Для этого откройте настройки страницы.

Вставить собственный CSS

Перейдите к настраиваемому блоку CSS и добавьте следующие строки кода CSS:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.