Çdo faqe interneti ka nevojë për një seksion kontakti, por kjo nuk do të thotë që ju duhet të shkoni për një dizajn standard. Me efektet e rrotullimit të Divi, mund të krijoni një seksion kontakti lundrues që do të dallohet. Përmirësoni ndërveprimin tuaj të përdoruesit me një plan urbanistik të seksionit të kontaktit me lëvizje vertikale që do t'i ftojë vizitorët të ndërveprojnë me formularin e kontaktit. Në këtë artikull, ne do t'ju tregojmë se si të krijoni një seksion kontakti lundrues me gjerësi të plotë që mund ta shtoni në çdo faqe. Mund ta shtoni edhe në krye të një fundi në të gjithë sitin me Ndërtuesin e Temave Divi.
Më poshtë do të gjeni një skedar të shkarkueshëm falas me paraqitjen JSON që do të ngarkohet në bibliotekën tuaj Divi. Ne gjithashtu kemi përfshirë një model PSD për t'ju ndihmuar të rikrijoni sfondin e hartës, si dhe një skedë SVG të hartës, në mënyrë që ta përshtatni atë me ngjyrat tuaja.
Krijoni një strukturë elementi
Në këtë dizajn, ne do të përdorim një imazh të sfondit i cili është një paraqitje në Google Map të vendndodhjes që dëshironi të shfaqni. Ju mund ta bëni këtë me Photoshop ose ndonjë redaktues tjetër imazhi.
Shto një seksion të ri
Tani është koha për të filluar krijimin e sektorit të kontaktit lundrues me Ndërtuesin Divi! Gjëja e parë që do të bëjmë është të hapim një faqe të re ose ekzistuese dhe të shtojmë një seksion të ri.
Në skedën e përmbajtjes, shtoni sfondin e hartës që keni krijuar në Photoshop.
- Imazhi i sfondit: harta juaj e modifikuar
ndarje
Tjetra, personalizoni cilësimet e hapësirës së seksioneve në skedën e dizajnit.
- Marzhi i sipërm dhe i poshtëm: 50vh
- Mbushja e poshtme: 0vw
dukshmëri
Pastaj vendosni tejkalimet në të dukshme.
- Mbipesha horizontale dhe vertikale: e dukshme
pozitë
Në fund, vendosni indeksin Z të seksionit në 10.
- Indeksi Z: 10
Shto një rresht të ri
Struktura e kolonës
Tani është koha për të shtuar disa gjëra. Së pari, shtoni një rresht me 2 kolona.
sizing
Hapni parametrat e linjës dhe rregulloni madhësinë si më poshtë.
- gjerësi
- Zyra: 90%
- Tabletë dhe telefon: 80%
- Gjerësia maksimale: 90%
dukshmëri
Klikoni në skedën e përparuar dhe më pas rregulloni tejmbushjet.
- Mbipesha horizontale dhe vertikale: e dukshme
pozitë
Përfundoni cilësimet e rreshtit duke modifikuar cilësimet e pozicionit.
- Pozicioni: Relativ
- Origjina e ofertës: majtas i lartë
- Offset vertikal
- Desktop: -8vw
Cilësimet e kolonës 1
Sfond
Para se të shtojmë module, do të duhet të stilojmë kolonat individuale. Shtoni një ngjyrë të sfondit në kolonën 1.
- Ngjyra e ngurtë: # 25274d
ndarje
Rregulloni cilësimet e ndarjes tjetër.
- Mbulesa e sipërme dhe e poshtme
- Desktop dhe Tablet: 7vw
- Mbulesa e majtë dhe e djathtë
- Desktop: 3vw
- Tableta dhe telefoni: 6vw
Kufi
Pastaj, shtoni disa qoshe të rrumbullakosura në cilësimet e kufirit.
- Qoshet e rrumbullakosura: 10px të katër qoshet
Efektet lëvizni
Së fundmi, përdorni disa lëvizje vertikale në cilësimet e efekteve të lëvizjes. Kjo do të na ndihmojë të krijojmë një efekt lundrues.
- Efektet e Shndërrimit të Lëvizjes: Lëvizja vertikale
- Set i lëvizjes vertikale / desktop
- Nisja e kompensimit: 4
- Ndërprerja mesatare: 0 (me 50%)
- Përfundimi i kompensimit: -4
- Lëvizja vertikale / Tableta dhe telefoni
- Nisja e kompensimit: 4
- Ndërprerja mesatare: 0 (me 40% dhe 60%)
- Përfundimi i kompensimit: -3
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Cilësimet e kolonës 2
pozitë
Tani le të kalojmë në parametrat e kolonës së dytë. Rregulloni rregullimet e pozicionit në përputhje me rrethanat.
- Pozicioni: Relativ
- Origjina e kompensimit: majtas sipër
- Kompensimi vertikal
- Zyra: 25vw
Efektet lëvizëse
Ne gjithashtu shtojmë një lëvizje vertikale në këtë kolonë.
- Efektet e shndërrimit të lëvizjes: lëvizje vertikale
- Përcaktoni lëvizjen vertikale / desktop
- Fillimi i kompensimit: 2
- Kompensimi mesatar: 0 (me 50%)
- Përfundimi i kompensimit: -2
- Përcaktoni lëvizjen vertikale / tabletë dhe telefon
- Fillimi i kompensimit: 0
- Kompensimi mesatar: 0 (me 50%)
- Përfundimi i kompensimit: -2
- Shkak i efektit të lëvizjes: Elementi i sipërm
Shtoni një modul teksti në kolonën 1
Përmbajtje
Timeshtë koha për të shtuar module, duke filluar me një modul teksti në kolonën 1. Shtoni çdo përmbajtje H2 që dëshironi.
Teksti i titullit
Shkoni te skeda e dizajnit dhe stiloni tekstin H2 si më poshtë.
- Niveli i titullit: H2
- Shkronja: Palanquin Dark
- Pesha e shkronjave: e guximshme
- Stili i Font: TT
- Ngjyra: e verdhë # ffd868
- Madhësi
- Zyra: 5vw
- Tableta: 10vw
- Telefon: 12vw
- Hapësira e shkronjave: 4px
Shtoni një modul të formës së kontaktit në kolonën 1
Përmbajtje
Nën modulin e tekstit, shtoni një formularin e kontaktit. Këto janë fushat që përdorim:
- emër
- material
- mesazh
Mbrojtja nga Spam
Përpara stilimit të modulit të formularin e kontaktit. aktivizoni mbrojtjen e spamit dhe lidhni llogarinë tuaj ReCaptcha.
- Përdorni një shërbim për mbrojtjen e spamit: Po
- Ofruesi i Shërbimit: ReCaptcha
- Zgjidhni një llogari
fushat
Kaloni në skedën e dizajnit dhe stiloni fushat si më poshtë.
- Ngjyra e sfondit: Blu e errët # 25274d
- Ngjyra e tekstit: gri e çelët # d1d1d1
- Ngjyra e sfondit të fokusit: Blu e errët # 25274d
- Fokusimi i ngjyrës së tekstit: gri e çelët # d1d1d1
- Shkronja: Palanquin
- Stili: TT
- Madhësia e tekstit
- Zyra: 0.9vw
- Tableta: 2vw
- Telefon: 3vw
- Hapësira e shkronjave: 1px
buton
Pastaj, stilizoni butonin.
- Stilet e personalizuara: Po
- Madhësia e tekstit: 20px
- Ngjyra e tekstit: blu e errët # 25274d
- Ngjyra e sfondit: E verdha # ffd868
- Rrezja kufitare: 7px
- Ngjyra e ikonës: Blu e errët # 25274d
- Marzhi i sipërm: 5px
sizing
Ne pastaj modifikojmë parametrat e madhësisë.
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Ne gjithashtu do të shtojmë mbushjen e sipërme.
- Mbushja e sipërme: 4vw
kufi
Plotësoni parametrat e modulit duke rregulluar parametrat e kufirit.
- Hyrjet me qoshe të rrumbullakosura: 6px në katër qoshet
- Hyrjet Stilet e kufirit: të katër anët
- Gjerësia e kufirit të hyrjes: 2px
- Futjet Ngjyra e kufirit: e verdhë # ffd868
Shtoni modulin e përcjelljes së mediave sociale në kolonën 2
Përmbajtje
Shkoni në kolonën 2 dhe shtoni një modul të mediave sociale. Përdorni të gjitha rrjetet sociale që ju nevojiten.
Pengim si garanci pagese
Para stilimit, shtoni lidhje në rrjetet përkatëse.
Konteksti i artikullit
Tani hapni rrjetin e parë social dhe ndryshoni ngjyrën e sfondit.
- Ngjyra: Blu e errët # 25274d
Ikona e elementit
Në skedën e dizajnit të të njëjtit element, ndryshoni cilësimet e ikonës si më poshtë.
- Ngjyra: e verdhë # ffd868
- Madhësia e shkronjës së ikonës
- Tavolinë dhe tabletë: 31 f
- Telefon: 26 f
Hapësira e sendeve
Pastaj shtoni një diferencë të vogël për të ndarë ikonat nga njëra-tjetra.
- Diferenca e djathtë: 1vw
Kopjoni dhe ngjisni stilet e artikullit
Për të stiluar rrjetet sociale të mbetura, kthehuni te dritarja kryesore e përmbajtjes dhe kopjoni stilet e elementeve nga ikona e parë. Pastaj ngjisni stilet e elementeve në rrjetet sociale të mbetura.
radhitje
Kaloni në skedën kryesore të dizajnit dhe sigurohuni që moduli të jetë rreshtuar.
- Shtrirja e modulit: majtas
sizing
Pastaj rregulloni madhësinë e modulit.
- Gjerësia: 100%
ndarje
Pastroni gjithashtu të gjithë mbushjen e paracaktuar.
- Mbushje e sipërme, e poshtme, e majtë dhe e djathtë: 0vw
kufi
Në fund, shtoni qoshe të rrumbullakosura në cilësimet e kufirit. Kjo do të rregullojë kufijtë e të gjitha ikonave në të njëjtën kohë.
- Qoshe të rrumbullakosura
- Majtas dhe djathtas: 7 piksele
- Fundi majtas dhe djathtas: 0px
Shtoni një modul teksti në kolonën 2
Përmbajtje
Nën modulin e mediave sociale, shtoni një modul tjetër teksti. Shtoni përmbajtje sipas zgjedhjes suaj. Ne shtuam dy adresa, një numër telefoni dhe një email. Përdorni bold në titullin e secilit artikull me të gjitha shkronjat e mëdha.
- Selia: 1587 Sukhumvit Soi 21, Bangkok, Tajlandë.
- Pika e shitjes : Emporium Mall, kati 2
- Telefon: (321) 564 2398
- Email: [email mbrojtur]
Contexte
Ndryshoni ngjyrën e sfondit të modulit.
- Ngjyra: Blu e errët # 25274d
Tekst
Kaloni në skedën e dizajnit dhe stiloni tekstin.
- Shkronja: Palanquin
- Ngjyra: e verdhë # ffd868
- Madhësia: 18px
ndarje
Shtoni gjithashtu vlerat e hapësirës së personalizuar.
- Marzhi i lartë
- Zyra: -60px
- Tabletë dhe telefon: -50 piksele
- Mbushje e sipërme, e poshtme, e majtë dhe e djathtë
- Zyra: 3vw
- Tableta: 6vw
- Telefon: 8vw
kufi
Dhe plotësoni modulin duke shtuar qoshe të rrumbullakosura në cilësimet e kufirit. Kjo eshte!
- Qoshet e rrumbullakosura: 10 piksele në pjesën e sipërme të djathtë, në fund të majtë dhe në të djathtë.
studim
Tani që kemi përfunduar rikrijimin e seksionit të kontakteve lundruese, hidhni një vështrim përfundimtar në rezultatin në madhësi të ndryshme të ekranit.
Burimet shtesë
Kjo është RESSOURCES mund të jetë plotësuese me atë që sapo keni lexuar. Ato mund të përdoren shtesë ose nga ata që nuk e kanë Tema divi.
- Si për të shtuar një kontakt formë popup në WordPress
- Si të shtoni një formë zbritëse në kokën globale në Divi
- 5 shtojca për të krijuar forma kontakti
Për ta përfunduar
Përdorimi i efekteve të reja të lëvizjes Divi kthen çdo paraqitje standarde në një dizajn të këndshëm. Duke krijuar sfondin tuaj, ju keni më shumë kontroll mbi pamjen e dizajnit të përfunduar. Nëse keni ndonjë pyetje ose sugjerim, lini një koment në seksionin e komenteve më poshtë!
