Shiritat anësor ngjitës janë jashtëzakonisht efektivë për të tërhequr vëmendjen e vizitorët pa qenë ndërhyrës apo shpërqendrues. Truku është të përfshini një ose dy elementë në shiritin anësor që "qëndrojnë të dukshëm" ose të fiksuar në anën e përmbajtje të postimit kur përdoruesi lëviz faqen. Kjo është një alternativë freskuese ndaj paraqitjes tradicionale të shiritit anësor, pasi jep përshtypjen e një paraqitjeje moderne me gjerësi të plotë (pa një shirit anësor), me përfitimin e paraqitjes së thirrjeve për veprim të rëndësishme në anën e faqes kur është e nevojshme.
Në këtë manual, ne do t'ju tregojmë se si të shtoni thirrje ngjitëse për veprim në një model postimi blog duke përdorur Divi Theme Builder. Zbatimi i kësaj paraqitjeje është i konsiderueshëm. Do të funksionojë për pothuajse çdo faqe ose çdo model postimi. Plus, nuk keni pse të kufizoheni në CTA; mund të zgjidhni të shtoni modulin (et) Divi sipas zgjedhjes suaj.
Çfarë duhet të filloni
Për të filluar, ju duhet për të instaluar dhe aktivizuar temën Divi . Sigurohuni që të keni versionin më të fundit të Divi.
Ju gjithashtu do të duhet të paktën një mesazh i krijuar me Divi Builder për testimin për të shfaqur rezultatin e dëshiruar.
Pas kësaj, ju jeni gati të largoheni.
studim
Këtu është një përmbledhje e shpejtë e ACT-ve ngjitëse që janë shtuar në një shabllon postimesh në Divi.
Si të shtoni thirrje fikse për veprim në modelin e postimit të blogut tuaj në Divi
Shtimi i modelit të ndërtuesit të temave
Hapi i parë është të importojmë modelin tonë të paracaktuar në faqen tonë. Ne do të përdorim modelin e botimit # 1 të Divi Theme Builder Pack.
Për të filluar, lundroni te Divi > Generator themes. Klikoni ikonën e transportueshmërisë në krye të djathtë të faqes. Në modalin e transportueshmërisë, zgjidhni skedën e importit dhe zgjidhni skedarin divi-theme-builder-pack-1-post-template.json nga dosja. Nëse keni modele të instaluara aktualisht në faqen tuaj, sigurohuni që të zgjidhni çdo opsion që mund të mbishkruajë shabllonet tuaja aktuale. Pastaj klikoni butonin e importit.
Ndërtoni modelin e postimit në blog
Sapo modeli të importohet, ne jemi gati të shtojmë CTA-të tona të reja në shiritin anësor ngjitës në paraqitjen e modelit. Për ta bërë këtë, klikoni në ikonën e redaktimit për zonën e trupit të personalizuar.
Shtuar paraqitje e dyfishtë e shiritave anësorë për të mbajtur CTA-të e shiritave anësorë
Në Redaktuesin e Paraqitjes së Modelit, gjeni rreshtin që përmban modulin Publish. përmbajtje dhe zëvendësoni paraqitjen e kolonës me strukturën e kolonës një të pestën me tre të pestat me një të pestën (1/5 3/5 1/5). Kjo do të na lejojë të mbajmë kolonën në qendër për përmbajtje të postimit duke ofruar dy seksione në të dyja anët për CTA-të tona ngjitëse.
Pas ndryshimit të strukturës së kolonës, tërhiqni modulin e botimit të përmbajtjes në kolonën qendrore.
Përditësoni parametrat e linjës
Hapni cilësimet e linjës dhe azhurnoni opsionet e mëposhtme të projektimit:
- Përdorni një gjerësi hekuri me porosi: PO
- Gjerësia e zorrës së trashë: 2
- Gjerësia: 100% (desktop), 90% (tabletë)
- Gjerësia maksimale: 1500px
Kjo do të na japë dhomën që na nevojitet për konfigurimin tonë të dyfishtë të shiritit anësor.
Përditësoni cilësimet e kolonës 1
Pastaj hapni cilësimet e kolonës 1 dhe jepni kësaj kolone një klasë të zakonshme CSS:
- Klasa CSS: ngjitëse-cta
Shtimi i një shiriti anësor CTA në kolonën e majtë
Tani jemi gati për thirrjen e parë për veprim. Shtoni një thirrje në modulin e veprimit në kolonën e majtë.
Stilizoni shiritin anësor të CTA
Përditësoni cilësimet si më poshtë:
Përmbajtje
- Butoni: "Kliko këtu"
- Trupi: “Përmbajtja juaj shkon këtu. Redaktoni ose fshini këtë tekst në internet ose në cilësimet e përmbajtjes së modulit. ”
- URL e lidhjes së butonit: #
Hartimi i tekstit të trupit
- Font trupi: Montserrat
- Pesha e shkronjave: gjysëm e guximshme
- Teksti i trupit: Rreshtimi i duhur
- Ngjyra e trupit të tekstit: # 444444
- Madhësia e tekstit të trupit: 22px (desktop), 18px (tabletë)
- Lartësia e trupit: 1.3em
buton
- Madhësia e tekstit të butonit: 14px
- Ngjyra e tekstit të butonit: #ffffff
- Ngjyra e sfondit të butonit: # 6148df
- Gjerësia e kufirit të butonave: 0px
- Rrezja e butonit: 80px
- Pesha e shkronjave: E theksuar
- Stili i shkronjave të butonit: TT
- Mbushja e butonave: 12px në krye, 12px në fund, 22px në të majtë, 22px në të djathtë
Gjerësia, shtrirja, mbushja dhe frenimi
- Gjerësia: 100%
- Gjerësia maksimale: 320px
- Rreshtimi i modulit: e drejtë
- Mbushja: 10px në të majtë, 10px në të djathtë
- Gjerësia e kufirit të lartë: 10px
- Ngjyra e kufirit të lartë: #eeeeee
- Gjerësia e kufirit të poshtëm: 10px
- Ngjyra e kufirit të poshtëm: #eeeeee
Shtimi i shiritit anësor të CTA në kolonën e duhur
Për të krijuar CTA për kolonën e djathtë, kopjoni atë që sapo krijuam dhe ngjiteni atë në kolonën e djathtë. Pastaj azhurnoni cilësimet për kopjuar si më poshtë:
- Rreshtimi i trupit të tekstit: majtas
- Shtrirja e modulit: majtas
Përditësoni cilësimet e kolonës 3
Për këtë CTA në kolonën e dorës së djathtë, ne do të shtojmë një diferencë të sipërme në kolonë për të vendosur një pozicion fillestar të shiritit anësor CTA në një pikë të ulët të faqes.
Filloni duke hapur parametrat e kolonës 3 dhe shtoni të njëjtën klasë CSS që shtuam në kolonën 1:
- Klasa CSS: ngjitëse-cta
Pastaj shtoni CSS të mëposhtme të personalizuar në elementin kryesor:
zyrë
margin-top: 50%
tablette
margin-top: 0%
Kjo do të na japë një pikë fillestare të ndryshme për CTA ngjitëse në kolonën e djathtë, e cila është 50% e gjerësisë së rreshtit. Mos ngurroni ta rregulloni këtë vlerë siç është e nevojshme për postimin tuaj në blog.
Shtoni CSS me porosi në shabllon me një modul kodi
Në mënyrë që të marrim pozicionimin tonë "ngjitës" për CTA-të e shiritave anësorë, duhet të shtojmë CSS të personalizuar. Për ta bërë këtë, krijoni një modul të ri të kodit nën modulin e botimit të përmbajtjes (ose kudo në faqe).
Pastaj, ngjitni CSS-in e mëposhtëm në kutinë e kodit:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
Kompensimi i lartë në këtë kod është një llogaritje që pozicionon CTA të përqendruar vertikalisht në faqe kur lëviz. 50vh është gjysma e lartësisë së dritares së shfletuesit dhe 130px është gjysma e lartësisë së CTA. Nëse CTA juaj është më e lartë ose më e ulët, do të duhet të rregulloni 130 piksela lart ose poshtë.
Ruani cilësimet
Pasi të keni mbaruar, ruani paraqitjen e modelit.
Dhe pastaj ruani cilësimet e krijuesit të temës
Rezultati përfundimtar
Për të parë rezultatin përfundimtar, vizitoni një artikull në blog duke përdorur modelin.
Dhe kjo është mënyra se si CTA-të ngjitëse do të qëndrojnë të bllokuara në lëvizje. Ju mund të shihni se si do të funksiononte më mirë për përmbajtje më të gjatë.
Mendimet e fundit
Këto thirrje anësore ngjitëse për veprim janë një alternativë freskuese ndaj shiritit anësor tradicional. Ato funksionojnë mirë për dizajnin minimalist sepse janë më pak ndërhyrës dhe nuk e bëjnë postimin të ndihet i ngatërruar. Për më tepër, mund ta poziciononi CTA më poshtë në faqe në mënyrë që të shfaqet gradualisht dhe të ngjitet në rrotull, duke e bërë atë më të dukshme për njerëzit. vizitorët. Dhe mos harroni. Ju mund të zëvendësoni CTA me çdo modul Divi ose kombinim modulesh për të krijuar pothuajse gjithçka që dëshironi. Ju gjithashtu mund të zgjidhni të mbani vetëm një CTA në njërën anë. Duket se ka shumë aplikime.
