Un ghid la îndemână despre modul de stilizare a paginării în Divi

Paginarea este unul dintre acele elemente ale unui site web care este adesea trecut cu vederea, mai ales când vine vorba de proiectare. Și există mai multe locuri în care paginarea poate fi adecvată pentru a fi folosită pe site-ul dvs. web. Practic, paginarea (sau un meniu de paginare) permite utilizatorilor să navigheze prin mai multe pagini de articole (de exemplu, o arhivă de postări). Acest lucru este util în special pentru reducerea conținutului paginii inițiale.

Divi are mai multe module care includ paginarea (cum ar fi modulul galerie) care pot fi stilizate folosind setările încorporate. Unele dintre aceste module (cum ar fi blogul și portofoliul) moștenesc paginarea implicită a temei Divi (sau WordPress), care poate fi simplificată prea mult pentru unele site-uri. Dar cu ajutorul unui plugin, puteți înlocui paginarea întregii teme cu una mai complexă. Apoi îl puteți stiliza cu CSS oricum doriți.

În acest tutorial, vă voi arăta cum să stilizați paginarea în întreaga Divi. Iată ce vom trece peste:

• Lucruri de luat în considerare atunci când proiectați paginarea în Divi
• Stilul modulului Galerie Divi și Paginarea modulului portofoliu filtrabil
• Stiluri avansate de paginare pentru modulul Galerie și modulul Portofoliu filtrabil
• Modificarea stilului blogului și a paginării modulului portofoliu
• Adăugarea paginării complexe la Divi utilizând pluginul WP-PageNavi
• Designul paginării WP-PageNavi cu CSS personalizat

Să începem.

Trage cu ochiul

Această postare se referă în principal la modul de stilizare a paginării. Cu toate acestea, iată câteva stiluri complexe de paginare pe care vă voi arăta cum să le construiți.

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru acest tutorial, veți avea nevoie de următoarele:

• Tema Divi instalată și activă.
• Pentru a testa proiectarea paginării diferitelor module, veți avea nevoie de un conținut simulat. De exemplu, pentru proiectarea paginării modulului portofoliului (sau portofoliului filtrabil), veți avea nevoie de aproximativ 12-16 proiecte adăugate la tema dvs., astfel încât veți avea suficient conținut pentru a permite paginarea să aibă efect. Pentru modulul galerie, veți avea nevoie de aproximativ 12-16 imagini pentru a completa galeria.
• Dacă doriți să utilizați pluginul WP-PageNavi, va trebui să instalați și să activați pluginul. Acesta este un plugin gratuit care poate fi descărcat din directorul WordPress din tabloul de bord WordPress al site-ului dvs. Pur și simplu navigați la Plugin> Adăugați un nou și căutați WP-PageNavi.
  

Odată ce ați pus la dispoziție un conținut simulat, sunteți gata să creați o pagină nouă. Din tabloul de bord WordPress, navigați la Pagini> Adăugați un nou. Oferiți-vă paginii un titlu și implementați Divi Builder. Selectați opțiunea „Build from Scratch”. Apoi faceți clic pentru a Construi pe front-end.

Acum sunteți gata să începeți testarea unor modele de paginare.

Lucruri de luat în considerare atunci când proiectați paginarea în Divi

În general vorbind, probabil că nu doriți să înnebuniți prea mult cu designul paginării, deoarece, ca orice meniu de navigare, este important să îl păstrați simplu și intuitiv. Cu toate acestea, iată câteva lucruri pe care le-ați putea lua în considerare atunci când proiectați paginarea în Divi.

Font Pagination

Paginarea este un loc minunat pentru a te desprinde de principalele fonturi pe care le folosești pentru site-ul tău. Doriți să alegeți cele mai bune fonturi orientate către interfețele utilizatorului și navigare. Și întrucât paginarea conține în principal numere, doriți să vă asigurați că fontul afișează toate numerele cu înălțime și lățime egale (ceea ce experții în tipografie numesc căptușeală și tabelară). Câteva dintre preferatele mele conservatoare includ Oxygen, Nunito Sans și Source Sans Pro. Și dacă aveți o mulțime de pagini în paginare, este posibil să trebuiască să eliberați spațiu mergând cu un font condensat precum Fjalla One sau Roboto Condensed.

