So erstellen Sie mit Divi . eine Wissensdatenbank für Ihre Website

Eine Wissensdatenbank auf Ihrer Website kann sowohl für Ihre Kunden als auch für Ihre Mitarbeiter ein äußerst wertvolles Gut sein. Und wenn es richtig gemacht wird, kann eine Wissensdatenbank zu einem langjährigen Markenzeichen der Qualitätssicherung für Ihr Unternehmen werden. Sie können eine großartige Lösung für FAQs, Dokumentation, Softwarehandbücher, Tutorials und vieles mehr sein.

In diesem Tutorial zeige ich Ihnen, wie Sie mit Divi eine Wissensdatenbank zu Ihrer Website hinzufügen. Dazu verwende ich das Echo Knowledge Base-Plugin (kostenlose Version), das einige hilfreiche Konfigurationsoptionen bietet, mit denen Sie Ihre Wissensdatenbankseiten einfach organisieren und gestalten können. Außerdem zeige ich Ihnen, wie Sie die Hauptseite der Wissensdatenbank und die Artikelseiten mit dem Divi Builder gestalten können.

Vorgeschmack

Hier ein kleiner Vorgeschmack auf das, was wir bauen werden.

Die Hauptseite der Wissensdatenbank

Beispielartikelseite

Was Sie für dieses Tutorial benötigen

• Das Divi-Theme (installiert und aktiv)
• Das Echo Knowledge Base-Plugin (installiert und aktiv)
• Das digitale Produkt-Layout-Paket (im Divi Builder KOSTENLOS erhältlich)

Aktivieren Sie den Knowledge Base-Beitragstyp in Divi

Divi macht es einfach, Unterstützung für bestimmte benutzerdefinierte Beitragstypen von Drittanbietern bereitzustellen. Da das Wissensdatenbank-Plugin eigene Beitragstypen für Artikel verwendet, müssen Sie diese in Divi aktivieren. Auf diese Weise können Sie den Divi Builder verwenden, um diese Artikel zu bearbeiten.

Gehen Sie dazu zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi > Theme-Optionen. Klicken Sie auf die Registerkarte Builder und aktivieren Sie den Beitragstyp „KB: Knowledge Base“.

Erstellen der Knowledge Base-Artikel und -Kategorien

Um eine gute Vorstellung davon zu bekommen, wie das Design aussehen wird, müssen Sie einige Knowledge Base-Artikel und Kategorien einrichten. Im Moment ist es in Ordnung, simulierte Inhalte zu verwenden.

Erstellen Sie Ihre Wissensdatenbank-Kategorien

Sie können Kategorien in der Wissensdatenbank genauso erstellen, wie Sie es für normale Beitragskategorien in WordPress tun würden.

Navigieren Sie dazu zu Knowledge Base > Kategorien. Fügen Sie dann für jede der Kategorien, die Sie für die Wissensdatenbankartikel verwenden möchten, einen Namen, einen Slug und eine übergeordnete Kategorie (falls zutreffend) hinzu. Für dieses Beispiel habe ich 6 übergeordnete Kategorien mit jeweils einigen Unterkategorien hinzugefügt.

Um Ihnen eine Vorstellung davon zu geben, wohin dies führt, sehen Sie hier, wie die übergeordneten Kategorien und Unterkategorien auf der Hauptseite der Wissensdatenbank angezeigt werden.

Zuweisen von Kategorien zu neuen Artikeln

Im Moment sind Ihre Kategorien vorhanden, ihnen sind jedoch keine Artikel zugeordnet. Sie müssen Artikel erstellen und jedem eine (oder mehrere) der von Ihnen erstellten Kategorien zuweisen.

Sie können einen neuen Artikel genauso erstellen wie einen neuen Beitrag in WordPress. Navigieren Sie zu Wissensdatenbank > Neuen Artikel hinzufügen. Fügen Sie dann einen Titel hinzu und weisen Sie dem Artikel eine Kategorie zu. Sie werden feststellen, dass der Divi Builder aktiviert werden kann, da wir diesen Beitragstyp in den Themenoptionen aktivieren. Ich werde später einige Tipps dazu geben. Aber im Moment können Sie einfach einen Standard-WordPress-Editor für simulierte Inhalte hinzufügen. Danach den Artikel veröffentlichen.

Fahren Sie mit diesem Vorgang fort, um alle benötigten Artikel zu erstellen, sodass jeder Kategorie mindestens ein Artikel zugewiesen ist.

Überprüfen Sie die Standard-Wissensdatenbankseite

Sobald Sie das Plugin aktivieren, wird automatisch eine Wissensdatenbankseite für Sie erstellt. Diese Seite enthält den erforderlichen Shortcode, der zum Bereitstellen der Hauptwissensdatenbank erforderlich ist.

So sieht die Seite standardmäßig aus.

Layout und Stil der Wissensdatenbank konfigurieren

Das Wissensdatenbank-Plugin bietet viele nützliche Optionen, um die Wissensdatenbank an das Design Ihrer Website anzupassen. Es gibt anpassbare Optionen für die Hauptseite, die Artikelseite und die Archivseite.

