Cum să creați un blog Post Ticker cu modulul Post Slider al lui Divi

Un ticker de postare pe blog este un instrument convenabil pentru prezentarea dinamică a postărilor de blog (recente, conexe etc.) pe site-ul dvs. web. Poți să te gândești la asta ca la un ticker de știri pentru postările de pe blogul WordPress.

Astăzi, vă vom arăta cum să creați un ticker de postare pe blog cu modulul glisor de postare Divi. Similar cu un ticker de știri, ticker-ul de postare pe blog pe care urmează să îl creăm va fi o versiune simplificată și compactă a modulului glisor de postare Divi. Și, deoarece modulul glisor de postare are funcții încorporate pentru prezentarea postărilor într-o varietate de moduri, îl puteți folosi oriunde doriți. Puteți să-l utilizați pe pagina de pornire ca bifator de postare pentru a afișa postări recente sau îl puteți folosi în antetul unui șablon de postare pe blog pentru a afișa postări legate de categoria curentă.

După ce vă vom arăta cum să creați bifatorul de postări pe blog în Divi, vă vom arăta, de asemenea, cum să îl salvați în biblioteca Divi, astfel încât să îl puteți adăuga la un antet al unui șablon de postare pe blog în Divi Builder.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra marcatorului de postare pe blog pe care îl vom construi în acest tutorial.

Iată cum se afișează frumos bifatorul de pe afișajul telefonului.

Vom arăta cum să adăugați bifatorul de postări pentru a afișa și postările aferente în antetul unui șablon de postare de blog.

Descărcați aspectul și șablonul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Importați aspectul în biblioteca Divi

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer. Acesta va fi fișierul JSON din folderul numit „machetare postare pe blog (Biblioteca Divi)”.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Importați șablonul de antet în Generatorul de teme Divi

Dacă doriți să importați șablonul de postare pe blog cu bifatorul de postare adăugat în antet, va trebui să navigați în Divi> Theme Builder.

Apoi utilizați pictograma de portabilitate din partea dreaptă sus a paginii pentru a importa fișierul JSON. Acesta va fi fișierul din folderul numit „șablon antet postare blog cu bifare postare (Generator de teme)”.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea Blog Post Ticker în Divi

Crearea rândului

Pentru a începe, să creăm un rând cu o coloană în interiorul secțiunii.

Setări rând

Apoi, actualizați setările de proiectare a rândurilor după cum urmează:

• Lățimea jgheabului: 1
• Căptușeală: 0 px sus, 0 px jos

Crearea titlului Post Ticker cu un modul de text

Acum că rândul este la locul său, adăugați un modul de text pe rând pentru a crea titlul de postare.

Textul titlului și fundalul

Actualizați textul corpului pentru a citi „Postări recente:”.

Apoi actualizați culoarea de fundal:

• Culoare fundal: # 333333

Setări de proiectare

Sub fila Design, actualizați stilurile de text după cum urmează:

• Font text: Poppins
• Greutatea fontului textului: Semi Bold
• Stil de text text: TT
• Culoarea textului textului: rgba (255,255,255,0,7)
• Spațiere scrisoare text: 1 px
• Înălțimea liniei textului: 40 px
• Aliniere text: centru

• Lățime: 100%
• Lățime maximă: 175 px (desktop și tabletă), 100% (telefon)

Asta se ocupă de titlul nostru de post-ticker. Acum, să începem să construim bifatorul de mesaje.

Crearea tichetului de postare pe blog cu un modul glisant pentru postarea pe blog

Pentru a crea bifatorul de postări de blog, vom folosi un modul glisor de postări și apoi vom simplifica designul pentru a-l face cu adevărat compact.

Adăugați un modul glisor de postare sub modulul text.

Postați conținutul cursorului

Sub fila conținut, puteți alege numărul de postări, categoriile incluse și modul în care acestea sau comandate. Pentru acest exemplu, vom păstra valoarea implicită și vom face ca cursorul să afișeze cele mai recente postări.

Pentru a ascunde extrasul de postare, asigurați-vă că actualizați următoarele:

• Utilizați extrase postate: NU
• Lungime extras: 0

Postați elemente glisante și fundal

Într-adevăr, tot ce vrem să afișăm în glisor este titlul postării și săgețile de diapozitive. Sub grupul de opțiuni elemente, ascundeți totul, cu excepția săgeților.

• Afișați comenzile: NU
• Afișează Butonul Citește mai mult: NU
• Afișați Meta Meta: NU

Vom păstra opțiunea de a afișa imaginea prezentată ca fundal al fiecărui diapozitiv. Dar pentru o copie de rezervă, asigurați-vă că adăugați următoarea culoare de fundal:

• Culoare fundal: #eeeeee

Setări de proiectare Post Slider

Stiluri de suprapunere și săgeată

Sub fila de proiectare, actualizați suprapunerea de fundal și culoarea săgeții după cum urmează:

• Utilizați suprapunerea în fundal: DA
• Culoare suprapunere fundal: rgba (248.248.248,0.9)
• Culoare săgeată: #ffffff (desktop), # ef51f7 (hover)

Textul titlului

Apoi, actualizați stilurile de text ale titlului după cum urmează:

