Krijo një bar promovimi animacioni për shabllonin e faqes tuaj në Divi mund të jetë një mënyrë e shkëlqyer për të reklamuar produkte dhe oferta elegante pa pasur nevojë të mbështeteni në një shtesë. Duke përdorur veçoritë e fuqishme të dizajnit të Divi, mund ta krijoni vizualisht promovimi kur redaktoni një shabllon në Divi Theme Builder. Më pas, sapo modeli të jetë gati, shiriti i promovimi do të shfaqet në çdo faqe të caktuar për këtë shabllon. 

Ne gjithashtu do t'ju tregojmë se si ta bëni fiksuesin (ose ngjitësin) shiritin e promovimit.

Ç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ë faqe e krijuar me Divi Builder për qëllime të provës, të cilat do të preken nga shablloni i shiritit të promovimit.

Krijoni një shirit promovimi të animuar në krye të një shablloni të faqes

Krijoni një shabllon të ri

Nga pulti i WordPress, lundroni te Divi > Ndërtuesi i Temave. Pastaj klikoni në kutinë "Shto shabllon të ri" për të krijuar një shabllon të ri.

Caktoni shabllonin në faqen (et) në të cilën duhet të shfaqet shiriti i promovimit.

Në shabllonin e ri, klikoni në kutinë "Shto trupin personal" dhe më pas zgjidhni "Ndërtoni trupin personal".

SHENIM: ne po shtojmë shiritin e promovimit në zonën e trupit të modelit (jo kokën) në mënyrë që të mund të funksionojë me kokën e paracaktuar të Divi si dhe të gjitha kryefaqet me porosi që mund ta shtoni më vonë.

Pastaj zgjidhni opsionin "Ndërto nga gërvishtja".

Shtimi i shiritit të promovimit në model

Në redaktuesin e faqosjes së shablloneve, ne mund të fillojmë krijimin e shiritit të promovimit duke përdorur Divi Builder.

Filloni duke shtuar një rresht me një kolonë në seksionin e rregullt.

Cilësimet e linjës

Para se të shtoni një modul, azhurnoni parametrat Row si më poshtë:

• Shkalla e majtë e sfondit: # 4a42ec
• Shkalla e duhur e sfondit: # 521d91
• Drejtimi Gradient: 90deg
• Përdorni një gjerësi hekuri me porosi: PO
• Gjerësia e zorrës së trashë: 1
• Gjerësia: 100%
• Gjerësia maksimale: 100%
• Mobilje tapiceri: 0px në krye, 0px në fund

Kjo mbështet ngjyrën e sfondit dhe gjerësinë e shiritit të promovimit që krijojmë.

Parametrat e kolonës

Para se të dilni nga cilësimet e rreshtit, klikoni për të hapur cilësimet e kolonës. Pastaj shtoni CSS të mëposhtme të personalizuar në elementin kryesor të kolonës:

display: flex;align-items: center;justify-content: center;

Kjo CSS përdor veçorinë flex për të lidhur përmbajtje (ose module) në kolonë për t'u grumbulluar horizontalisht (krah për krah). Ai gjithashtu përqendron modulet në kolonë vertikalisht dhe horizontalisht. Arsyeja pse e bëjmë në këtë mënyrë është që të shmangim përdorimin e strukturave të shumëfishta të rreshtave të kolonave që do të grumbullohen njëra mbi tjetrën në celular. Me këtë konfigurim, përmbajtje do të mbetet horizontalisht në të gjitha gjerësitë e shfletuesit.

Tani jemi gati të shtojmë përmbajtje në shiritin e promovimit.

Shtoni modulin Blurb

Për përmbajtjen e këtij shembulli promovimi, ne do të përfshijmë një modul prezantimi me një ikonë të vogël dhe një blog tekst me një buton në të djathtë (shumë si shirita e promovimit në Elegantthemes.com).

Klikoni në rrethin gri plus ikonën brenda rreshtit dhe shtoni një modul prezantimi.

Për përmbajtjen e tekstit të prezantimit, shkruani informacionin e mëposhtëm:

• Titulli: [shkruani tekstin e promovimit]
• Përdorni ikonën: PO
• Ikona: ikona e dhuratës (shih screenshot)

Përditësoni cilësimet e dizajnit të prezantimit si më poshtë:

• Ngjyra e ikonës: # ff4a9e
• Imazhi / vendndodhja e ikonave: majtas
• Përdorni madhësinë e shkronjave të ikonës: PO
• Madhësia e fontit të ikonave: 16px
• Madhësia e titullit të tekstit: 16px (desktop), 14px (telefon)
• Linja e titullit Hewight: 1.3em
• Gjerësia maksimale: 230px (vetëm telefon)
• Mbushja: Top 10px
• Stili i animacionit: Slide
• Drejtimi i animacionit: djathtas
• Vonesa e animacionit: 250ms

