Divi: Si të krijoni një rrëshqitës kompakt dëshmish për një kokë

Dëshironi të futni një rrëshqitës kompakt dëshmish për një titull Divi?

Shtimi i dëshmive në faqen tuaj është një mënyrë efektive për të ndërtuar besueshmëri për biznesin (ose markën) tuaj dhe për të ndërtuar besimin midis vizitorët. 

Një rrëshqitës dëshmish është një mjet i dobishëm për të shfaqur dëshmitë në një vend. Me këtë në mendje, ka kuptim të shtoni një rrëshqitës kompakt të dëshmive në kokën tuaj, në mënyrë që këto dëshmi të jenë një nga gjërat e para që përdoruesi sheh kur viziton Faqja e internetit.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrëshqitës kompakt të dëshmive për të shfaqur dëshmi të shkurtra në kokën tuaj Site Web. 

Për ta bërë këtë, ne do të modifikojmë Modulin Divi Slider në një mënyrë argëtuese dhe unike.

Le të fillojmë!

Por përpara se të zbuloni udhëzuesin tonë Divi, tema më e mirë dhe më e lehtë për t'u përdorur WordPress në botë

studim

Këtu është rrëshqitësi kompakt i dëshmive që do të ndërtojmë duke përdorur modulin Divi's Slider.

Dhe këtu është i njëjti rrëshqitës dëshmitar i shtuar në një titull global.

Dhe ja si duket në celular.

Krijo një faqe të re me Divi Builder

Për të filluar, do t'ju duhet të bëni sa më poshtë:

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Si të krijoni një rrëshqitës kompakt të dëshmive në Divi

Shtoni një rresht të ri dhe modul rrëshqitës

Për të filluar, shtoni një rresht me një kolonë në seksion.

Pastaj shtoni një modul Slider në rresht.

Redakto rrëshqitjen

Nën cilësimet e rrëshqitësit, hiqni rrëshqitjen e dytë të paracaktuar nën skedën Përmbajtja, më pas klikoni për të ndryshuar cilësimet për rrëshqitjen e mbetur.

Përmbajtja e rrëshqitjes

Nën tab Përmbajtja nga cilësimet e rrëshqitjes, përditësoni sa vijon:

• Titulli: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Butoni: Lexo të gjitha
• Trupi: - Tatiana Gagelman

Pasi të keni mbaruar, ruani cilësimet e rrëshqitjes.

Lexo gjithashtu: Divi: Si të përdorni cilësimet e maskës së sfondit dhe opsionet e transformimit të modelit

Përditëso cilësimet e rrëshqitësit

Dubliko kontrollet e rrëshqitjes dhe fshehjes

Pas përditësimit të rrëshqitjes së parë me përmbajtje, dublikojeni këtë rrëshqitje për të krijuar një ose më shumë rrëshqitje shtesë.

Pastaj nën grupin e opsioneve Elementet, fshihni kontrollet e rrëshqitësit duke përditësuar sa vijon:

• Shfaq kontrollin: JO

Përditësoni sfondin e të gjitha rrëshqitjeve

Më pas, do të shtojmë një sfond që do të përdoret për të gjitha rrëshqitjet.

Për të shtuar sfondin, përditësoni sa vijon:

• Gradient i sfondit:
  • Gradient ndalesa 0%: #000000
  • Gradient ndalon 100%: #000000

• Imazhi i sfondit:
  • Madhësia: Përshtatshme
  • Pozicioni: Qendra e Majtë
  • Përzierje: Shkëlqim

Cilësimet e rrëshqitësit

Nën skedinë Projektimi, përditësoni sa vijon:

mbulesë

• Përdorni mbivendosjen e sfondit: PO
• Ngjyra e mbivendosjes së sfondit: rgba(0,0,0,0.7)

Teksti i titullit

• Titulli:
  • Niveli i titullit: H4
  • Fonti: Josefin Sans
  • Pesha e shkronjave: mesatare
  • Rreshtimi i tekstit: majtas
  • Madhësia e tekstit: 16 px (desktop dhe tablet), 14 px (telefon)
  • Lartësia e linjës: 1,5em

Trupi i tekstit

• Trupi:
  • Fonti: Josefin Sans
  • Rreshtimi i tekstit: majtas
  • Ngjyra e tekstit: #aaaaaa
  • Hapësira e shkronjave: 0,05em

buton

• Përdorni madhësinë e personalizuar për butonin: PO
• Butoni:
  • Madhësia e tekstit: 1em
  • Ngjyra e tekstit: e parazgjedhur (Desktop), #000 (Hover)
  • Ngjyra e sfondit (Desktop): rgba (255,255,255,0.19)
  • Ngjyra e sfondit (Hover): #ffffff
  • Gjerësia e kufirit: 0 piksele
  • Hapësira e shkronjave: 0,05em
  • Fonti: Josefin Sans
  • Margjina: 0 px (lart dhe poshtë)
  • Mbushja: 0 px (lart dhe poshtë), 0,6em (majtas dhe djathtas)

