Cum să creați o bază de cunoștințe pentru site-ul dvs. web cu Divi

Deținerea unei baze de cunoștințe pe site-ul dvs. web poate fi un atu extrem de valoros atât pentru clienții dvs., cât și pentru angajații dvs. Și dacă este făcut corect, o bază de cunoștințe poate deveni un semn de lungă durată al asigurării calității pentru afacerea dvs. Ele pot fi o soluție excelentă pentru întrebări frecvente, documentație, manuale software, tutoriale și multe altele.

În acest tutorial, vă voi arăta cum să adăugați o bază de cunoștințe pe site-ul dvs. web cu Divi. Pentru a face acest lucru, voi folosi pluginul Echo Knowledge Base (versiunea gratuită), care are câteva opțiuni utile de configurare care facilitează organizarea și stilarea paginilor bazei de cunoștințe. De asemenea, vă voi arăta cum puteți stiliza pagina principală a bazei de cunoștințe și paginile articolelor folosind Divi Builder.

Trage cu ochiul

Iată o scurtă privire asupra a ceea ce vom construi.

Pagina principală a bazei de cunoștințe

Exemplu de pagină a articolului

De ce aveți nevoie pentru acest tutorial

• Tema Divi (instalată și activă)
• Pluginul Echo Knowledge Base (instalat și activ)
• Pachetul de aspect digital al produsului (disponibil GRATUIT în cadrul Divi Builder)

Activați tipul de postare a bazei de cunoștințe în Divi

Divi facilitează furnizarea de asistență pentru anumite tipuri de posturi personalizate ale unor terți. Deoarece pluginul bazei de cunoștințe folosește propriile tipuri de postări pentru articole, va trebui să le activați în Divi. Acest lucru vă va permite să utilizați Divi Builder pentru a edita acele articole.

Pentru a face acest lucru, accesați tabloul de bord WordPress și navigați la Divi> Opțiuni temă. Faceți clic pe fila Generator și activați tipul de postare „KB: Baza de cunoștințe”.

Crearea articolelor și categoriilor din baza de cunoștințe

Pentru a vă face o idee bună despre cum va arăta designul, va trebui să aveți câteva articole din baza de cunoștințe și categorii configurate. Deocamdată este în regulă să folosiți conținut simulat.

Crearea categoriilor bazei de cunoștințe

Puteți crea categorii de baze de cunoștințe la fel ca și pentru categoriile normale de postări din WordPress.

Pentru aceasta, navigați la Baza de cunoștințe> Categorii. Apoi adăugați un nume, un slug și o categorie părinte (dacă este cazul) pentru fiecare dintre categoriile pe care urmează să le utilizați pentru articolele din baza de cunoștințe. Pentru acest exemplu, am adăugat 6 categorii părinte fiecare cu câteva subcategorii.

Pentru a vă face o idee despre unde se îndreaptă acest lucru, iată cum vor fi afișate categoriile și subcategoriile părinte pe pagina principală a bazei de cunoștințe.

Atribuirea categoriilor la articole noi

În acest moment categoriile dvs. sunt la locul lor, dar nu există articole care le sunt atribuite. Va trebui să creați articole și să atribuiți una (sau mai multe) categorii pe care le-ați creat fiecăruia.

Puteți crea un articol nou la fel cum ați face o nouă postare în WordPress. Navigați la baza de cunoștințe> Adăugați un articol nou. Apoi adăugați un titlu și atribuiți o categorie articolului. Veți observa că Divi Builder poate fi activat deoarece activăm acest tip de postare în Opțiuni teme. Voi împărtăși câteva sfaturi pentru a face acest lucru mai târziu. Dar, deocamdată, puteți adăuga doar un editor de WordPress implicit. După aceea publicați articolul.

Continuați același proces pentru a crea toate articolele necesare, astfel încât fiecare categorie să aibă cel puțin un articol atribuit.

Verificați pagina implicită a bazei de cunoștințe

Odată ce activați pluginul, o pagină a bazei de cunoștințe este creată automat pentru dvs. Această pagină conține codul scurt necesar pentru a implementa baza principală de cunoștințe.

Iată cum va arăta pagina în mod implicit.

Configurarea aspectului și stilului bazei de cunoștințe

Pluginul bazei de cunoștințe are o mulțime de opțiuni utile pentru configurarea bazei de cunoștințe pentru a se potrivi cu designul site-ului dvs. web. Există opțiuni personalizabile pentru Pagina principală, Pagina articolului și Pagina Arhivă.

