Dëshironi të krijoni një formularin e kontaktit në Divi që shfaqet pasi klikoni në një buton?
Në këtë tutorial Divi, ne do t'ju tregojmë se si të krijoni një formularin e kontaktit i cili shfaqet pasi klikoni një buton duke përdorur asgjë përveç Divi, kodit jQuery dhe kodit CSS.
Lexoni gjithashtu udhëzuesin tonë në: Divi: Si të krijoni një footer ngjitës me efektin "Reveal".
Është një mënyrë e shkëlqyer për të mbajtur vizitorët juaj Faqja e internetit fokusuar në veprimin për të cilin u angazhuan me klikimin e një butoni. Nuk i çon në një faqe tjetër.
studim
Më poshtë, mund të hidhni një vështrim të shpejtë në atë që do të krijojmë, më pas të hidheni në tutorial!
Pamje paraprake në PC
Pamje paraprake në telefon dhe tablet
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 faqen kryesore të paraqitjes 'Kompania e Dizajnit të Brendshëm'.
Zgjidh 'Zgjidhni paraqitjen' për të shtuar paraqitjen në faqen tuaj.
Tani jemi gati të vazhdojmë tutorialin tonë.
Krijo një seksion me modulin Button
Gjëja e parë që do të duhet të bëjmë është të shtojmë një seksion të ri ku vendosim butonin që do ta lejojë atë formularin e kontaktit për të shfaqur.
Shih gjithashtu: Divi: Si të krijoni një fund të personalizuar
Thjesht shtoni një seksion standard
Më pas, zgjidhni një rresht me një kolonë.
Pasi ta keni bërë këtë, shtoni një modul Button në të.
Ju mund ta personalizoni butonin si të dëshironi, por duhet të siguroheni që URL-ja e butonit të fillojë me '#' e ndjekur nga diçka tjetër. Ju nuk mund ta lini atë bosh ose thjesht të përdorni karakterin '#'. Duke shtuar '#' dhe tekst, faqja nuk do të lëvizë sapo të klikoni butonin. Nëse e lini bosh, faqja do të rifreskohet kur klikoni. Dhe nëse përdorni vetëm '#', do të dërgoheni në krye të faqes.
Gjëja tjetër e rëndësishme që do të duhet të bëjmë është të caktojmë një klasë CSS në butonin. Ne do ta përdorim këtë klasë CSS më vonë në këtë artikull në kodin jQuery për të siguruar që forma e kontaktit të shfaqet pasi të klikoni. Klasa që do të duhet t'i caktojmë butonit është thjesht "button".
- Klasa CSS: butoni
Krijoni një formular kontakti për versionin e PC
Gjëja tjetër që do të duhet të bëjmë është të krijojmë formularin e kontaktit të desktopit që do të shfaqet sapo dikush të klikojë butonin që krijuam në pjesën e mëparshme të këtij artikulli. Më vonë në këtë artikull, ne do t'ju tregojmë gjithashtu se si të krijoni versionin celular.
Shto një seksion të ri standard
Filloni duke shtuar një seksion të ri standard në faqen në të cilën po punoni. Në cilësimet e seksionit, shkoni te skedari i avancuar, shtoni "popup" në fushën CSS Class.
Lëvizni poshtë të njëjtën skedë dhe vendosni rreshtat e mëposhtëm të kodit CSS në fushën Para të nënkategorisë CSS të personalizuar:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Duke e shtuar këtë, ne sigurohemi që seksioni të zërë të gjithë skedën. Ju mund të rregulloni ngjyrën e sfondit në kodin CSS për të krijuar mbivendosjen e dëshiruar të sfondit. Në këtë rast ne përdorim ngjyrën e zezë me pak transparencë. Në të njëjtën skedë, shtoni gjithashtu rreshtin e mëposhtëm të kodit CSS në elementin kryesor:
display: none;
Gjëja e fundit që do të duhet të bëjmë në skedën Advanced është të çaktivizojmë seksionin në telefon dhe tablet në nënkategorinë Visibility.
Shtoni një rresht në dy kolona
Vazhdoni duke shtuar një rresht me dy kolona dhe lundroni te skeda Stili.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia maksimale: 1291 px
Futni parametrat e secilës prej kolonave.
Modifikoni kufijtë e brendshëm (sipër, majtas dhe djathtas) si më poshtë:
- Marzhi i brendshëm (sipër, majtas, djathtas): 30 px
Përfundoni duke shkuar te skeda e avancuar. Në elementin kryesor, shtoni linjat e mëposhtme të kodit CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Shtoni modulin e parë të tekstit
Pasi të keni bërë të gjitha ndryshimet në seksionin dhe rreshtin, është koha për të shtuar modulet e ndryshme që dëshironi të shfaqni.
Gjëja e parë që do të shtojmë është titulli që shfaqet. Filloni duke shtuar një modul të ri Teksti në kolonën e parë të rreshtit, shkruani tekstin në skedën Përmbajtje dhe kaloni në skedën Stili.
Në skedën Style, kemi përdorur cilësimet e mëposhtme për nënkategorinë Tekst:
- Fonti i kokës: karavidhe
- Kreu i dritës së butë: Tekst i trashë
- Rreshtimi i tekstit: Bold
- Ngjyra e tekstit të kokës: #002282
- Madhësia e tekstit të kokës: 37 px
- Lartësia e vijës së kokës: 1,7 em
Shtoni një modul të dytë Teksti
Vazhdoni duke shtuar një modul të ri Teksti dhe shkruani tekstin që dëshironi të shfaqet në skedën Përmbajtja. Kalo te skeda Stil dhe zbato cilësimet e mëposhtme në nënkategorinë Tekst:
- Rreshtimi i tekstit: në qendër
- Fonti i tekstit: Arial
- Madhësia e tekstit: 13 px
- Teksti me ngjyra të tekstit: #002282
- Lartësia e rreshtit të tekstit: 1,7 em
Shtoni një modul "Na ndiqni në rrjetet sociale".
Më pas, ne do të shtojmë gjithashtu modulin 'Na ndiqni në mediat sociale' në kolonën e parë. Në këtë rast, ne kemi zgjedhur tre ikona të mediave sociale; Facebook, Twitter dhe Instagram.
Gjëja e fundit që do të duhet të bëjmë është të shtojmë mbushje (Majtas) në këtë modul në skedën Advanced. Shtoni rreshtin e mëposhtëm të kodit CSS në elementin kryesor:
padding-left: 40%;
Shtoni një modul të formularit të kontaktit
Pastaj mund të kalojmë në kolonën e dytë në rresht. Në këtë kolonë, gjëja e parë që do të vendosim është moduli i Formularit të Kontaktit.
Për këtë shembull, ne zgjodhëm vetëm dy fusha; emrin dhe emailin.
Pasi të keni shtuar modulin e Formularit të Kontaktit, lundroni te skeda Stili i modulit të Formularit të Kontaktit dhe bëni ndryshimet e mëposhtme në nënkategorinë Fushat:
- Fushat e ngjyrave të tekstit: #002282
- Fushat e madhësisë së tekstit: #002282
- Lartësia e vijës së fushës: 1,7 em
Në të njëjtën skedë, bëni ndryshimet e mëposhtme në nënkategorinë Button:
- Përdorni stile të personalizuara për butonin: Po
- Butoni i madhësisë së tekstit: 20
- Ngjyra e tekstit të butonit: #FFFFFF
- Butoni i sfondit: #0086c4
Shih gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI
- Gjerësia e kufirit të butonit: 2
- Butoni i rrezes kufitare: 3
Kaloni në skedën Advanced dhe shtoni një diferencë prej 5%.
Shtoni një modul përmbledhës
Një tjetër gjë që do të duhet të shtojmë në kolonën e dytë është një modul Përmbledhje. E vetmja gjë për të cilën na duhet ky modul është ikona e daljes në krye të djathtë të dritares që shfaqet. Zgjidhni ikonën tjetër nga lista e ikonave dhe lini gjithçka tjetër bosh.
Pastaj shkoni te skedari Advanced dhe shkruani "close" si klasë CSS.
Në të njëjtën skedë, shtoni linjat e mëposhtme të kodit në elementin kryesor të nënkategorisë së personalizuar CSS:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Aplikoni një mbushje gradient në vijë
Së fundi, ne do të shtojmë një sfond të bukur gradient në linjë. Hapni cilësimet dhe aplikoni ndryshimet e mëposhtme në opsionin e sfondit të gradientit:
- Ngjyra e gradientit të parë: #FFFFFF
- Ngjyra e gradientit të dytë: #0c71c3
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 124 gradë
- Pozicioni fillestar: 50%
- Pozicioni përfundimtar: 50%
Krijoni një formular kontakti për tablet dhe telefon
Tani që kemi krijuar versionin për PC, versioni i tabletit dhe i telefonit do të shkojë shumë më shpejt. Shumica e moduleve që kemi përdorur për versionin e PC janë të njëjta si për versionin celular.
Dubliko seksionin e mëparshëm
Në vend që ta çaktivizojmë atë për telefonin dhe tabletin, siç bëmë me versionin e PC-së, ne do të çaktivizojmë versionin e PC në nënkategorinë Visibility në cilësimet e modulit:
Ndryshoni kodin CSS të modulit Summary
Në vend që të përdorni kodin e desktopit, përdorni sa vijon:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Aplikoni një mbushje gradient në vijë
Për versionin celular, ne përdorim cilësime të ndryshme për sfondin gradient të linjës:
- Ngjyra e gradientit të parë: #FFFFFF
- Ngjyra e gradientit të dytë: #0c71c3
- Lloji i gradientit: Linear
- Drejtimi i gradientit: 180 gradë
- Pozicioni fillestar: 40%
- Pozicioni përfundimtar: 40%
Shtoni kodin jQuery
Gjëja e fundit që do të duhet të bëjmë për këtë tutorial është të shtojmë kodin jQuery. Shtoni një modul Kodi dhe futni kodin e mëposhtëm JQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Rezultat
Nëse ndiqni mesazhin hap pas hapi, duhet të jeni në gjendje të merrni rezultatin e mëposhtëm në kompjuter:
Dhe rezultati i mëposhtëm në tableta dhe telefona:
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju kemi treguar se si të krijoni një formular kontakti me një klikim. Përdorni këtë metodë për të kontaktuar me tuajin vizitorët është delikate por efektive.
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ë 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.
...
