Come creare una base di conoscenza per il tuo sito Web con Divi

Avere una Knowledge base sul tuo sito web può essere una risorsa estremamente preziosa sia per i tuoi clienti che per i tuoi dipendenti. E se fatto bene, una base di conoscenza può diventare un segno distintivo di lunga data di garanzia della qualità per la tua azienda. Possono essere un'ottima soluzione per domande frequenti, documentazione, manuali software, tutorial e molto altro.

In questo tutorial, ti mostrerò come aggiungere una knowledge base al tuo sito Web con Divi. Per fare ciò, utilizzerò il plug-in Echo Knowledge Base (versione gratuita) che ha alcune utili opzioni di configurazione che semplificano l'organizzazione e lo stile delle pagine della knowledge base. Mostrerò anche come puoi modellare la pagina principale della knowledge base e le pagine degli articoli utilizzando Divi Builder.

Sbirciata

Ecco un'anteprima di ciò che costruiremo.

La pagina principale della base di conoscenza

Esempio di pagina dell'articolo

Cosa ti serve per questo tutorial

• Il tema Divi (installato e attivo)
• Il plugin Echo Knowledge Base (installato e attivo)
• Il pacchetto di layout del prodotto digitale (disponibile GRATUITAMENTE all'interno di Divi Builder)

Abilita il tipo di post della Knowledge Base in Divi

Divi semplifica il supporto per determinati tipi di post personalizzati di terze parti. Poiché il plug-in della knowledge base utilizza i propri tipi di post per gli articoli, dovrai abilitarli in Divi. Ciò ti consentirà di utilizzare Divi Builder per modificare quegli articoli.

Per fare ciò, vai alla dashboard di WordPress e vai a Divi > Opzioni del tema. Fare clic sulla scheda Builder e abilitare il tipo di post "KB: Knowledge Base".

Creazione degli articoli e delle categorie della Knowledge Base

Per avere una buona idea dell'aspetto che avrà il design, sarà necessario disporre di alcuni articoli della Knowledge Base e dell'impostazione delle categorie. Per ora, va bene utilizzare contenuti fittizi.

Creazione delle categorie della Knowledge Base

Puoi creare categorie di knowledge base proprio come faresti per le normali categorie di post in WordPress.

Per farlo, vai a Knowledge Base > Categorie. Quindi aggiungi un Nome, Slug e Categoria principale (se applicabile) per ciascuna delle categorie che utilizzerai per gli articoli della knowledge base. Per questo esempio, ho aggiunto 6 categorie principali ciascuna con un paio di sottocategorie.

Per darti un'idea di dove sta andando, ecco come verranno visualizzate le categorie principali e le sottocategorie nella pagina principale della knowledge base.

Assegnazione di categorie a nuovi articoli

In questo momento le tue categorie sono presenti ma non ci sono articoli assegnati. Dovrai creare articoli e assegnare a ciascuno una (o più) delle categorie che hai creato.

Puoi creare un nuovo articolo proprio come faresti con un nuovo articolo in WordPress. Vai a Knowledge Base > Aggiungi nuovo articolo. Quindi aggiungi un Titolo e assegna una categoria all'articolo. Noterai che Divi Builder può essere attivato perché abilitiamo questo tipo di post in Opzioni tema. Condividerò alcuni suggerimenti per farlo in seguito. Ma per ora, puoi semplicemente aggiungere un editor WordPress predefinito di contenuti fittizi. Dopo di che pubblica l'articolo.

Continua lo stesso processo per creare tutti gli articoli necessari in modo che a ogni categoria sia assegnato almeno un articolo.

Controlla la pagina della base di conoscenza predefinita

Una volta attivato il plug-in, viene creata automaticamente una pagina della knowledge base. Questa pagina contiene lo shortcode necessario per distribuire la knowledge base principale.

Ecco come apparirà la pagina per impostazione predefinita.

Configurazione del layout e dello stile della Knowledge Base

Il plug-in della knowledge base ha molte opzioni utili per configurare la knowledge base in modo che corrisponda al design del tuo sito web. Sono disponibili opzioni personalizzabili per la Pagina principale, la Pagina dell'articolo e la Pagina di archivio.

Configurazione della pagina principale

Configurazione della pagina principale

Innanzitutto, fai clic sul pulsante Pagina principale nella parte superiore della pagina di configurazione della knowledge base. Nella scheda Impostazioni, puoi lasciare lo stile di layout e i colori predefiniti. Ma per questo esempio, cambierò l'opzione del modello per utilizzare i "Modelli di base della conoscenza progettati per gli articoli". Lo faccio principalmente perché ti consente di personalizzare la pagina di archivio con diverse opzioni di stile predefinite. Ma, se vuoi mantenere i modelli di temi Divi per questo, puoi mantenere l'opzione selezionata su "Modelli di temi correnti utilizzati per post e pagine".

Nel popup Modelli, deseleziona l'opzione Visualizza titolo principale e imposta tutti i padding e i margini 0px. Questo ci consentirà di utilizzare Divi Builder per il titolo e la spaziatura della pagina.

Opzioni Organizza pagina principale e Tutto il testo

Per ora, lascerò le opzioni Organizza e Tutto il testo ai valori predefiniti, ma sentiti libero di cambiarle da solo. Nella scheda Organizza, puoi persino trascinare e rilasciare le tue categorie nell'ordine che preferisci. E le opzioni Tutto il testo ti consentono di modificare la formulazione utilizzata in tutta la pagina (cioè il titolo di ricerca e il testo del pulsante).

Opzione di ottimizzazione della pagina principale

Quindi, fai clic sulla scheda Ottimizzazione. È qui che si svolge la maggior parte dello stile per la base di conoscenza principale. Non userò tutte queste impostazioni, ma cambierò alcuni colori e aggiungerò alcune icone. In questo modo puoi abbinare la base di conoscenza al tuo layout Divi predefinito. Dal momento che ho intenzione di utilizzare il pacchetto di layout del prodotto digitale, utilizzerò quei colori per modellare la pagina della knowledge base.

Colori della casella di ricerca

Nella categoria della casella di ricerca , seleziona i colori e aggiorna quanto segue:

Titolo: #333333
Sfondo della ricerca: #ffffff
Sfondo del pulsante: #091c4f

Stile contenuto

Nella categoria Contenuto , seleziona Stile e aggiorna quanto segue:

Larghezza pagina: larghezza intera

Elenco articoli Stile e Colori

Nella categoria Elenco di articoli , seleziona Stile e aggiorna quanto segue:

Icona: triangolo freccia
Altezza elenco articoli: altezza minima 100 px (utile per rendere tutte le scatole della stessa altezza)

Quindi seleziona Colori e aggiorna quanto segue:

Testo degli articoli: #091c4f
Icona articoli: #6767ef

Categorie Stile e Colori

Successivamente, in Categorie , seleziona Stile e aggiorna quanto segue:

Posizione delle icone: in alto

Quindi fare clic su una delle caselle di categoria nell'anteprima per selezionarla. Quindi seleziona un'icona di categoria per quella categoria specifica. Eseguire questa operazione per ciascuna delle caselle Categoria.

Ci sono oltre 500 icone tra cui scegliere!

Quindi seleziona Colori e aggiorna quanto segue:

Icona della categoria di primo livello: #ffffff
Sottocategoria Testo e icona: #333333
Divisore: #ffffff
Testo dell'intestazione della casella di categoria: #ffffff
Sfondo dell'intestazione della casella di categoria: #091c4f

Caratteristiche della pagina dell'articolo

Ora che abbiamo configurato la pagina principale, fai clic sulla pagina dell'articolo nella parte superiore della pagina. Quindi fare clic sulla scheda caratteristiche. Qui puoi personalizzare elementi come il pulsante Indietro e i breadcrumb che verranno visualizzati nella parte superiore del layout dell'articolo.

Per ora, abbinerò semplicemente il pulsante Indietro al layout predefinito che utilizzerò per la pagina dell'articolo. In Funzionalità, seleziona Navigazione indietro e aggiorna quanto segue:

Colore del testo: #ffffff
Colore di sfondo: #091c4f
Colore bordo: #091c4f
Larghezza del bordo: 3px

Stile di layout della pagina di archivio

Per modificare il layout della pagina di archivio, fai clic su "Pagina di archivio" nella parte superiore della pagina. Sotto la scheda di configurazione, vedrai un elenco a discesa dei diversi stili disponibili. Sto mantenendo le impostazioni predefinite, ma sentiti libero di sperimentare con gli altri stili.

Ecco un esempio di come appare una pagina di archivio di categoria con lo Stile 1 predefinito.

Progettare la pagina della Knowledge Base con Divi

Ora che abbiamo completato la configurazione delle nostre pagine della Knowledge base, siamo pronti per completare il design della pagina principale della knowledge base con Divi Builder.

Per prima cosa, vai a modificare la pagina Titoli “Knowledge Base” che è stata creata automaticamente dal plugin.

Quindi distribuire il Divi Builder. Seleziona l'opzione "Scegli un layout predefinito" e quindi dal popup Carica dalla libreria, seleziona il pacchetto di layout del prodotto digitale. Quindi distribuire il layout della pagina della documentazione nella pagina.

Dopo che il layout è stato caricato sulla pagina, seleziona "Crea sul front-end".

Vedrai che la sezione superiore contiene il modulo di testo con lo shortcode che mostra la nostra nuova knowledge base.

Ora tutto ciò che dobbiamo fare è spostarlo nel punto in cui vogliamo che sia all'interno del layout predefinito e regolare il design secondo necessità con le opzioni di Divi Builder.

Per questo esempio, ho spostato il modulo di testo tenendo lo shortcode KB direttamente sotto il modulo di testo con il titolo "Documentazione".

Quindi ho cancellato tutto fino a quando l'unica cosa che mi era rimasta era la sezione superiore contenente una riga con il modulo di testo "Documentazione" e il modulo di testo contenente lo shortcode. Ho anche mantenuto la sezione inferiore con il CTA.

Per completare il design, apri le impostazioni del modulo di testo contenente lo shortcode e aggiorna quanto segue:

Colore di sfondo: #ffffff
Carattere del testo: Poppins
Angoli arrotondati: 10px

Ecco il disegno definitivo.

E si adatta bene anche sui dispositivi mobili.

Progettare la pagina dell'articolo utilizzando Divi Builder

Poiché abbiamo attivato il tipo di post KB Knowledge Base in Divi Theme Options, puoi progettare i tuoi articoli utilizzando Divi Builder. Il modello dell'articolo della Knowledge base limita Divi Builder al contenuto sotto il titolo della pagina, le breadcrumb e il pulsante Indietro. Limita inoltre il contenuto del generatore divi a una larghezza massima di 1080px.

Per questo esempio, inizierò la progettazione di un articolo della knowledge base con un layout predefinito. Per fare ciò, vai a modificare uno degli articoli e distribuisci Divi Builder. Seleziona "Scegli un layout predefinito" e dal popup Carica dalla libreria, seleziona il pacchetto di layout del prodotto digitale e distribuisci la pagina di contatto del prodotto digitale.

Ora guarda come appare l'articolo. Nota che il contenuto di Divi Builder si trova direttamente sotto il titolo dell'articolo, i breadcrumb e il pulsante Indietro che non sono personalizzabili da Divi Builder.

Ma hai ancora alcune potenti opzioni di personalizzazione per il contenuto che consentono Divi Builder. È possibile utilizzare lo sfondo della sezione superiore del layout della pagina dei contatti per cercare come sfondo della sezione le diverse sezioni (o passaggi) dell'articolo. E puoi facilmente aggiungere screenshot usando il modulo immagine. Fondamentalmente, hai il potenziale illimitato di Divi Builder per l'intero articolo.

Ecco un semplice esempio di come potrebbe apparire una pagina di articolo progettata con Divi.

Naturalmente, potresti aggiungere alcuni CSS personalizzati per regolare la larghezza del contenitore dell'articolo per ottenere un layout a larghezza intera. E potresti aggiungere del codice per nascondere il titolo e quindi utilizzare il contenuto dinamico di Divi per posizionare il titolo dell'articolo ovunque desideri all'interno di Divi Builder.

Pensieri finali

Il plug-in Echo Knowledge Base è sorprendentemente potente, anche senza tutti i componenti aggiuntivi premium disponibili (vale comunque la pena provarli). Le opzioni di configurazione ti consentono di organizzare e modellare le pagine della tua knowledge base in modo che corrispondano facilmente al tuo layout Divi. Per finire, puoi persino utilizzare Divi Builder per progettare la tua pagina della knowledge base e la pagina dell'articolo. Spero che questo tutorial sia stato utile per coloro che desiderano aggiungere una base di conoscenza al proprio sito Web Divi.

Non vedo l'ora di sentirti nei commenti.

Saluti!