Potrebno je kombinirati inline polja i polja pune širine modula Kontakt obrazac de divi ?
Le kontakt formular je važan element koji treba uključiti na svoju web stranicu ako želite snimiti e-poštu i pretvoriti svoje posjetitelje u kupce.
Modul Kontakt obrazac de divi može se lako prilagoditi za kreiranje forme atraktivne i zadivljujuće kontakt kartice za sve vrste web stranica. Ovaj modul dolazi s dvije opcije prikaza koje se mogu primijeniti na svako polje obrasca: en ligne ou puna širina.
U ovom tutorijalu predstavit ćemo četiri jedinstvene mogućnosti izgleda za vas kontakt formular Divi koristeći inline i polja pune širine.
Počnimo!
pregled
Evo pregleda onoga što ćemo dizajnirati.
Prvi izgled
Drugi raspored
Treći raspored
Četvrti raspored
Šta vam je potrebno za početak
Prije nego što počnemo, instalirajte i aktivirajte temu Divi i provjerite imate li najnoviju verziju Divi-a na svojoj web stranici.
Sada ste spremni za početak!
4 uzorka izgleda za Divi modul obrasca za kontakt koristeći umetnuta polja i polja pune širine
Odaberite unaprijed definirani izgled
Svaki od 4 šablona je izmijenjen na izgledu Kontakt stranice za popravku obuće Paket rasporeda za popravku cipela, koji možete pronaći u Divi biblioteci.
Dodajte novu stranicu na svoju web stranicu i dajte joj naslov, a zatim odaberite opciju Koristite Divi Builder.
Za ovaj primjer ćemo koristiti unaprijed napravljen izgled iz Divi biblioteke, pa odaberite Browse Layouts.
Pronađite i odaberite izgled stranice za kontakt za popravku obuće.
izabrati Koristite ovaj raspored da dodate izgled vašoj stranici.
Sada smo spremni za dizajn naših primjera.
Prvi izgled
Prvo pomaknite liniju koja sadrži modul Kontakt obrazac na odjeljak iznad, odmah ispod linije sa Blurb modulima. Zatim možete izbrisati preostali prazan dio.
Otvorite postavke linije i dodajte lijevi i desni padding,
- Padding (lijevo i desno): 15%
Odaberite responzivne opcije i postavite padding za mobilne uređaje.
- Padding (lijevo i desno): 5%
Promijenjen izgled kontakt forme sa umetnutim poljima i poljima pune širine
Za ovaj izgled ćemo kreirati dva odvojena polja za ime i prezime.
Otvorite postavke modula obrasca za kontakt i promijenite ID i polje naslova za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Postavite polje ID i naslov na Ime.
U postavkama polja za ime otvorite postavke izgleda i postavite Napravi punu širinu na Ne.
- Napravite punu širinu: NE
Zatim, pod postavkama kontakt formular, promenite redosled predmeta i telefona tako da se telefon nalazi ispred predmeta.
Otvorite postavke izgleda polja Predmet i postavite polje na punu širinu.
- Napravite punu širinu: DA
Prilagodba dizajna kontakt forme
Sada promijenimo nekoliko postavki kako bismo dovršili dizajn. Idite na karticu Dizajn u postavkama modula Kontakt obrazac.
Prvo promijenite boju pozadine gumba.
- Pozadina dugmeta: #DBC2B3
Dodajte gornju marginu dugmetu.
- Margina dugmeta (gore): 10px
Na kraju, idite na postavke ivica i dodajte zaobljene uglove u polja.
- Unosi Zaobljeni uglovi: 30px
Vidi također: Divi: Kako dodati responzivni logo u modul "Fullwidth Menu".
Konačan rezultat primjera 1
Evo konačnog rezultata na desktopu i mobilnom uređaju.
Drugi primjer
Za naš drugi primjer, premjestit ćemo Blurb module na lijevu stranu stranice i postaviti kontakt obrazac na desnu stranu stranice. Premjestite Blurb module u kolonu.
Promijenite raspored redova.
Otvorite postavke dizajna linija i isključite Koristite prilagođenu širinu oluka.
- Koristi prilagođenu širinu oluka: NE
Dodajte kod u prilagođeni CSS glavnog elementa kako biste vertikalno poravnali module Blurb i Contact Form.
align-items:center;
Sada moramo ukloniti tanku granicu između stupova. Otvorite postavke reda, a zatim otvorite postavke kolona 1. Na kartici Dizajn idite na postavke ivice i uklonite ivicu.
- Širina desne ivice: 0px
Zatim otvorite postavke kolone 2 i ponovite korake za uklanjanje ivice.
- Širina desne ivice: 0px
Postavite tekst "Kontaktirajte nas" da bude centriran.
Premjestite kontakt obrazac u desnu kolonu. Izbrišite preostali prazan dio.
Promijenjen izgled kontakt forme sa umetnutim poljima i poljima pune širine
Ovaj izgled će također imati dva odvojena polja za ime i prezime. Otvorite postavke modula obrasca za kontakt i promijenite ID i polje naslova za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Postavite polje ID i naslov na Ime.
U postavkama polja za ime otvorite postavke izgleda i postavite Napravi punu širinu na Ne.
- Napravite punu širinu: NE
Promenite redosled polja telefona i predmeta tako da telefon bude ispred teme.
Otvorite postavke polja za Email, Telefon i Predmet i postavite izgled na punu širinu.
- Napravite punu širinu: DA
Prilagodba dizajna kontakt forme
Otvorite postavke reda, a zatim otvorite postavke kolone 2. Postavite boju pozadine.
- Pozadina: #DBC2B3
U postavkama kolone 2 idite na karticu Dizajn i dodajte padding.
- Padding (gore, dno, lijevo i desno: 50px
Odaberite ikonu mobilnog telefona da promijenite postavke odziva. Postavite padding za mobilni.
- Padding (gore, dno, lijevo i desno): 30px
Zatim dodajte senku okvira u kolonu.
Na kraju, otvorite postavke modula Kontakt obrazac i promijenite boju teksta polja.
- Boja teksta polja: #000000
Konačan rezultat primjera 2
Evo konačnog rezultata drugog rasporeda.
Treći primjer
Za treći izgled, imat ćemo kontakt formu na lijevoj strani i Blurb module na desnoj strani. Počnimo s promjenom strukture stupaca reda koji sadrži Blurb module.
Premjestite modul adrese u desnu kolonu.
Zatim premjestite tekstualni modul „Kontaktirajte nas“ u lijevu kolonu, a zatim izbrišite preostali prazan red.
Premjestite modul obrasca za kontakt u lijevu kolonu, ispod tekstualnog modula „Kontaktirajte nas“. Izbrišite preostali prazan dio.
Otvorite postavke linije, ispod kartice Dizajn i isključite Koristite prilagođenu širinu oluka
- Koristi prilagođenu širinu oluka: NE
Dodajte kod u prilagođeni CSS glavnog elementa kako biste vertikalno poravnali module Blurb i Contact Form.
align-items:center;
Otvorite postavke reda, a zatim otvorite postavke kolona 1. Na kartici Dizajn idite na postavke ivice i uklonite ivicu. Ponovite korake da uklonite ivicu iz kolone 2.
- Širina desne ivice: 0px
Promjena izgleda kontakt forme
Za treći dizajn ćemo ostaviti širine polja kao što su, međutim, otvorite postavke kontakt forme i promijenite redoslijed broja telefona i polja predmeta tako da telefon bude na prvom mjestu.
Konačan rezultat primjera 3
Evo konačnog rezultata trećeg izgleda.
Pročitajte takođe: Divi: Kako prikazati modul Fullwidth Header na cijelom ekranu
Četvrti primjer
Za četvrti i konačni izgled, modul Kontakt obrazac će biti na lijevoj, a Blurb moduli na desnoj. Opet ćemo početi promjenom strukture stupaca reda koji sadrži Blurb module.
Premjestite modul adrese u desnu kolonu.
Zatim premjestite modul Kontakt obrazac u lijevu kolonu. Izbrišite preostali prazan dio.
Otvorite postavke linije, na kartici Dizajn i onemogućite Koristite prilagođenu širinu oluka.
- Koristi prilagođenu širinu oluka: NE
Dodajte kod u prilagođeni CSS glavnog elementa kako biste vertikalno poravnali module Blurb i Contact Form.
align-items:center;
Otvorite postavke reda, a zatim otvorite postavke kolona 1. Na kartici Dizajn idite na postavke ivice i uklonite ivicu.
- Širina desne ivice: 0px
Zatim otvorite postavke kolone 2 i ponovite korake za uklanjanje ivice.
- Širina desne ivice: 0px
Otvorite postavke tekstualnog modula za tekst "Kontaktirajte nas" i centrirajte tekst.
- Poravnanje teksta: Centrirano
Promijenjen izgled kontakt forme sa umetnutim poljima i poljima pune širine
Za ovaj dizajn, sva naša polja će biti pune širine. Otvorite postavke modula obrasca za kontakt, a zatim otvorite postavke za svako polje. Na kartici Dizajn izaberite Raspored i definirati Napravite punu širinu na DA.
Nakon što kreirate svako polje pune širine, obrazac bi trebao izgledati ovako.
Sada promijenite ID i polje naslova za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Postavite polje ID i naslov na Ime.
Promenite redosled polja telefona i predmeta tako da telefon bude ispred teme.
Prilagođavanje dizajna modula obrasca za kontakt
U postavkama modula, na kartici Dizajn, postavite boju teksta polja na crnu.
- Boja teksta polja: #000000
Otvorite postavke odjeljka i dodajte boju pozadine.
- Pozadina: #DBC2B3
Na kraju dodajte masku za pozadinu.
- Pozadinska maska: Arch
- Transformacija maske: horizontalna
Da bi maska pozadine bolje radila na mobilnom uređaju, koristimo responzivna podešavanja.
- Transformacija maske (telefon): horizontalna i rotacija
Konačni rezultat
Evo konačnog rezultata četvrtog izgleda.
Konačni rezultati
Pogledajmo još jednom sve naše primjere.
Prvi primjer
Drugi primjer
Treći primjer
Četvrti primjer
Preuzmite DIVI sada!!!
zaključak
Posjedovanje atraktivnog obrasca za kontakt može povećati vaše konverzije i omogućiti vašim posjetiteljima da se povežu direktno s vama.
Kao što smo pokazali u ovom članku, možete koristiti inline i fullwidth opcije polja da kreirate različite izglede i rasporede za svoju formu, a Divi-jeve ugrađene opcije dizajna omogućavaju vam da kreirate jedinstvene i atraktivne dizajne kako biste pomogli formu da se istakne.
Nadamo se da će ova tehnika dodati još jednu korisnu vještinu dizajna za buduće projekte.
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