Mbushje automatike dhe animacion

Më pas, përditësoni hapësirën e rrëshqitësve që të jetë kompakte dhe vendosni shpejtësinë e dëshiruar të animimit automatik.

• Margjina: 0 px (lart dhe poshtë)
• Mbushja: 1em (lart dhe poshtë), 5% (majtas dhe djathtas)
• Animacioni automatik: ON
• Shpejtësia automatike e animacionit: 3500

Custom CSS

Nën skedinë Avancuar, shtoni CSS-në e mëposhtme të personalizuar për të përditësuar stilin e çdo elementi rrëshqitës (titulli, butoni dhe shigjetat)

Titulli i rrëshqitjes

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Kjo do të sigurojë që titulli i rrëshqitjes nuk do të krijojë një ndërprerje rreshti në ekranet më të vogla.

Butoni i rrëshqitjes

position:absolute;
bottom: 1em;
right: 6%;

Kjo i jep butonit një pozicion absolut në mënyrë që të vendoset shumë poshtë titullit dhe në të djathtë të rrëshqitjes, duke e bërë rrëshqitësin edhe më kompakt.

Zvarritni shigjetat

font-size: 30px;
margin-top: -15px;

Thjesht i bën më të vogla shigjetat e navigimit të rrëshqitësit për të përshtatur madhësinë kompakte të rrëshqitësit.

Këshillë: Shtoni të njëjtën ngjyrë sfondi në kolonë për kalime më të buta të rrëshqitjes

Për ta bërë këtë, hapni cilësimet e kolonës mëmë të rrëshqitësit dhe shtoni ngjyrën e mëposhtme të sfondit:

• Sfondi: #000000

Shtimi i imazheve të sfondit të autorit në një rrëshqitje

Nëse dëshironi të përfshini një imazh të sfondit të autorit për një rrëshqitje, mund ta bëni këtë duke shtuar një imazh sfondi në çdo rrëshqitje.

Pasi të keni shtuar imazhin e sfondit në rrëshqitje, imazhi i sfondit do të trashëgojë stilet tashmë të vendosura nën cilësimet e rrëshqitësit (jo të rrëshqitjes).

Rezultat

Shikoni rezultatin përfundimtar.

Shtimi i rrëshqitësit kompakt të dëshmive në një shabllon të kokës

Ruani modulin në bibliotekën Divi

Përpara se të shtojmë rrëshqitësin kompakt të dëshmive në një kokë globale, së pari duhet të regjistrojmë modulin në bibliotekën Divi. 

Ju mund ta bëni këtë duke qëndruar pezull mbi modulin Slider dhe duke klikuar " Shto në Bibliotekë“. Pastaj jepni një emër paraqitjes dhe klikoni në butonin " Ruaje në Bibliotekë".

Shtuar paraqitjen kompakte të modulit të dëshmive në një shabllon të kokës

Redakto titullin e personalizuar

Pasi moduli i ri i rrëshqitësit të dëshmive të jetë ruajtur në bibliotekë, ne jemi gati ta shtojmë atë në një kokë të personalizuar.

Qasja në Divi > Ndërtues i Temave, pastaj klikoni në ikonën që ju lejon të modifikoni " Kryetari i personalizuar".

Fut modulin e ruajtur të rrëshqitësit të dëshmive nga biblioteka

Në redaktuesin e paraqitjes së kokës, klikoni për të shtuar modulin kompakt të rrëshqitësit të dëshmive ku dëshironi të shfaqet.

Në mod "InsertModule", zgjidhni skedën "Shto nga biblioteka". Gjeni rrëshqitësin kompakt të dëshmive që keni ruajtur më parë në bibliotekë dhe zgjidhni atë.

Pasi të jetë ngarkuar, ruani ndryshimet.

Shiko gjithashtu: Divi: Si të shfaqni modulin Fullwidth Header në ekran të plotë

Rezultati përfundimtar

Më poshtë është rrëshqitësi i dëshmisë i shtuar në një titull global.

Këtu kemi rrëshqitësin e dëshmive pa imazhe të sfondit të autorit.

Dhe ja si duket në celular.

Shkarkoni DIVI tani!!!

Përfundim

Rrëshqitësi kompakt i dëshmive mund të jetë një shtesë e re në kokën e çdo gjëje Site Web duke kërkuar të rrisë besueshmërinë e shërbimeve të saj në vendin më të dukshëm në faqen e saj të internetit. 

Mund ta përdorni gjithashtu për të ridrejtuar vizitorët në një faqe dëshmish ose faqe shitjesh për të rritur konvertimet. Shpresojmë që kjo të jetë e dobishme për ju në 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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe 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.

...