Divi Plugin Highlight - Divi Breadcrumbs Module

Publicat: 2017-06-26

Când navighez pe un site web, unul dintre instrumentele de navigare pe care le caut sunt pesmetul. Sunt minunate pentru a vă arăta unde vă aflați în ierarhia de navigare și pentru a facilita găsirea altor articole în cadrul structurii. Biscuiți pot fi adăugați la Divi cu un plugin numit Modul Divi Biscuiți.

Divi Breadcrumbs Module este un plugin terță parte de la CodeCrater care creează pesmeturi bazate pe locație. Cu alte cuvinte, vă arată ierarhia categoriilor paginii pe care o citiți în prezent. De asemenea, oferă link-uri pentru fiecare element din ierarhie, astfel încât să puteți vedea cu ușurință cele mai recente postări pentru fiecare dintre categorii. Pesmetul este foarte personalizabil.

Folosind modulul Breadcrumbs, puteți plasa pesmet pe pagini și postări individuale care utilizează Divi Builder. Funcționează, de asemenea, cu Extra și pluginul Divi Builder. În acest punct de evidențiere a pluginului, vom arunca o privire la plugin atât în ​​Divi, cât și în Extra și vom vedea câteva dintre modalitățile în care poate fi personalizat.

De ce să folosiți pesmet?

Pesmetul lasă o urmă care arată ierarhia categoriilor și este o modalitate excelentă de a îmbunătăți navigarea. Nu ocupă mult spațiu și pot reduce și simplifica numărul de acțiuni pe care un utilizator trebuie să le întreprindă pentru a naviga în conținutul dvs. Acest lucru este important mai ales dacă aveți o mulțime de categorii încorporate.

Modulul Divi Breadcrumbs îmbunătățește SEO oferind Google informații ierarhice despre site-ul dvs. web. Aceasta înseamnă că ar trebui să alegeți cuvinte cheie pentru categoriile pe care doriți să le clasificați. Acest lucru îi obligă, de asemenea, pe designeri să utilizeze nume de categorii mai ușor de înțeles.

Pesmetul îmbunătățește atât UX, cât și UI. Acestea nu ar trebui să înlocuiască meniul dvs. de navigare standard, dar pot genera interes și menține vizitatorii pe site-ul dvs. mai mult timp.

Modulul Divi Breadcrumbs

Încărcați și activați pluginul în mod normal. Modulul va apărea într-un roșu aprins numit Hollywood Cerise. Multe pluginuri pentru pesmet necesită Yoast deoarece își extrag pesmetele din pluginul Yoast, dar modulul Divi Breadcrumbs nu necesită Yoast. În schimb, își creează propriile pesmet. Deci, nu sunt necesare alte pluginuri.

Setările de conținut includ ascunderea pesmetului de acasă, adăugarea propriului text de pesmet de acasă, alegerea pictogramei de separare (din 12 opțiuni), ascunderea paginii curente, a setărilor de fundal și a etichetei de administrator. Setările de proiectare includ stilul pentru pictograme, text și linkuri, precum și opțiunile standard de spațiere.

Exemple de module Divi Breadcrumb Module

Acesta este un aspect de bază al articolului cu modulul titlu post cu imagine, modulul pesmet și modulul text al articolelor. Am lăsat setările pentru pesmet la valorile implicite.

Acesta este modul în care arată modulul cu setările implicite. Linkurile pentru Acasă și Scrimă sunt în albastru pentru a arăta că pot fi făcute clic. Pesmetul poate fi plasat în stânga, centrat sau în dreapta.

În acest exemplu, am așezat pesmetul în centru și am adăugat un fundal degradat și am mărit dimensiunile fontului atât pentru titlul articolului (14 puncte), cât și pentru linkuri (12 puncte). Textul este alb. Deoarece sunt imprimate peste un gradient, le-am făcut aceeași culoare. Am schimbat și separatorul de linie. Într-o postare obișnuită nu aș atrage atenția asupra pesmetului cu fundal degradat, dar acest lucru arată ce puteți face cu el.

Adăugarea de pesmet sub un meniu cu lățime completă