Configurarea paginii principale

Configurare pagină principală

Mai întâi, faceți clic pe butonul Pagina principală din partea de sus a paginii de configurare a bazei de cunoștințe. Sub fila de configurare, puteți lăsa stilul și culorile de aspect implicite. Dar pentru acest exemplu, voi schimba opțiunea șablon pentru a utiliza „Șabloanele bazei de cunoștințe proiectate pentru articole”. Fac acest lucru în principal pentru că vă permite să personalizați pagina Arhivă cu diferite opțiuni de stil premade. Dar, dacă doriți să păstrați șabloanele de temă Divi pentru aceasta, puteți păstra opțiunea selectată la „Șabloane de temă curente utilizate pentru mesaje și pagini”.

În fereastra popup Șabloane, deselectați opțiunea Afișare titlu principal și setați toate umpluturile și marginile 0px. Acest lucru ne va permite să folosim Divi Builder pentru titlul și spațiul paginii.

Opțiuni Organizare pagină principală și Toate textele

Deocamdată, voi lăsa opțiunile Organizați și Toate textul la valorile implicite ale acestora, dar nu ezitați să le schimbați pe cont propriu. Sub fila Organizați, puteți chiar să glisați și să plasați categoriile în orice ordine doriți. Iar opțiunile Toate textul vă permit să modificați formularea utilizată pe întreaga pagină (adică titlul căutării și textul butonului).

Opțiune de reglare a paginii principale

Apoi, faceți clic pe fila Tuning. Aici are loc cea mai mare parte a stilului pentru baza principală de cunoștințe. Nu voi folosi toate aceste setări, dar voi schimba câteva culori și voi adăuga câteva pictograme. Așa puteți asorta baza de cunoștințe cu aspectul dvs. Divi premodat. Din moment ce intenționez să folosesc pachetul de aspect digital al produsului, voi folosi acele culori pentru a stiliza pagina bazei de cunoștințe.

Căutați culorile casetei

Sub categoria casetei de căutare , selectați culorile și actualizați următoarele:

Titlu: # 333333
Fundalul căutării: #ffffff
Fundalul butonului: # 091c4f

Stilul conținutului

Sub categoria Conținut , selectați Stil și actualizați următoarele:

Lățimea paginii: Lățimea completă

Lista articolelor Stil și culori

Sub categoria Lista articolelor , selectați Stil și actualizați următoarele:

Pictogramă: Triunghi săgeată
Înălțimea listei de articole: 100px înălțime min (acest lucru este util pentru ca toate cutiile să aibă aceeași înălțime)

Apoi selectați Culori și actualizați următoarele:

Textul articolelor: # 091c4f
Pictogramă articole: # 6767ef

Categorii Stil și culori

Apoi, sub Categorii , selectați Stil și actualizați următoarele:

Pictograme Locație: sus

Apoi faceți clic pe una dintre casetele de categorie din previzualizare pentru a o selecta. Apoi selectați o pictogramă de categorie respectivă. Faceți acest lucru pentru fiecare dintre casetele Categorie.

Există peste 500 de pictograme din care puteți alege!

Apoi selectați Culori și actualizați următoarele:

Pictogramă categorie de nivel superior: #ffffff
Subcategorie Text și pictogramă: # 333333
Împărțitor: #ffffff
Textul titlului casetei de categorii: #ffffff
Fundalul titlului casetei de categorii: # 091c4f

Caracteristicile paginii articolului

Acum că avem pagina principală configurată, faceți clic pe pagina articolului din partea de sus a paginii. Apoi faceți clic pe fila caracteristici. Aici puteți personaliza elemente precum butonul Înapoi și pesmetul care vor apărea în partea de sus a aspectului articolului.

Deocamdată, voi potrivi doar butonul Înapoi cu aspectul premade pe care îl voi folosi pentru pagina articolului. Sub Funcții, selectați Navigare înapoi și actualizați următoarele:

Culoarea textului: #ffffff
Culoare fundal: # 091c4f
Culoare margine: # 091c4f
Lățimea chenarului: 3 px

Arhivează stilul de aspect al paginii

Pentru a schimba aspectul paginii de arhivare, faceți clic pe „Arhivați pagina” în partea de sus a paginii. Sub fila de configurare, veți vedea o listă verticală cu diferite stiluri disponibile. Păstrez valorile implicite, dar simțiți-vă liber să experimentați cu celelalte stiluri.

