Cum să proiectați o zonă widget de postări recente care poate fi derulată în Divi

Modulul barei laterale Divi este un instrument extrem de util pentru integrarea zonelor widget personalizate în design. Acest lucru vă permite să afișați orice widget WordPress într-un aspect Divi. În acest tutorial, vă voi arăta cum să creați o zonă widget de articole recente care poate fi derulată în Divi. Voi proiecta o secțiune „Din blogul nostru” cu zona widget-ului de postări recente în partea dreaptă a unui modul de blog. Acest lucru va fi perfect pentru a afișa câteva dintre cele mai recente postări de blog pe o pagină de pornire sau de destinație.

Să începem!

Trage cu ochiul

Iată o scurtă privire asupra designului pe care îl vom construi în acest tutorial.

Descărcați GRATUIT aspectul derulabil al mesajelor recente

Pentru a vă pune mâna pe designul de aspect al articolelor recente derulante 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!

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ă trecem la tutorial, nu-i așa?

Abonați-vă la canalul nostru Youtube

Crearea zonei widget pentru postări recente

Deoarece vom adăuga un widget de postări recente la aspectul nostru Divi, primul lucru pe care trebuie să-l facem este să creăm o nouă zonă de widget (cu widget-ul de postări recente) de utilizat cu modulul Sidebar al Divi.

Pentru a crea zona widgetului de postări recente, navigați la Aspect> Widgeturi. Apoi creați o nouă zonă widget dând un nume zonei widget (numiți-o „postări recente” dacă doriți) și făcând clic pe butonul Creare. Reîmprospătați pagina pentru a vedea noua zonă widget disponibilă.

Deschideți comutatorul widgetului de postări recente care vine cu WordPress în partea stângă a paginii. Apoi alegeți zona widgetului „postări recente” din listă și faceți clic pe Adăugare widget pentru a adăuga widgetul în zona widgetului.

Apoi deschideți zona widgetului de postări recente și actualizați widget-ul Postări recente cu un titlu. Setați numărul de postări pe care să le afișați la un număr mare, astfel încât să avem suficiente postări pentru a derula când designul nostru este complet.

Acum, că avem zona noastră pentru widgeturi, putem începe cu designul Divi.

Crearea secțiunii „De pe blogul nostru” cu zona widget de postări recente derulare

Proiectarea secțiunii de titlu

Creați o nouă secțiune obișnuită cu un rând de o coloană.

Înainte de a adăuga un modul, actualizați secțiunea cu următoarele:

Culoare fundal: # 333333
Căptușeală personalizată: 0 px de jos

Apoi, scoateți și umplutura de jos a rândului, actualizând setările rândului:

Căptușeală personalizată: 0 px de jos

Apoi adăugați un modul text la rând.

Apoi actualizați următoarele setări de text:

Pentru conținut, adăugați următorul titlu h2 html:

<h2>From our Blog</h2>

Apoi actualizați următoarele setări de text:

Rubrica 2 Font: Roboto
Rubrica 2 Stil font: TT
Rubrica 2 Culoarea textului: #ffffff
Rubrica 2 Dimensiune text: 40 px
Rubrica 2 Spațierea literelor: 2 px

Asta se ocupă de rubrica pentru aspectul nostru. Acum este timpul să creați restul aspectului folosind o secțiune de specialitate.

Crearea secțiunii de specialitate

Utilizarea unei secțiuni de specialitate separată pentru restul aspectului ne va permite să avem o bară laterală dedicată în dreapta pentru zona noastră widget care poate fi derulată. În plus, ne va permite să dimensionăm și să stilăm rândurile noastre din partea stângă a secțiunii separat de zona barei laterale.

Continuați și adăugați o secțiune de specialitate cu un aspect al coloanei din bara dreaptă după cum urmează:

Apoi adăugați un rând cu o coloană la secțiune.

Înainte de a adăuga un modul, să actualizăm setările noastre de secțiune și rând.

Personalizarea setărilor secțiunii

Deschideți setările pentru secțiunea de specialitate și actualizați următoarele:

Culoare fundal: # 333333
Lățimea jgheabului: 2
Căptușeală personalizată: top 0px
Coloana 2 Împletire personalizată: 0 px sus, 0 px jos

Personalizați setările rândului

Apoi deschideți setările rândului și actualizați următoarele:

Înălțime: 640 px
Lățimea marginii superioare: 8 px
Culoarea chenarului superior: # 444444
Lățimea marginii inferioare: 8 px
Culoarea chenarului inferior: # 444444

