Ce ziciposterer blogul tău Divi sub forma unui carusel în care puteți derula cu ușurință articolele?
Pentru multe site-uri web, blogging-ul a devenit o parte importantă a strategiei lor de marketing. SEO.
Dar, pe lângă crearea de conținut de înaltă calitate, este, de asemenea, important să simplificați procesul de navigare a postărilor pentru vizitatorii dvs. În acest fel, ei pot sări de la articol la articol și pot petrece mai mult timp pe site-ul dvs. citind conținutul pe care îl postați acolo.
În Divi, există un modul Blog pe care îl puteți folosi pentru a vă afișa în mod dinamic articolele și pentru a le personaliza, de asemenea. Dacă sunteți în căutarea unei modalități de a duce experiența de căutare a postărilor la nivelul următor, vă va plăcea acest articol.
Vă vom arăta cum să transformați modulul Blog integrat al Divi într-un carusel folosind elementele integrate Divi și un bibliotecă js gratuită .
Să mergem.
studiu
Înainte de a vă scufunda în tutorial, să aruncăm o privire rapidă asupra rezultatului.
Creați o pagină de blog cu Divi Theme Builder
Începeți prin a adăuga o nouă pagină pe site-ul web la care lucrați.
Dați paginii dvs. un titlu, publicați pagina și faceți clic pe „Utilizați Divi Builder".
Descărcați pagina de blog cu aspect pre-proiectat „Companie de design interior”.
În acest tutorial, vom folosi Pagina de blog din aspectul „Companie de design interior”, dar sunteți liber să utilizați orice alt aspect care vă place.
Creați șabloane de săgeți „Anterior” și „Următorul” folosind modulul Rezumat al Divi
Odată intrați în pagina de blog, putem începe să creăm caruselul.
Prima parte este dedicată creării săgeților de care avem nevoie pentru a permite vizitatorilor să navigheze între articole.
Citiți și: Cum să creați un antet global lipicios în DIVI
Pentru a proiecta săgețile, vom folosi modulul Rezumat al Divi, dar sunteți liber să utilizați orice alt modul la alegere.
Adăugați o linie nouă în partea de sus a secțiunii blogul tău folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările liniei și lăsați linia să atingă părțile din stânga și dreapta ale secțiunii, modificând setările de dimensionare după cum urmează:
- Lățime maximă: 100%
- Lățime maximă: 100%
Adăugați un modul Rezumat
Adăugați un modul Rezumat și introduceți un titlu.
Apoi selectați o pictogramă.
- Utilizați pictograme: DA
Setări pictograme
Comutați la fila Stil și modificați setările pictogramei după cum urmează:
- Culoare pictogramă: #000000
- Plasarea imaginii/pictogramei: Vertex
- Aliniere imagine/pictogramă: Centru
Setări text de titlu
Apoi, modificați setările pentru textul titlului.
- Font titlu: Mulish
- Soft Light Titlu: Semi Bold
- Alinierea textului: centru
- Culoarea textului titlului: #000000
dimensionarea
Schimbăm apoi setările de dimensionare a modulului pe diferite dimensiuni de ecran.
- Lățimea maximă: 10% (desktop), 20% (tabletă), 30% (telefon)
- Aliniere text: dreapta
Să adăugăm și o clasă CSS. Această clasă CSS ne va ajuta să declanșăm acțiunea carusel la clic.
- Clasa CSS: butonul înapoi
În cele din urmă, vom adăuga și o linie de cod CSS la elementul principal al modulului pentru a transforma cursorul într-un pointer.
cursor: pointer;
Clonează linia și plasează-o în partea de jos a secțiunii
După ce ați completat prima săgeată, puteți clona întregul container de rând și puteți plasa rândul duplicat la sfârșitul secțiunii de blog.
Deschideți modulul Rezumat în rândul duplicat și editați titlul.
Utilizați pictograme: DA.
Modificați și clasa CSS.
- Clasa CSS: butonul următor
Pregătiți modulul Blog
dimensionarea
Cu săgețile la locul lor, este timpul să începeți să modificați modulul Blog, începând cu rândul în care este plasat. Deschideți setările liniei și modificați setările de dimensionare în consecință:
- Latime maxima: 100%
- Lățime maximă: 100%
Apoi setați debordările de linie la „ascuns”. Acest lucru vă va ajuta să vă asigurați că caruselul nu va face să apară o bară de defilare orizontală în pagina noastră.
- Debordare orizontală: Ascuns
- Debordare verticală: Ascuns
Ascunde paginarea
Odată ce setările liniei sunt stabilite, deschideți setările modulului Blog. Asigurați-vă că paginarea este dezactivată în setările articolului.
- Afișează paginarea: Nu
Apoi, comutați la fila Stil și schimbați aspectul la „Ecran complet”.
- Model: ecran complet
Vom adăuga și o suprapunere.
- Imaginea suprapusă afișată: ACTIV
- Culoarea pictogramei suprapuse: #ffffff
- Culoare de fundal suprapusă: rgba (1,0,66,0.33)
În continuare, vom adăuga o clasă CSS pe blogul nostru, care ne va ajuta să activăm caruselul mai târziu în tutorial.
- Clasa CSS: blog-modul
Și vom genera puțin spațiu între meta post și extras adăugând o marjă de jos la elementul CSS Post Metadata din fila avansată.
Descoperiți și: Cum se creează un meniu glisant și push în DIVI
margin-bottom: 50px;
Adăugați funcționalitatea Slick JS
Odată ce toate setările Divi sunt la locul lor, este timpul să adăugați funcționalitatea slick js! Adăugați un modul Cod chiar sub modulul Blog (sau oriunde altundeva pe pagină).
Apoi adăugați biblioteca slick js în etichete de script (după cum puteți vedea în ecranul de imprimare de mai jos). De asemenea, sunteți liber să le adăugați la antetul site-ului dvs. în setările Divi tema.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Vom modifica ușor fiecare postare de blog la nivel individual, folosind codul CSS.
Citiți și: Cum se creează pagina de blog cu modulul Blog în DIVI
Asigurați-vă că plasați codul între etichetele de stil așa cum se arată în captura de ecran de mai jos.
.slick-slide {
float: left;
margin: 2vw;
}
Și, în sfârșit, vom adăuga niște cod JQuery pentru a permite caruselului să prindă formă. În codul de mai jos, adăugăm și butoanele pe care le-am proiectat pentru funcționalitatea carusel.
Asigurați-vă că plasați codul în etichete de script dupa cum puteti vedea mai jos.
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
}
}]
});
});
Salvați pagina și ieșiți din Visual Builder Divi pentru a afișa rezultatul
În Visual Builder nu veți vedea rezultatul.
Așadar, de îndată ce ați terminat, salvați pagina, ieșiți din Visual Builder și vedeți rezultatul pe site-ul dvs.!
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Descărcați DIVI acum!!!
Concluzie
Asa de ! Asta e pentru acest articol. V-am arătat cum să duceți designul modulului dvs. de blog la nivelul următor. Mai exact, v-am arătat cum să transformați modulul Blog încorporat al Divi într-un carusel folosind o bibliotecă js gratuită.
Dacă doriți să aflați mai multe despre Divi, nu ezitați să vizitați catalogul nostru de Tutoriale Divi. De asemenea, puteți consulta Cum se creează pagina de blog cu modulul Divi Blog
Vezi și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
