Cum să transformi modulul de blog Divi în postări de blog carusel

Publicat: 2022-10-28

În Divi, există un modul de blog care vă poate afișa postările de blog în mod dinamic și le puteți, de asemenea, să le stilați în două aspecte selectate de la început, aspectul Fullwidth care afișează postări stivuite vertical, astfel încât doar o postare să apară pe un singur rând și Grid. aspect care plasează postările de blog în mai multe coloane creând astfel o grilă. Dacă ați folosit modulul de ceva vreme, sunt șanse, este posibil să doriți să aveți un alt stil în afară de aspectul Grid și Fullwidth pentru postările de blog.

Anterior, am realizat și câteva articole pe care le poți încerca să-ți stilizezi postările de pe blog. Una dintre ele se referă la mutarea conținutului postărilor de blog peste imaginea prezentată pentru modulul de blog cu aspect grilă, iar alta este pentru a transforma postările de blog cu aspect pe lățime completă în aspectul listă.

Și de data aceasta, vrem să vă arătăm încă o personalizare pentru a vă stiliza postările de blog: transformarea postărilor de blog într-un carusel cu funcționalitate de glisare pe computer și care poate fi glisată pe mobil pentru a naviga prin postările de blog, cum ar fi următoarea animație.

Transformarea modulului Divi Blog într-un carusel

Pasul 1: creați o pagină sau editați o pagină existentă

Pentru a începe să vă transformați modulul blogului Divi într-un carusel, adăugați o pagină nouă pe site sau editați o pagină existentă, apoi editați-o cu editorul vizual Divi Builder. Pentru acest tutorial, vom crea o pagină nouă și vom folosi Blog Layout din pachetele de layout prefabricate Charter Boat .

Pasul 2: Creați butonul Anterior și Următorul pentru Carusel

Odată ce ați încărcat aspectul, modulul de blog vă va încărca postările de blog în mod dinamic. Următorul pas este crearea butoanelor anterior și următor pentru a permite utilizatorului să meargă înainte și înapoi între postări.

Adăugați un rând nou pentru butoanele de navigare

Începeți prin adăugarea unui nou rând și mutați-l chiar deasupra rândului modulului de blog, apoi utilizați următoarea structură de coloane.

Fără a adăuga încă module, deschideți Setările rândului , apoi setați lățimea rândului la 100% din lățimea secțiunii navigând la fila Design → Bloc de dimensiuni și setând atât Lățimea , cât și Lățimea maximă la 100%.

Adăugați modulele Blurb pentru butoane

Odată ce rândul este gata, adăugați un modul blurb pentru primul buton pentru a naviga prin postări. Alegem modulul blurb pentru buton, deoarece are multe opțiuni de stilare a pictogramei pentru butonul pe care îl folosim pentru navigarea postării.

Deschideți Setările Blurb după ce ați adăugat modulul, aplică următoarele setări la modul:

  • Schimbați titlul în „Anterior”
  • Eliminați textul Body
  • Deschideți blocul Imagine și pictogramă , comutați opțiunea Utilizare pictogramă la Da și selectați pictograma săgeată stânga.
  • Treceți la fila Design , apoi deschideți blocul Imagine și pictogramă pentru a modifica setările pictogramei după cum urmează:
    • Culoare pictogramă : #000000
    • Culoare de fundal imagine/pictogramă: #f2f2f2
    • Imagine/pictogramă Colț rotunjit : 50px pentru toate colțurile
  • Deschideți blocul Text Titlu pentru a stila textul titlului după cum urmează:
    • Greutatea fontului titlului : semi-aldine
    • Alinierea textului titlului: Centru
  • Schimbați opțiunea de dimensionare a modulului pentru diferite dimensiuni de ecran și ajustați alinierea acestuia la dreapta mergând la blocul Dimensiune , apoi modificați setările după cum urmează:
    • Lățime : desktop = 10%, tabletă = 20%, telefon = 30%
    • Alinierea modulului : dreapta
  • Adăugați o clasă CSS personalizată la modul pentru a declanșa acțiunea carusel mai târziu, trecând la fila Avansat → bloc CSS ID & Classes , apoi adăugați clasa CSS personalizată „butonul înapoi” în câmpul Clasă CSS .
  • Schimbați cursorul într-un pointer adăugând următorul fragment CSS la CSS personalizat → Element principal :
    • cursor: pointer;

Clonați rândul de butoane și mutați-l sub rândul blogului

Odată ce butonul anterior este setat, să-i clonăm rândul și modulul inclus, astfel încât să nu mai fie nevoie să repetăm ​​pașii, să mutăm rândul de sub rândul de postări de blog și să schimbăm doar câteva setări pe modulul de blurb clonat pentru pictogramă, titlu, și clasa CSS personalizată pentru butonul următor. Setările modificate sunt după cum urmează:

  • În fila Conținut modificați valoarea:
    • Titlu: Următorul
    • Pictogramă: Săgeată dreapta
  • Apoi treceți la fila Avansat pentru a schimba clasa CSS
    • ID-ul și clasele CSS → Clasa CSS : butonul următor

Pasul 3: Pregătiți modulul Blog

Pregătiți rândul pentru postările de blog Carusel

