Duhet shtuar a formularin e kontaktit në një titull global?
Kur krijoni një kokë të personalizuar për veten tuaj Site Web Duke përdorur Divi Theme Builder, ju e gjeni veten duke kërkuar mënyrën e përsosur për të shtuar një CTA (Thirrje për Veprim). Një mënyrë për ta bërë këtë është të shtoni një formularin e kontaktit rrotullimi.
Kjo do t'ju ndihmojë të mbani pamjen e përgjithshme të kokës tuaj të pastër, duke siguruar aftësinë për të hyrë na kontaktoni pa pasur nevojë të lëvizni.
Në këtë tutorial do t'ju tregojmë se si të krijoni një formularin e kontaktit lëvizshëm duke përdorur kodin Divi dhe JQuery & CSS.
Le të fillojmë!
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim në një pamje paraprake të rezultatit që do të marrim.
Krijoni një kokë globale
Shkoni te Ndërtuesi i Temave
Shkoni te Ndërtuesi i Temave nga menyja Divi e pranishme në pultin tuaj të WordPress dhe klikoni në "Shto një kokë globale".
Zgjidhni "Krijo kokën globale".
Krijo një stil kokë
Cilësimet e seksionit
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, do të vini re një seksion. Hapeni këtë seksion dhe ndryshoni ngjyrën e sfondit.
- Sfondi: #FFFFFF
ndarje
Pastaj hiqni kufijtë e brendshëm të paracaktuar të sipërm dhe të poshtëm nga seksioni.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Kuti me hije
Aplikoni gjithashtu një hije delikate kuti.
- Forca e hijes blu të kutisë: 50 px
- Ngjyra e fontit të titrave: rgba(0,0,0,0.15)
Shtoni një linjë të re
Struktura e kolonës
Shtoni një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:
- Përdorni gjerësinë e personalizuar të ulluqit: Po
- Hapësira e kolonave: 1
- Harmonizoni lartësitë e kolonave: Po
- Gjerësia maksimale: 95%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni mbushjen me porosi të sipërme dhe të poshtme.
- Marzhi i brendshëm i pikut: 1vw
- Marzhi i brendshëm i poshtëm: 1vw
elementi kryesor
Lidhni të gjithë përmbajtjen e kolonës duke shtuar një rresht të vetëm të kodit CSS në elementin e rreshtit kryesor.
align-items: center;
Nënshkrimi Z i kolonës 2
Ne gjithashtu sigurohemi që kolona e dytë të ketë një vlerë më të lartë të indeksit z për dizajn të përgjegjshëm.
- Z-indeksi: 12
Shtoni modulin e imazhit në kolonën 1
Shkarko logon
Është koha për të filluar shtimin e moduleve! Duke filluar me një modul Image në kolonën 1. Ngarko një logo.
radhitje
Pastaj ndryshoni shtrirjen e modulit.
- Shtrirja e imazhit: në qendër
sizing
Ndryshoni gjithashtu gjerësinë.
- Gjerësia maksimale: 3vw (desktop), 5vw (tabletë), 7vw (telefon)
Shto modulin e menysë në kolonën 2
Zgjidhni Meny
Në kolonën e dytë do të shtojmë një modul Menu.
natyrë
Kaloni në skedën "Stili i modulit" dhe ndryshoni stilin e paraqitjes.
- Stilet: në qendër
Cilësimet e tekstit të menusë
Pastaj ndryshoni cilësimet e tekstit në menunë e modulit.
- Menyja e shkronjave: Hap Asnjë
- Menu me dritë të zbehtë: gjysmë e theksuar
- Ngjyra e tekstit të menysë: #000000
- Madhësia e tekstit të menysë: 0,8 vw (desktop), 2 vw (tabletë), 3 vw (telefon)
- Hapësira e shkronjave të menusë: 1 px
Cilësimet e tekstit të menusë rënëse
Tjetra, ndryshoni ngjyrën e linjës nga menyja rënëse.
- Ngjyra e linjës së menusë rënëse: #007dff
icons
Ndrysho ngjyrën e ikonës së menysë së hamburgerit.
- Ngjyra e ikonës së menusë së hamburgerit: #007dff
Shtoni modulin e tekstit në kolonën 3
Shto mesazh
Në modulin e tretë! Shtoni një modul teksti me një mesazh sipas zgjedhjes suaj.
Ngjyrë e sfondit
Shtoni një ngjyrë sfondi.
- Ngjyra e sfondit: #007dff
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit në përputhje me rrethanat:
- Fonti i tekstit: Open Sans
- Soft Light Tekst: Bold
- Ngjyra e tekstit Teksti: #ffffff
- Teksti Madhësia e tekstit: 0,8 vw (desktop), 2 vw (tabletë), 3 vw (telefon)
- Rreshtimi i tekstit: në qendër
sizing
Pastaj modifikoni parametrat e madhësisë së modulit.
- Gjerësia maksimale: 33%
- Rreshtimi i modulit: Qendër
ndarje
Më pas, shtoni mbushjet e personalizuara të sipërme dhe të poshtme.
- Marzhi i brendshëm i sipërm: 0,8 vw (desktop), 2 vw (tableti dhe telefoni)
- Marzhi i brendshëm i ulët: 0,8 vw (desktop), 2 vw (tableti dhe telefoni)
kufi
Dhe plotësoni parametrat e modulit duke shtuar një rreze kufitare.
- Drejtkëndësh i rrumbullakosur: 100 px
Shtoni një modul tjetër teksti në kolonën 3
Shtoni një simbol në zonën e përmbajtjes
Le të kalojmë te moduli tjetër, i cili është një tjetër modul teksti. Shtoni simbolin e mëposhtëm të shigjetës në zonën e përmbajtjes: '▼'.
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit në përputhje me rrethanat:
- Fonti i tekstit: Open Sans
- Ngjyra e tekstit: #007fff
- Teksti Madhësia e tekstit: 3vw
- Lartësia e rreshtit të tekstit: 0em
- Rreshtimi i tekstit: në qendër
Z-indeksi
Le të rrisim edhe indeksin z të modulit.
- Z-indeksi: 11
Shtoni modulin e formularit të kontaktit në kolonën 3
Shtoni fusha me gjerësi të plotë sipas zgjedhjes suaj
Moduli tjetër dhe i fundit që na nevojitet në kolonën e tretë është një modul i formularit të kontaktit. Shtoni çdo fushë me gjerësi të plotë që ju nevojitet.
Shtoni një titull
Përdorni gjithashtu një titull.
Ngjyrë e sfondit
Më pas, le të ndryshojmë ngjyrën e sfondit.
- Ngjyra e sfondit: #e7f2ff
Cilësimet e fushës
Le të shkojmë te skeda Style e modulit dhe të ndryshojmë cilësimet e fushës.
- Fushat e ngjyrave të sfondit: #ffffff
- Ngjyra e tekstit të fushës: #dddddd
- Ngjyra e tekstit të fokusit: #007dff
- Fushat e mbushjes vertex: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Fushat e mbushjes së poshtme: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Fushat e shkronjave: Hap Asnjë
- Fushat Madhësia e tekstit: 0,7 vw (desktop), 1,8 vw (tabletë), 3 vw (telefon)
Cilësimet e tekstit të titullit
Ndryshoni cilësimet e tekstit të titullit.
- Fut titullin tre: H3
- Titulli i dritës së butë: Tekst i trashë
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit të titullit: #007dff
- Titulli Madhësia e tekstit: 1 vw (desktop), 2,5 vw (tabletë), 3,5 vw (telefon)
- Lartësia e linjës së titullit: 1,6 em
Cilësimet e tekstit Captcha
Me cilësimet e tekstit captcha.
- Font Captcha: Open Sans
- Ngjyra e tekstit Captcha: #007dff
Cilësimet e butonit
Vazhdoni duke personalizuar butonin.
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 0,8 vw (desktop), 2 vw (tabletë), 3 vw (telefon)
- Ngjyra e tekstit të butonit: #ffffff
- Butoni i sfondit: #007dff
- Butoni i gjerësisë së kufirit: 0 piksel
- Rrezja e kufirit të butonit: 100 px
- Butoni i Fontit: Hap Asnjë
- Butoni i lehtë i dritës: Tekst i trashë
- Marzhi i butonit: 1vw
- Butoni i mbushjes së sipërme: 1vw (desktop), 2vw (tableti dhe telefoni)
- Butoni i mbushjes së poshtme: 1vw (desktop), 2vw (tableti dhe telefoni)
- Butoni i bllokut të majtë: 2vw (desktop), 7vw (tableti dhe telefoni)
- Butoni i djathtë i bllokut: 2vw (desktop), 7vw (tableti dhe telefoni)
ndarje
Përdorni vlerat e personalizuara të mbushjes në madhësi të ndryshme të ekranit.
- Hapësira maksimale e brendshme: 4vw (desktop), 6vw (tableti dhe telefoni)
- Pjesa e poshtme e kufirit të brendshëm: 4vw (desktop), 6vw (tableti dhe telefoni)
- Margjina e brendshme e majtë: 2vw (desktop), 6vw (tableti dhe telefoni)
- Diferenca e brendshme e djathtë: 2vw (desktop), 6vw (tableti dhe telefoni)
kufi
Pastaj ndryshoni cilësimet e kufirit.
- Hyrja drejtkëndëshi i rrumbullakosur: 10 px
Elementi kryesor, Titulli i Kontaktit dhe Captcha CSS
Plotësoni cilësimet e modulit duke shtuar disa ndryshime të vogla CSS në skedën e avancuar.
Elementi kryesor:
| 01 | border-radius: 20px; |
Titulli i na kontaktoni :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Personalizo elementet për të krijuar një formë kontakti me një klik
Shtoni lartësinë e kolonës 3
Pasi të keni vendosur të gjitha modulet, është koha për të krijuar efektin. Hapi i parë drejt arritjes së rezultatit të dëshiruar është hapja e cilësimeve me 3 kolona dhe shtimi i një lartësie të personalizuar të përgjegjshme në skedën e avancuar.
Tavolinë:
| 01 | height: 3vw; |
tabletë:
| 01 | height: 5vw; |
Telefono:
| 01 | height: 6vw; |
Shtoni një klasë CSS në butonin dhe shigjetën
Më pas, ne do të shtojmë të njëjtën klasë CSS në dy modulet e para të tekstit në kolonën 3.
- Klasa CSS: shfaq-na kontaktoni
Shtoni një klasë CSS në formën e kontaktit
Do të na duhet gjithashtu një klasë CSS e personalizuar për modulin e formularit të kontaktit.
- Klasa CSS: kontakt-formë-modul
Fshih modulin e formularit të kontaktit
Vazhdoni duke shtuar një linjë shtesë të kodit CSS në elementin kryesor të modulit të formularit të kontaktit. Kjo do të na lejojë të fshehim modulin përpara se të klikojmë.
| 01 | display: none; |
Shtoni modulin e kodit në kolonën 3 me kodin JQuery dhe CSS
Dhe për të krijuar funksionin e klikimit, do të na duhet kodi JQuery. Ne gjithashtu do të përdorim kodin e personalizuar CSS. Shtoni një modul të ri kodi në kolonën 2 me kodin. Sigurohuni që të vendosni kodin JQuery midis etiketave të skriptit dhe kodin CSS midis etiketave të stilit.
jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});
.show-contact {
cursor: pointer;
}
.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit.
Përfundim
Në këtë artikull, ne ju treguam se si të shtoni një formë kontakti rënëse në kokën tuaj të personalizuar.
Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
