Необходимо е да се комбинират вградени полета и полета с пълна ширина на модула за контактна форма от Divi ?
Формулярът за контакт е важен елемент, който трябва да включите в уебсайта си, ако искате да събирате имейли и да превръщате посетителите си в клиенти.
Модулът на формуляра за контакт на 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...