#78 Das Journal Blog Kit für Divi

Das Journal Blog Kit für Divi ist ein Layout von Divi Soup, einem Drittanbieter mit Funktionen wie einem untergeordneten Theme. Das Layout selbst wurde mit dem Divi-Builder erstellt und enthält Kategorien und einen Blog-Feed mit Hover-Effekten, um eine elegante Blog-Seite zu erstellen. Es enthält auch eine gestaltete Seitenleiste und ein standardmäßiges benutzerdefiniertes Blogpost-Design, das Sie Ihrem untergeordneten Theme hinzufügen können. Die neuen Funktionen werden Ihrem untergeordneten Theme durch Importieren oder durch einfaches Kopieren und Einfügen hinzugefügt.

Das Blog-Kit enthält drei verschiedene Blog- und Archivseitenlayouts. Sie können das Layout zwischen voller Breite, Raster oder Inline ändern, indem Sie das enthaltene CSS in die Designoptionen oder den CSS-Editor für untergeordnete Designs einfügen. Die Seiten für Archiv, Kategorie, Tag, Autor und Suchergebnisse folgen demselben Layout wie die Blog-Seite. Es enthält auch die Integration der Schriftart Awesome.

Das Blog-Kit enthält alle Dateien und Anweisungen zur Verwendung. In diesem Artikel werde ich das Journal Blog Kit installieren und ihnen zeigen, wie einfach es zu verwenden ist, und einen Blick auf seine Funktionen werfen.

Installieren des Journal Blog Kits für Divi

Installing-the-Journal-Blog-Kit-for-Divi

Entpacken Sie die heruntergeladene Datei. Im Inneren finden Sie verschiedene Dateien, einschließlich JSON-Dateien für das Blog-Seitenlayout und die Customizer-Einstellungen, eine Liesmich-Datei, CSS-, PHP-, JS- und Widget-Dateien (dies sind die Dateitypen, die Sie in einem untergeordneten Theme finden würden).

Ich empfehle, die Anweisungen zu befolgen, um zu sehen, wie die Dateien installiert werden, da dies manuell erfolgt. Glücklicherweise sind die Anweisungen gut beschrieben und der Prozess ist nicht schwierig. Sie müssen ein untergeordnetes Theme verwenden (auch wenn es leer ist). Die PHP-Datei wird überschrieben, wenn das Theme aktualisiert wird, und Sie es dem übergeordneten Thema hinzufügen.

Der Vorteil dieses Layouts und der manuellen Installation der Dateien besteht darin, dass es mit Ihrem aktuellen untergeordneten Thema funktioniert. Sie müssen Ihr untergeordnetes Theme nicht ersetzen, um diese neuen Funktionen hinzuzufügen.

Die Dokumentation

Die Dokumentation 1

Ein Link zur Dokumentation befindet sich in der Download-Datei. Durch Klicken auf die Datei gelangen Sie zur Support-Seite des Blog-Kits, auf der Sie eine Suchfunktion, Installationsanweisungen, Anpassungsanweisungen und einen Link zur Unterstützung finden. Anweisungen zur Anpassung zeigen, wie Sie die Farben, die Anzahl der Spalten in den Layouts und die Länge des Auszugs ändern.

Die Dokumentation 2

Klicken Sie auf die Installationsanweisungen und befolgen Sie die Schritte. Dies umfasst das Kopieren und Einfügen von Code an bestimmte Speicherorte, das Hochladen von Dateien über FTP und das Importieren von Dateien über ein Plugin. Jeder der Schritte ist detailliert. Es dauert einige Minuten, um die Schritte zu durchlaufen.

Die Blog Page

Die Blog Page

Das Blog-Kit enthält das Blog-Seitenlayout als JSON-Datei. Dieses Layout sollte in die Seite selbst und nicht in die Divi-Bibliothek importiert werden. Die Seite selbst verwendet einen Post-Schieberegler, sechs Call-to-Action-Module und eine Zeile mit einem Blog und einer Seitenleiste. Dies wird je nach verwendetem CSS unterschiedlich angezeigt. Schauen wir uns die Funktionen und das Layout jedes Layouts an.

Slider und Kategorien

Slider und Kategorien

Der Post-Slider platziert die vertikale Punktnavigation nach links und zeigt rechts einen Auszug an. Der Auszug zentriert den Text und hat eine geringere Deckkraft, sodass das abgebildete Bild des Schiebereglers durchscheint. Es enthält auch eine Schaltfläche zum Anzeigen von Posts. Wenn es verschoben wird, wird das Bild eingeblendet und der Auszug wird von unten nach oben verschoben.

Slider und Kategorien

Die Call-to-Action-Module dienen als Links zu Archivseiten für bestimmte Kategorien. Wenn Sie mit der Maus über das Modul fahren, wird die Farbe der Schaltfläche von einem schwarzen Hintergrund mit weißem Text in einen weißen Hintergrund mit schwarzem Text geändert und ein schwarzer Rand hinzugefügt. Ich liebe das kräftige Gelb. Dies ist eine interessante Möglichkeit, der Seite eine Kategorienavigation hinzuzufügen.