Înălțimea personalizată de 640 px este dată pentru a se potrivi cu înălțimea zonei widgetului de postări recente care se pot derula pe care o vom adăuga în bara laterală a secțiunii noastre de specialitate. acest lucru va asigura că cei doi vor avea aceeași înălțime pentru un design mai plăcut din punct de vedere estetic.

Adăugarea modulului Blog

În rândul cu o coloană din stânga, adăugați un modul de blog.

Apoi actualizați setările modulului blog după cum urmează:

Număr postări: 2

Aspect: grilă
Titlu Font: Roboto
Meta Font: Roboto
Meta Font Greutate: ușoară
Stil Font Meta: TT
Pagination Font: Roboto
Stilul fontului de paginare: TT
Culoarea textului paginării: #ffffff
Dimensiune text paginare: 18 px
Spațierea literelor de paginare: 2 px

Adăugarea zonei widget de postări recente derulare

În cele din urmă, este timpul să adăugăm postările recente care pot fi derulate în aspectul nostru. Pentru a face acest lucru, adăugați un modul al barei laterale în zona barei laterale a secțiunii de specialitate din dreapta.

Apoi selectați zona widgetului „postări recente” pe care ați creat-o mai devreme, selectând-o din meniul derulant Zona widget de sub fila conținut.

Apoi actualizați designul textului Titlului și Corpului după cum urmează:

Titlu Font: Roboto
Titlu Stil Font: TT
Culoarea textului titlului: #ffffff
Spațierea literelor de titlu: 2 px
Font corp: Roboto
Stilul fontului corpului: subliniat

Apoi, ascundeți separatorul de margini după cum urmează:

Afișați separatorul de frontieră: NU

Apoi dați modulului barei laterale o înălțime maximă și o căptușeală personalizată după cum urmează:

Înălțime maximă: 640 px
Căptușeală personalizată: 30 px sus, 30 px jos, 5% dreapta

Înălțimea maximă de 640 px se potrivește cu înălțimea personalizată de 640 px dată rândului adiacent.

Acum, că am acordat modulului barei laterale o înălțime maximă de 640 px, trebuie să setăm depășirea verticală pentru a derula pentru a obține funcționalitatea noastră derulabilă. Pentru aceasta, accesați fila Advanced și actualizați următoarele:

Vertical Overflow: Derulați

Rezultat final

Asta e! Acum, să verificăm rezultatul final.

Opțiune bonus: Adăugarea CSS personalizat la bara de derulare a designului (nu este acceptată de toate browserele)

Stilul unei bare de defilare în WordPress este un fel de durere dacă doriți asistență încrucișată. Deci, în majoritatea cazurilor, veți dori să o lăsați în stilurile implicite ale browserului și să o numiți o zi. Dar dacă doriți să personalizați bara de defilare pentru a se potrivi cu designul paginii dvs., puteți adăuga câteva CSS personalizate. Din păcate, suportul pentru browser este limitat la browserele care acceptă: proprietăți CSS prefixate cu webkit (practic doar Safari și Chrome). Iată cum să o faci.

Deschideți setările secțiunii de specialitate și adăugați următoarea clasă CSS:

Clasa CSS: cust-scroll

Apoi deschideți modul de setare a paginii și adăugați următoarele pagini CSS personalizate.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Aceasta modifică lățimea barei de defilare la 8 px și reglează culorile pentru pistă și mâner. Simțiți-vă liber să experimentați cu mai multe modele și culori pe cont propriu.

Și în cazul în care vă întrebați, alternativele pentru alte browsere vor fi stilul implicit al browserelor pentru barele de defilare.

Gânduri finale

Adăugarea defilării verticale la conținut este utilă ori de câte ori doriți să oferiți utilizatorilor opțiunea de a vizualiza mai mult conținut într-un spațiu restrâns. O zonă widget de postări recente care poate fi derulată este un exemplu excelent al modului în care derularea verticală poate funcționa foarte bine. Desigur, puteți înlocui modulul barei laterale utilizat în acest tutorial cu un modul text și puteți adăuga un scroll vertical la orice conținut doriți. Aceeași personalizare se va aplica oricărui modul.

În ceea ce privește stilarea barei de derulare, sunt sigur că există alte pluginuri sau soluții Javascript care ar oferi o soluție mai încrucișată. Dacă știți unele bune, vă rugăm să nu ezitați să le împărtășiți cu noi.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!