Как добавить раскрывающуюся контактную форму в глобальный заголовок

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон глобального заголовка БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

Перейти в конструктор тем Divi

Начните с перехода к Divi Theme Builder в серверной части вашего веб-сайта WordPress.

Создать глобальный заголовок

Нажмите «Добавить глобальный заголовок» и выберите «Создать глобальный заголовок», чтобы начать создание настраиваемого глобального заголовка.

2. Создайте дизайн заголовка

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

Фоновый цвет

Оказавшись внутри глобального шаблона заголовка, вы заметите раздел. Откройте этот раздел и используйте белый цвет фона.

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

Интервал

Затем удалите верхнее и нижнее заполнение раздела по умолчанию.

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

Коробка Тень

Также примените тонкую тень коробки.

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.15)

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 95%
• Максимальная ширина: 100%

Интервал

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

• Верхняя обивка: 1vw
• Нижняя обивка: 1vw

Главный элемент

И выровняйте все содержимое столбца, добавив одну строку кода CSS к основному элементу строки.

align-items: center;

Столбец 2 Индекс Z

Мы также следим за тем, чтобы второй столбец имел более высокое значение индекса z для адаптивных целей.

• Индекс Z: 12

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

Загрузить логотип

Пора начинать добавлять модули! Начнем с модуля изображения в столбце 1. Загрузите логотип.

Выравнивание

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

• Выравнивание изображения: по центру

Размеры

Измените также ширину.

• Ширина: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

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

Выберите меню

Во втором столбце мы добавим модуль меню.

Макет

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

• Стиль: по центру

Настройки текста меню

Затем измените настройки текста меню модуля.

• Шрифт меню: Open Sans
• Толщина шрифта меню: полужирный
• Цвет текста меню: # 000000
• Размер текста меню: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Расстояние между буквами меню: 1 пиксель

Параметры текста раскрывающегося меню

Затем измените цвет строки раскрывающегося меню.

• Цвет строки раскрывающегося меню: # 007dff

Иконки

Вместе с цветом значка гамбургерного меню.

• Цвет значка меню гамбургера: # 007dff

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

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

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

Фоновый цвет

Затем добавьте цвет фона.

• Цвет фона: # 007dff

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: полужирный
• Цвет текста: #ffffff
• Размер текста: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Выравнивание текста: по центру

Размеры

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

• Ширина: 33%
• Выравнивание модуля: по центру

Интервал

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

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

Граница

И завершите настройки модуля, добавив некоторый радиус границы.

• Все углы: 100 пикселей

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

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

Переходим к следующему модулю, который является еще одним текстовым модулем. Добавьте в поле содержимого следующий символ стрелки: «▼».

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

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

• Шрифт текста: Open Sans
• Цвет текста: # 007fff
• Размер текста: 3vw
• Высота текстовой строки: 0em
• Выравнивание текста: по центру

Индекс Z

Мы также увеличиваем z-индекс модуля.

• Индекс Z: 11

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

Добавить поля выбора полной ширины

Следующий и последний модуль, который нам нужен в третьем столбце, - это модуль контактной формы. Добавьте все необходимые поля полной ширины.

Добавить заголовок

Также используйте заголовок.

Фоновый цвет

Далее мы меняем цвет фона.

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

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

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

• Цвет фона полей: #ffffff
• Цвет текста полей: #dddddd
• Цвет текста в фокусе полей: # 007dff
• Верхнее заполнение полей: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Заполнение нижних полей: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Шрифт полей: Open Sans

• Размер текста полей: 0,7vw (рабочий стол), 1,8vw (планшет), 3vw (телефон)

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

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

• Заголовок уровня заголовка: H3
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 007dff
• Размер текста заголовка: 1vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)
• Высота строки заголовка: 1,6 мкм

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

Вместе с настройками текста капчи.

• Шрифт Captcha: Open Sans
• Цвет текста Captcha: # 007dff

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 007dff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Шрифт кнопки: Open Sans
• Толщина шрифта кнопок: полужирный

• Верхняя маржа кнопки: 1vw
• Обивка кнопок: 1vw (рабочий стол), 2vw (планшет и телефон)
• Нижняя обивка кнопок: 1vw (рабочий стол), 2vw (планшет и телефон)
• Поля кнопок слева: 2vw (рабочий стол), 7vw (планшет и телефон)
• Поля правой кнопки: 2vw (рабочий стол), 7vw (планшет и телефон)

Интервал

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

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

Граница

Затем измените настройки границы.

• Все углы: 10 пикселей

Основной элемент, заголовок контакта и CSS Captcha

Завершите настройки модуля, добавив небольшие изменения CSS на вкладку «Дополнительно».

Главный элемент:

border-radius: 20px;

Контактное лицо:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Настройте элементы для создания контактной формы при нажатии

Добавить высоту столбца 3

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

Рабочий стол:

height: 3vw;

Таблетка:

height: 5vw;

Телефон:

height: 6vw;

Добавить класс CSS к кнопке и стрелке

Затем мы добавим один и тот же класс CSS в оба первых текстовых модуля в столбце 3.

• Класс CSS: шоу-контакт

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

Нам также понадобится собственный класс CSS для модуля контактной формы.

• Класс CSS: модуль контактной формы

Скрыть модуль контактной формы

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

display: none;

Добавьте модуль кода в столбец 3 с помощью кода JQuery и CSS

А чтобы создать функцию щелчка, нам понадобится код JQuery. Мы также будем использовать собственный код CSS. Добавьте новый модуль кода в столбец 2 с кодом. Убедитесь, что вы разместили код JQuery между тегами скрипта, а код CSS - между тегами стилей.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

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

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

Рабочий стол

Мобильный

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

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

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