Dëshironi të krijoni një formularin e kontaktit ngjitës në DIVI?
Opsionet ngjitëse të integruara të Divi ju lejojnë të krijoni efekte vizuale mahnitëse në faqen tuaj me vetëm disa klikime.
Ju mund të aplikoni efekte ngjitëse në çdo element në faqen tuaj, por në këtë tutorial ne do të përqendrohemi në mënyrën se si të krijojmë një formularin e kontaktit ngjitet në çdo faqe Divi që krijoni.
Lexoni gjithashtu udhëzuesin tonë Si të krijoni një kokë globale ngjitëse në DIVI
Për këtë shembull, ne do të shtojmë imazhe dhe informacione kontakti që do të lëvizin derisa të formularin e kontaktit do të qëndrojë në vend.
studim
Këtu është një pamje paraprake e asaj që ne do të dizajnojmë. Në celular, ne nuk aplikojmë një efekt ngjitës.
Si të shtoni një formë kontakti ngjitëse në faqen tuaj Divi
Krijoni një faqe të re me një plan urbanistik të paracaktuar
Le të fillojmë duke përdorur një plan urbanistik të paracaktuar nga biblioteka Divi. Për këtë shembull, ne do të përdorim faqen e kontaktit të Paketa e paraqitjes së produkteve të bukurisë .
Shtoni një faqe të re në faqen tuaj Site Web dhe jepini një titull, më pas zgjidhni opsionin 'Përdor Divi Builder'.
Ne do të përdorim një plan urbanistik të bërë paraprakisht nga biblioteka Divi për këtë shembull, kështu që zgjidhni 'Zgjidhni paraqitjen'.
Gjeni dhe zgjidhni faqja e kontaktit e paraqitjes'Produkte bukurie'.
Zgjidh 'Zgjidhni paraqitjen' për të shtuar paraqitjen në faqen tuaj.
Tani jemi gati të vazhdojmë tutorialin tonë.
Ndryshimi i paraqitjes së formularit ngjitës të kontaktit
Për këtë tutorial, ne duam që forma e kontaktit në kolonën e majtë (kolona 1) të mbetet ngjitëse ndërsa përdoruesi lëviz nëpër modulet e tjera të përmbajtjes në kolonën e djathtë (kolona 2). Kjo do të na japë një efekt dinamik të lëvizjes që do ta bëjë të dallohet formulari juaj i kontaktit. Le të fillojmë duke modifikuar shabllonin tonë të paracaktuar.
Shih gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI
Krijo një seksion të ri
Shtoni një seksion të ri në faqen tuaj.
Pastaj futni një rresht të ri me dy kolona. Ju mund ta shtoni këtë seksion kudo në faqe, seksionet e tjera përfundimisht do të hiqen ndërsa përparojmë përmes këtij tutoriali.
Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit që të përputhet me modelin e paraqitjes:
- Sfondi: #EEE8E2
Shtimi i moduleve tuaja ngjitëse në kolonën 1
Shtoni një modul të formularit të kontaktit në kolonën 1. Nëse jeni duke ndjekur këtë tutorial ose keni tashmë një formular kontakti në faqen tuaj, thjesht mund të tërhiqni modulin 'Forma e Kontaktitekzistues në kolonën 1.
Zhvendos modulin Tekst Na Kontaktoni në krye të këtij seksioni. Do të jetë gjithashtu ngjitëse. Shtoni një kufi të bardhë në cilësimet e tekstit që të përputhet me stilin e paraqitjes:
- Gjerësia e kufirit: 20 px
- Ngjyra e kufirit: #FFFFFF
Paraqitja origjinale përfshinte mbushjen midis tekstit dhe kufirit, por ne do ta anashkalojmë atë sepse prenë pjesën e poshtme të formularit të kontaktit në ekranet më të vegjël.
Shtoni modulet tuaja të rrotullimit në kolonën 2
Në kolonën 2, shtoni të gjitha modulet tuaja të rrotullimit. Për rastin tonë, zhvendosni dy modulet e imazhit, informacionin e kontaktit dhe informacionin e vendndodhjes në kolonën 2. Pasi të keni zhvendosur modulet tuaja në seksionin e ri, mund të fshini çdo seksion të mbetur bosh.
Këshillë: nëse keni nevojë të lëvizni disa module në të njëjtën kohë, mbani tastin 'maj' në tastierë dhe zgjidhni modulet që dëshironi të lëvizni. Përdorni funksionin e lëvizjes së modulit për të lëvizur të gjitha modulet tuaja në të njëjtën kohë.
Imazhi i madh i zhvendosur i paraqitjes që kemi zgjedhur mund të shkaktojë probleme me lëvizjen horizontale. Pra, le të ndryshojmë disa cilësime për të zgjidhur këtë problem.
Lexo gjithashtu: Si të krijoni kokën globale me formën e hyrjes në DIVI
Hap cilësimet e seksionit. Nën i përparuar, shkoni te Visibility, më pas përditësoni cilësimet e tejmbushjes horizontale dhe vertikale:
- Vërshimi horizontal: i fshehur
- Vërshimi vertikal: i fshehur
Faqja juaj tani duhet të duket kështu, me përmbajtjen tuaj ngjitëse në kolonën 1 dhe përmbajtjen tuaj lëvizëse në kolonën 2.
Ne jemi gati të ndërmarrim hapin e fundit: ta bëjmë formularin e kontaktit ngjitës.
Bëni formularin e kontaktit ngjitës
Me paraqitjen tonë në vend, ne mund të aktivizojmë cilësimet ngjitëse për formularin tonë të kontaktit. Zgjidh 'Cilësimet e rreshtit', më pas zgjidhni cilësimet e kolonës 1.
Nën skedën "Avanced", lundroni te "Efektet e lëvizjes". Këtu do të vendosim parametrat ngjitës.
- Pozicioni ngjitës: Ngjit në krye
- Stick Top Offset: 15px
- Kufiri i poshtëm ngjitës: Linja
Dhe kjo eshte e gjitha! Tani keni shtuar cilësime ngjitëse në kolonën 1, duke e bërë formën tuaj të kontaktit dhe titullin të qëndrueshëm ndërsa lëvizni poshtë faqes. Ju duhet të shihni përmbajtjen e kolonës 2 pranë formularit të kontaktit.
Rezultati përfundimtar
Tani le të hedhim një vështrim në formën tonë të kontaktit ngjitës në veprim.
Shkarkoni DIVI Tani!!!
Përfundim
Kështu që ! Kaq për këtë artikull. Cilësimet ngjitëse të Divi janë një mënyrë e thjeshtë për të përmirësuar pamjen e formularit tuaj të kontaktit – ose çdo elementi tjetër të faqes tuaj. Ju mund të aplikoni cilësime ngjitëse për çdo seksion, rresht ose modul, duke dhënë pothuajse çdo gjë në tuaj Site Web ngjitet
Nëse dëshironi të mësoni më shumë rreth asaj që mund të bëni me veçoritë ngjitëse të Divi, shikoni mësimet tona. Për shembull, mund të konsultoheni me tutorialin tonë Si të shtoni një formular kontakti në një kokë globale.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar 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.
...