Konfigurieren der Hauptseite

Hauptseite einrichten

Klicken Sie zunächst auf die Schaltfläche Hauptseite oben auf der Konfigurationsseite der Wissensdatenbank. Auf der Registerkarte Einrichtung können Sie den Standardlayoutstil und die Standardfarben beibehalten. Aber für dieses Beispiel werde ich die Vorlagenoption ändern, um die „Wissensdatenbank-Vorlagen für Artikel“ zu verwenden. Ich mache dies hauptsächlich, weil Sie die Archivseite mit verschiedenen vorgefertigten Stiloptionen anpassen können. Wenn Sie jedoch die Divi-Designvorlagen dafür behalten möchten, können Sie die Option "Aktuelle Designvorlagen für Beiträge und Seiten" ausgewählt lassen.

Deaktivieren Sie im Vorlagen-Popup die Option Haupttitel anzeigen und legen Sie alle Abstände und Ränder auf 0px fest. Dadurch können wir den Divi Builder für den Seitentitel und den Seitenabstand verwenden.

Hauptseite Organisieren und Alle Textoptionen

Vorerst belasse ich die Optionen "Organisieren" und "Gesamter Text" auf ihren Standardeinstellungen, aber Sie können diese gerne selbst ändern. Unter der Registerkarte Organisieren können Sie Ihre Kategorien sogar in beliebiger Reihenfolge ziehen und ablegen. Und mit den All Text-Optionen können Sie den auf der Seite verwendeten Wortlaut ändern (dh den Suchtitel und den Schaltflächentext).

Hauptseite Tuning-Option

Klicken Sie anschließend auf die Registerkarte Tuning. Hier findet der größte Teil des Stylings für die Hauptwissensbasis statt. Ich werde nicht alle diese Einstellungen verwenden, aber ich werde einige Farben ändern und einige Symbole hinzufügen. So können Sie die Wissensdatenbank mit Ihrem vorgefertigten Divi-Layout abgleichen. Da ich vorhabe, das Layoutpaket für digitale Produkte zu verwenden, verwende ich diese Farben, um die Wissensdatenbankseite zu gestalten.

Farben des Suchfelds

Wählen Sie unter der Kategorie des Suchfelds Farben aus und aktualisieren Sie Folgendes:

Titel: #333333
Suchhintergrund: #ffffff
Schaltflächenhintergrund: #091c4f

Inhaltsstil

Wählen Sie unter der Kategorie Inhalt die Option Stil aus und aktualisieren Sie Folgendes:

Seitenbreite: Volle Breite

Liste der Artikel Stil und Farben

Unter der Liste der Artikel Kategorie, wählen Sie Stil und das folgende Update:

Symbol: Pfeildreieck
Höhe der Artikelliste: 100px min Höhe (dies ist nützlich, um alle Boxen auf die gleiche Höhe zu bringen)

Wählen Sie dann Farben und aktualisieren Sie Folgendes:

Artikeltext: #091c4f
Artikelsymbol: #6767ef

Kategorien Stil und Farben

Wählen Sie als Nächstes unter Kategorien die Option Stil aus und aktualisieren Sie Folgendes:

Position der Symbole: oben

Klicken Sie dann in der Vorschau auf eines der Kategoriefelder, um es auszuwählen. Wählen Sie dann ein Kategoriesymbol dieser bestimmten Kategorie aus. Tun Sie dies für jedes der Kategoriefelder.

Es stehen über 500 Symbole zur Auswahl!

Wählen Sie dann Farben und aktualisieren Sie Folgendes:

Kategoriesymbol der obersten Ebene: #ffffff
Unterkategorie Text und Symbol: #333333
Teiler: #ffffff
Überschrift der Kategoriebox: #ffffff
Hintergrund der Kategorie-Box-Überschrift: #091c4f

Funktionen der Artikelseite

Nachdem wir die Hauptseite konfiguriert haben, klicken Sie oben auf der Seite auf die Artikelseite. Klicken Sie dann auf die Registerkarte Funktionen. Hier können Sie Elemente wie die Zurück-Schaltfläche und Breadcrumbs anpassen, die oben im Artikellayout angezeigt werden.

Im Moment vergleiche ich nur den Zurück-Button mit dem vorgefertigten Layout, das ich für die Artikelseite verwenden werde. Wählen Sie unter Funktionen die Option Zurück Navigation aus und aktualisieren Sie Folgendes:

Textfarbe: #ffffff
Hintergrundfarbe: #091c4f
Rahmenfarbe: #091c4f
Rahmenbreite: 3px

Seitenlayoutstil archivieren

Um das Layout der Archivseite zu ändern, klicken Sie oben auf der Seite auf „Archivseite“. Unter der Registerkarte Einrichtung sehen Sie eine Dropdown-Liste der verschiedenen verfügbaren Stile. Ich behalte die Standardeinstellungen bei, aber experimentiere mit den anderen Stilen.

