Трябва да комбинирате вградени полета и модулни полета с пълна ширина Форма за контакт de Divi ?
Le Формуляр за връзка е важен елемент, който трябва да включите в уебсайта си, ако искате да улавяте имейли и да превръщате посетителите си в клиенти.
Модулът Форма за контакт de Divi може лесно да се персонализира за създаване форми атрактивни и завладяващи карти за контакт за всички видове уебсайтове. Този модул се предлага с две опции за показване, които могат да се приложат към всяко поле на формуляр: EN Ligne ou пълна ширина.
В този урок ще ви представим четири уникални възможности за оформление Формуляр за връзка Divi, използвайки вградени полета и полета с пълна ширина.
Нека да започнем!
изследване
Ето предварителен преглед на това, което ще проектираме.
Първо оформление
Второ оформление
Трето оформление
Четвърто оформление
Какво трябва да започнете
Преди да започнем, инсталирайте и активирайте темата Divi и се уверете, че имате най-новата версия на Divi на уебсайта си.
Сега сте готови да започнете!
4 примерни оформления за модула за формуляр за контакт на Divi, използващи вградени полета и полета с пълна ширина
Изберете предварително зададеното оформление
Всеки от 4-те шаблона е модифициран от оформлението на страницата за контакти за ремонт на обувки Пакет оформление за ремонт на обувки, които можете да намерите в Divi Library.
Добавете нова страница към уебсайта си и й дайте заглавие, след което изберете опцията Използвайте Divi Builder.
Ще използваме предварително направено оформление от Divi Library за този пример, така че изберете Преглед на оформления.
Намерете и изберете оформлението на страницата с контакти за ремонт на обувки.
Изберете Използвайте това оформление за да добавите оформлението към вашата страница.
Вече сме готови да проектираме нашите примери.
Първо оформление
Първо преместете реда, съдържащ модула Форма за контакт към секцията по-горе, точно под линията с модулите Blurb. След това можете да изтриете оставащия празен раздел.
Отворете настройките на линията и добавете лява и дясна подложка,
- Подложка (ляво и дясно): 15%
Изберете отзивчиви опции и задайте подложка за мобилни устройства.
- Подложка (ляво и дясно): 5%
Променено оформление на формата за контакт с вградени полета и полета с пълна ширина
За това оформление ще създадем две отделни полета за име и фамилия.
Отворете настройките на модула за формуляр за контакт и променете полето ID и Title за полето Last name на First name.
Добавете ново поле под полето Първо име. Задайте полето ID и Title на Name.
В настройките на полето за име отворете настройките за оформление и задайте Make Fullwidth на No.
- Направете пълна ширина: НЕ
След това, под настройките на Формуляр за връзка, променете реда на темата и телефона, така че телефонът да е в списъка преди темата.
Отворете настройките за оформление на полето за тема и задайте полето на пълна ширина.
- Направете пълна ширина: ДА
Персонализиране на дизайна на формата за контакт
Сега нека променим няколко настройки, за да завършим дизайна. Придвижете се до раздела Дизайн на настройките на модула за формуляр за контакт.
Първо променете цвета на фона на бутона.
- Фон на бутона: #DBC2B3
Добавете горно поле към бутона.
- Поле на бутона (отгоре): 10px
Накрая отидете на настройките на границите и добавете заоблени ъгли към полетата.
- Входове заоблени ъгли: 30px
Вижте също: Divi: Как да добавите адаптивно лого към модула "Fullwidth Menu".
Краен резултат от пример 1
Ето крайния резултат на десктоп и мобилно устройство.
Втори пример
За нашия втори пример ще преместим модулите Blurb в лявата част на страницата и ще поставим формата за контакт от дясната страна на страницата. Преместете модулите на Blurb в колона.
Променете оформлението на реда.
Отворете настройките за дизайн на линия и изключете Използвайте персонализирана ширина на улука.
- Използвайте персонализирана ширина на улука: НЕ
Добавете код към персонализирания CSS на основния елемент, за да подравните вертикално модулите Blurb и Contact Form.
align-items:center;
Сега трябва да премахнем тънката граница между колоните. Отворете настройките на реда, след това отворете настройките на колоната 1. В раздела Дизайн отидете на настройките на границата и премахнете рамката.
- Ширина на дясната граница: 0px
След това отворете настройките на колона 2 и повторете стъпките, за да премахнете рамката.
- Ширина на дясната граница: 0px
Задайте текста „Свържете се с нас“ да бъде центриран.
Преместете формата за контакт в дясната колона. Изтрийте оставащия празен раздел.
Променено оформление на формата за контакт с вградени полета и полета с пълна ширина
Това оформление също ще има две отделни полета за име и фамилия. Отворете настройките на модула за формуляр за контакт и променете полето ID и Title за полето Last name на First name.
Добавете ново поле под полето Първо име. Задайте полето ID и Title на Name.
В настройките на полето за име отворете настройките за оформление и задайте Make Fullwidth на No.
- Направете пълна ширина: НЕ
Променете реда на полетата за телефон и тема, така че телефонът да е преди темата.
Отворете настройките на полето за имейл, телефон и тема и задайте оформлението на пълна ширина.
- Направете пълна ширина: ДА
Персонализиране на дизайна на формата за контакт
Отворете настройките на реда, след това отворете настройките на колоната 2. Задайте цвета на фона.
- Фон: #DBC2B3
В настройките на колона 2 отидете в раздела Дизайн и добавете подложка.
- Подплата (отгоре, отдолу, отляво и отдясно: 50px
Изберете мобилната икона, за да промените настройките за реагиране. Задайте подложка за мобилни устройства.
- Подложка (отгоре, отдолу, отляво и отдясно): 30px
След това добавете сянка на кутия към колоната.
Накрая отворете настройките на модула Форма за контакт и променете цвета на текста в полето.
- Цвят на текста на полетата: #000000
Краен резултат от пример 2
Ето крайния резултат от второто оформление.
Трети пример
За третото оформление ще имаме формата за контакт отляво и модулите Blurb отдясно. Нека започнем с промяна на структурата на колоните на реда, съдържащ модулите Blurb.
Преместете адресния модул в дясната колона.
След това преместете текстовия модул „Свържете се с нас“ в лявата колона, след което изтрийте оставащия празен ред.
Преместете модула на формуляра за контакт в лявата колона под текстовия модул „Свържете се с нас“. Изтрийте оставащия празен раздел.
Отворете настройките на линията в раздела Дизайн и изключете Използвайте персонализирана ширина на улука
- Използвайте персонализирана ширина на улука: НЕ
Добавете код към персонализирания CSS на основния елемент, за да подравните вертикално модулите Blurb и Contact Form.
align-items:center;
Отворете настройките на реда, след това отворете настройките на колоната 1. В раздела Дизайн отидете на настройките на границата и премахнете границата. Повторете стъпките, за да премахнете границата от колона 2.
- Ширина на дясната граница: 0px
Промяна на оформлението на формата за контакт
Ще оставим ширините на полетата такива, каквито са за третия дизайн, но отворете настройките на формата за контакт и променете реда на телефонния номер и полето за тема, така че телефонът да е на първо място.
Краен резултат от пример 3
Ето и крайния резултат от третото оформление.
Прочетете още: Divi: Как да покажа модула Fullwidth Header на цял екран
Четвърти пример
За четвъртото и последно оформление модулът за формуляр за контакт ще бъде отляво, а модулите Blurb отдясно. Отново ще започнем с промяна на структурата на колоните на реда, съдържащ модулите Blurb.
Преместете адресния модул в дясната колона.
След това преместете модула за формуляр за контакт в лявата колона. Изтрийте оставащия празен раздел.
Отворете настройките на линията в раздела Дизайн и деактивирайте Използвайте персонализирана ширина на улука.
- Използвайте персонализирана ширина на улука: НЕ
Добавете код към персонализирания CSS на основния елемент, за да подравните вертикално модулите Blurb и Contact Form.
align-items:center;
Отворете настройките на реда, след това отворете настройките на колоната 1. В раздела Дизайн отидете на настройките на границата и премахнете рамката.
- Ширина на дясната граница: 0px
След това отворете настройките на колона 2 и повторете стъпките, за да премахнете рамката.
- Ширина на дясната граница: 0px
Отворете настройките на текстовия модул за текста „Свържете се с нас“ и центрирайте текста.
- Подравняване на текст: центрирано
Променено оформление на формата за контакт с вградени полета и полета с пълна ширина
За този дизайн всички наши полета ще бъдат с пълна ширина. Отворете настройките на модула Формуляр за контакт, след което отворете настройките за всяко поле. В раздела Дизайн изберете оформление и дефинирайте Направете пълна ширина от ДА.
След като създадете всяко поле с пълна ширина, формулярът трябва да изглежда така.
Сега променете полето ID и Title за полето Last Name на First Name.
Добавете ново поле под полето Първо име. Задайте полето ID и Title на Name.
Променете реда на полетата за телефон и тема, така че телефонът да е преди темата.
Персонализиране на дизайна на модула Форма за контакт
В настройките на модула, в раздела Дизайн, задайте черния цвят на текста на полето.
- Цвят на текста на полетата: #000000
Отворете настройките на секцията и добавете цвят на фона.
- Фон: #DBC2B3
Накрая добавете фонова маска.
- Фонова маска: Arch
- Трансформация на маската: хоризонтална
За да накараме фоновата маска да работи по-добре на мобилно устройство, нека използваме отзивчивите настройки.
- Трансформация на маска (телефон): хоризонтална и ротационна
Краен резултат
Ето и крайния резултат от четвъртото оформление.
Крайни резултати
Нека да разгледаме всички наши примери още веднъж.
Първи пример
Втори пример
Трети пример
Четвърти пример
Изтеглете DIVI сега!!!
Заключение
Наличието на атрактивна форма за контакт може да увеличи вашите реализации и да позволи на посетителите ви да се свържат директно с вас.
Както демонстрирахме в тази статия, можете да използвате опциите за вградени полета и полета с пълна ширина, за да създадете различни изгледи и оформления за вашия формуляр, а вградените опции за дизайн на Divi ви позволяват да създавате уникални и привлекателни дизайни, за да помогнете на формуляра да се открои.
Надяваме се, че тази техника ще добави още едно полезно дизайнерско умение за бъдещи проекти.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...