Kalo te përmbajtja kryesore

Krijoni një seksion të kontakteve lundruese me efekte lëvizëse në Divi

Divi: tema më e lehtë për t'u përdorur nga WordPress

Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62. [Rekomanduar]

Çdo faqe në internet 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 lëvizjes së Divi, ju mund të krijoni një seksion kontakti lundrues që do të dalë në pah. Përmirësoni ndërveprimin tuaj të përdoruesit me një plan urbanistik vertikal të seksionit të kontaktit që do të ftojë vizitorët të ndërveprojnë me formën tuaj të 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. Ju mund ta shtoni edhe në majë të një faqerojtësi në të gjithë sitin me Divi Theme Builder.

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 sfondi i cili është një përfaqësim në Google Map i vendndodhjes që dëshironi të theksoni. Ju mund ta bëni këtë me Photoshop ose ndonjë redaktor tjetër të imazheve.

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
Imazhi i sfondit Divi

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
Konfigurimi i ndarjes së seksionit Divi 1

dukshmëri

Pastaj vendosni tejkalimet në të dukshme.

  • Mbipesha horizontale dhe vertikale: e dukshme
seksion kontakti lundrues

pozitë

Në fund, vendosni indeksin Z të seksionit në 10.

  • Indeksi Z: 10
Pozicioni i seksionit Divi

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.

Rreshti ka dy kolona divi

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%
Parametri i vijës Divi

dukshmëri

Klikoni në skedën e përparuar dhe më pas rregulloni tejmbushjet.

  • Mbipesha horizontale dhe vertikale: e dukshme
Konfigurimi i tejkalimit të vijës Divi

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
Konfiguroni pozicionin e vijës divi

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
Ngjyra e kolonës 1 divi

ndarje

Rregulloni cilësimet e ndarjes tjetër.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni me lehtësi çdo dizajn të faqes në internet me një pamje profesionale. Ndaloni të paguani shtrenjtë për ato që mund të bëni vetë. [Pa]

  • Mbulesa e sipërme dhe e poshtme
    • Desktop dhe Tablet: 7vw
  • Mbulesa e majtë dhe e djathtë
    • Desktop: 3vw
    • Tableta dhe telefoni: 6vw
Konfigurimi i ndarjes së dy kolonave

Kufi

Pastaj, shtoni disa qoshe të rrumbullakosura në cilësimet e kufirit.

  • Qoshet e rrumbullakosura: 10px të katër qoshet
Pjesët ndarëse të skajeve të rrumbullakosura

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
Personalizo efektin e lëvizjes së seksionit divi

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
Përshtatja e kolonës Divi

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
Efekti i lëvizjes Divi

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.

Moduli i përmbajtjes së kolonës 1

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
Përshtatja e shkronjave Divi në krye

Shtoni një modul të formës së kontaktit në kolonën 1

Përmbajtje

Nën modulin e tekstit, shtoni një formë kontakti. Këto janë fushat që ne përdorim:

  • emër
  • Email
  • material
  • mesazh
Shtoni formën e kontaktit divi

Mbrojtja nga Spam

Para stilimit të modulit të formës së kontaktit. aktivizoni mbrojtjen ndaj postës së bezdisshme dhe lidhni llogarinë tuaj ReCaptcha.

  • Përdorni një shërbim për mbrojtjen e spamit: Po
  • Ofruesi i Shërbimit: ReCaptcha
  • Zgjidhni një llogari
Forma e kontaktit Divi mbrojtje ndaj postës së bezdisshme

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
Rregullo fushat e ngjyrave 1

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
Rregullo stilin e butonit divi 1
Konfigurimi i ngjyrës së butonit Divi

sizing

Ne pastaj modifikojmë parametrat e madhësisë.

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
Konfigurimi i madhësisë Divi

ndarje

Ne gjithashtu do të shtojmë mbushjen e sipërme.

A po kërkoni temat më të mira të WordPress dhe shtojcat?

Shkarkoni shtojcat më të mira dhe temat e WordPress në Envato dhe krijoni lehtësisht faqen tuaj te internetit. Tashmë më shumë se shkarkimet e 49.720.000. [EXCLUSIVE]

  • Mbushja e sipërme: 4vw
Hapësira ndarëse

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
Konfigurimi i kufirit Divi

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.

  • Facebook
  • Twitter
  • Linkedin
Moduli na ndiqni në rrjetet sociale

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
Modifikoni sfondin divi 1

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
Personalizo ndarjen e ngjyrave

Hapësira e sendeve

Pastaj shtoni një diferencë të vogël për të ndarë ikonat nga njëra-tjetra.

  • Diferenca e djathtë: 1vw
Konfigurimi i ndarjes sociale të ndarjes

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.

Kopjoni elementin e stilit
Ngjit elementin e stilit divi

radhitje

Kaloni në skedën kryesore të dizajnit dhe sigurohuni që moduli të jetë rreshtuar.

  • Shtrirja e modulit: majtas
Zgjidhni shtrirjen

sizing

Pastaj rregulloni madhësinë e modulit.

  • Gjerësia: 100%
Konfiguro ndarjen e ndarjes

ndarje

Pastroni gjithashtu të gjithë mbushjen e paracaktuar.

  • Mbushje e sipërme, e poshtme, e majtë dhe e djathtë: 0vw
Konfiguroni ndarjen e ndarjeve

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
Konfigurimi i kufirit të modulit Divi

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]
Konfigurimi i adresës së modulit të tekstit Divi

Contexte

Ndryshoni ngjyrën e sfondit të modulit.

  • Ngjyra: Blu e errët # 25274d
Konfigurimi i sfondit të modulit të tekstit

Tekst

Kaloni në skedën e dizajnit dhe stiloni tekstin.

Lehtë të krijoni Dyqanin tuaj Online

Shkarko pa pagesë WooCommerce, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe digjitale në WordPress. [Rekomanduar]

  • Shkronja: Palanquin
  • Ngjyra: e verdhë # ffd868
  • Madhësia: 18px
Shkronja e tekstit të modulit Divi

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
Marzhi i ndarjes së divit

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ë.
Modul i tekstit divi të rrumbullakosur të ndarjes

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.

seksion kontakti lundrues

Burimet shtesë

Burimet e tij mund të jenë plotësuese të asaj që sapo lexoni. Ato mund të përdoren përveç kësaj ose nga ata që nuk kanë temën Divi.

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ë!

Ky artikull përmban komente 0

Lini një koment

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *

Kjo faqe përdor Akismet për të zvogëluar padëshiruar. Mësoni më shumë për mënyrën se si përdoren të dhënat e komenteve tuaja.

Kthehu në fillim
0 aksionet
pjesë
cicërimë
Regjistrohem