Stilul fontului Pagination

De asemenea, puteți încerca câteva stiluri de font pentru a vă diferenția paginarea. De exemplu, puteți utiliza stilul cu majuscule pentru a face legăturile „următoare” și „anterioare” mai pronunțate și egale cu înălțimea numerelor de pagină. Cu toate acestea, adăugarea stilului de font subliniat ar putea fi puțin redundantă, având în vedere că linkurile sunt deja într-un meniu de navigare.

Spațiere între litere de paginare

Spațierea literelor este o modalitate excelentă de a adăuga un pic mai mult spațiu orizontal paginării. Acest lucru poate adăuga un element de design frumos și poate face navigarea să iasă în evidență.

Alinierea textului de paginare

În Divi vă puteți alinia cu ușurință paginarea la stânga, centrul sau dreapta paginii. Așadar, nu uitați de acest lucru ori de câte ori vă proiectați pagina web.

Spațiu clicabil

Este important să aveți suficient spațiu pentru a face clic pe linkurile dvs. de paginare. În mod implicit, acesta va fi destul de mic. Puteți crește spațiul pe care se poate face clic folosind text mai mare sau mărind înălțimea liniei. Dar puteți adăuga, de asemenea, unele umpluturi în jurul acestor link-uri cu unele CSS.

Dimensiunea textului de paginare

Dimensiunea textului de paginare este în mod normal destul de mică. Acest lucru este probabil pentru a-l împiedica să distragă atenția utilizatorilor de la conținutul paginii. Cu toate acestea, dacă aveți o dimensiune mai mare a textului, puteți crește spațiul pe care se poate face clic pe linkul de paginare și face ca utilizatorii să fie mai vizibil. Îmi place să folosesc o unitate de lungime vw pentru un text de paginare mai mare, astfel încât să se potrivească frumos cu browserul și conținutul.

Înălțimea liniei de paginare

Deoarece paginarea rămâne în mod normal pe o singură linie, puteți scăpa adăugând ceva mai multă înălțime a liniei la linkuri pentru a adăuga spațiu suplimentar pe care se poate face clic.

Pagination Text Shadow

Text Shadow poate distrage atenția dacă este folosit prost. Cel mai bine este să îl lăsați afară, cu excepția cazului în care intenționați să îl păstrați subtil. Poate fi, de asemenea, utilizat pentru a adăuga o strălucire creativă în jurul textului, dacă doriți acest gen de lucruri.

Pagină activă de paginare

Acest aspect al paginării este important pentru a permite utilizatorilor să știe pe ce pagină se află în prezent atunci când navighează. Ar trebui să existe un contrast clar între stilul legăturii de pagină activă și linkurile de pagină inactive. În mod implicit, Divi va folosi setul de culori de accent principal setat în Personalizator temă ca culoare a linkului paginii active din Divi. Cu toate acestea, puteți înlocui acest lucru cu linia CSS.

Pentru modulele care au paginare, Divi are opțiuni de proiectare încorporate pentru stilizarea diferitelor elemente ale paginării. În plus, puteți adăuga cu ușurință câteva fragmente de CSS în fila avansată pentru un control și mai mare asupra designului într-un singur loc convenabil.

Dar pentru paginarea la nivel de temă, puteți obține o soluție complexă utilizând pluginul WP-PageNavi cu CSS personalizat (mai multe despre aceasta mai târziu).

Deocamdată, să începem cu modul de stilizare a paginării în modulele Divi.

Stilul modulului Galerie Divi și Paginarea modulului portofoliu filtrabil

Cu Divi Builder activ pe o pagină nouă, creați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul de portofoliu filtrabil pe rând. Așa cum am menționat anterior, asigurați-vă că aveți 12-16 proiecte create, astfel încât să puteți vedea paginarea.