Hier ist ein Beispiel dafür, wie eine Kategoriearchivseite mit dem Standardstil 1 aussieht.

Entwerfen der Knowledge Base-Seite mit Divi

Nachdem wir nun die Konfiguration unserer Wissensdatenbankseiten abgeschlossen haben, können wir das Design der Wissensdatenbank-Hauptseite mit dem Divi Builder abschließen.

Bearbeiten Sie zunächst die Seitentitel „Wissensdatenbank“, die vom Plugin automatisch erstellt wurde.

Stellen Sie dann den Divi Builder bereit. Wählen Sie die Option „Choose a Premade Layout“ und wählen Sie dann im Popup „Load from Library“ das Digital Product Layout Pack. Stellen Sie dann das Dokumentationsseitenlayout auf der Seite bereit.

Nachdem das Layout auf die Seite geladen wurde, wählen Sie „Auf dem Front-End erstellen“.

Sie werden sehen, dass der obere Abschnitt das Textmodul mit dem Shortcode enthält, der unsere neu gestaltete Wissensdatenbank anzeigt.

Jetzt müssen wir es nur noch an die gewünschte Stelle im vorgefertigten Layout verschieben und das Design mit den Divi Builder-Optionen nach Bedarf anpassen.

Für dieses Beispiel habe ich den Textbaustein mit dem KB-Shortcode direkt unter den Textbaustein mit dem Titel „Dokumentation“ verschoben.

Dann habe ich alles gelöscht, bis nur noch der obere Abschnitt übrig war, der eine Zeile mit dem Textbaustein „Dokumentation“ und den Textbaustein mit dem Shortcode enthält. Ich habe auch den unteren Abschnitt mit dem CTA behalten.

Um das Design abzuschließen, öffnen Sie die Einstellungen des Textbausteins, der den Shortcode enthält, und aktualisieren Sie Folgendes:

Hintergrundfarbe: #ffffff
Textschriftart: Poppins
Abgerundete Ecken: 10px

Hier ist das endgültige Design.

Und es passt sich auch gut auf dem Handy an.

Entwerfen der Artikelseite mit dem Divi Builder

Da wir den Beitragstyp KB-Wissensdatenbank in den Divi-Designoptionen aktiviert haben, können Sie Ihre Artikel mit dem Divi Builder gestalten. Die Artikelvorlage der Knowledge Base beschränkt den Divi Builder auf den Inhalt unter dem Seitentitel und den Breadcrumbs und der Zurück-Schaltfläche. Es begrenzt auch den Inhalt des divi Builders auf eine maximale Breite von 1080px.

In diesem Beispiel starte ich das Design eines Wissensdatenbankartikels mit einem vorgefertigten Layout. Bearbeiten Sie dazu einen der Artikel und stellen Sie den Divi Builder bereit. Wählen Sie „Choose a Premade Layout“ und wählen Sie im Popup „Aus Bibliothek laden“ das Layout-Paket für digitale Produkte aus und stellen Sie die Kontaktseite für digitale Produkte bereit.

Sehen Sie sich nun an, wie der Artikel aussieht. Beachten Sie, dass sich der Divi Builder-Inhalt direkt unter dem Artikeltitel, den Breadcrumbs und der Zurück-Schaltfläche befindet, die vom Divi Builder nicht angepasst werden können.

Sie haben jedoch immer noch einige leistungsstarke Anpassungsoptionen für die Inhalte, die den Divi Builder ermöglichen. Sie können den oberen Abschnittshintergrund des Kontaktseitenlayouts verwenden, um als Abschnittshintergrund für die verschiedenen Abschnitte (oder Schritte) des Artikels zu suchen. Und Sie können mit dem Bildmodul ganz einfach Screenshots hinzufügen. Grundsätzlich steht Ihnen das grenzenlose Potenzial des Divi Builders für den gesamten Artikel zur Verfügung.

Hier ist ein einfaches Beispiel dafür, wie eine mit Divi gestaltete Artikelseite aussehen könnte.

Natürlich können Sie einige benutzerdefinierte CSS hinzufügen, um die Breite des Artikelcontainers anzupassen, um ein Layout in voller Breite zu erhalten. Und Sie könnten etwas Code hinzufügen, um den Titel auszublenden, und dann den dynamischen Inhalt von Divi verwenden, um den Artikeltitel an einer beliebigen Stelle im Divi Builder zu platzieren.

Abschließende Gedanken

Das Echo Knowledge Base-Plugin ist überraschend leistungsstark, auch ohne alle verfügbaren Premium-Addons (sie sind jedoch einen Besuch wert). Die Konfigurationsoptionen ermöglichen es Ihnen, Ihre Wissensdatenbank-Seiten so zu organisieren und zu gestalten, dass sie Ihrem Divi-Layout entsprechen. Um das Ganze abzurunden, können Sie sogar den Divi Builder verwenden, um Ihre Wissensdatenbank- und Artikelseite zu gestalten. Ich hoffe, dieses Tutorial war hilfreich für diejenigen, die Ihrer Divi-Website eine Wissensdatenbank hinzufügen möchten.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!