Cel mai bun loc pentru a adăuga pesmet este în partea de sus a paginii. În acest exemplu, am creat o postare folosind un meniu de lățime completă și am setat umplutura și marginile la 0 atât pentru secțiunea de lățime completă, cât și pentru secțiunea standard. Am încorporat categoriile pentru a arăta ierarhia.

Am schimbat culorile fontului pesmetului pentru a se potrivi cu meniul cu lățime completă, dar apoi le-am înmuiat, astfel încât să nu iasă în evidență. Am schimbat separatorul cu o săgeată și am eliminat Acasă și pagina curentă din navigarea panoului de navigare.

Observați că pesmetul urmează aceeași structură încorporată ca și categoriile din imaginea de deasupra acestuia. Articolul în sine include și aceste categorii, dar nu există o structură ierarhică. Acestea pot fi eliminate din titlu dacă nu doriți să afișați aceleași categorii de mai multe ori.

În acest exemplu, am plasat culoarea de fundal în rând, am făcut-o cu lățimea completă, am schimbat culoarea fontului, astfel încât să nu depășească meniul și am adăugat 1 pixel la spațiul dintre litere. Micile schimbări pot face o mare diferență.

Acestea sunt aceleași setări folosind fundalul din modulul pesmet în loc de rând. Am adăugat căptușeală pentru a reduce lățimea. Îmi place că creează un mic element care arată separat, dar atașat la meniul de deasupra acestuia.

Coafarea separatorului

Separatorul are, de asemenea, caracteristici de styling. Schimbați stilul, dimensiunea, culoarea, spațiul și înălțimea fontului. Între opțiunile de separare și caracteristicile de stil, puteți face cu ușurință separatoare pentru a se potrivi cu marca site-ului dvs. web.

Acest exemplu folosește fontul implicit în mov și o dimensiune de font de 20 pentru separatoare.

Iată același separator cu un font Georgia pentru separator. Simpla modificare a fontului separatorului este suficientă pentru a-i da un aspect nou.

Iată același separator care utilizează fontul Black Ops One. Este mai îndrăzneț și iese în evidență mai mult.

Acesta este fontul Droid Serif la 20 de puncte, cu o distanță între 4 pixeli. Am făcut fontul roșu închis.

Chiar și punctele își schimbă forma cu opțiunile de font. Aceasta este Pasiunea 1 la 24 de puncte. Merită să petreceți ceva timp pentru a experimenta cu fonturi, culori și dimensiuni pentru a crea ceva unic. Este ușor de făcut cu comenzile de stil standard.

Utilizarea modulului Divi Breadcrumbs cu Extra

Modulul Divi Breadcrumbs funcționează cu Extra și pluginul Divi Builder. Iată o privire la Extra cu pesmet sub imaginea din dreapta. Am inclus numele postării, deoarece pesmetul este atât de departe de titlu în partea de sus a ecranului. Folosește un separator de bare.

În mod ideal, pesmetul ar fi în partea de sus a paginii. În aspectul paginii mele, modulul pesmet este în partea de sus. Motivul pentru care apare sub imagine este că permit lui Extra să afișeze imaginea prezentată.

În acest exemplu, am plasat imaginea în aspect și am setat secțiunea să aibă 0 umplutură de sus. Am eliminat postarea curentă și am făcut separatorul roșu.

Licență, actualizări, asistență

Pluginul poate fi instalat pe site-uri web nelimitate pentru dvs. și clienții dvs. Actualizările sunt pe viață. Include șase luni de sprijin.

  • Faceți clic aici pentru a achiziționa: modulul Divi Breadcrumbs

Gânduri finale

Pesmetul este unul dintre acele lucruri mici pe care le observați când lipsește. Dacă sunt proiectate corect, vor fi acolo atunci când utilizatorul are nevoie de ele și vor rămâne departe de drum atunci când nu au. Modulul Divi Breadcrumbs este o modalitate excelentă de a le adăuga la paginile și postările dvs. Divi și pot fi ușor adaptate pentru a se încadra în branding-ul site-ului dvs. Este simplu și intuitiv.

Dacă sunteți interesat să adăugați pesmet la aspectele dvs. Divi, modulul Divi pesmet poate fi pluginul de care aveți nevoie.

Am vrea să aflăm de la dvs.! Ați încercat modulul Divi Breadcrumbs? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin Yevgenij_D / shutterstock.com