În setările de portofoliu filtrabile, actualizați următoarele:

Număr postări: 4 (astfel încât să puteți vedea mai multe linkuri de pagină în paginare)

Arată titlul: NU
Afișați categorii: Nu

În mod implicit, Divi va afișa paginarea, deci lăsați opțiunea setată la YES.

Ar trebui să vedeți paginarea în partea dreaptă jos a portofoliului.

Pentru a stiliza paginarea, accesați fila de proiectare și deschideți comutatorul Text de paginare pentru a vedea toate opțiunile disponibile. Actualizați următoarele:

Aspect: grilă
Pagination Font: Source Sans Pro
Stilul fontului de paginare: TT
Alinierea textului de paginare: centru
Culoarea textului paginării: #cccccc
Dimensiune text paginare: 4vw (desktop), 38 px (tabletă și telefon)
Distanțarea literelor de paginare: 1vw
Înălțimea liniei de paginare: 2em

Apoi faceți clic pe fila avansată și adăugați următorul fragment de CSS în Paginare activă Paginare :

color: #0096eb !important;

Mărind textul cu o înălțime a liniei mai mare, există mai mult spațiu pentru utilizatori. Schimbarea alinierii în centru și adăugarea unei mici spații între litere ajută la paginarea mai vizibilă. Iar culoarea textului de paginare personalizată, cu culoarea activă a contrastului, ajută utilizatorul să știe pe ce pagină se află.

Alte fragmente CSS rapide

Iată câteva fragmente CSS rapide și ușoare pentru a schimba designul paginării.

Pentru a elimina linia de margine implicită care se află direct deasupra paginării, puteți introduce următorul CSS în Paginarea portofoliului:

border: none;

Pentru a oferi paginării dvs. o margine completă, puteți introduce următorul CSS în Paginarea portofoliului:

border: 2px solid #dddddd;

Pentru a vă oferi paginarea o culoare de fundal, puteți introduce următorul CSS în Paginarea portofoliului:

background: #333333;

Funcționează și pentru modulul Galerie

Aceleași setări de proiectare vor funcționa și pentru modulul Galerie. De fapt, puteți copia stilurile de text de paginare din modulul de portofoliu filtrabil și le puteți lipi într-un modul galerie! Asigurați-vă că transferați și pe orice fragmente CSS.

Stiluri avansate de paginare pentru modulul Galerie și modulul Portofoliu filtrabil

Dacă doriți să obțineți un design mai avansat pentru paginarea modulelor dvs. Portofoliu filtrabil și Galerie, puteți utiliza câteva CSS personalizate mai avansate. Ceea ce îmi place la acest exemplu particular este că CSS personalizat funcționează în tandem cu setările încorporate ale modulului.

Pentru a demonstra, să folosim din nou portofoliul filtrabil. De data aceasta, actualizați opțiunile de proiectare cu următoarele:

Aspect: grilă
Dimensiune text paginare: 16 px
Înălțimea liniei de paginare: 2.5em

Sub fila avansată, adăugați următoarea clasă CSS:

Clasa CSS: pagi-spațiu

Acest lucru va permite ca CSS-ul nostru să fie aplicat numai acestui modul.

Acum salvați setările și deschideți fereastra pop-up Setări pagină. Sub fila avansată, adăugați următorul cod CSS în caseta CSS personalizată.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Cu codul în poziție, puteți vedea că paginarea are acum mai mult spațiu pentru fiecare clic pe linkurile paginii. Și linkurile au, de asemenea, culori de fundal adăugate, astfel încât să arate mai mult ca butoane care pot fi făcute clic. O margine subtilă este adăugată la fiecare dintre link-urile de pe hover. Legătura activă a paginii se remarcă printr-un fundal întunecat contrastant, cu o culoare mai deschisă a textului.

