Si thuaposterer blogun tuaj Divi në formën e një karuseli ku mund të lëvizni lehtësisht nëpër artikuj?
Për shumë faqe interneti, blogimi është bërë një pjesë e rëndësishme e strategjisë së tyre të marketingut. SEO.
Por përveç krijimit të përmbajtjes me cilësi të lartë, është gjithashtu e rëndësishme të thjeshtoni procesin e shfletimit të postimeve për vizitorët tuaj. Në këtë mënyrë, ata mund të kalojnë nga artikulli në artikull dhe të kalojnë më shumë kohë në faqen tuaj të internetit duke lexuar përmbajtjen që postoni atje.
Në Divi, ekziston një modul Blog që mund ta përdorni për të shfaqur në mënyrë dinamike artikujt tuaj dhe për t'i personalizuar ato gjithashtu. Nëse po kërkoni një mënyrë për ta çuar përvojën e kërkimit të postimeve në nivelin tjetër, do t'ju pëlqejë ky artikull.
Ne do t'ju tregojmë se si ta transformoni modulin e integruar të Blog-ut të Divi në një karusel duke përdorur elementët e integruar të Divi dhe një bibliotekë js falas .
Le të shkojnë.
studim
Përpara se të zhytemi në tutorial, le t'i hedhim një vështrim të shpejtë rezultatit.
Krijo një faqe blogu me Divi Theme Builder
Filloni duke shtuar një faqe të re në faqen e internetit ku po punoni.
Jepini faqes tuaj një titull, publikoni faqen dhe klikoni 'Përdorni Divi Builder'.
Shkarkoni Faqen e Blogut të Parapërgatitur të Planifikimit të Brendshëm 'Kompania e Dizajnit të Brendshëm'
Në këtë tutorial, ne do të përdorim faqen e Blog-ut nga faqosja "Kompania e Dizajnit të Brendshëm", por ju jeni të lirë të përdorni çdo strukturë tjetër që ju pëlqen.
Krijoni shabllonet e shigjetave 'Previous' dhe 'Next' duke përdorur modulin Divi's Summary
Pasi të hyjmë në faqen e blogut, mund të fillojmë të krijojmë karuselin.
Pjesa e parë i kushtohet krijimit të shigjetave që na duhen për t'i lejuar vizitorët të lundrojnë midis artikujve.
Lexo gjithashtu: Si të krijoni një kokë globale ngjitëse në DIVI
Për të dizajnuar shigjetat, ne do të përdorim modulin e Përmbledhjes së Divi, por ju jeni të lirë të përdorni çdo modul tjetër sipas zgjedhjes suaj.
Shtoni një rresht të ri në krye të seksionit blogun tuaj duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe lëreni rreshtin të prekë anën e majtë dhe të djathtë të seksionit duke ndryshuar cilësimet e madhësisë si më poshtë:
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 100%
Shtoni një modul përmbledhës
Shto një modul Përmbledhje dhe fut një titull.
Pastaj zgjidhni një ikonë.
- Përdorni ikonat: PO
Cilësimet e ikonës
Kalo te skeda Stil dhe modifiko cilësimet e ikonës si më poshtë:
- Ngjyra e ikonës: #000000
- Vendosja e imazhit/ikonës: Vertex
- Shtrirja e imazhit/ikonës: në qendër
Cilësimet e tekstit të titullit
Tjetra, ndryshoni cilësimet e tekstit të titullit.
- Fonti i titullit: Mulish
- Soft Light Titulli: Semi Bold
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit të titullit: #000000
sizing
Më pas ndryshojmë cilësimet e madhësisë së modulit në madhësi të ndryshme të ekranit.
- Gjerësia maksimale: 10% (desktop), 20% (tabletë), 30% (telefon)
- Rreshtimi i tekstit: djathtas
Le të shtojmë gjithashtu një klasë CSS. Kjo klasë CSS do të na ndihmojë të aktivizojmë veprimin e karuselit kur klikojmë.
- Klasa CSS: butoni prapa
Së fundi, ne gjithashtu do të shtojmë një linjë të kodit CSS në elementin kryesor të modulit për ta kthyer kursorin në një tregues.
cursor: pointer;
Klononi vijën dhe vendoseni në fund të seksionit
Pasi të keni përfunduar shigjetën e parë, mund të klononi të gjithë kontejnerin e rreshtit dhe ta vendosni rreshtin e kopjuar në fund të seksionit të blogut.
Hapni modulin Përmbledhje në rreshtin e kopjuar dhe modifikoni titullin.
Përdorni ikonat: PO.
Ndryshoni gjithashtu klasën CSS.
- Klasa CSS: butoni tjetër
Përgatitni modulin Blog
sizing
Me shigjetat në vend, është koha të filloni të ndryshoni modulin Blog, duke filluar me rreshtin në të cilin është vendosur. Hapni cilësimet e linjës dhe ndryshoni cilësimet e madhësisë në përputhje me rrethanat:
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 100%
Pastaj vendosni tejmbushjet e linjës në "të fshehur". Kjo do të ndihmojë të siguroheni që karuseli nuk do të bëjë që një shirit lëvizës horizontal të shfaqet në faqen tonë.
- Vërshimi horizontal: I fshehur
- Vërshim vertikal: I fshehur
Fshih faqetimin
Pasi të jenë vendosur cilësimet e linjës, hapni cilësimet e modulit Blog. Sigurohuni që paging është çaktivizuar në cilësimet e artikullit.
- Shfaq faqet: Jo
Më pas, kaloni në skedën Stil dhe ndryshoni paraqitjen në "Ekrani i plotë".
- Modeli: ekran i plotë
Ne gjithashtu do të shtojmë një mbivendosje.
- Imazhi i mbivendosur i shfaqur: AKTIV
- Ngjyra e ikonës së mbivendosjes: #ffffff
- Ngjyra e sfondit të mbivendosjes: rgba (1,0,66,0.33)
Më pas, ne do të shtojmë një klasë CSS në blogun tonë, e cila do të na ndihmojë të aktivizojmë karuselin më vonë në tutorial.
- Klasa CSS: blog-modul
Dhe ne do të krijojmë një hapësirë midis post meta dhe fragmentit duke shtuar një diferencë të poshtme në elementin Post Metadata CSS në skedën e avancuar.
Zbuloni gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI
margin-bottom: 50px;
Shto funksionalitetin Slick JS
Pasi të jenë vendosur të gjitha cilësimet e Divi, është koha për të shtuar funksionalitetin slick js! Shtoni një modul Kodi pak poshtë modulit Blog (ose kudo tjetër në faqe).
Pastaj shtoni bibliotekën e shkëlqyeshme js në etiketat e skriptit (siç mund ta shihni në ekranin e printimit më poshtë). Ju jeni gjithashtu të lirë t'i shtoni ato në kokën e faqes suaj të internetit në cilësimet e Tema divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Ne do të modifikojmë pak çdo postim në blog në një nivel individual duke përdorur kodin CSS.
Lexo gjithashtu: Si të krijoni faqen e blogut me modulin Blog në DIVI
Sigurohuni që të vendosni kodin midis etiketave të stilit siç tregohet në pamjen e mëposhtme të ekranit.
.slick-slide {
float: left;
margin: 2vw;
}
Dhe së fundi, do të shtojmë disa kode JQuery për të lejuar që karuseli të marrë formë. Në kodin e mëposhtëm, ne shtojmë gjithashtu butonat që kemi projektuar për funksionimin e karuselit.
Sigurohuni që të vendosni kodin në etiketat e skriptit siç mund ta shihni më poshtë.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Ruani faqen dhe dilni nga Divi's Visual Builder për të shfaqur rezultatin
Në Visual Builder nuk do ta shihni rezultatin.
Pra, sapo të keni mbaruar, ruani faqen tuaj, dilni nga Visual Builder dhe shikoni rezultatin në faqen tuaj të internetit!
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.
Shkarkoni DIVI Tani!!!
Përfundim
Kështu që ! Kaq për këtë artikull. Ne ju kemi treguar se si ta çoni dizajnin e modulit tuaj të Blogut në nivelin tjetër. Në mënyrë të veçantë, ne ju treguam se si ta ktheni modulin e integruar të Divi në Blog në një karusel duke përdorur një bibliotekë js falas.
Nëse dëshironi të dini më shumë rreth Divi, mos hezitoni të vizitoni katalogun tonë të Divi tutorial. Ju gjithashtu mund të konsultoheni Si të krijoni faqen e Blog me modulin Divi Blog
Shih gjithashtu burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar 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.
...
