Cum să creați postări recente după aspectul categoriei cu efecte Cool Hover în Divi

Suntem cu toții obișnuiți să vedem postările recente afișate pe un site web. Acestea sunt de obicei generate utilizând widget-ul WordPress Recent Post sau un plugin pentru a afișa cele mai recente articole publicate pe blog. Și, de obicei, apar pe pagina blogului, în partea de jos a postărilor, în bare laterale sau ca o secțiune recomandată a unei pagini de destinație (ceva de genul acesta).

Pentru acest tutorial, vă vom arăta cum să afișați postările recente pe categorii. Folosind doar Divi Builder (și câteva module de blog), vom crea o secțiune care afișează cele mai recente postări din patru categorii diferite. Această secțiune de postări recente pe categorii va include etichete de categorie unice, animații și efecte de plutire - toate fără un plugin.

Verifică!

Trage cu ochiul

Iată o privire rapidă asupra designului și funcționalității Postărilor recente după aspectul categoriei pe care le vom construi împreună.

Descărcați GRATUIT mesajele recente după aspectul categoriei

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 în listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi abonați ș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!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să ajungem 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. De asemenea, funcționalitatea secțiunii de postări recente depinde de a avea postări de blog reale pe site-ul dvs. cu categorii atribuite acestora. Așadar, asigurați-vă că aveți configurate câteva postări de blog simulate dacă utilizați un site de testare.

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

Crearea mesajelor recente în secțiunea Categorie din Divi

Creați un rând cu 4 coloane

Pentru a începe lucrurile în Divi Builder, creați un rând cu 4 coloane.

Crearea modulului de blog 1

Fiecare dintre cele patru coloane va conține un modul de blog separat. Adăugați primul modul de blog în coloana 1.

Fiecare dintre modulele blogului va afișa în mod implicit cea mai recentă postare de pe site-ul dvs. Tot ce vom face este să selectăm o anumită categorie pentru a include pentru acel modul de blog specific. Apoi vom limita numărul de postări la 1, astfel încât să se afișeze o singură postare. Aceasta ne va oferi în mod dinamic cea mai recentă postare de blog pentru acea categorie.

Conținut blog

Actualizați opțiunile de conținut blog după cum urmează:

• Tipul postării: Postări
• Numărul de postări: 1
• Categorii incluse: Știri (sau una a ta)
• Utilizați extrase postate: NU
• Lungime extras: 120

Opțiuni element

Apoi actualizați opțiunile elementelor după cum urmează:

• Afișați categorii: NU
• Afișați extras: NU (desktop), DA (Hover și tabletă)
• Arată paginare: NU

Design de blog

Apoi actualizați designul după cum urmează:

• Culoare fundal (desktop): #ffffff
• Culoarea fundalului (pluteste): # 8ac829
• Titlu Greutate font: Semi Bold
• Titlu Stil Font: TT
• Dimensiune text titlu: 24 px
• Spațierea literelor de titlu: 1 px
• Înălțimea liniei de titlu: 1.4em
• Culoarea textului corpului: #ffffff
• Meta Font Greutate: ușoară
• Distanța Meta Letter: 3 px

• Înălțime minimă: 450 px (desktop), automată (tabletă)
• Căptușeală: 5% sus, 5% jos, 5% stânga, 5% dreapta
• Box Shadow: Vedeți Captura de ecran
• Stil de animație: Zoom

Aceasta se ocupă de proiectarea primului nostru modul de blog. Acum trebuie să ne creăm eticheta de categorie personalizată.

Crearea etichetei de categorie 1

Pentru a crea eticheta, adăugați un nou modul de text sub modulul blogului și apoi trageți-l deasupra modulului blogului.

Conținut text

Actualizați conținutul corpului cu numele categoriei pe care ați ales-o pentru modulul blog. În exemplul meu, afișez postarea recentă din categoria Știri, așa că voi adăuga cuvântul „Știri” la conținutul corpului.

Proiectarea etichetei de categorie

Sub setările de proiectare a textului, actualizați următoarele:

• Culoare fundal: # 8ac829
• Greutatea fontului textului: Ultra Bold
• Culoarea textului textului: #ffffff
• Alinierea textului: centru
• Lățime: 120 px
• Marja: 80 px în partea de sus, -80 px în partea de jos
• Căptușeală: 10 px sus, 10 px jos
• Stil de animație: Fade
• Întârziere animație: 1000 ms
• Indicele Z: 1

Deoarece folosim marja negativă pentru a fixa eticheta peste cardul de blog, va trebui să setăm indexul z la 1, astfel încât eticheta să rămână deasupra modulului de blog.

Acum că avem o postare finalizată, putem implementa modul de vizualizare wireframe și putem copia aceste module pe celelalte coloane.