Acest cod va stiliza paginarea atât pentru modulul de portofoliu filtrabil, cât și pentru modulul galerie. Asigurați-vă că adăugați clasa CSS „pagi-spațiu” la modul pentru ca acesta să aibă efect.

Iată rezultatul pe modulul de portofoliu filtrabil.

Modificarea stilului blogului și a paginării modulului portofoliu

Modulul Blog și Modulul Portofoliu moștenesc paginarea WordPress implicită care vă permite să navigați prin arhiva dvs. de postări cu un link către „Intrări mai vechi” și un link către „Intrări următoare”.

Iată cum arată paginarea implicită pe pagina de arhivă a blogului din tema Divi:

Aceeași paginare este utilizată de modulul blog și modulul portofoliu.

Dacă utilizați modulul Blog (sau modulul portofoliu), puteți stiliza textul de paginare utilizând setările încorporate.

Aceasta este o soluție simplă și elegantă pentru majoritatea cazurilor. Cu toate acestea, dacă sunteți în căutarea unei paginări mai complexe pentru a înlocui paginarea implicită Divi / WordPress, există o soluție atât de ușoară încât vă poate surprinde.

Adăugarea paginării complexe la Divi utilizând pluginul WP-PageNavi

Dacă doriți o paginare mai avansată pentru întreaga temă Divi, inclusiv modulul blog și modulul portofoliu, puteți înlocui paginarea implicită WordPress cu una diferită utilizând popularul plugin numit WP-PageNavi. Acest plugin funcționează bine cu Divi. Designul este de bază, dar poate fi personalizat cu ușurință folosind CSS.

Adăugarea pluginului la Divi

Dacă nu ați făcut-o deja, continuați și instalați pluginul așa cum este descris în secțiunea „Noțiuni introductive” din partea de sus a postării. Odată ce pluginul este instalat și activ, noua formă de paginare se va afișa automat pe toată tema.

De asemenea, va afecta modulul blogului și modulul portofoliu.

Setări plugin

Puteți localiza setările pluginului din tabloul de bord WordPress navigând la Setări> WP-PageNavi.

Setările sunt în principal pentru personalizarea funcționalității și a conținutului text afișat. Cu toate acestea, dacă doriți să aranjați paginarea, va trebui să utilizați câteva CSS personalizate.

Designul paginării WP-PageNavi cu CSS personalizat

Deoarece probabil veți dori să stilizați paginarea pentru întreaga temă, este foarte logic să adăugați CSS la Theme Customizer sau la fișierul dvs. Child Theme style.css. Continuați și plasați următorul CSS în caseta CSS suplimentară Theme Customizer:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Iată rezultatul final.

Styling WP-PageNavi în modulul Blog și modulul Portofoliu

După cum sa menționat mai devreme, modulul Blog și modulul Portofoliu moștenesc navigarea implicită a paginii WordPress. Deoarece acest lucru a fost înlocuit cu noua paginare complexă a WP-PageNavi, modulele vor afișa și această nouă paginare.

Puteți utiliza opțiunile integrate de proiectare a textului de paginare pentru a adăuga un stil suplimentar paginării.

Rețineți că este posibil ca unele dintre opțiuni să nu funcționeze conform așteptărilor, cu CSS personalizat extern.

Gânduri finale

Paginarea nu trebuie să continue să fie o gândire ulterioară atunci când construiești un site web în Divi. Există câteva opțiuni încorporate utile pentru a ajuta la acele module care folosesc paginarea. Și cu unele CSS personalizate puteți crea orice stil doriți. Pluginul WP-PageNavi este o soluție elegantă pentru adăugarea unei paginări complexe în întreaga temă Divi. Nu numai că funcționează perfect cu Divi, dar vă oferă opțiuni suplimentare pe care le puteți personaliza cu ușurință. Stilarea paginării WP-PageNavi necesită unele CSS, dar sperăm că șablonul folosit în acest articol vă va pune pe drumul cel bun.

Exemplele de design din acest post au fost în mod simplu simple.

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

Noroc!