Трябва да добавите формуляр за контакт към глобален заглавен файл?

Когато създавате персонализиран заглавен файл за уебсайта си, използвайки Divi Theme Builder, може да се окажете в търсене на идеалния начин да добавите CTA (призив за действие). Един от начините да направите това е чрез добавяне на падащо меню за контакт. 

Това ще ви помогне да поддържате цялостния вид на заглавката си чист, като същевременно ще ви позволи да се свържете с нея без скролиране. 

В този урок ще ви покажем как да създадете падаща форма за контакт, използвайки Divi, JQuery и CSS код.

Да започнем!

изследване

Преди да се потопим в този урок, нека да разгледаме предварителен преглед на резултата, който ще получим.

Създайте глобално заглавие

Отидете на Theme Builder

Отидете на Theme Builder от менюто Divi, което се намира във вашето табло за управление на WordPress, и кликнете върху „Добавяне на глобална заглавка“.

Изберете „Създаване на глобална заглавка“.

Създайте стил на заглавка

Настройки на секцията

Цвят на фона

След като влезете в редактора на шаблони, ще забележите секция. Отворете този раздел и променете цвета на фона.

• Фон: #FFFFFF

разстояние

След това премахнете горните и долните вътрешни полета по подразбиране от секцията.

• Върх на вътрешен марж: 0px
• Долно вътрешно поле: 0px

Кутия за сянка

Също така нанесете фина кутия сянка.

• Box Shadow Blue Сила: 50px
• Цвят на шрифта на субтитрите: rgba(0,0,0,0.15)

Добавете нов ред

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

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

оразмеряване

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

• Използвайте персонализирана ширина на улука: Да
• Разстояние между колоните: 1
• Хармонизиране на височините на колоните: Да
• Максимална ширина: 95%
• Максимална ширина: 100%

разстояние

След това добавете персонализирани горна и долна подплънка.

• Пиков вътрешен марж: 1vw
• Долно вътрешно поле: 1vw

основен елемент

Подравнете цялото съдържание на колоните, като добавите един ред CSS код към основния елемент на ред.

align-items: center;

Z индекс на колона 2

Ние също така се уверяваме, че втората колона има по-висока стойност на z-индекс за отзивчив дизайн.

• Z-индекс: 12

Добавете модул за изображение към колона 1

Изтеглете логото

Време е да започнете да добавяте модули! Започвайки с модул Image в колона 1. Качете лого.

подравняване

След това променете подравняването на модула.

• Подравняване на изображението: Центрирано

оразмеряване

Променете и ширината.

• Максимална ширина: 3vw (настолен компютър), 5vw (таблет), 7vw (телефон)

Добавете модул от менюто към колона 2

Изберете Меню

Във втората колона ще добавим модул Меню.

разпореждане

Превключете към раздела Module Style и променете стила на оформлението.

• Стилове: Центрирано

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

След това променете текстовите настройки в менюто на модула.

• Меню за шрифтове: Отворете Няма
• Меню с приглушена светлина: полудебели
• Цвят на текста на менюто: #000000
• Размер на текста на менюто: 0,8 vw (настолен компютър), 2 vw (таблет), 3 vw (телефон)
• Разстояние между буквите в менюто: 1px

Текстови настройки на падащото меню

След това променете цвета на линията от падащото меню.

• Цвят на линията на падащото меню: #007dff

икони

Промяна на цвета на иконата на менюто за хамбургер.

• Цвят на иконата на менюто за хамбургер: #007dff

Добавете текстов модул към колона 3

Добавяне на съобщение

Към третия модул! Добавете текстов модул със съобщение по ваш избор.

Цвят на фона

Добавете цвят на фона.

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

Текстови настройки

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

• Шрифт на текста: Отворете Sans
• Мек светъл текст: получер
• Цвят на текста Текст: #ffffff
• Размер на текста: 0,8 vw (настолен компютър), 2 vw (таблет), 3 vw (телефон)
• Подравняване на текста: Центрирано

оразмеряване

След това променете параметрите за оразмеряване на модула.

• Максимална ширина: 33%
• Подравняване на модула: Център

разстояние

След това добавете персонализирани подплънки отгоре и отдолу.

• Горен вътрешен марж: 0,8 vw (настолен компютър), 2 vw (таблет и телефон)
• Нисък вътрешен марж: 0,8 vw (настолен компютър), 2 vw (таблет и телефон)

