Искате ли да създадете a Формуляр за връзка в Divi, който се появява след щракване върху бутон?
В този урок на Divi ще ви покажем как да създадете a Формуляр за връзка който се появява след щракване върху бутон, като не се използва нищо друго освен Divi, jQuery код и CSS код.
Прочетете и нашето ръководство на: Divi: Как да създадете залепващ долен колонтитул с ефект „Разкриване“.
Това е чудесен начин да запазите посетители на вашия уебсайт, фокусирани върху действието, което са поели, като са кликнали върху бутон. Това не ги отвежда на друга страница.
изследване
По-долу можете да хвърлите един бърз поглед върху това, което ще създадем, след което преминете към урока!
Преглед на компютър
Преглед на телефон и таблет
Създайте нова страница с предварително дефинирано оформление
Нека започнем с използване на предварително дефинирано оформление от библиотеката Divi. За този пример ще използваме страницата за контакт на Пакет за оформление на продукти за красота .
Добавете нова страница към уебсайта си и й дайте заглавие, след което изберете опцията „Използване на Divi Builder“.
Ще използваме предварително направено оформление от библиотеката Divi за този пример, така че изберете „Изберете оформление'.
Намерете и изберете началната страница на оформлението 'Фирма за интериорен дизайн'.
Изберете 'Изберете оформление“, за да добавите оформлението към вашата страница.
Вече сме готови да продължим нашия урок.
Създайте раздел с модул Button
Първото нещо, което ще трябва да направим, е да добавим нов раздел, където да поставим бутона, който ще позволи на Формуляр за връзка Да се появи.
Вижте също: Divi: Как да създадете персонализиран долен колонтитул
Просто добавете стандартен раздел
След това изберете ред с една колона.
След като направите това, добавете модул Button към него.
Можете да персонализирате бутона, както искате, но трябва да се уверите, че URL адресът на бутона започва с „#“, последван от нещо друго. Не можете просто да го оставите празно или просто да използвате знака „#“. Като добавите '#' и текст, страницата няма да се премести, след като щракнете върху бутона. Ако го оставите празно, страницата ще се обнови при щракване. И ако използвате само '#', ще бъдете изпратени в горната част на страницата.
Следващото важно нещо, което ще трябва да направим, е да присвоим CSS клас на бутона. Ще използваме този CSS клас по-късно в тази статия в кода на jQuery, за да гарантираме, че формулярът за контакт се появява след щракване. Класът, който ще трябва да присвоим на бутона, е просто „бутон“.
- CSS клас: бутон
Създайте формуляр за връзка с версия за компютър
Следващото нещо, което ще трябва да направим, е да създадем настолната форма за контакт, която ще се появи, след като някой щракне върху бутона, който създадохме в предишната част на тази статия. По-късно в тази статия ще ви покажем и как да създадете мобилната версия.
Добавете нов стандартен раздел
Започнете с добавяне на нов стандартен раздел към страницата, върху която работите. В настройките на раздела отидете в раздела Разширени, добавете „изскачащ прозорец“ към полето CSS Class.
Превъртете надолу същия раздел и поставете следните редове от CSS код в полето Преди на подкатегорията Custom CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Добавяйки това, гарантираме, че разделът заема целия раздел. Можете да регулирате цвета на фона в CSS кода, за да създадете желаното наслагване на фона. В този случай използваме черен цвят с известна прозрачност. В същия раздел добавете и следния ред CSS код към основния елемент:
display: none;
Последното нещо, което ще трябва да направим в раздела Разширени, е да деактивираме секцията за телефон и таблет в подкатегорията видимост.
Добавете ред към две колони
Продължете, като добавите ред с две колони и отидете до раздела Стил.
- Използвайте персонализирана ширина на улука: ДА
- Максимална ширина: 1291px
Въведете параметрите на всяка от колоните.
Променете вътрешните полета (отгоре, отляво и отдясно), както следва:
- Вътрешно поле (горе, ляво, дясно): 30px
Завършете, като отидете в раздела Разширени. В основния елемент добавете следните редове от CSS код:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Добавете първия текстов модул
След като направите всички промени в секцията и реда, е време да добавите различните модули, които искате да покажете.
Първото нещо, което ще добавим, е заглавието, което се появява. Започнете с добавяне на нов текстов модул към първата колона на реда, напишете текста в раздела Съдържание и превключете към раздела Стил.
В раздела Стил използвахме следните настройки за подкатегорията Текст:
- Заглавен шрифт: омар
- Заглавка с мека светлина: удебелен текст
- Подравняване на текста: получер
- Цвят на текста в горния колонтитул: #002282
- Размер на текста в горния колонтитул: 37px
- Височина на горната линия: 1,7 em
Добавяне на втори текстов модул
Продължете, като добавите нов текстов модул и въведете текста, който искате да се показва в раздела Съдържание. Превключете към раздела Стил и приложете следните настройки към подкатегорията Текст:
- Подравняване на текст: Център
- Шрифт на текста: Arial
- Текст Размер на текста: 13px
- Цвят на текста Текст: #002282
- Височина на текстовия ред: 1,7 ем
Добавете модул „Следвайте ни в социалните мрежи“.
След това ще добавим и модула „Следвайте ни в социалните медии“ към първата колона. В този случай сме избрали три икони на социални медии; Facebook, Twitter и Instagram.
Последното нещо, което трябва да направим, е да добавим подложка (вляво) към този модул в раздела Разширени. Добавете следния ред CSS код към основния елемент:
padding-left: 40%;
Добавяне на модул за формуляр за контакт
След това можем да преминем към втората колона в реда. В тази колона първото нещо, което ще поставим, е модулът Contact Form.
За този пример сме избрали само две полета; име и имейл.
След като добавите модула за формуляр за контакт, отидете до раздела Стил на модула за формуляр за контакт и направете следните промени в подкатегорията Полета:
- Полета за цвят на текста: #002282
- Полета за размер на текста: #002282
- Височина на линията на полето: 1,7 em
В същия раздел направете следните промени в подкатегорията Button:
- Използвайте персонализирани стилове за Бутон: Да
- Бутон за размер на текста: 20
- Цвят на текста на бутона: #FFFFFF
- Бутон за фон: #0086c4
Вижте също: Как да създадете плъзгащо се и натискащо меню в DIVI
- Ширина на рамката на бутона: 2
- Бутон за радиус на границата: 3
Преминете към раздела Разширени и добавете марж от 5%.
Добавяне на модул Резюме
Друго нещо, което ще трябва да добавим към втората колона, е модул Резюме. Единственото нещо, за което се нуждаем от този модул, е иконата за изход в горния десен ъгъл на изскачащия прозорец. Изберете следващата икона от списъка с икони и оставете всичко останало празно.
След това отидете в раздела Разширени и въведете „close“ като CSS клас.
В същия този раздел добавете следните редове код към основния елемент на персонализираната CSS подкатегория:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Приложете градиентно запълване към линията
Накрая ще добавим хубав градиентен фон към линията. Отворете настройките и приложете следните промени към опцията за градиентен фон:
- Първи цвят на градиента: #FFFFFF
- Втори цвят на градиента: #0c71c3
- Тип градиент: Линеен
- Посока на градиента: 124 градуса
- Начална позиция: 50%
- Крайна позиция: 50%
Създайте форма за контакт за таблет и телефон
След като създадохме версията за компютър, версията за таблет и телефон ще работи много по-бързо. Повечето от модулите, които използвахме за PC версията са същите като за мобилната версия.
Дублиране на предишния раздел
Вместо да го деактивираме за телефон и таблет, както направихме за версията за компютър, ще деактивираме версията за компютър в подкатегорията видимост в настройките на модула:
Променете CSS кода на модула Резюме
Вместо да използвате десктоп кода, вместо това използвайте следното:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Приложете градиентно запълване към линията
За мобилната версия използваме различни настройки за градиентния фон на линията:
- Първи цвят на градиента: #FFFFFF
- Втори цвят на градиента: #0c71c3
- Тип градиент: Линеен
- Посока на градиента: 180 градуса
- Начална позиция: 40%
- Крайна позиция: 40%
Добавяне на jQuery код
Последното нещо, което ще трябва да направим за този урок, е да добавим jQuery кода. Добавете кодов модул и вмъкнете следния JQuery код:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
резултат
Ако следвате съобщението стъпка по стъпка, трябва да можете да получите следния резултат на компютъра:
И следния резултат на таблети и телефони:
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да създадете формуляр за контакт с едно кликване. Използвайте този метод, за да се свържете с вашия посетители е фин, но ефективен.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...