Iată un exemplu de cum arată o pagină de arhivă de categorii cu stilul implicit 1.

Proiectarea paginii bazei de cunoștințe cu Divi

Acum, după ce am finalizat configurarea paginilor bazei noastre de cunoștințe, suntem gata să finalizăm proiectarea paginii principale a bazei de cunoștințe cu Divi Builder.

Mai întâi, mergeți la editarea paginii Titluri „Baza de cunoștințe” care a fost creată automat de plugin.

Apoi, implementați Divi Builder. Selectați opțiunea „Alegeți un aspect premade” și apoi din fereastra pop-up Încărcare din bibliotecă, selectați pachetul de aspect digital al produsului. Apoi implementați aspectul paginii de documentare pe pagină.

După ce aspectul se încarcă pe pagină, selectați „Build on the Front End”.

Veți vedea că secțiunea de sus conține modulul text cu codul scurt care afișează noua noastră bază de cunoștințe.

Acum, tot ce trebuie să facem este să-l mutăm în locul în care dorim ca acesta să fie în aspectul premade și să ajustăm designul după cum este necesar cu opțiunile Divi Builder.

Pentru acest exemplu, am mutat modulul text ținând codul scurt KB direct sub modulul text cu titlul „Documentație”.

Apoi am șters totul până când singurul lucru care mi-a rămas a fost secțiunea de sus care conține un rând cu modulul de text „Documentare” și modulul de text care conține codul scurt. Am păstrat și secțiunea de jos cu CTA.

Pentru a finaliza designul, deschideți setările modulului text care conține codul scurt și actualizați următoarele:

Culoare fundal: #ffffff
Font text: Poppins
Colțuri rotunjite: 10 px

Iată designul final.

Și, de asemenea, se reglează frumos și pe mobil.

Proiectarea paginii articolului folosind Divi Builder

Deoarece am activat tipul de postare din Baza de cunoștințe KB în Opțiunile temei Divi, vă puteți proiecta articolele folosind Divi Builder. Șablonul articolului bazei de cunoștințe limitează Divi Builder la conținutul de sub butonul Titlu pagină și pesmet și butonul Înapoi. De asemenea, limitează conținutul constructorului de divii la o lățime maximă de 1080px.

Pentru acest exemplu, voi începe proiectarea unui articol din baza de cunoștințe cu un aspect premade. Pentru a face acest lucru, mergeți la editarea unuia dintre articole și implementați Divi Builder. Selectați „Alegeți un aspect premade” și din fereastra pop-up Load from Library, selectați Digital Product Layout Pack și implementați pagina de contact a produsului digital.

Uită-te acum la cum arată articolul. Rețineți că conținutul Divi Builder se află direct sub titlul articolului, pesmet și butonul Înapoi, care nu sunt personalizabile de Divi Builder.

Dar aveți în continuare câteva opțiuni de personalizare puternice pentru conținutul care permite Divi Builder. Puteți utiliza fundalul secțiunii superioare a aspectului paginii de contact pentru a căuta ca fundal secțiune pentru diferitele secțiuni (sau pași) ai articolului. Și puteți adăuga cu ușurință capturi de ecran folosind modulul imagine. Practic, aveți potențialul nelimitat al Divi Builder pentru întregul articol.

Iată un exemplu simplu de cum ar putea arăta o pagină de articol proiectată cu Divi.

Desigur, ați putea adăuga câteva CSS personalizate pentru a regla lățimea containerului articolului pentru a obține un aspect cu lățime completă. Și puteți adăuga un cod pentru a ascunde titlul și apoi utilizați conținutul dinamic Divi pentru a plasa titlul articolului oriunde doriți în Divi Builder.

Gânduri finale

Pluginul Echo Knowledge Base este surprinzător de puternic, chiar și fără toate suplimentele premium disponibile (merită verificate totuși). Opțiunile de configurare vă permit să organizați și să vă stilizați paginile bazei de cunoștințe pentru a se potrivi cu aspectul dvs. Divi cu ușurință. În plus, puteți folosi chiar și Divi Builder pentru a vă proiecta pagina bazei de cunoștințe și pagina articolului. Sper că acest tutorial a fost util pentru cei care doresc să adauge o bază de cunoștințe pe site-ul dvs. Divi.

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

Noroc!