Как легко добавить контактную форму в виде столбца в раздел Divi Hero

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

Фоновый цвет

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените цвет фона.

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

Фоновая картинка

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

• Размер фонового изображения: По размеру
• Положение фонового изображения: по центру

Интервал

Перейдите на вкладку дизайна раздела и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:

• Выровнять высоту столбца: Да
• Ширина: 80% (рабочий стол), 100% (планшет и телефон)
• Максимальная ширина: 1380 пикселей
• Выравнивание строк: вправо

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1 Настройки

Интервал

Затем откройте настройки столбца 1 и измените настройки интервала для разных размеров экрана.

• Верхняя набивка: 22%
• Нижняя обивка: 22%
• Левое заполнение: 10% (только планшет и телефон)
• Правое заполнение: 10% (только планшет и телефон)

Столбец 2 Настройки

Фоновый цвет

Затем мы откроем настройки столбца 2 и используем белый цвет фона.

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

Анимация

Мы завершим настройки столбца 2, применив следующие настройки анимации:

• Направление анимации: влево (рабочий стол), вверх (планшет и телефон)
• Продолжительность анимации: 1500 мс
• Интенсивность анимации: 70%
• Начальная непрозрачность анимации: 100%

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

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

Пора добавлять модули, начиная с первого текстового модуля в столбце 1. Добавьте контент H1 по вашему выбору.

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

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

• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: прописные.
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 120 пикселей (рабочий стол), 70 пикселей (планшет), 60 пикселей (телефон)

Размеры

Мы также меняем настройки размера модуля.

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

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

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

Переходим к следующему модулю, который является еще одним текстовым модулем. Добавьте описание по вашему выбору.

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

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

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Высота текстовой строки: 1.9em

Размеры

Измените также настройки размера.

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

Добавить модуль кнопок в столбец 1

Добавить копию

Последний модуль, который нам нужен в столбце 1, - это кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

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

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #ffffff
• Радиус границы кнопки: 1px

• Шрифт кнопки: Освальд
• Стиль шрифта кнопок: прописные

Добавить модуль Blurb в столбец 2

Добавить содержимое

Переходим ко второму столбцу. Итак, первый модуль, который нам нужен, - это модуль Blurb. Добавьте название по вашему выбору.

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

Затем выберите значок.

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

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

• Цвет значка: # ffd8c6
• Расположение значков: вверху
• Выравнивание значка: по центру
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 250 пикселей (рабочий стол), 150 пикселей (планшет и телефон)

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

Затем измените настройки текста заголовка.

• Заголовок уровня заголовка: H2
• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: прописные
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # ff8949
• Размер текста заголовка: 38 пикселей

Интервал

Также добавьте отступы слева и справа.

• Левый отступ: 11%
• Правое заполнение: 11%

Анимация

И завершите модуль, добавив следующие настройки анимации:

• Направление анимации: вниз
• Продолжительность анимации: 1100 мс
• Задержка анимации: 400 мс
• Начальная непрозрачность анимации: 100%

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

Поверните поля на полную ширину

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

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

Фоновый цвет

Затем вернитесь к общим настройкам модуля контактной формы и добавьте цвет фона.

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

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

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

• Цвет фона полей: #ffffff
• Цвет текста полей: # ff8949
• Верхнее поле полей: 15 пикселей
• Нижнее поле полей: 15 пикселей
• Отступ сверху полей: 20 пикселей
• Отступ снизу полей: 20 пикселей

• Шрифт полей: Oswald
• Стиль шрифта полей: прописные.
• Выравнивание текста полей: по центру
• Размер текста полей: 21px

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

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: # ff8949
• Радиус границы кнопки: 1px

• Шрифт кнопки: Освальд
• Стиль шрифта кнопок: прописные

Размеры

Мы также следим за тем, чтобы ширина была «100%» в настройках размеров.

• Ширина: 100%

Интервал

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

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

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вверх
• Продолжительность анимации: 1100 мс
• Задержка анимации: 400 мс
• Начальная непрозрачность анимации: 100%

Позиция

И завершите настройки модуля (и руководство), переместив модуль только на рабочий стол:

• Позиция: абсолютная (настольный компьютер), по умолчанию (планшет и телефон)
• Расположение: внизу по центру

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

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

Рабочий стол

Мобильный

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

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

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