Duhet të kombinohen fushat inline dhe fushat me gjerësi të plotë të modulit Formular Kontaktit de Divi ?
Le formularin e kontaktit është një element i rëndësishëm për t'u përfshirë në faqen tuaj të internetit nëse doni të kapni email dhe t'i shndërroni vizitorët tuaj në klientë.
Moduli Formular Kontaktit de Divi mund të personalizohet lehtësisht për të krijuar format karta kontakti tërheqëse dhe magjepsëse për të gjitha llojet e faqeve të internetit. Ky modul vjen me dy opsione të shfaqjes që mund të aplikohen në secilën fushë të formularit: en ligne ou gjerësi të plotë.
Në këtë tutorial, ne do të paraqesim katër mundësi unike për paraqitjen tuaj formularin e kontaktit Divi duke përdorur fusha inline dhe me gjerësi të plotë.
Le të fillojmë!
studim
Këtu është një pamje paraprake e asaj që ne do të dizajnojmë.
Paraqitja e parë
Paraqitja e dytë
Paraqitja e tretë
Paraqitja e katërt
Çfarë duhet të filloni
Para se të fillojmë, instaloni dhe aktivizoni temën Divi dhe sigurohuni që të keni versionin më të fundit të Divi në faqen tuaj të internetit.
Tani jeni gati për të filluar!
4 modele paraqitjesh për modulin e Formularit të Kontaktit të Divi duke përdorur fusha inline dhe me gjerësi të plotë
Zgjidhni paraqitjen e paracaktuar
Secili prej 4 shablloneve është modifikuar nga paraqitja e faqes së Kontaktit të Riparimit të Këpucëve Paketa e paraqitjes së riparimit të këpucëve, të cilën mund ta gjeni në bibliotekën Divi.
Shtoni një faqe të re në faqen tuaj të internetit dhe jepini një titull, më pas zgjidhni opsionin Përdorni Divi Builder.
Ne do të përdorim një plan urbanistik të bërë paraprakisht nga Biblioteka Divi për këtë shembull, kështu që zgjidhni Shfletoni Layouts.
Gjeni dhe zgjidhni paraqitjen e Faqes së Kontaktit të Riparimit të Këpucëve.
zgjedh Përdorni këtë paraqitje për të shtuar paraqitjen në faqen tuaj.
Tani jemi gati të hartojmë shembujt tanë.
Paraqitja e parë
Së pari, lëvizni rreshtin që përmban modulin Formular Kontaktit në seksionin e mësipërm, pikërisht nën vijën me modulet Blurb. Pastaj mund të fshini seksionin e mbetur bosh.
Hapni cilësimet e linjës dhe shtoni mbushje majtas dhe djathtas,
- Mbushje (majtas dhe djathtas): 15%
Zgjidhni opsionet e përgjegjshme dhe vendosni mbushjen për celularin.
- Mbushje (majtas dhe djathtas): 5%
Ndryshuar paraqitjen e formularit të kontaktit me fusha të brendshme dhe me gjerësi të plotë
Për këtë paraqitje, ne do të krijojmë dy fusha të veçanta për emrin dhe mbiemrin.
Hapni cilësimet e modulit të Formularit të Kontaktit dhe ndryshoni fushën ID dhe Titulli për fushën Mbiemri në Emri.
Shtoni një fushë të re poshtë fushës Emri. Vendosni fushën ID dhe Titulli në Emër.
Në cilësimet e fushës së emrit, hapni cilësimet e paraqitjes dhe vendosni Make Fullwidth në No.
- Bëni gjerësinë e plotë: JO
Më pas, nën cilësimet e formularin e kontaktit, ndryshoni rendin e temës dhe telefonit në mënyrë që telefoni të jetë i listuar përpara temës.
Hapni cilësimet e paraqitjes së fushës Subject dhe vendosni fushën në gjerësi të plotë.
- Bëni me gjerësi të plotë: PO
Përshtatja e dizajnit të formularit të kontaktit
Tani le të ndryshojmë disa cilësime për të përfunduar dizajnin. Navigoni te skeda Dizajni i cilësimeve të modulit të Formularit të Kontaktit.
Së pari, ndryshoni ngjyrën e sfondit të butonit.
- Sfondi i butonit: #DBC2B3
Shtoni një diferencë të sipërme te butoni.
- Margjina e butonit (lart): 10 px
Më në fund, shkoni te cilësimet e kufirit dhe shtoni qoshet e rrumbullakosura në fusha.
- Hyrje Këndet e rrumbullakosura: 30 px
Shiko gjithashtu: Divi: Si të shtoni një logo të përgjegjshme në modulin "Menyja me gjerësi të plotë".
Rezultati përfundimtar i shembullit 1
Këtu është rezultati përfundimtar në desktop dhe celular.
Shembulli i dytë
Për shembullin tonë të dytë, ne do t'i zhvendosim modulet Blurb në anën e majtë të faqes dhe do të vendosim formularin e kontaktit në anën e djathtë të faqes. Zhvendos modulet Blurb në një kolonë.
Ndryshoni paraqitjen e rreshtit.
Hapni cilësimet e dizajnit të linjës dhe fikeni Përdorni gjerësinë e ulluqeve të personalizuar.
- Përdorni gjerësinë e ulluqit të personalizuar: JO
Shtoni kodin në CSS të personalizuar të elementit kryesor për të lidhur vertikalisht modulet Blurb dhe Form Kontakti.
align-items:center;
Tani duhet të heqim kufirin e hollë midis kolonave. Hapni cilësimet e rreshtit dhe më pas hapni cilësimet e kolonës 1. Në skedën Dizajni, shkoni te cilësimet e kufirit dhe hiqni kufirin.
- Gjerësia e kufirit të djathtë: 0 px
Më pas, hapni cilësimet e kolonës 2 dhe përsëritni hapat për të hequr kufirin.
- Gjerësia e kufirit të djathtë: 0 px
Vendosni tekstin "Na kontaktoni" të jetë në qendër.
Zhvendosni formularin e kontaktit në kolonën e djathtë. Fshini pjesën e mbetur bosh.
Ndryshuar paraqitjen e formularit të kontaktit me fusha të brendshme dhe me gjerësi të plotë
Ky plan urbanistik do të ketë gjithashtu dy fusha të veçanta për emrin dhe mbiemrin. Hapni cilësimet e modulit të Formularit të Kontaktit dhe ndryshoni fushën ID dhe Titulli për fushën Mbiemri në Emri.
Shtoni një fushë të re poshtë fushës Emri. Vendosni fushën ID dhe Titulli në Emër.
Në cilësimet e fushës së emrit, hapni cilësimet e paraqitjes dhe vendosni Make Fullwidth në No.
- Bëni gjerësinë e plotë: JO
Ndryshoni rendin e telefonit dhe fushat e subjektit në mënyrë që telefoni të vijë përpara temës.
Hapni cilësimet e fushës për Email, Telefon dhe Subjekti dhe vendosni paraqitjen në gjerësinë e plotë.
- Bëni me gjerësi të plotë: PO
Përshtatja e dizajnit të formularit të kontaktit
Hapni cilësimet e rreshtit dhe më pas hapni cilësimet e kolonës 2. Caktoni ngjyrën e sfondit.
- Sfondi: #DBC2B3
Në cilësimet e kolonës 2, shkoni te skeda Dizajn dhe shtoni mbushje.
- Mbushje (sipër, poshtë, majtas dhe djathtas: 50 px
Zgjidhni ikonën celulare për të ndryshuar cilësimet e përgjegjshme. Vendos mbushje për celular.
- Mbushje (sipër, poshtë, majtas dhe djathtas): 30 px
Pastaj shtoni një hije kuti në kolonë.
Më në fund, hapni cilësimet e modulit të Formularit të Kontaktit dhe ndryshoni ngjyrën e tekstit të fushës.
- Ngjyra e tekstit të fushave: #000000
Rezultati përfundimtar i shembullit 2
Këtu është rezultati përfundimtar i paraqitjes së dytë.
Shembulli i tretë
Për paraqitjen e tretë, do të kemi formularin e kontaktit në të majtë dhe modulet Blurb në të djathtë. Le të fillojmë duke ndryshuar strukturën e kolonës së rreshtit që përmban modulet Blurb.
Zhvendos modulin e adresës në kolonën e djathtë.
Më pas, zhvendosni modulin e tekstit "Kontaktoni SHBA" në kolonën e majtë, më pas fshini rreshtin e mbetur bosh.
Zhvendosni modulin e formularit të kontaktit në kolonën e majtë, nën modulin e tekstit "Kontaktoni me SHBA". Fshini pjesën e mbetur bosh.
Hapni cilësimet e linjës, nën skedën Dizajn dhe fikeni Përdorni gjerësinë e ulluqeve të personalizuar
- Përdorni gjerësinë e ulluqit të personalizuar: JO
Shtoni kodin në CSS të personalizuar të elementit kryesor për të lidhur vertikalisht modulet Blurb dhe Form Kontakti.
align-items:center;
Hapni cilësimet e rreshtit dhe më pas hapni cilësimet e kolonës 1. Në skedën Dizajni, shkoni te cilësimet e kufirit dhe hiqni kufirin. Përsëritni hapat për të hequr kufirin nga kolona 2.
- Gjerësia e kufirit të djathtë: 0 px
Ndryshimi i paraqitjes së formularit të kontaktit
Gjerësia e fushave do t'i lëmë ashtu siç janë për dizajnin e tretë, megjithatë, hapni cilësimet e formularit të kontaktit dhe ndryshoni rendin e numrit të telefonit dhe fushën e temës në mënyrë që telefoni të jetë i pari.
Rezultati përfundimtar i shembullit 3
Këtu është rezultati përfundimtar i paraqitjes së tretë.
Lexo gjithashtu: Divi: Si të shfaqni modulin Fullwidth Header në ekran të plotë
Shembulli i katërt
Për paraqitjen e katërt dhe të fundit, moduli i Formularit të Kontaktit do të jetë në të majtë dhe modulet Blurb në të djathtë. Përsëri, do të fillojmë duke ndryshuar strukturën e kolonës së rreshtit që përmban modulet Blurb.
Zhvendos modulin e adresës në kolonën e djathtë.
Tjetra, zhvendosni modulin e formularit të kontaktit në kolonën e majtë. Fshini pjesën e mbetur bosh.
Hapni cilësimet e linjës, në skedën Design dhe çaktivizoni Përdorni gjerësinë e ulluqeve të personalizuar.
- Përdorni gjerësinë e ulluqit të personalizuar: JO
Shtoni kodin në CSS të personalizuar të elementit kryesor për të lidhur vertikalisht modulet Blurb dhe Form Kontakti.
align-items:center;
Hapni cilësimet e rreshtit dhe më pas hapni cilësimet e kolonës 1. Në skedën Dizajni, shkoni te cilësimet e kufirit dhe hiqni kufirin.
- Gjerësia e kufirit të djathtë: 0 px
Më pas, hapni cilësimet e kolonës 2 dhe përsëritni hapat për të hequr kufirin.
- Gjerësia e kufirit të djathtë: 0 px
Hapni cilësimet e modulit të tekstit për tekstin "Na kontaktoni" dhe vendosni tekstin në qendër.
- Rreshtimi i tekstit: në qendër
Ndryshuar paraqitjen e formularit të kontaktit me fusha të brendshme dhe me gjerësi të plotë
Për këtë dizajn, të gjitha fushat tona do të jenë me gjerësi të plotë. Hapni cilësimet e modulit të Formularit të Kontaktit dhe më pas hapni cilësimet për secilën fushë. Në skedën Design, zgjidhni Plan urbanistik dhe përcaktoni Bëni Fullwidth sur PO.
Pasi të keni krijuar çdo fushë me gjerësi të plotë, forma duhet të duket kështu.
Tani ndryshoni fushën ID dhe Titulli për fushën e Mbiemrit në Emri.
Shtoni një fushë të re poshtë fushës Emri. Vendosni fushën ID dhe Titulli në Emër.
Ndryshoni rendin e telefonit dhe fushat e subjektit në mënyrë që telefoni të vijë përpara temës.
Përshtatja e dizajnit të modulit të Formularit të Kontaktit
Në cilësimet e modulit, në skedën Design, vendosni ngjyrën e tekstit të fushës në të zezë.
- Ngjyra e tekstit të fushave: #000000
Hapni cilësimet e seksionit dhe shtoni një ngjyrë të sfondit.
- Sfondi: #DBC2B3
Së fundi, shtoni një maskë sfondi.
- Maska e sfondit: Arch
- Transformimi i maskës: horizontale
Për ta bërë maskën e sfondit të funksionojë më mirë në celular, le të përdorim cilësimet e përgjegjshme.
- Transformimi i maskës (Telefon): horizontale dhe rrotulluese
Rezultati përfundimtar
Këtu është rezultati përfundimtar i paraqitjes së katërt.
Rezultatet përfundimtare
Le t'i hedhim një vështrim të gjithë shembujve tanë edhe një herë.
Shembulli i parë
Shembulli i dytë
Shembulli i tretë
Shembulli i katërt
Shkarkoni DIVI tani!!!
Përfundim
Pasja e një formulari tërheqës kontakti mund të rrisë konvertimet tuaja dhe t'i lejojë vizitorët tuaj të lidhen drejtpërdrejt me ju.
Siç e kemi demonstruar në këtë artikull, ju mund të përdorni opsionet e fushës në linjë dhe me gjerësi të plotë për të krijuar pamje dhe paraqitje të ndryshme për formën tuaj, dhe opsionet e integruara të dizajnit të Divi ju lejojnë të krijoni dizajne unike dhe tërheqëse për ta ndihmuar formën të dallohet.
Shpresojmë që kjo teknikë të shtojë një aftësi tjetër të dobishme të projektimit për projektet e ardhshme.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