Shtimi i modulit të butonit

Pastaj shtoni një modul butoni nën modulin Blurb. Për shkak të karakteristikës flex, moduli do të shfaqet në të djathtë të mjegullës sesa më poshtë.

Azhurnoni parametrat e dizajnit të butonit si më poshtë:

• Përdorni stilet e personalizuara për butonin: PO
• Madhësia e tekstit të butonit: 15px (desktop), 13px (telefon)
• Ngjyra e tekstit të butonit: #ffffff
• Gjerësia e kufirit të butonave: 0px
• Rrezja e kufirit të butonit: 20px
• Pesha e shkronjave: gjysëm e guximshme

• Margjina (desktop): 20px në të majtë
• Margjina (telefon): 10px në të majtë
• Tapiceri (zyra): 0px në krye, 0px në fund
• Mbushje (telefon): 2px në krye, 2px në fund, 8px në të majtë, 8px në të djathtë
• Stili i animacionit: Kërcej
• Vonesa e animacionit: 1000ms

Cilësimet e seksionit

Për të përfunduar hartimin e shiritit të promovimit, azhurnoni seksionin që përmban shiritin e promovimit si më poshtë:

• Mobilje tapiceri: 0px në krye, 0px në fund
• Stili i animacionit: Kërcej
• Drejtimi i animacionit: Poshtë
• Kohëzgjatja e animacionit: 500ms
• Vonesa e animacionit: 250ms
• Animation duke filluar opacitetin: 100%
• Z-Indeksi: 999

Shtimi i modulit të botimit të përmbajtjes me gjerësi të plotë

Në këtë pikë, shiriti i promocioneve është gati. Por meqenëse ky është një model, duhet të sigurohemi që të shtojmë modulin e botimit të përmbajtjes për të shfaqur përmbajtjen e faqes (ve) duke përdorur këtë model.

Për faqet e ndërtuara (ose që do të ndërtohen) duke përdorur Divi Builder, do të dëshironi të përdorni një modul të përmbajtjes postare me gjerësi të plotë për të maksimizuar zonën e përmbajtjes.

(SHENIM: Për faqet që përdorin redaktuesin e paracaktuar, do të dëshironi të përdorni një mod standard të përmbajtjes së postimit në një seksion të rregullt në mënyrë që të arrini një gjerësi maksimale të ngjashme prej 1080px si parazgjedhje.)

Shtoni një seksion me gjerësi të plotë

Nën seksionin që përmban shiritin tuaj të promovimit, shtoni një seksion me gjerësi të plotë.

Shtoni një modul të përmbajtjes në formatin Fullwidth

Pastaj zgjidhni modulin e përmbajtjes së plotë të postimit.

Moreshtë pak a shumë kjo. Tani sigurohuni dhe ruani paraqitjen para se të dilni nga redaktori.

Pastaj ruani ndryshimet për ndërtuesin e temave.

Rezultati përfundimtar

Para

Tani këtu është faqja para se të caktoni modelin me shiritin e promovimit.

Pas

Dhe këtu është e njëjta faqe me shabllonin e ri me shiritin promo.

Bëni shiritin promovues ngjitës

Në mënyrë që shiriti i promovimit të përshtatet nën titullin e parazgjedhur të Divi, ne mund të shtojmë një copëz të thjeshtë CSS në seksionin që përmban shiritin e promos.

position: fixed;width: 100%;

Hapni cilësimet e seksionit dhe shtoni kodin e mëposhtëm CSS në elementin kryesor të desktopit:

Pastaj shtoni kodin e mëposhtëm CSS në elementin kryesor të tabletës:

position: relative;

Tani kontrolloni rezultatin.

Për shndërrimet e mëparshme, gjithashtu mund të shtoni URL-në e lidhjes në të gjithë rreshtin, nën opsionin e lidhjes së cilësimeve të Rreshtit.

Mendimet e fundit

Në këtë tutorial, ne ju treguam se si të dizajnoni një shirit promocional (nga e para) duke përdorur Divi Theme Builder. Shiriti promovues është i kompletuar me animacione dhe dizajne të shumta për ta bërë atë vërtet të dukshëm vizitorët. Madje mund ta rregulloni shiritin e promocionit ndërsa lëvizni poshtë faqes për më shumë shikueshmëri. Dhe me aftësinë për të kontrolluar se ku vendoset shiriti i promovimit në faqen tuaj, aplikacioni është jashtëzakonisht i përshtatshëm.