Die Farben stammen aus dem Import des Customizer-Stils. Sie müssen es nicht verwenden und können die Farben leicht ändern. Wenn Sie Zugriff auf Ihr ursprüngliches Customizer-Design haben möchten, müssen Sie es zuerst exportieren.

Das Fullwidth Layout

Das Fullwidth Layout

Hier ist das Blog-Layout mit dem CSS in voller Breite. Das abgebildete Bild zoomt beim Hovern. Dem ersten Wort des Auszugs wird eine Drop-Cap hinzugefügt. Die Kategorie und die Drop-Kappe sind gelb gestaltet. Die Schaltfläche “weiterlesen” ist so gestaltet, dass sie dem Layout entspricht.

Das Raster Layout

Das Raster Layout

Das Rasterlayout zeigt zwei Beiträge in einer einzigen Zeile unter den Kategorien an. Es enthält das gleiche Design wie das Layout in voller Breite, z. B. Zoomen beim Bewegen des Mauszeigers für das ausgewählte Bild, gelbe Kategorie und Drop-Cap sowie Schaltflächen-Styling.

Das Inline Layout

Das Inline Layout

Das Inline-CSS zeigt die Blog-Beiträge mit dem Bild links und dem Text rechts. Es enthält das Design und die Funktionen der anderen Layouts. In diesem Beispiel habe ich am Ende der Liste einen Screenshot gemacht, um die gestaltete Schaltfläche “Ältere Einträge” anzuzeigen. Dieselbe Schaltfläche wird in allen Layouts angezeigt.

Die Sidebar

Die Sidebar

Wenn Sie die Widget-Einstellungen importieren, wird eine Seitenleiste mit mehreren gestalteten Widgets erstellt. Die Seitenleiste enthält einen Abschnitt über mich mit einem Titel, einem Foto und einer Beschreibung sowie Abschnitte für die Suche, Kategorien, Archive, Tags und aktuelle Beiträge. Jeder Abschnitt ist so gestaltet, dass er zum Layout passt. Ich mag die gelben Linien auf beiden Seiten der Titel. Kategorien und Archive sind Dropdown-Felder. Tags sind gestaltete Links.

Das Post Layout

Das Post Layout

Wenn Sie die Post-Datei über FTP in die Dateien Ihres Themes hochladen, werden die einzelnen Blog-Posts, die mit WordPress und nicht mit dem Divi Builder erstellt wurden, ebenfalls gestaltet und mit vielen neuen Funktionen versehen. Zu den Funktionen gehören Kategorie, Titel, Datum, Anzahl der Kommentare und Tags über dem Beitrag.

Nach dem Beitrag befinden sich ein gestaltetes Autorenfeld, eine Beitragsnavigation, verwandte Beiträge und ein gestaltetes Kommentarfeld. Kommentare sind kaskadiert und enthalten ein gestaltetes Symbol, um anzuzeigen, dass eine Antwort auf einen anderen Kommentar ist. Die einzelnen Abschnitte enthalten die gestalteten gelben Linien mit den Titeln.

Der Preis

Der Preis

Das Journal Blog Kit für Divi kostet £ 49.00. Es enthält alle Dateien und Anweisungen, die Sie zur Verwendung benötigen.

Sie können das Journal Blog Kit auf der Webseite des Entwicklers erwerben.

Fazit

Das Journal Blog Kit für Divi fügt Ihren Blogseiten und Posts viele Styling-Funktionen hinzu. Ich mag es, dass es die Blog-Beiträge formatiert, ohne dass sie mit dem Divi Builder erstellt wurden. Ich bin auch froh, ein Kit zu sehen, das sich nur auf den Blog konzentriert. Blogs erhalten nicht immer genug Aufmerksamkeit.

Die Dateien müssen manuell installiert werden, aber ich denke, dies ist eine gute Übung, da sie zeigt, wohin bestimmte Dateitypen gehen, und Ihnen einige Informationen über die Funktionsweise von WordPress gibt. Das Hinzufügen der Dateien ist tatsächlich einfacher als es sich anhört. Ich hatte keine Probleme mit dem Hinzufügen eines Codes.

Ich habe der untergeordneten Themendatei für eines der Layouts CSS hinzugefügt, diesen Code dann gelöscht und das CSS zu den Designoptionen für die anderen hinzugefügt. Beide arbeiteten wie erwartet. CSS, JS, PHP und alle importierten Dateien funktionierten beim ersten Versuch einwandfrei. Um zu Ihrem ursprünglichen Design oder zu einem anderen Design zurückzukehren, ändern Sie einfach Ihr untergeordnetes Theme und entfernen Sie das CSS.

Es ist interessant, untergeordnete Themenstile in einem Layout zu haben. Ich mag das, weil es mit jedem untergeordneten Theme oder Layout verwendet werden kann. Wenn Sie Divi um einige neue Blogging-Funktionen erweitern möchten, empfehlen wir Ihnen dringend, sich das Journal Blog Kit anzusehen.

Originalartikel

zurück

weiter