Želite li kreirati a kontakt formular na vašu web stranicu zahvaljujući modulu Kontakt obrazac od Divi? Evo 3 ideje za prilagođavanje…
Les forme Kontakt podaci su bitan dio mnogih web stranica. Njihov glavni cilj je biti intuitivni i pomoći posjetiteljima da lakše stupe u kontakt.
Ali to ne znači da je sve forme kontakti moraju imati precizan i unapred definisan izgled. Lako možete kombinirati intuitivno iskustvo s prekrasnim dizajnom. To je upravo ono što ćemo raditi u ovom tutorijalu.
Podijelit ćemo 3 jedinstvena dizajna modula Kontakt obrazac de divi koje možete kreirati koristeći samo Divi ugrađene opcije.
Idemo!
Pregled dizajna modula Divi Kontakt obrazac
Desktop verzije
Počnimo tako što ćemo pogledati desktop verziju različitih dizajna modula Kontakt obrazac koje ćemo dizajnirati u ovom tutorijalu.
Mobilne verzije
A evo kako oni izgledaju na manjim veličinama ekrana:
Preuzmite DIVI sada!!!
Kako prilagoditi modul Divi kontakt forme: 3 primjera
Pročitajte takođe: Divi: Kako napraviti odjeljak za članove tima kao vrtuljak
Kreiranje kontakt forme #1
Dodajte novi odjeljak
Gradient background
Počnimo s prvim primjerom! Dodajte novi odjeljak, idite na postavke pozadine i dodajte gradijent pozadinu.
- Gradijent se zaustavlja
- 34%: #4c00ff
- 34%: #ffd400
- Tip: Okrugla
- Smjer gradijenta: dolje lijevo
razmak
Zatim idite na opciju Spacing na kartici Dizajn i promijenite postavke na sljedeći način.
- Padding (gore i dno): 200px
Dodajte novu liniju
Struktura kolone
Dodajte novi red koristeći sljedeću strukturu stupaca:
Kolona 1: Boja pozadine
Bez dodavanja modula, otvorite postavke reda, zatim postavke kolone 1 i dodajte boju pozadine ispod
- Pozadina: rgba(255,255,255,0.55)
Kolona 1: Pozadinska slika
Također dodajte sliku pozadine u prvu kolonu.
- Ponavljanje pozadinske slike: Bez ponavljanja
- Mješavina pozadinske slike: Zaslon
Kolona 2: Pozadinska slika
I bijelu boju pozadine za drugu kolonu.
- Pozadina: #ffffff
dimenzioniranje
Zatim izmijenite parametre veličine.
- Izjednačavanje visine stupaca: DA
razmak
Također uklonite sve zadane prilagođene dodatke.
- Padding (gore i dno): 0px
Radijus granice kolone
Dodajte radijus ivice u obje kolone u naprednoj kartici.
border-radius: 10px;
Dodajte tekstualni modul u kolonu 1
Dodaj sadržaj
Vrijeme je da počnete sa dodavanjem različitih modula! Dodajte tekstualni modul u prvu kolonu sa sadržajem po vašem izboru.
Podešavanja teksta
Zatim idite na karticu Dizajn modula Tekst i napravite neke promjene.
- Tekst:
- Font: zadovoljiti
- Boja teksta: #333333
- Veličina: 100px
- Visina linije: 1 em
- Poravnanje: centar
razmak
Dodajte i prilagođene vrijednosti ispunjavanja.
- Padding (vrh): 600px
- Padding (dole): 100px
Kutija sjena
Da biste dizajnu dodali dubinu, koristite suptilnu sjenku okvira.
- Box Shadow Blur Snaga: 80px
- Jačina širenja senke okvira: -16px
- Boja senke: rgba(0,0,0,0.3)
Dodajte modul slike u kolonu 2
Pošaljite sliku
Nastavite dodavanjem modula slike u drugu kolonu. Otpremite sliku po vašem izboru.
dimenzioniranje
Promijenite postavke veličine za ovaj modul.
- Širina: 25% (desktop), 50% (tablet), 60% (telefon)
- Poravnanje modula: centar
razmak
Napravite preklapanje koristeći negativnu gornju marginu.
- Marža (vrh): -60%
Granica
Izmijenite granice slike na sljedeći način:
- Zaobljeni uglovi: 100px (svi uglovi)
Dodajte modul teksta #1 u kolonu 2
Dodaj sadržaj
Odmah ispod slikovnog modula dodajte tekstualni modul sa sadržajem.
Podešavanja teksta
Uredite postavke teksta za ovaj modul.
- Tekst:
- Font: zadovoljiti
- Boja teksta: #333333
- Veličina teksta: 44px
- Orijentacija: centar
Dodajte modul teksta #2 u kolonu 2
Dodaj sadržaj
Zatim dodajte još jedan tekstualni modul.
Podešavanja 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): 100px
Dodajte modul Kontakt obrazac u kolonu 2
Aktivirajte opciju "Napravi punu širinu" u polju Ime i email
Posljednji potreban modul je modul Kontakt obrazac. Prije nego što učinite bilo šta drugo, otvorite polja za ime i e-poštu i promijenite izgled.
- Napravite punu širinu: da
Dodajte polje predmeta
Da bismo kreirali ovaj dizajn, dodali smo još jedno polje za predmet.
Zaštita od neželjene pošte
Zatim onemogućite captcha opciju.
- Koristite Basic Captcha: NE
Postavke teksta polja obrasca
Napravite neke promjene u postavkama teksta polja obrasca ovog modula obrasca za kontakt
- Polja:
- Boja pozadine: rgba (255,255,255,0)
- Font: Arial
- Težina fonta: Light
- Veličina teksta: 16px
- Razmak između slova: 2px
Postavke gumba
Mijenjamo i izgled dugmadi.
- Koristi prilagođenu veličinu za dugme: DA
- Dugme:
- Boja teksta: #ffd400
- Širina ivice: 0 piksela
- Razmak između slova: 2px
- Font: Arial
- Stil fonta: U
- Boja podvlačenja: #4c00ff
razmak
Zatim dodajte neke prilagođene vrijednosti dopuna.
- Padding (dole): 100px
- Padding (lijevo i desno): 50px
granica
I dodajte suptilnu donju ivicu svakom od polja.
- Širina donje granice unosa: 2px
- Boja donje granice unosa: #efefef
Razmak pojedinačnih polja
Na kraju, dodajte donju marginu svakom pojedinačnom polju osim polja poruke.
- Margina (donja): 20px
Kreiranje kontakt forme #2
Dodajte novi odjeljak
Gradient background
Pređimo na sljedeći primjer! Dodajte novi odjeljak s pozadinom gradijenta.
- Gradijent zaustavlja:
- 50%: #562fef
- 50%: #ffffff
- Tip gradijenta: Linearni
razmak
Dodajte prilagođene vrijednosti dopuna u postavke razmaka u ovom odjeljku.
- Padding (gore i dno): 200px
Dodajte novu liniju
Struktura kolone
Dodajte novi red koristeći sljedeću strukturu stupaca:
Boja pozadine
Bez dodavanja modula, otvorite postavke reda i dodajte boju pozadine u red.
- Boja pozadine: #ffffff
Pozadina gradijenta s 2 stupca
Dodajte gradijent pozadinu u drugu kolonu u redu.
- Gradijent zaustavlja:
- 0%: #9932ff
- 100%: #562fef
- Tip: Linearni
- Upravljanje: 160 stepeni
dimenzioniranje
Također modificirajte 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.
- Linija:
- Padding (gore i dno): 0px
- Kolona 1:
- Padding: 100px (gore), 50px (dolje)
- Padding (lijevo i desno): 50px
- Kolona 2:
- Padding (gore i dno): 100 piksela
- Padding (lijevo i desno): 50px
granica
Dodajte '20px' svakoj ivici linije.
Kutija sjena
Na kraju, dodajte suptilnu sjenu okvira na liniju.
- Box Shadow Blur Snaga: 45px
- Jačina širenja senke okvira: -11px
- Sadow Boja: rgba(0,0,0,0.3)
Dodajte tekstualni modul u kolonu 1
Dodaj sadržaj
Vrijeme je da počnete sa dodavanjem modula! Počnite s tekstualnim modulom u prvoj koloni.
Podešavanja teksta
Uredite postavke teksta za ovaj modul.
- Tekst:
- Težina fonta: Ultra Bold
- Stil fonta: TT
- Boja: #562fef
- Veličina: 100px (Desktop), 80px (tablet), 60px (telefon)
- Razmak između slova: -10px
- Visina linije: 1 em
razmak
Također dodajte donju marginu.
- Margina (donja): 50px
Dodajte modul Kontakt obrazac u kolonu 1
Éléments
Drugi modul koji će nam trebati u prvoj koloni je modul obrasca za kontakt. Nakon što dodate modul, isključite opciju 'Use Basic Captcha'.
- Koristite Basic Captcha: NE
Postavke teksta polja obrasca
Zatim promijenite boju pozadine polja obrasca.
- Boja pozadine polja: #ffffff
Postavke gumba
Takođe se poigrajte sa postavkama dugmeta da biste kreirali dugme sa ikonom umesto dugmeta za tekst.
- Koristi prilagođene stilove za dugme: DA
- Dugme:
- Veličina teksta: 73px
- Boja teksta: rgba(0,0,0,0) (zadano),
- Boja pozadine: rgba(255,255,255,0) (lebljenje)
- Širina ivice: 0px
- Boja ikone: #9932ff
- Prikaži samo ikonu pri prelasku miša za dugme : NE
Kutija sjena
Na kraju, dodajte suptilnu sjenu okvira svakom od polja.
- Box Snaga zamućenja senke: 36px
- Jačina širenja senke okvira: -14px
- Boja senke: rgba(0,0,0,0.3)
Dodajte tekstualni modul u kolonu 2
Dodaj sadržaj
Prvi modul koji će nam trebati u drugoj koloni je još jedan tekstualni modul.
Podešavanja teksta
Nakon što dodate sadržaj, uredite postavke teksta za ovaj modul.
- Tekst:
- Težina fonta: Ultra Bold
- Stil fonta: TT
- Boja: #ffffff
- Veličina: 23px
- Razmak između slova: -1px
Dodajte Blurb modul #1 u kolonu 2
Dodaj sadržaj
Drugi modul koji će nam trebati je Blurb modul. Samo naprijed i unesite neke kontakt informacije.
Odaberite ikonu
Zatim odaberite odgovarajuću ikonu.
Postavke ikona
Promijenite postavke za ovu ikonu.
- Boja ikone: #ffffff
- Položaj slike/ikone: desno
Postavke naslova teksta
Nastavite tako što ćete napraviti neke promjene u postavkama teksta naslova.
- Veličina teksta naslova: 15px
- Razmak između slova naslova: -0,5 piksela
razmak
I dodajte gornju marginu.
- Margina (vrh): 120px
Kloniraj Blurb modul dvaput
Kada završite s uređivanjem prvog Blurb modula, možete nastaviti i klonirati modul dvaput.
Izmijenite sadržaj i ikonu dvaju duplikata
Uredite sadržaj i ikone dvaju duplikata kako biste podijelili različite vrste kontakt informacija s posjetiteljima.
Promijenite razmak između dva duplikata
Gornju marginu dvaju duplikata također treba promijeniti.
- Margina (vrh): 30px
Kreiranje kontakt forme #3
Dodajte novi odjeljak
Boja pozadine
Pređimo na treći primjer! Dodajte novi odjeljak sa sljedećom bojom pozadine:
- Boja pozadine: #3491CE
razmak
Nastavite dodavanjem prilagođenih vrijednosti odstupanja u postavkama razmaka.
- Padding (gore i dno): 200px
Dodajte red #1
Struktura kolone
Zatim dodajte novi red koristeći sljedeću strukturu stupaca:
Dodajte tekstualni modul
Dodaj sadržaj
Vrijeme je da počnete sa dodavanjem modula! Prvi modul koji ćemo morati dodati prvoj koloni je tekstualni modul. Unesite sadržaj po izboru.
Podešavanja teksta
Zatim promijenite postavke teksta.
- Tekst:
- Težina fonta: Ultra Bold
- Boja teksta: rgba(255,255,255,0.24)
- Veličina teksta: 100px (Desktop), 70px (tablet), 36px (telefon)
- Visina linije: 1 em
- Orijentacija: centar
razmak
Također dodajte negativnu donju marginu.
- Margina (donja): -100px
Dodajte red 2
Struktura kolone
Drugi red koji trebamo da završimo ovaj primjer sadrži sljedeću strukturu stupaca:
Gradient background
Bez dodavanja modula, otvorite postavke linije i dodajte pozadinu gradijenta.
- Gradijent zaustavlja:
- 50%: #11CE84
- 50%: #10C77F
- Tip gradijenta: Linearni
- Upravljanje: 160 stepeni
dimenzioniranje
Promijenite i parametre dimenzioniranja.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Izjednačavanje visine stupaca: DA
razmak
Zatim dodajte neke vrijednosti dopuna.
- Padding: 150px (gore), 100px (dolje)
- Padding: 50px (lijevo i desno)
granica
Zatim idite na postavke ivica i dodajte '20px' svakom od uglova. Također koristite donju ivicu.
- Zaobljeni uglovi: 20px
- Širina donje granice: 10px
- Boja donje ivice: #1ba35a
Kutija sjena
Dovršite postavke linije dodavanjem suptilne sjene okvira.
- Box Shadow Blur Snaga: 80px
- Jačina širenja senke okvira: -24px
- Boja senke: rgba(0,0,0,0.3)
Dodajte modul Kontakt obrazac u kolonu 1
Aktivirajte opciju "Napravi punu širinu" u polju Ime i email
Prvi modul koji nam je potreban u prvoj koloni retka je modul obrasca za kontakt. Otvorite polje za ime i e-poštu i promijenite postavke izgleda.
- Napravite punu širinu: DA
Éléments
Zatim onemogućite captcha.
- Koristite Basic Captcha: NE
Postavke gumba
I promijenite postavke gumba.
- Koristi prilagođene stilove za dugme: DA
- Boja teksta dugmeta: #ffffff
- Gradijent zaustavlja:
- 50%: #3AA0E3
- 50%: #3491CE
- Tip gradijenta: Linearni
- Smjer gradijenta: 155 stepeni -
- Širina ivice dugmeta: 0 piksela
- Radijus ivice dugmeta: 10px
- Jačina širenja senke okvira: -2px
- Boja nijanse: #0a60af
Vidi također: Divi: Kako prilagoditi korpu i ikone za pretragu modula "Fullwidth Menu"
granica
Također dodajemo '5px' zaobljenih uglova svakom od polja.
Dodajte tekstualni modul u kolonu 2
Dodaj sadržaj
U drugoj koloni, 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)
Podešavanja teksta
Također uređujte s postavkama teksta.
- Tekst:
- Težina fonta: Light
- Boja teksta: #ffffff
- Veličina teksta: 15px
- Razmak između slova: -0,5px
razmak
I dodajte prilagođenu podlogu kako biste modulu dali prostora da diše.
- Padding (gore i dno): 12px
- Padding (lijevo i desno): 10px
granica
Također dodajemo '20px' u gornjem lijevom i donjem lijevom kutu. Povrh toga, dodaćemo lijevu ivicu.
- Zaobljeni uglovi: 20px (gore lijevo i dolje lijevo)
- Širina lijeve ivice: 34px
- Boja lijeve ivice: #edf000
vidljivost
Kako bi ovaj dizajn odgovarao različitim veličinama ekrana, onemogućit ćemo tekstualni modul na telefonu i tabletu.
Kloniraj tekstualni modul dvaput
Kada završite sa uređivanjem prvog tekstualnog modula, nastavite i klonirajte modul dvaput.
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 modula.
- Margina (vrh): 20px
Izmijenite granicu dvaju duplikata
Na kraju, promijenite boju lijevog ruba svakog od duplikata pojedinačno.
- Boja 1: #00faff
- Boja 2: #00f76f
Pogledajte i naš članak o Kako napraviti klizač za harmoniku koji reagira
pregled
Desktop verzija
Sada kada smo prošli kroz sve korake, hajde da konačno pogledamo dizajn Divi obrasca za kontakt na desktopu.
mobilni
A evo šta možete očekivati od dizajna modula Divi obrasca za kontakt na manjim veličinama ekrana:
Preuzmite DIVI sada!!!
zaključak
U ovom postu podijelili smo 3 fantastična dizajna modula Divi obrasca za kontakt koje možete lako koristiti i mijenjati za bilo koju web stranicu koju kreirate.
Les forme 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č 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.
...