граница

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

• Заоблен правоъгълник: 100px

Добавете друг текстов модул към колона 3

Добавете символ към областта на съдържанието

Нека да преминем към следващия модул, който е друг текстов модул. Добавете следния символ със стрелка в областта на съдържанието: „▼“.

Текстови настройки

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

• Шрифт на текста: Отворете Sans
• Цвят на текста: #007fff
• Текст Размер на текста: 3vw
• Височина на текстовия ред: 0em
• Подравняване на текста: Центрирано

Z-индекс

Нека също така да увеличим z-индекса на модула.

• Z-индекс: 11

Добавете модул за формуляр за контакт към колона 3

Добавете полета с пълна ширина по ваш избор

Следващият и последен модул, от който се нуждаем в третата колона, е модул за контактна форма. Добавете всички полета с пълна ширина, от които се нуждаете.

Добавете заглавие

Използвайте и заглавие.

Цвят на фона

След това нека променим цвета на фона.

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

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

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

• Полета за цвят на фона: #ffffff
• Цвят на текста на полето: #dddddd
• Цвят на текста на фокуса: #007dff
• Полета за запълване на върхове: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Долни полета за подпълване: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Полета за шрифт: Отворете Няма

• Полета Размер на текста: 0,7 vw (настолен компютър), 1,8 vw (таблет), 3 vw (телефон)

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

Редактирайте настройките за текста на заглавието.

• Вмъкнете заглавие трето: H3
• Мека светлина Заглавие: Удебелен текст
• Подравняване на текста: центрирано
• Цвят на текста на заглавието: #007dff
• Размер на заглавието на текста: 1 vw (настолен компютър), 2,5 vw (таблет), 3,5 vw (телефон)
• Височина на заглавния ред: 1,6 em

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

С настройки за текст на captcha.

• Шрифт Captcha: Отворете Sans
• Цвят на текста на Captcha: #007dff

Настройки на бутона

Продължете, като персонализирате бутона.

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

• Бутон за шрифт: Отвори Няма
• Бутон за мека светлина: Удебелен текст

• Поле на бутона: 1vw
• Горен бутон за подплънки: 1vw (настолен компютър), 2vw (таблет и телефон)
• Долен бутон за подплата: 1vw (настолен компютър), 2vw (таблет и телефон)
• Ляв бутон за подложка: 2vw (настолен компютър), 7vw (таблет и телефон)
• Десен бутон за подложка: 2vw (настолен компютър), 7vw (таблет и телефон)

разстояние

Използвайте персонализирани стойности за допълване на различни размери на екрана.

• Максимална вътрешна височина: 4vw (настолен компютър), 6vw (таблет и телефон)
• Вътрешен марж отдолу: 4vw (настолен компютър), 6vw (таблет и телефон)
• Ляво вътрешно поле: 2vw (настолен компютър), 6vw (таблет и телефон)
• Дясно вътрешно поле: 2vw (настолен компютър), 6vw (таблет и телефон)

граница

След това променете настройките на границата.

• Входен заоблен правоъгълник: 10px

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

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

Основен елемент:

01	border-radius: 20px;

Длъжност на контакта:

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Персонализирайте елементи, за да създадете формуляр за контакт с едно щракване

Добавете височината на колона 3

След като разполагате с всички модули, е време да създадете ефекта. Първата стъпка към получаване на желания резултат е да отворите настройките на 3 колони и да добавите персонализирана височина на реакция в раздела за разширени.

бюро :

01	height: 3vw;

таблетка:

01	height: 5vw;

Обадете се:

01	height: 6vw;

Добавете клас CSS към бутона и стрелката

След това ще добавим същия CSS клас към първите два текстови модула в колона 3.

• CSS клас: show-contact

Добавете CSS клас към формата за контакт

Ще ни е необходим и персонализиран CSS клас за модула за контактна форма.

• CSS клас: контакт-форма-модул

Скриване на модула за контактна форма

Продължете, като добавите допълнителен ред CSS код към основния елемент на модула за контактна форма. Това ще ни позволи да скрием модула, преди да щракнем.

01	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;

}

изследване

Сега, след като преминахме през всички стъпки, нека да разгледаме за последно резултата.

Заключение

В тази статия ви показахме как да добавите падащ формуляр за контакт към вашата персонализирана заглавка.

Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.