Dëshironi të krijoni një formularin e kontaktit në faqen tuaj të internetit falë modulit Formular Kontaktit nga Divi? Këtu janë 3 ide të personalizimit…
Les format Detajet e kontaktit janë një pjesë thelbësore e shumë faqeve të internetit. Qëllimi i tyre kryesor është të jenë intuitiv dhe të ndihmojnë vizitorët të kontaktojnë lehtësisht.
Por kjo nuk do të thotë se të gjitha format kontaktet duhet të kenë një pamje të saktë dhe të paracaktuar. Mund të kombinoni lehtësisht një përvojë intuitive me një dizajn të bukur. Kjo është pikërisht ajo që ne do të bëjmë në këtë tutorial.
Ne do të ndajmë 3 dizajn unik të modulit Formular Kontaktit de Divi që mund të krijoni duke përdorur vetëm opsionet e integruara të Divi.
Le të shkojmë!
Pasqyrë e modeleve të modulit Divi Contact Form
Versionet e desktopit
Le të fillojmë duke hedhur një vështrim në versionin desktop të modeleve të ndryshme të modulit Formular Kontaktit që do të dizajnojmë në këtë tutorial.
Versionet celulare
Dhe ja se si duken ato në përmasat më të vogla të ekranit:
Shkarkoni DIVI tani!!!
Si të personalizoni modulin Divi Contact Form: 3 shembuj
Lexo gjithashtu: Divi: Si të krijoni një seksion të anëtarëve të ekipit si një karusel
Krijimi i formularit të kontaktit #1
Shto një seksion të ri
Sfondi i gradientit
Le të fillojmë me shembullin e parë! Shtoni një seksion të ri, shkoni te cilësimet e sfondit dhe shtoni një sfond gradient.
- Ndalesa e gradientit
- 34%: #4c00ff
- 34%: #ffd400
- Lloji: Rrumbullakët
- Drejtimi i gradientit: Poshtë majtas
ndarje
Më pas, shkoni te opsioni Spacing në skedën Dizajn dhe ndryshoni cilësimet si më poshtë.
- Mbushje (lart dhe poshtë): 200 px
Shto një rresht të ri
Struktura e kolonës
Shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Kolona 1: Ngjyra e sfondit
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit, më pas cilësimet e kolonës 1 dhe shtoni ngjyrën e sfondit më poshtë
- Sfondi: rgba (255,255,255,0.55)
Kolona 1: Imazhi i sfondit
Shtoni gjithashtu një imazh të sfondit në kolonën e parë.
- Përsëritja e imazhit të sfondit: Pa-përsëritje
- Përzierja e imazheve të sfondit: Ekrani
Kolona 2: Imazhi i sfondit
Dhe një ngjyrë të bardhë sfondi në kolonën e dytë.
- Sfondi: #ffffff
sizing
Pastaj modifikoni parametrat e madhësisë.
- Barazoni lartësitë e kolonave: PO
ndarje
Hiq gjithashtu të gjitha mbushjet e personalizuara të paracaktuara.
- Mbushje (lart dhe poshtë): 0 px
Rrezja e kufirit të kolonës
Shtoni një rreze kufiri në të dy kolonat në skedën e avancuar.
border-radius: 10px;
Shtoni një modul teksti në kolonën 1
Shto përmbajtje
Është koha për të filluar shtimin e moduleve të ndryshme! Shtoni një modul teksti në kolonën e parë me përmbajtjen e zgjedhjes suaj.
Cilësimet e tekstit
Më pas, shkoni te skeda Dizajni i modulit Tekst dhe bëni disa ndryshime.
- Teksti:
- Fonti: Satisfy
- Ngjyra e tekstit: #333333
- Madhësia: 100 px
- Lartësia e linjës: 1 em
- Rreshtimi: në qendër
ndarje
Shtoni gjithashtu vlera të mbushura me porosi.
- Mbushje (lart): 600 px
- Mbushje (në fund): 100 px
Kuti me hije
Për të shtuar thellësi në dizajn, përdorni një hije delikate kutie.
- Forca e turbullimit të hijes së kutisë: 80 px
- Forca e përhapjes së hijes së kutisë: -16 px
- Ngjyra e hijes: rgba (0,0,0,0.3)
Shtoni një modul imazhi në kolonën 2
Ngarko një imazh
Vazhdoni duke shtuar një modul Image në kolonën e dytë. Ngarko një imazh të zgjedhjes suaj.
sizing
Ndryshoni cilësimet e madhësisë për këtë modul.
- Gjerësia: 25% (desktop), 50% (tabletë), 60% (telefon)
- Rreshtimi i modulit: Qendër
ndarje
Krijoni një mbivendosje duke përdorur një diferencë negative të sipërme.
- Marzhi (lart): -60%
kufi
Ndryshoni kufijtë e figurës si më poshtë:
- Këndet e rrumbullakosura: 100 px (Të gjitha qoshet)
Shtoni modulin e tekstit #1 në kolonën 2
Shto përmbajtje
Vetëm poshtë modulit Imazh, shtoni një modul Teksti me përmbajtje.
Cilësimet e tekstit
Ndryshoni cilësimet e tekstit për këtë modul.
- Teksti:
- Fonti: Satisfy
- Ngjyra e tekstit: #333333
- Madhësia e tekstit: 44 px
- Orientimi: Qendër
Shtoni modulin e tekstit #2 në kolonën 2
Shto përmbajtje
Pastaj shtoni një modul tjetër Teksti.
Cilësimet e tekstit
Ndryshoni gjithashtu cilësimet e tekstit për këtë modul.
- Teksti:
- Fonti: Arial
- Ngjyra e tekstit: #ffd400
- Ngjyra e tekstit: 18 px
- Hapësira e shkronjave: 2 px
- Orientimi: Qendër
ndarje
Pastaj shtoni një diferencë të poshtme.
- Marzhi (poshtë): 100 px
Shtoni modulin e formularit të kontaktit në kolonën 2
Aktivizoni opsionin "Make Fullwidth" në fushën Emri dhe emaili
Moduli i fundit i nevojshëm është moduli i formularit të kontaktit. Përpara se të bëni ndonjë gjë tjetër, hapni fushat e emrit dhe emailit dhe ndryshoni paraqitjen.
- Bëni Fullwidth: po
Shto një fushë subjekti
Për të krijuar këtë dizajn, ne shtuam një fushë tjetër për temën.
Mbrojtja nga Spam
Pastaj çaktivizoni opsionin captcha.
- Përdorni Captcha bazë: JO
Cilësimet e tekstit të formës së fushës
Bëni disa ndryshime në cilësimet e tekstit të fushës së formularit të këtij moduli të Formularit të Kontaktit
- Fushat:
- Ngjyra e sfondit: rgba (255,255,255,0)
- Fonti: Arial
- Pesha e shkronjave: E lehtë
- Madhësia e tekstit: 16 px
- Hapësira e shkronjave: 2 px
Cilësimet e butonit
Po ndryshojmë edhe pamjen e butonave.
- Përdorni madhësinë e personalizuar për butonin: PO
- Butoni:
- Ngjyra e tekstit: #ffd400
- Gjerësia e kufirit: 0 piksele
- Hapësira e shkronjave: 2 px
- Fonti: Arial
- Stili i shkronjave: U
- nënvizoni Ngjyra: #4c00ff
ndarje
Pastaj shtoni disa vlera të personalizuara të mbushjes.
- Mbushje (poshtë): 100 px
- Mbushje (majtas dhe djathtas): 50 px
kufi
Dhe shtoni një kufi të hollë të poshtëm në secilën prej fushave.
- Gjerësia e kufirit të poshtëm të hyrjeve: 2 px
- Inputet Ngjyra e kufirit të poshtëm: #efefef
Hapësira e fushave individuale
Së fundi, shtoni një diferencë të poshtme në secilën prej fushave individuale, përveç asaj të mesazhit.
- Marzhi (poshtë): 20 px
Krijimi i formularit të kontaktit #2
Shto një seksion të ri
Sfondi i gradientit
Le të kalojmë në shembullin tjetër! Shtoni një seksion të ri me një sfond gradient.
- Ndalesat e gradientit:
- 50%: #562fef
- 50%: #ffffff
- Lloji i gradientit: Linear
ndarje
Shtoni vlerat e personalizuara të mbushjes në cilësimet e ndarjes në këtë seksion.
- Mbushje (lart dhe poshtë): 200 px
Shto një rresht të ri
Struktura e kolonës
Shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Ngjyrë e sfondit
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe shtoni një ngjyrë sfondi në rresht.
- Ngjyra e sfondit: #ffffff
Sfondi i gradientit me 2 kolona
Shtoni një sfond gradient në kolonën e dytë në rresht.
- Ndalesat e gradientit:
- 0%: #9932ff
- 100%: #562fef
- Lloji: Linear
- Drejtimi: 160 gradë
sizing
Ndryshoni gjithashtu parametrat e madhësisë së linjës.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Barazoni lartësitë e kolonave: PO
ndarje
Më pas, shtoni vlerat e ndarjes së personalizuar.
- Linjë :
- Mbushje (lart dhe poshtë): 0 px
- Kolona 1:
- Mbushja: 100 px (lart), 50 px (poshtë)
- Mbushje (majtas dhe djathtas): 50 px
- Kolona 2:
- Mbushje (lart dhe poshtë): 100 px
- Mbushje (majtas dhe djathtas): 50 px
kufi
Shtoni '20px' në secilin prej kufijve të rreshtit.
Kuti me hije
Së fundi, shtoni një hije delikate kuti në linjë.
- Forca e turbullimit të hijes së kutisë: 45 px
- Forca e përhapjes së hijes së kutisë: -11 px
- Ngjyra e shalës: rgba (0,0,0,0.3)
Shtoni një modul teksti në kolonën 1
Shto përmbajtje
Është koha për të filluar shtimin e moduleve! Filloni me një modul Teksti në kolonën e parë.
Cilësimet e tekstit
Ndryshoni cilësimet e tekstit për këtë modul.
- Teksti:
- Pesha e shkronjave: Ultra Bold
- Stili i shkronjave: TT
- Ngjyra: #562fef
- Madhësia: 100 px (Desktop), 80 px (Tablet), 60 px (Telefon)
- Hapësira e shkronjave: -10 px
- Lartësia e linjës: 1 em
ndarje
Shtoni gjithashtu një diferencë të poshtme.
- Marzhi (poshtë): 50 px
Shtoni modulin e formularit të kontaktit në kolonën 1
elementet
Moduli i dytë që do të na nevojitet në kolonën e parë është një modul i Formularit të Kontaktit Pasi të keni shtuar modulin, çaktivizoni opsionin 'Përdor Captcha Bazë'.
- Përdorni Captcha bazë: JO
Cilësimet e tekstit të formës së fushës
Pastaj ndryshoni ngjyrën e sfondit të fushave të formularit.
- Ngjyra e sfondit të fushave: #fffff
Cilësimet e butonit
Gjithashtu luani me cilësimet e butonit për të krijuar një buton ikone në vend të një butoni teksti.
- Përdorni stile të personalizuara për butonin: PO
- Butoni:
- Madhësia e tekstit: 73 px
- Ngjyra e tekstit: rgba(0,0,0,0) (e parazgjedhur),
- Ngjyra e sfondit: rgba (255,255,255,0) (Hover)
- Gjerësia e kufirit: 0 px
- Ngjyra e ikonës: #9932ff
- Shfaq vetëm ikonën në butonin Hover For: JO
Kuti me hije
Së fundi, shtoni një hije delikate të kutisë në secilën prej fushave.
- Forca e turbullimit të hijes së kutisë: 36 px
- Forca e përhapjes së hijes së kutisë: -14 px
- Ngjyra e hijes: rgba (0,0,0,0.3)
Shtoni një modul teksti në kolonën 2
Shto përmbajtje
Moduli i parë që do të na nevojitet në kolonën e dytë është një tjetër modul Teksti.
Cilësimet e tekstit
Pasi të keni shtuar përmbajtjen, modifikoni cilësimet e tekstit për këtë modul.
- Teksti:
- Pesha e shkronjave: Ultra Bold
- Stili i shkronjave: TT
- Ngjyra: #ffffff
- Madhësia: 23 px
- Hapësira e shkronjave: -1 px
Shtoni modulin Blurb #1 në kolonën 2
Shto përmbajtje
Moduli i dytë që do të na nevojitet është një modul Blurb. Shkoni përpara dhe vendosni disa informacione kontakti.
Zgjidhni ikonën
Pastaj zgjidhni një ikonë përkatëse.
Cilësimet e ikonës
Ndryshoni cilësimet për këtë ikonë.
- Ngjyra e ikonës: #ffffff
- Vendosja e imazhit/ikonës: djathtas
Cilësimet e tekstit të titullit
Vazhdo duke bërë disa ndryshime në cilësimet e tekstit të titullit më pas.
- Madhësia e tekstit të titullit: 15 px
- Hapësira e shkronjave të titullit: -0,5 pixel
ndarje
Dhe shtoni një diferencë të lartë.
- Marzhi (lart): 120 px
Klononi modulin Blurb dy herë
Pasi të keni mbaruar me modifikimin e modulit të parë Blurb, mund të vazhdoni dhe ta klononi modulin dy herë.
Ndryshoni përmbajtjen dhe ikonën e dy dublikatave
Redaktoni përmbajtjen dhe ikonat e dy dublikatave për të ndarë lloje të ndryshme informacioni kontakti me vizitorët.
Ndryshoni ndarjen e dy dublikatave
Diferenca e sipërme e dy dublikatave duhet gjithashtu të ndryshohet.
- Marzhi (lart): 30 px
Krijimi i formularit të kontaktit #3
Shto një seksion të ri
Ngjyrë e sfondit
Le të kalojmë në shembullin e tretë! Shtoni një seksion të ri me ngjyrën e mëposhtme të sfondit:
- Ngjyra e sfondit: #3491CE
ndarje
Vazhdoni duke shtuar vlerat e personalizuara të mbushjes në cilësimet e ndarjes.
- Mbushje (lart dhe poshtë): 200 px
Shtoni rreshtin numër 1
Struktura e kolonës
Më pas, shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Shtoni një modul teksti
Shto përmbajtje
Është koha për të filluar shtimin e moduleve! Moduli i parë që do të duhet të shtojmë në kolonën e parë është një modul Text. Futni një përmbajtje të zgjedhur.
Cilësimet e tekstit
Tjetra, ndryshoni cilësimet e tekstit.
- Teksti:
- Pesha e shkronjave: Ultra Bold
- Ngjyra e tekstit: rgba (255,255,255,0.24)
- Madhësia e tekstit: 100px (Desktop), 70px (Tablet), 36px (Telefon)
- Lartësia e linjës: 1 em
- Orientimi: Qendër
ndarje
Shtoni gjithashtu një diferencë negative të poshtme.
- Marzhi (poshtë): -100 px
Shtoni rreshtin 2
Struktura e kolonës
Rreshti i dytë që duhet të plotësojmë këtë shembull përmban strukturën e kolonës vijuese:
Sfondi i gradientit
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe shtoni një sfond gradient.
- Ndalesat e gradientit:
- 50%: #11CE84
- 50%: #10C77F
- Lloji i gradientit: Linear
- Drejtimi: 160 gradë
sizing
Ndryshoni gjithashtu parametrat e madhësisë.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Barazoni lartësitë e kolonave: PO
ndarje
Më pas shtoni disa vlera mbushjeje.
- Mbushja: 150 px (lart), 100 px (poshtë)
- Mbushja: 50 px (majtas dhe djathtas)
kufi
Pastaj shkoni te cilësimet e kufirit dhe shtoni '20 px' në secilin nga qoshet. Përdorni gjithashtu një kufi të poshtëm.
- Këndet e rrumbullakosura: 20 px
- Gjerësia e kufirit të poshtëm: 10 px
- Ngjyra e kufirit të poshtëm: #1ba35a
Kuti me hije
Plotësoni cilësimet e linjës duke shtuar një hije delikate kutie.
- Forca e turbullimit të hijes së kutisë: 80 px
- Forca e përhapjes së hijes së kutisë: -24 px
- Ngjyra e hijes: rgba (0,0,0,0.3)
Shtoni modulin e formularit të kontaktit në kolonën 1
Aktivizoni opsionin "Make Fullwidth" në fushën Emri dhe emaili
Moduli i parë që na nevojitet në kolonën e parë të rreshtit është moduli i formularit të kontaktit. Hapni fushën e emrit dhe emailit dhe ndryshoni cilësimet e paraqitjes.
- Bëni me gjerësi të plotë: PO
elementet
Pastaj çaktivizoni captcha.
- Përdorni Captcha bazë: JO
Cilësimet e butonit
Dhe ndryshoni cilësimet e butonit.
- Përdorni stile të personalizuara për butonin: PO
- Ngjyra e tekstit të butonit: #ffffff
- Ndalesat e gradientit:
- 50%: #3AA0E3
- 50%: #3491CE
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 155 gradë -
- Gjerësia e kufirit të butonit: 0 piksel
- Rrezja e kufirit të butonit: 10 px
- Forca e përhapjes së hijes së kutisë: -2 px
- Ngjyra e nuancës: #0a60af
Shiko gjithashtu: Divi: Si të personalizoni ikonat e shportës dhe kërkimit të modulit "Menyja me gjerësi të plotë".
kufi
Ne gjithashtu shtojmë '5 px' të qosheve të rrumbullakosura në secilën prej fushave.
Shtoni një modul teksti në kolonën 2
Shto përmbajtje
Në kolonën e dytë, moduli i parë që do të na nevojitet është një modul Text. Shkoni përpara dhe futni disa përmbajtje.
Ngjyrë e sfondit
Pastaj ndryshoni ngjyrën e sfondit.
- Sfondi: rgba (255,255,255,0.13)
Cilësimet e tekstit
Ndrysho edhe me cilësimet e tekstit.
- Teksti:
- Pesha e shkronjave: E lehtë
- Ngjyra e tekstit: #ffffff
- Madhësia e tekstit: 15 px
- Hapësira e shkronjave: -0,5 px
ndarje
Dhe shtoni mbushje të personalizuar për t'i dhënë modulit hapësirë për të marrë frymë.
- Mbushje (lart dhe poshtë): 12 px
- Mbushje (majtas dhe djathtas): 10 px
kufi
Ne gjithashtu shtojmë '20px' në këndin e sipërm të majtë dhe të poshtëm majtas. Në krye të kësaj, ne do të shtojmë një kufi të majtë.
- Këndet e rrumbullakosura: 20 px (lart majtas dhe poshtë majtas)
- Gjerësia e kufirit të majtë: 34 px
- Ngjyra e kufirit të majtë: #edf000
dukshmëri
Për ta bërë këtë dizajn të përputhet me madhësi të ndryshme ekrani, ne do të çaktivizojmë modulin Tekst në telefon dhe tablet.
Moduli i klonimit të tekstit dy herë
Pasi të keni mbaruar redaktimi i modulit të parë të tekstit, vazhdoni dhe klononi modulin dy herë.
Ndryshoni përmbajtjen e dy dublikatave
Ndryshoni përmbajtjen e dy dublikatave në diçka tjetër.
Ndryshoni ndarjen e dy dublikatave
Dhe shtoni një diferencë të lartë për të krijuar hapësirë midis secilit prej moduleve.
- Marzhi (lart): 20 px
Ndryshoni kufirin e dy dublikatave
Së fundi, ndryshoni ngjyrën e kufirit të majtë të secilit prej dublikatave individualisht.
- Ngjyra 1: #00faff
- Ngjyra 2: #00f76f
Shihni gjithashtu artikullin tonë në Si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm
studim
Versioni i desktopit
Tani që kemi kaluar nëpër të gjitha hapat, le të hedhim një vështrim përfundimtar në dizajnet e modulit të Formularit të Kontaktit Divi në desktop.
Telefon
Dhe ja çfarë mund të prisni nga dizajnet e modulit të Formave të Kontaktit të Divi në madhësi më të vogla të ekranit:
Shkarkoni DIVI tani!!!
Përfundim
Në këtë postim, ne kemi ndarë 3 modele të mrekullueshme të modulit të Formularit të Kontaktit Divi që mund t'i përdorni dhe modifikoni lehtësisht për çdo faqe interneti që krijoni.
Les format Kontaktet janë një pjesë thelbësore e shumë faqeve të internetit, prandaj është e rëndësishme të siguroheni që dizajni juaj t'i bindë vizitorët tuaj që të kontaktojnë.
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.
...