Înainte de a atinge modulul, să pregătim mai întâi rândul modulului de blog înainte de a-l transforma în postări de blog carusel. Începeți prin a deschide Setările rândului de blog , apoi faceți modificări în setări, după cum urmează:

  • Accesați fila Design → Bloc de dimensiuni, apoi setați:
    • Latime: 100%
    • Latime maxima: 100%
  • Treceți la fila Avansat → Blocul de vizibilitate :
    • Overflow orizontal : Ascuns
    • Overflow vertical: Ascuns

Setările de mai sus se vor asigura că caruselul nu va face să apară nicio bară de defilare orizontală în pagina dvs.

Pregătiți Modulul Blog

Odată ce ați pregătit rândul, atunci este timpul să începeți să modificați modulul blogului. Începeți cu deschiderea Setărilor blogului , apoi faceți modificări în setări, după cum urmează:

  • În fila Conținut → Blocul Elemente setați setarea Afișare paginare la Nu
  • Treceți la fila Design → Bloc aspect pentru a schimba aspectul postării de blog la lățime completă
    • Aspect: lățime completă
  • Apoi adăugați o suprapunere adăugând următoarele valori în blocul Overlay
    • Suprapunere imagine recomandată : Activată
    • Culoare pictogramă suprapusă: #ffffff
    • Culoare de fundal suprapusă: rgba(1,0,66,0.33)
  • Încă în fila Design , deschideți blocul Imagine și selectați unul dintre efectele de umbră casetei din opțiunea Umbră casetă de imagine pentru a adăuga un efect de umbră imaginii prezentate și utilizați următoarea culoare:
    • rgba(1,0,66,0,33)
  • Treceți la fila Avansat , adăugați o clasă CSS personalizată la modulul blog pentru a activa caruselul mai târziu, deschizând blocul CSS ID & Classes , apoi adăugați următoarea clasă CSS:
    • Clasa CSS: wpblog-module
  • Adăugați un spațiu între imaginea prezentată și titlu și, de asemenea, un spațiu între meta postare și fragment prin adăugarea unor margini. Pentru a face acest lucru, adăugați următorul fragment CSS la blocul CSS personalizat :
    • Titlu: margin-top: 10px;
    • Post Meta : margin-bottom: 30px;

Și asta este tot pentru setările modulului de blog. Să-l transformăm într-un carusel care poate fi târât și glisabil, nu?

Pasul 4: Transformați postările de blog într-un carusel care poate fi glisat și glisat

Odată ce setările modulului de blog sunt setate, acum este timpul să transformați postările de blog într-un carusel care poate fi glisat și glisat. Pentru a face acest lucru, trebuie să adăugăm o bibliotecă Slick JS și câteva coduri personalizate pentru ca aceasta să funcționeze.

Adăugați funcționalitatea Slick JS și Slide CSS

Slick JS este un plugin jQuery pentru crearea de carusele complet personalizabile, receptive și prietenoase cu dispozitivele mobile. Pentru a adăuga funcționalitatea Slick JS, adăugați un modul de cod în orice coloană a paginii sau puteți adăuga următorul script cu URL la capul site-ului dvs. accesând Divi → Opțiuni teme Divi → Integrari : 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Pentru acest tutorial, folosim modulul de cod și plasăm codul de mai sus în el, apoi adăugăm următorul cod CSS de diapozitiv chiar sub sfârșitul etichetei scriptului. 

 <Stil>
	.slick-slide {
	plutește la stânga;
	marja: 2vw;
	}
</stil>

Lasă caruselul să-și ia forma

Pentru a lăsa în sfârșit caruselul care poate fi glisat și care poate fi glisat să ia forma, va trebui să adăugați următorul cod JQuery. Puteți plasa codul după codul CSS al slide-ului anterior. Fără alte prelungiri, iată codul: 

 <script>
  jQuery(funcție($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('blog-carusel'); 
 
$('.blog-carusel').slick({
    infinit: adevărat,
    slidesToShow: 3,
    slidesToScroll: 1,
    CenterMode: adevărat,
    CenterPadding: „10%”,
    glisare: adevărat,
    prevArrow: backButton,
    nextArrow: nextButton,
   
    receptiv: [{
    punct de întrerupere: 1079, setări: {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

Codul de mai sus face ca butoanele Anterior și Următorul să funcționeze corect ca butoane de navigare. Puteți vedea imaginea de mai jos pentru plasarea codului nostru în modulul de cod.

Pasul 5: Urmărește-ți postările pe blogul carusel în direct

Acum, toate codurile necesare sunt deja la locul lor, cu toate acestea, modulul de blog este încă în aspectul cu lățime completă în constructorul nostru Divi. Cum se face?

Nu vă faceți griji, salvați pagina și ieșiți din generatorul vizual pentru a vedea postările de pe blogul dvs. din front-end. Și voila, postările dvs. de blog sunt transformate într-un carusel care poate fi glisat și care poate fi glisat cu butoanele următor și precedent pentru a vă oferi o altă modalitate de a naviga prin postările de blog carusel.

Concluzia

Dacă ați folosit modulul de blog de ceva vreme, sunt șanse să aveți un alt stil în afară de aspectul Grid și Fullwidth pentru postările de blog, care sunt aspectul implicit pe care îl puteți obține imediat. Acest tutorial v-a arătat cum să vă transformați postările de pe blog într-un carusel care poate fi glisat și glisabil, care vă oferă mai multe opțiuni de a vă stiliza elementele site-ului, cum ar fi pagina de blog sau postările asociate.

Descărcați Divi