Potrebno je kombinirati umetnuta polja i polja pune širine modula Kontakt obrazac de Divi ?
Le kontakt obrazac je važan element koji treba uključiti na svoju web stranicu ako želite uhvatiti e-poštu i pretvoriti svoje posjetitelje u kupce.
Modul Kontakt obrazac de Divi može se lako prilagoditi za stvaranje obrasci 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 pune širine.
U ovom vodiču predstavit ćemo vam četiri jedinstvene mogućnosti izgleda kontakt obrazac Divi pomoću polja u liniji i pune širine.
Krenimo!
pregled
Evo pregleda onoga što ćemo dizajnirati.
Prvi raspored
Drugi raspored
Treći raspored
Četvrti izgled
Što trebate za početak
Prije nego što počnemo, instalirati i aktivirati temu Divi i provjerite imate li najnoviju verziju Divi na svojoj web stranici.
Sada ste spremni za početak!
4 ogledna izgleda za Divijev modul obrasca za kontakt koji koriste ugrađena polja i polja pune širine
Odaberite unaprijed definirani izgled
Svaki od 4 predloška je modificiran prema izgledu kontakt stranice za popravak obuće Paket izgleda za popravak cipela, koji možete pronaći u Divi biblioteci.
Dodajte novu stranicu na svoju web stranicu i dodijelite joj naslov, a zatim odaberite opciju Koristite Divi Builder.
Za ovaj ćemo primjer koristiti unaprijed napravljeni izgled iz Divi knjižnice, pa odaberite Pregledaj rasporede.
Pronađite i odaberite izgled kontaktne stranice za popravak obuće.
odabrati Koristite ovaj izgled da biste dodali izgled svojoj stranici.
Sada smo spremni dizajnirati svoje primjere.
Prvi raspored
Prvo pomaknite redak koji sadrži modul Kontakt obrazac na odjeljak iznad, odmah ispod linije s modulima Blurb. Zatim možete izbrisati preostali prazan odjeljak.
Otvorite postavke linija i dodajte lijevi i desni ispun,
- Ispuna (lijevo i desno): 15%
Odaberite responzivne opcije i postavite ispunu za mobitel.
- Ispuna (lijevo i desno): 5%
Promijenjen je izgled obrasca za kontakt s umetnutim poljima i poljima pune širine
Za ovaj izgled izradit ćemo dva odvojena polja za ime i prezime.
Otvorite postavke modula Obrazac za kontakt i promijenite polja ID i Naslov za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Polje ID i Naslov postavite na Ime.
U postavkama polja imena otvorite postavke izgleda i postavite Make Fullwidth na Ne.
- Napravi punu širinu: NE
Zatim, pod postavkama kontakt obrazac, promijenite redoslijed predmeta i telefona tako da telefon bude naveden prije predmeta.
Otvorite postavke izgleda polja Predmet i postavite polje na punu širinu.
- Napravi punu širinu: DA
Prilagodba dizajna obrasca za kontakt
Sada promijenimo nekoliko postavki kako bismo dovršili dizajn. Idite na karticu Dizajn u postavkama modula Obrazac za kontakt.
Prvo promijenite boju pozadine gumba.
- Pozadina gumba: #DBC2B3
Dodajte gornju marginu gumbu.
- Margina gumba (gornja): 10 px
Na kraju, idite na postavke obruba i dodajte zaobljene kutove poljima.
- Ulazi zaobljeni kutovi: 30px
Vidi također: Divi: Kako dodati responzivni logotip u modul "Fullwidth Menu".
Konačni rezultat primjera 1
Evo konačnog rezultata na stolnom računalu i mobilnom uređaju.
Drugi primjer
Za naš drugi primjer, premjestit ćemo Blurb module na lijevu stranu stranice i postaviti obrazac za kontakt na desnu stranu stranice. Premjestite Blurb module u stupac.
Promijenite izgled retka.
Otvorite postavke dizajna linije i isključite Koristite prilagođenu širinu oluka.
- Koristite prilagođenu širinu oluka: NE
Dodajte kod prilagođenom CSS-u glavnog elementa kako biste okomito poravnali module Blurb i Contact Form.
align-items:center;
Sada moramo ukloniti tanku granicu između stupaca. Otvorite postavke retka, zatim otvorite postavke stupca 1. Na kartici Dizajn idite na postavke obruba i uklonite obrub.
- Širina desnog obruba: 0 px
Zatim otvorite postavke stupca 2 i ponovite korake za uklanjanje obruba.
- Širina desnog obruba: 0 px
Postavite tekst "Kontaktirajte nas" da bude centriran.
Premjestite obrazac za kontakt u desni stupac. Izbrišite preostali prazan odjeljak.
Promijenjen je izgled obrasca za kontakt s umetnutim poljima i poljima pune širine
Ovaj će izgled također imati dva odvojena polja za ime i prezime. Otvorite postavke modula Obrazac za kontakt i promijenite polja ID i Naslov za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Polje ID i Naslov postavite na Ime.
U postavkama polja imena otvorite postavke izgleda i postavite Make Fullwidth na Ne.
- Napravi punu širinu: NE
Promijenite redoslijed polja telefona i predmeta tako da telefon bude ispred predmeta.
Otvorite postavke polja za E-poštu, Telefon i Predmet i postavite izgled na punu širinu.
- Napravi punu širinu: DA
Prilagodba dizajna obrasca za kontakt
Otvorite postavke retka, zatim otvorite postavke stupca 2. Postavite boju pozadine.
- Pozadina: #DBC2B3
U postavkama stupca 2 idite na karticu Dizajn i dodajte ispunu.
- Ispuna (gore, dolje, lijevo i desno: 50 px
Odaberite ikonu mobilnog telefona da biste promijenili postavke responzivnosti. Postavite ispunu za mobitel.
- Razmak (gore, dno, lijevo i desno): 30 px
Zatim dodajte sjenu okvira u stupac.
Na kraju otvorite postavke modula Contact Form i promijenite boju teksta polja.
- Boja teksta polja: #000000
Konačni rezultat primjera 2
Evo konačnog rezultata drugog rasporeda.
Treći primjer
Za treći izgled imat ćemo obrazac za kontakt s lijeve strane i Blurb module s desne strane. Započnimo promjenom strukture stupca retka koji sadrži Blurb module.
Premjestite adresni modul u desni stupac.
Zatim premjestite tekstualni modul "Kontaktirajte nas" u lijevi stupac, zatim izbrišite preostali prazan redak.
Premjestite modul obrasca za kontakt u lijevi stupac ispod tekstualnog modula "Kontaktirajte nas". Izbrišite preostali prazan odjeljak.
Otvorite postavke linija, pod karticom Dizajn i isključite Koristite prilagođenu širinu oluka
- Koristite prilagođenu širinu oluka: NE
Dodajte kod prilagođenom CSS-u glavnog elementa kako biste okomito poravnali module Blurb i Contact Form.
align-items:center;
Otvorite postavke retka, zatim otvorite postavke stupca 1. Na kartici Dizajn idite na postavke obruba i uklonite obrub. Ponovite korake za uklanjanje granice iz stupca 2.
- Širina desnog obruba: 0 px
Promjena izgleda kontakt forme
Za treći dizajn ostavit ćemo širine polja kakve jesu, ali otvorite postavke obrasca za kontakt i promijenite redoslijed telefonskog broja i polja predmeta tako da telefon bude prvi.
Konačni rezultat primjera 3
Evo konačnog rezultata trećeg izgleda.
Pročitajte također: Divi: Kako prikazati modul Fullwidth Header na cijelom zaslonu
Četvrti primjer
Za četvrti i posljednji izgled, modul Contact Form bit će s lijeve strane, a moduli Blurb s desne strane. Opet ćemo započeti promjenom strukture stupaca retka koji sadrži Blurb module.
Premjestite adresni modul u desni stupac.
Zatim premjestite modul kontakt obrasca u lijevi stupac. Izbrišite preostali prazan odjeljak.
Otvorite postavke linija, u kartici Dizajn i onemogućite Koristite prilagođenu širinu oluka.
- Koristite prilagođenu širinu oluka: NE
Dodajte kod prilagođenom CSS-u glavnog elementa kako biste okomito poravnali module Blurb i Contact Form.
align-items:center;
Otvorite postavke retka, zatim otvorite postavke stupca 1. Na kartici Dizajn idite na postavke obruba i uklonite obrub.
- Širina desnog obruba: 0 px
Zatim otvorite postavke stupca 2 i ponovite korake za uklanjanje obruba.
- Širina desnog obruba: 0 px
Otvorite postavke tekstualnog modula za tekst "Kontaktirajte nas" i centrirajte tekst.
- Poravnanje teksta: centrirano
Promijenjen je izgled obrasca za kontakt s umetnutim poljima i poljima pune širine
Za ovaj dizajn sva će naša polja biti pune širine. Otvorite postavke modula Obrazac za kontakt, zatim otvorite postavke za svako polje. Na kartici Dizajn odaberite Raspored i definirati Napravi punu širinu sur DA.
Nakon što stvorite svako polje pune širine, obrazac bi trebao izgledati ovako.
Sada promijenite polje ID i naslov za polje Prezime u Ime.
Dodajte novo polje ispod polja Ime. Polje ID i Naslov postavite na Ime.
Promijenite redoslijed polja telefona i predmeta tako da telefon bude ispred predmeta.
Prilagodba dizajna modula obrasca za kontakt
U postavkama modula, u 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 pozadine.
- Pozadinska maska: Arch
- Transformacija maske: horizontalna
Kako bi pozadinska maska bolje funkcionirala na mobilnom telefonu, upotrijebimo responzivne postavke.
- Transformacija maske (telefon): vodoravna i rotacija
Konačni rezultat
Evo konačnog rezultata četvrtog izgleda.
Konačni rezultati
Pogledajmo sve naše primjere još jednom.
Prvi primjer
Drugi primjer
Treći primjer
Četvrti primjer
Preuzmite DIVI sada!!!
Zaključak
Privlačan obrazac za kontakt može povećati vaše konverzije i omogućiti posjetiteljima da se izravno povežu s vama.
Kao što smo pokazali u ovom članku, možete koristiti opcije umetnutog polja i polja pune širine za stvaranje različitih izgleda i rasporeda za vaš obrazac, a Divi ugrađene opcije dizajna omogućuju vam stvaranje jedinstvenih i atraktivnih dizajna kako bi se obrazac istaknuo.
Nadamo se da će ova tehnika dodati još jednu korisnu dizajnersku vještinu za buduće projekte.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