Copiați modulul text și blog în coloana 1 și lipiți-le în coloanele 2,3 și 4, astfel încât să aveți exact aceleași module în fiecare coloană.

Pentru fiecare modul de blog duplicat, trebuie să îi oferim o nouă categorie de blog și să plutim culoarea de fundal. Și pentru fiecare etichetă de categorie duplicat, trebuie să actualizăm numele categoriei pentru a corespunde cu categoria selectată pentru modulul blogului și apoi să actualizăm culoarea de fundal pentru a se potrivi cu culoarea de fundal a cursorului modulului blogului.

Actualizați modulele din coloana 2

Rămânând în vizualizarea wireframe, deschideți setările pentru modulul blog din coloana 2 și actualizați următoarele:

• Categorii incluse: Business (sau a ta)
• Culoarea fundalului (pluteste): # f64937

Apoi actualizați setările pentru modulul text din coloana 2 după cum urmează:

• Corp: „Afaceri”
• Culoare fundal: # f64937

Actualizați modulele din coloana 3

Apoi deschideți setările pentru modulul blog din coloana 3 și actualizați următoarele:

• Categorii incluse: bani (sau ai tăi)
• Culoarea fundalului (pluteste): # 6529c7

Apoi actualizați setările pentru modulul text din coloana 3 după cum urmează:

• Corp: „bani”
• Culoare fundal: # 6529c7

Actualizați modulele din coloana 4

Apoi deschideți setările pentru modulul blog din coloana 4 și actualizați următoarele:

• Categorii incluse: Coaching (sau al tău)
• Culoarea fundalului (pluteste): # f17809

Apoi actualizați setările pentru modulul text din coloana 4 după cum urmează:

• Corp: „Coaching”
• Culoare fundal: # f17809

Actualizarea setărilor rândului

Există câteva ajustări pe care trebuie să le facem rândului nostru, inclusiv o înălțime setată și lățimea personalizată a jgheabului. Actualizați următoarele setări de rând:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 2
• Lățime: 94%
• Lățime maximă: 1400 px
• Înălțime: 540 px (desktop), automat (tabletă)
• Căptușeală: 0 px sus, 0 px jos

Setăm înălțimea rândului la 540 pixeli pe desktop, pentru a împiedica extinderea și mutarea rândului de conținut pe pagină atunci când treceți peste un card de blog. Asigurați-vă că setați înălțimea la automat pe tabletă, astfel încât să nu ascundeți conținut.

Actualizarea setărilor pentru fiecare coloană

Pentru a oferi postărilor de blog recente un efect de hover care se aplică simultan ambelor module, putem adăuga efectul de hover la coloana care conține cele două module care alcătuiesc postarea de blog. Deschideți setările pentru fiecare dintre coloane și actualizați următoarele:

• Scala de transformare (Hover): 115%

Apoi adăugați următorul CSS personalizat numai la elementul principal de pe afișajul tabletei:

transform: none !important

Acest mic fragment va dezactiva efectul de deplasare a scalei de transformare pentru mobil.

Acum, ori de câte ori postările recente sunt setate cu o etichetă de categorie corespunzătoare și o culoare de fundal potrivită, care se afișează atunci când treceți peste card. De asemenea, cardul va deveni mai mare și va afișa și extrasul pe hover.

Actualizarea setărilor secțiunii

Pentru secțiune, să-i oferim un nou gradient de fundal și o anumită umplutură. Deschideți setările secțiunii și actualizați următoarele:

• Culoarea din stânga a gradientului de fundal: # 6529c7
• Culoarea dreaptă a gradientului de fundal: # f64937
• Direcția gradientului: 270 de grade
• Garnitura: 10vw sus, 10vw jos

Rezultat final

Asta e! Să verificăm rezultatul final. Această imagine include un titlu care poate fi adăugat cu ușurință pentru a finaliza designul.

Și iată efectele de animație și hover.

Gânduri finale

Crearea unei postări recente în funcție de aspectul categoriei este într-adevăr un proces ușor, odată ce te gândești puțin în afara casetei. Tot ce trebuie să faceți este să creați un modul de blog pentru fiecare categorie pe care doriți să o afișați. Apoi, limitați modulul respectiv la afișarea celei mai recente postări pentru o anumită categorie. După aceea, ai puterea lui Divi alături de tine pentru a avea grijă de design.

Această dispunere poate fi utilizată oriunde pe site-ul dvs., inclusiv șabloane Theme Builder. Așadar, nu ezitați să le importați oriunde aveți nevoie de ele folosind opțiunile de portabilitate. Sper că vă va fi la îndemână pentru următorul dvs. proiect sau cel puțin vă va oferi puțină inspirație pentru a face acele roți să se întoarcă pentru designuri Divi și mai bune.

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

Noroc!