Kur krijoni një kokë të personalizuar për veten tuaj Site Web, duke përdorur ndërtuesin e temave të Divi, do ta gjeni veten duke kërkuar mënyrën e përsosur për të shtuar një AAL (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 mundësinë e hyrjes na kontaktoni me ju, pa pasur nevojë të lëvizni poshtë. Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një formularin e kontaktit drop-down duke përdorur kodin Divi dhe JQuery & CSS. Ju gjithashtu do të jeni në gjendje të shkarkoni skedarin JSON falas!
Le të shkojnë.
studim
Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.
1. Shkoni tek Divi Theme Builder dhe filloni të krijoni një kokë globale
Shkoni te Ndërtuesi i Temave Divi
Filloni duke shkuar tek Ndërtuesi i Temave Divi në sfondin e faqes tuaj të WordPress.
Krijoni një kokë globale
Klikoni "Shto Header Global" dhe zgjidhni "Krijo Header Global" për të filluar krijimin e një kokë globale të personalizuar.
2. Ndërtoni modelin e kokës
Cilësimet e seksionit
Ngjyrë e sfondit
Pasi të keni brenda modelin e përgjithshëm të kokës, do të vini re një seksion. Hapni këtë seksion dhe përdorni një ngjyrë të bardhë të sfondit.
- Ngjyra e sfondit: #FFFFFF
ndarje
Pastaj hiqni mbushjen e sipërme dhe të poshtme të paracaktuar nga seksioni.
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
Kuti me hije
Përdorni gjithashtu një hije delikate të kutisë.
- Fuqia e turbullimit të hijes së kutisë: 50px
- Ngjyra e hijes: rgba (0,0,0,0,15)
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar më shumë module, hapni parametrat e linjës dhe modifikoni parametrat e madhësisë si më poshtë:
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 1
- Barazoni lartësitë e kolonave: Po
- Gjerësia: 95%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni mbushjen me porosi të sipërme dhe të poshtme.
- Mbushja e sipërme: 1vw
- Mbushja e poshtme: 1vw
Elementi kryesor
Dhe drejtoni të gjithë përmbajtjen e kolonës duke shtuar një rresht të vetëm të kodit CSS në elementin kryesor të rreshtit.
align-items: center;
Indeksi i kolonës 2 Z
Ne gjithashtu sigurohemi që kolona e dytë të ketë një vlerë më të lartë të indeksit z për qëllime reaktive.
- Indeksi Z: 12
Shtoni një modul imazhi në kolonën 1
Shkarko logon
Timeshtë koha të filloni të shtoni module! Filloni me një modul imazhi në kolonën 1. Ngarko një logo.
radhitje
Pastaj ndryshoni shtrirjen e modulit.
- Rreshtimi i imazhit: qendra
sizing
Ndryshoni gjithashtu gjerësinë.
- Gjerësia: 3vw (desktop), 5vw (tabletë), 7vw (telefon)
Shtoni një modul menuje në kolonën 2
Zgjidhni menunë
Në kolonën e dytë, ne do të shtojmë një modul menuje.
natyrë
Kaloni në skedën e dizajnit të modulit dhe ndryshoni stilin e paraqitjes.
- Stili: në qendër
Cilësimet e tekstit të menusë
Pastaj ndryshoni cilësimet e tekstit në menunë e modulit.
- Font menu: Hapur pa
- Pesha e fontit të menusë: Gjysmë e theksuar
- Ngjyra e tekstit të menusë: # 000000
- Madhësia e tekstit të menusë: 0.8vw (desktop), 2vw (tabletë), 3vw (telefon)
- Hapësira e shkronjave të menusë: 1px
Cilësimet e tekstit të menusë së lëshuar
Pastaj ndryshoni ngjyrën e rreshtit në menunë rënëse.
- Ngjyra e rreshtit të menusë që bie poshtë: # 007dff
icons
Me ngjyrën e ikonës së menusë hamburger.
- Ngjyra e ikonës së menusë Hamburger: # 007dff
Shtoni modulin e tekstit 1 në kolonën 3
Shto një kopje
Le të kalojmë në modulin e tretë! Shtoni një modul teksti me një kopje të zgjedhjes suaj.
Ngjyrë e sfondit
Pastaj shtoni një ngjyrë të sfondit.
- Ngjyra e sfondit: # 007dff
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:
- Shkronja e tekstit: Open Sans
- Pesha e tekstit të tekstit: e theksuar
- Ngjyra e tekstit: #ffffff
- Madhësia e tekstit: 0.8vw (desktop), 2vw (tabletë), 3vw (telefon)
- Shtrirja e tekstit: qendra
sizing
Pastaj modifikoni parametrat e madhësisë së modulit.
- Gjerësia: 33%
- Shtrirja e modulit: qendra
ndarje
Pastaj shtoni mbushjen me porosi të sipërme dhe të poshtme.
- Mbushja e sipërme: 0.8vw (desktop), 2vw (tablet dhe telefon)
- Mbushja e poshtme: 0.8vw (tavolinë), 2vw (tablet dhe telefon)
kufi
Dhe plotësoni parametrat e modulit duke shtuar një rreze kufitare.
- Të gjitha qoshet: 100px
Shtoni modulin e tekstit 2 në kolonën 3
Shtoni një simbol në zonën e përmbajtjes
Le të kalojmë në modulin tjetër, i cili është një modul tjetër teksti. Shtoni shigjetën e mëposhtme në zonën e përmbajtjes: "▼".
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:
- Shkronja e tekstit: Open Sans
- Ngjyra e tekstit: # 007fff
- Madhësia e tekstit: 3vw
- Lartësia e vijës së tekstit: 0em
- Shtrirja e tekstit: qendra
Indeksi Z
Ne gjithashtu rrisim indeksin z të modulit.
- Indeksi Z: 11
Shtoni modulin e formës së kontaktit në kolonën 3
Tani mund të shtoni një formularin e kontaktit vetëm në fund të modulit të tekstit i cili përmban shigjetën. Ky modul është mjaft i thjeshtë për t'u përdorur, kështu që do t'ju duhet të personalizoni cilat fusha dëshironi të bëni të dukshme.
3. Rregulloni elementet për të krijuar një formë kontakti me një klik
Shtoni lartësinë e kolonës 3
Pasi të jenë vendosur të gjitha modet, është koha të krijoni efektin. Hapi i parë drejt arritjes së rezultatit të dëshiruar është të hapni cilësimet në kolonën 3 dhe të shtoni lartësinë e personalizuar të përgjegjshme në skedën e përparuar.
Zyra:
height: 3vw;
tabletë:
height: 5vw;
Telefon:
height: 6vw;
Shtoni një klasë CSS në butonin dhe shigjetën
Pastaj 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ë e personalizuar CSS për modulin e Formularit të Kontaktit.
- Klasa CSS: na kontaktoni-formë-modul
Fshehni modulin e formës së 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 para se të klikojmë.
display: none;
Shtoni një modul kodi në kolonën 3 me kodin JQuery dhe CSS
Dhe për të krijuar funksionin e klikimit, do të na duhet disa kod JQuery. Ne gjithashtu do të përdorim kodin personal të CSS. Shtoni një modul të ri kodi në kolonën 2 me kodin. Sigurohuni që të vendosni kodin JQuery midis etiketave të shkrimit dhe kodit 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 të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
zyrë
Çfarë duhet të mbani mend
Në këtë artikull, ne ju treguam se si të shtoni një formë të kontaktit zbritës në titullin tuaj të personalizuar. Ashtë një mënyrë e shkëlqyeshme për të shkaktuar veprim që herët.
