Želite li stvoriti a kontakt obrazac na svoju web stranicu zahvaljujući modulu Kontakt obrazac od Divi? Evo 3 ideje za prilagodbu…
Les obrasci Podaci za kontakt bitan su dio mnogih web stranica. Njihov glavni cilj je biti intuitivan i pomoći posjetiteljima da lako stupe u kontakt.
Ali to ne znači da sve obrasci kontakti moraju imati precizan i unaprijed definiran izgled. Jednostavno možete kombinirati intuitivno iskustvo s prekrasnim dizajnom. To je upravo ono što ćemo učiniti u ovom vodiču.
Podijelit ćemo 3 jedinstvena dizajna modula Kontakt obrazac de Divi koje možete stvoriti koristeći samo Divi ugrađene opcije.
Idemo!
Pregled dizajna modula Divi Contact Form
Desktop verzije
Započnimo tako što ćemo pogledati desktop verziju različitih dizajna modula Kontakt obrazac koje ćemo dizajnirati u ovom vodiču.
Mobilne verzije
A evo kako izgledaju na manjim zaslonima:
Preuzmite DIVI sada!!!
Kako prilagoditi modul Divi Contact Form: 3 primjera
Pročitajte također: Divi: Kako stvoriti odjeljak za članove tima kao vrtuljak
Izrada kontakt forme #1
Dodajte novi odjeljak
Gradijentna pozadina
Počnimo s prvim primjerom! Dodajte novi odjeljak, idite na postavke pozadine i dodajte gradijentnu pozadinu.
- Gradijent zaustavljanja
- 34%: #4c00ff
- 34%: #ffd400
- Tip: Okrugli
- Smjer gradijenta: dolje lijevo
razmak
Zatim idite na opciju Razmak na kartici Dizajn i promijenite postavke na sljedeći način.
- Razmak (gornji i donji dio): 200 px
Dodajte novi redak
Struktura stupca
Dodajte novi red pomoću sljedeće strukture stupaca:
Stupac 1: Boja pozadine
Bez dodavanja modula, otvorite postavke retka, zatim postavke stupca 1 i dodajte boju pozadine u nastavku
- Pozadina: rgba(255,255,255,0.55)
Stupac 1: Pozadinska slika
Također dodajte pozadinsku sliku u prvi stupac.
- Ponavljanje pozadinske slike: bez ponavljanja
- Mješavina pozadinske slike: zaslon
Stupac 2: Pozadinska slika
I bijela boja pozadine za drugi stupac.
- Pozadina: #ffffff
dimenzioniranje
Zatim promijenite parametre veličine.
- Izjednačavanje visine stupaca: DA
razmak
Također uklonite sve zadane prilagođene podloge.
- Razmak (gornji i donji dio): 0 px
Radijus ruba stupca
Dodajte radijus obruba u oba stupca u naprednoj kartici.
border-radius: 10px;
Dodajte tekstualni modul u stupac 1
Dodajte sadržaj
Vrijeme je da počnete dodavati različite module! Dodajte tekstualni modul u prvi stupac sa sadržajem po vašem izboru.
Postavke teksta
Zatim idite na karticu Dizajn modula Tekst i napravite neke promjene.
- Tekst:
- Font: Zadovolji
- Boja teksta: #333333
- Veličina: 100px
- Visina linije: 1 em
- Poravnanje: Središte
razmak
Dodajte i prilagođene vrijednosti ispunjavanja.
- Ispuna (vrh): 600 px
- Ispuna (dno): 100px
Kutija sjena
Da biste dizajnu dodali dubinu, upotrijebite suptilnu kutijastu sjenu.
- Jačina zamućenja sjene okvira: 80px
- Snaga širenja sjene okvira: -16px
- Boja sjene: rgba(0,0,0,0.3)
Dodajte modul slike u stupac 2
Prenesite sliku
Nastavite dodavanjem modula slike u drugi stupac. Učitajte sliku po svom izboru.
dimenzioniranje
Promijenite postavke veličine za ovaj modul.
- Širina: 25% (stolno računalo), 50% (tablet), 60% (telefon)
- Poravnanje modula: središte
razmak
Stvorite preklapanje koristeći negativnu gornju marginu.
- Marža (gornja): -60%
granica
Promijenite granice slike na sljedeći način:
- Zaobljeni uglovi: 100 px (svi uglovi)
Dodajte modul Text #1 stupcu 2
Dodajte sadržaj
Odmah ispod modula Image dodajte modul Text sa sadržajem.
Postavke teksta
Uredite postavke teksta za ovaj modul.
- Tekst:
- Font: Zadovolji
- Boja teksta: #333333
- Veličina teksta: 44px
- Orijentacija: Centar
Dodajte modul Text #2 stupcu 2
Dodajte sadržaj
Zatim dodajte još jedan tekstualni modul.
Postavke teksta
Također promijenite postavke teksta za ovaj modul.
- Tekst:
- Font: Arial
- Boja teksta: #ffd400
- Boja teksta: 18px
- Razmak između slova: 2px
- Orijentacija: Centar
razmak
Zatim dodajte donju marginu.
- Margina (donja): 100 px
Dodajte modul obrasca za kontakt u stupac 2
Aktivirajte opciju "Make Fullwidth" u polju za ime i e-poštu
Posljednji potreban modul je modul Kontakt obrazac. Prije bilo čega drugog, otvorite polja za ime i e-poštu i promijenite izgled.
- Napravi punu širinu: da
Dodajte polje predmeta
Kako bismo izradili ovaj dizajn, dodali smo još jedno polje za temu.
spam zaštita
Zatim onemogućite captcha opciju.
- Koristite osnovni Captcha: NE
Postavke teksta polja obrasca
Napravite neke promjene u tekstualnim postavkama polja obrasca ovog modula obrasca za kontakt
- Polja:
- Boja pozadine: rgba(255,255,255,0)
- Font: Arial
- Težina fonta: svijetlo
- Veličina teksta: 16px
- Razmak između slova: 2px
Postavke gumba
Mijenjamo i izgled tipki.
- Koristi prilagođenu veličinu za gumb: DA
- Dugme :
- Boja teksta: #ffd400
- Širina obruba: 0 piksela
- Razmak između slova: 2px
- Font: Arial
- Stil fonta: U
- Boja podcrtavanja: #4c00ff
razmak
Zatim dodajte neke prilagođene vrijednosti ispune.
- Ispuna (dno): 100 px
- Razmak (lijevo i desno): 50px
granica
I dodajte suptilnu donju granicu svakom od polja.
- Širina donjeg ruba unosa: 2 px
- Boja donjeg ruba ulaza: #efefef
Razmak pojedinih polja
Na kraju, dodajte donju marginu svakom od pojedinačnih polja osim polja poruke.
- Margina (donja): 20 px
Izrada kontakt forme #2
Dodajte novi odjeljak
Gradijentna pozadina
Prijeđimo na sljedeći primjer! Dodajte novi odjeljak s gradijentnom pozadinom.
- Gradijent zaustavljanja:
- 50%: #562fef
- 50%: #ffffff
- Vrsta gradijenta: linearni
razmak
Dodajte prilagođene vrijednosti ispune postavkama razmaka u ovom odjeljku.
- Razmak (gornji i donji dio): 200 px
Dodajte novi redak
Struktura stupca
Dodajte novi red pomoću sljedeće strukture stupaca:
Boja pozadine
Bez dodavanja modula, otvorite postavke retka i dodajte boju pozadine retku.
- Boja pozadine: #ffffff
Gradijent pozadine u 2 stupca
Dodajte gradijent pozadine drugom stupcu u retku.
- Gradijent zaustavljanja:
- 0%: #9932ff
- 100%: #562fef
- Tip: linearni
- Upravljanje: 160 stupnjeva
dimenzioniranje
Također promijenite parametre veličine linije.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Izjednačavanje visine stupaca: DA
razmak
Zatim dodajte prilagođene vrijednosti razmaka.
- Crta :
- Razmak (gornji i donji dio): 0 px
- Stupac 1:
- Razmak: 100 px (gornje), 50 px (dno)
- Razmak (lijevo i desno): 50px
- Stupac 2:
- Razmak (gornji i donji dio): 100 px
- Razmak (lijevo i desno): 50px
granica
Dodajte '20px' svakom rubu retka.
Kutija sjena
Na kraju dodajte suptilnu kutijastu sjenu na liniju.
- Jačina zamućenja sjene okvira: 45px
- Snaga širenja sjene okvira: -11px
- Boja senke: rgba(0,0,0,0.3)
Dodajte tekstualni modul u stupac 1
Dodajte sadržaj
Vrijeme je da počnete dodavati module! Počnite s tekstualnim modulom u prvom stupcu.
Postavke teksta
Uredite postavke teksta za ovaj modul.
- Tekst:
- Težina fonta: Ultra podebljano
- Stil fonta: TT
- Boja: #562fef
- Veličina: 100 px (stolno računalo), 80 px (tablet), 60 px (telefon)
- Razmak između slova: -10px
- Visina linije: 1 em
razmak
Također dodajte donju marginu.
- Margina (donja): 50px
Dodajte modul obrasca za kontakt u stupac 1
Elementi
Drugi modul koji će nam trebati u prvom stupcu je modul obrasca za kontakt. Nakon što ste dodali modul, isključite opciju 'Use Basic Captcha'.
- Koristite osnovni Captcha: NE
Postavke teksta polja obrasca
Zatim promijenite boju pozadine polja obrasca.
- Boja pozadine polja: #ffffff
Postavke gumba
Također se poigrajte s postavkama gumba kako biste umjesto tekstualnog gumba stvorili gumb ikone.
- Koristi prilagođene stilove za gumb: DA
- Dugme :
- Veličina teksta: 73px
- Boja teksta: rgba(0,0,0,0) (zadano),
- Boja pozadine: rgba(255,255,255,0) (prelazi se)
- Širina obruba: 0 px
- Boja ikone: #9932ff
- Prikaži samo ikonu pri lebdenju za gumb: NE
Kutija sjena
Na kraju dodajte suptilnu sjenu okvira u svako polje.
- Snaga zamućenja sjene okvira: 36 px
- Snaga širenja sjene okvira: -14px
- Boja sjene: rgba(0,0,0,0.3)
Dodajte tekstualni modul u stupac 2
Dodajte sadržaj
Prvi modul koji će nam trebati u drugom stupcu je još jedan tekstualni modul.
Postavke teksta
Nakon što dodate sadržaj, uredite postavke teksta za ovaj modul.
- Tekst:
- Težina fonta: Ultra podebljano
- Stil fonta: TT
- Boja: #ffffff
- Veličina: 23px
- Razmak između slova: -1px
Dodajte Blurb modul #1 u stupac 2
Dodajte sadržaj
Drugi modul koji će nam trebati je Blurb modul. Samo naprijed i unesite neke podatke za kontakt.
Odaberite ikonu
Zatim odaberite odgovarajuću ikonu.
Postavke ikona
Promijenite postavke za ovu ikonu.
- Boja ikone: #ffffff
- Položaj slike/ikone: desno
Postavke teksta naslova
Nastavite tako što ćete sljedeće promijeniti postavke teksta naslova.
- Veličina teksta naslova: 15px
- Razmak između slova naslova: -0,5 piksela
razmak
I dodajte gornju marginu.
- Margina (gornja): 120 px
Dvaput klonirajte Blurb modul
Nakon što ste završili s uređivanjem prvog Blurb modula, možete dva puta klonirati modul.
Izmijenite sadržaj i ikonu dvaju duplikata
Uredite sadržaj i ikone dvaju duplikata kako biste s posjetiteljima podijelili različite vrste kontakt podataka.
Promijenite razmak između dva duplikata
Također treba promijeniti gornju marginu dvaju duplikata.
- Margina (gornja): 30 px
Izrada kontakt forme #3
Dodajte novi odjeljak
Boja pozadine
Prijeđimo na treći primjer! Dodajte novi odjeljak sa sljedećom bojom pozadine:
- Boja pozadine: #3491CE
razmak
Nastavite dodavanjem prilagođenih vrijednosti ispune u postavkama razmaka.
- Razmak (gornji i donji dio): 200 px
Dodajte redak #1
Struktura stupca
Zatim dodajte novi red koristeći sljedeću strukturu stupaca:
Dodajte tekstualni modul
Dodajte sadržaj
Vrijeme je da počnete dodavati module! Prvi modul koji ćemo morati dodati u prvi stupac je tekstualni modul. Unesite sadržaj po izboru.
Postavke teksta
Zatim promijenite postavke teksta.
- Tekst:
- Težina fonta: Ultra podebljano
- Boja teksta: rgba(255,255,255,0.24)
- Veličina teksta: 100 px (stolno računalo), 70 px (tablet), 36 px (telefon)
- Visina linije: 1 em
- Orijentacija: Centar
razmak
Također dodajte negativnu donju marginu.
- Margina (donja): -100px
Dodajte redak 2
Struktura stupca
Drugi redak koji nam je potreban da dovršimo ovaj primjer sadrži sljedeću strukturu stupaca:
Gradijentna pozadina
Bez dodavanja modula, otvorite postavke linije i dodajte gradijentnu pozadinu.
- Gradijent zaustavljanja:
- 50%: #11CE84
- 50%: #10C77F
- Vrsta gradijenta: linearni
- Upravljanje: 160 stupnjeva
dimenzioniranje
Također promijenite parametre dimenzioniranja.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Izjednačavanje visine stupaca: DA
razmak
Zatim dodajte neke vrijednosti ispune.
- Razmak: 150 px (gornje), 100 px (dno)
- Razmak: 50 px (lijevo i desno)
granica
Zatim idite na postavke obruba i dodajte '20px' u svaki kut. Također koristite donji rub.
- Zaobljeni uglovi: 20 px
- Širina donjeg ruba: 10 px
- Boja donjeg ruba: #1ba35a
Kutija sjena
Dovršite postavke linije dodavanjem suptilne sjene okvira.
- Snaga zamućenja sjene okvira: 80 px
- Snaga širenja sjene okvira: -24px
- Boja sjene: rgba(0,0,0,0.3)
Dodajte modul obrasca za kontakt u stupac 1
Aktivirajte opciju "Make Fullwidth" u polju za ime i e-poštu
Prvi modul koji nam treba u prvom stupcu retka je modul kontakt obrasca. Otvorite polje za ime i e-poštu i promijenite postavke izgleda.
- Napravi punu širinu: DA
Elementi
Zatim onemogućite captcha.
- Koristite osnovni Captcha: NE
Postavke gumba
I promijenite postavke gumba.
- Koristi prilagođene stilove za gumb: DA
- Boja teksta gumba: #ffffff
- Gradijent zaustavljanja:
- 50%: #3AA0E3
- 50%: #3491CE
- Vrsta gradijenta: linearni
- Smjer gradijenta: 155 stupnjeva -
- Širina obruba gumba: 0 piksela
- Polumjer obruba gumba: 10 px
- Snaga širenja sjene okvira: -2px
- Boja sjenila: #0a60af
Vidi također: Divi: Kako prilagoditi košaricu i ikone pretraživanja modula "Fullwidth Menu"
granica
Svakom polju također dodajemo '5px' zaobljenih kutova.
Dodajte tekstualni modul u stupac 2
Dodajte sadržaj
U drugom stupcu, prvi modul koji će nam trebati je tekstualni modul. Samo naprijed i unesite neki sadržaj.
Boja pozadine
Zatim promijenite boju pozadine.
- Pozadina: rgba(255,255,255,0.13)
Postavke teksta
Također uredite s postavkama teksta.
- Tekst:
- Težina fonta: svijetlo
- Boja teksta: #ffffff
- Veličina teksta: 15px
- Razmak između slova: -0,5 px
razmak
I dodajte prilagođenu podlogu kako biste modulu dali prostora za disanje.
- Razmak (gornji i donji dio): 12 px
- Razmak (lijevo i desno): 10px
granica
Također dodajemo '20px' u gornji lijevi i donji lijevi kut. Povrh toga, dodat ćemo lijevu granicu.
- Zaobljeni uglovi: 20 px (gore lijevo i dolje lijevo)
- Širina lijevog obruba: 34 px
- Boja lijevog ruba: #edf000
vidljivost
Kako bi ovaj dizajn odgovarao različitim veličinama zaslona, onemogućit ćemo tekstualni modul na telefonu i tabletu.
Dvaput klonirajte tekstualni modul
Nakon što završite s uređivanjem prvog tekstualnog modula, dvaput klonirajte modul.
Izmijenite sadržaj dvaju duplikata
Promijenite sadržaj dvaju duplikata u nešto drugo.
Promijenite razmak između dva duplikata
I dodajte gornju marginu kako biste stvorili prostor između svakog od modula.
- Margina (gornja): 20 px
Izmijenite obrub dvaju duplikata
Na kraju, promijenite boju lijevog obruba svakog od duplikata pojedinačno.
- Boja 1: #00faff
- Boja 2: #00f76f
Pogledajte i naš članak o Kako stvoriti responzivni klizač harmonike
pregled
Desktop verzija
Sada kada smo prošli kroz sve korake, bacimo konačni pogled na dizajn modula Divi Contact Form na stolnom računalu.
Mobilni
A evo što možete očekivati od Divi dizajna modula obrasca za kontakt na manjim veličinama zaslona:
Preuzmite DIVI sada!!!
Zaključak
U ovom smo postu podijelili 3 sjajna dizajna modula obrasca za kontakt Divi koje možete jednostavno koristiti i modificirati za bilo koje web mjesto koje izradite.
Les obrasci Kontakti su bitan dio mnogih web stranica, pa je važno osigurati da vaš dizajn uvjeri posjetitelje da stupe u kontakt.
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.
...