• Titlu Font: Poppins
• Titlu Greutate font: Mediu
• Alinierea textului titlului: stânga
• Culoare text titlu: # 333333
• Culoarea textului titlului (cursor): # ef51f7
• Dimensiune text titlu: 16 px (desktop), 14 px (telefon)
• Înălțimea liniei de titlu: 40 px
• Titlu Text Shadow: vezi captura de ecran
• Titlu Text Culoare umbră: transparent

Spațiere

Trebuie să facem loc pentru modulul de text al titlului de postare, astfel încât să putem poziționa glisorul de postare în partea dreaptă a acestuia. Pentru aceasta, actualizați următoarele:

• Marja: 175 px stânga (desktop și tabletă), 0 px stânga (telefon)
• Căptușeală: 0 px sus, 0 px jos, 0 px stânga, 0 px dreapta

Animație automată

Glisorul de postare are o opțiune încorporată pentru a adăuga animație automată. Acest lucru ne va oferi funcționalitatea de bifare de care avem nevoie pentru a vedea postările fără a fi nevoie să faceți clic pe săgețile diapozitive.

Adăugați animația automată după cum urmează:

• Animație automată: ON
• Viteza de animație automată: 3500

Simțiți-vă liber să măriți sau să micșorați viteza la ceea ce simțiți că este cel mai bun.

Styling avansat

Clasa CSS și CSS personalizate

În acest moment, glisorul de postare este în mare parte un bifator de postare funcțional. Dar există câteva modificări avansate pe care le putem adăuga pentru a curăța designul.

Mai întâi, adăugați o clasă CSS personalizată după cum urmează:

• Clasa CSS: et-post-ticker

Pentru a vă asigura că titlul postării rămâne pe o singură linie în interiorul glisorului / bifatorului și ascunde depășirea cu o elipsă, adăugați următorul CSS la Titlul diapozitivului:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Pentru a oferi mai multă senzație săgeților de diapozitive, adăugați următoarele CSS la Săgețile de diapozitive:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

CSS suplimentar cu modul de cod pentru poziționarea săgeților de diapozitive

În acest moment, funcționalitatea implicită a săgeților de diapozitive se va afișa numai în timpul deplasării, iar plasarea săgeților se află în partea dreaptă și stânga a diapozitivului. Pentru a îmbunătăți experiența utilizatorului și a-l face mai asemănător unui bifator de postare, putem să afișăm întotdeauna săgețile și să le poziționăm în dreapta glisorului.

Pentru a face acest lucru, adăugați un nou modul de cod sub glisorul de postare.

Apoi lipiți următorul CSS asigurându-vă că îl înfășurați cu etichetele de stil necesare.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

Rezultat final

Iată rezultatul final pe o pagină live.

Observați modul în care bifatorul de post gestionează depășirea textului titlului.

Și iată cum se afișează bifatorul postului pe afișajul telefonului.

Adăugarea Tickerului de postare la antetul unui șablon de postare pe blog

Un caz de utilizare evident pentru această bifă de postare este să îi afișați postări recente pe un antet real al unui șablon de postare pe blog. Iată cum puteți face asta.

Salvarea rândului în biblioteca Divi

Mai întâi, salvați rândul care conține elementele care alcătuiesc tickerul nostru de postare în Biblioteca Divi. Puteți face acest lucru făcând clic pe pictograma cu trei puncte de pe rând și selectând „Salvare în bibliotecă”. Apoi dați aspectului un nume și faceți clic pe butonul „Salvați în bibliotecă”.

Adăugarea rândului Post Ticker la șablonul Header

Editați antetul personalizat

Odată ce rândul a fost salvat în bibliotecă, suntem gata să îl adăugăm la un antet personalizat. Pentru acest exemplu, asigurați-vă că șablonul este atribuit „Toate postările”. Apoi faceți clic pentru a edita antetul personalizat pentru șablonul respectiv.

Introduceți rândul (Post Ticker) din bibliotecă

În editorul de aspect al antetului, faceți clic pentru a adăuga un nou rând oriunde doriți să fie afișat bifatorul de postare.

În modalitatea Inser Row, selectați fila Adăugare din bibliotecă. Găsiți rândul de bifare a postărilor de blog pe care l-ați salvat anterior în bibliotecă și selectați-l.

Acum, bifatorul de postare va apărea pe antet.

Prezentați postările aferente pentru categoria curentă

Deoarece acest marcator de posturi va fi afișat numai pe postările de pe blog, putem alege să afișăm numai postările legate de categoria curentă.

Mai întâi, trebuie să actualizăm textul titlului din modulul nostru text la „Postări corelate:”.

Apoi, deschideți setările glisorului de postare. Sub Categorii incluse, selectați opțiunea Categorie curentă.

Acum, fiecare postare de blog va avea un bifator de postare în antet, care afișează postările aferente în funcție de categoria curentă.

Rezultat pe șablonul de postare pe blog

Iată animația automată în acțiune.

Iată cum puteți face clic pe săgețile de navigare pentru a trece la postările următoare și anterioare. Și făcând clic pe titlul postării, veți ajunge la postarea respectivă.

Iată cum arată tableta și telefonul.

Gânduri finale

După cum am învățat, putem crea cu ușurință un tichet de postare pe blog, simplificând designul modulului glisor Divi și făcând câteva modificări personalizate la săgețile de navigare. Și nu uitați că puteți face întotdeauna ajustări de stil cu ușurință, folosind toate opțiunile încorporate în glisorul postului. Sperăm că acest lucru vă va fi util pentru toți bloggerii și dezvoltatorii web de acolo.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!