Divi-Plugin-Highlight – Divi Blog-Extras

Divi enthält ein Blog-Modul, mit dem Sie Ihre Beiträge in voller Breite oder im Raster-Layout anzeigen können. Es ist ein schönes Modul und erledigt die Arbeit. Was wäre, wenn Sie andere Layouts und Funktionen wünschen würden? Das kann mit CSS gemacht werden, aber ein Drittanbieter-Plugin namens Divi Blog Extras macht die Aufgabe viel einfacher.

Divi Blog Extras ist ein Drittanbieter-Plugin von Divi Extended, das dem Divi Builder ein neues Modul mit mehreren neuen Funktionen zur Anzeige Ihrer Blog-Posts hinzufügt. Es enthält sechs verschiedene Layout-Designs und fügt eine AJAX-Ladefunktion mit einer Schaltfläche zum Laden von mehr hinzu. Die Beiträge werden beim Scrollen geladen und das Laden ist schnell. Sie können den Text sowohl für die Schaltflächen "Mehr lesen" als auch für "Mehr laden" ändern.

In diesem Plugin-Highlight werfen wir einen Blick auf Divi Blog Extras und bekommen einige Ideen, was mit diesem Plugin möglich ist. Die Bilder für diese Beispiele wurden von Unsplash.com übernommen.

Divi Blog Extras Installation und Einstellungen

Wie gewohnt hochladen und aktivieren. Ein neues Modul namens Divi Blog Extras wird dann im Divi Builder verfügbar sein. Um es zu verwenden, legen Sie es einfach wie jedes Modul in eine Reihe. Da die Optionen die gleichen wie bei den Standard-Divi Builder-Modulen sind, ist die Verwendung dieses Moduls intuitiv.

Die Inhaltseinstellungen umfassen die vertrauten Optionen und haben sechs Layout-Optionen, Auszugslänge, Kategoriefarben, mehr Schaltflächentext laden, Überlagerung von vorgestellten Bildern, mehr Schaltflächentext lesen und Textfarbenoptionen. Die Designeinstellungen umfassen Kopfzeilen-, Meta- und Fließtext sowie Rahmenstile. Das Layout "Block Extended" fügt die Bildposition hinzu und Classic fügt soziale Symbole hinzu. Schauen wir uns die einzelnen Layouts genauer an.

Gitter erweitert

Das Standardlayout, Grid Extended, zeigt Blogposts abwechselnd mit Bildern und Text an. Die Bilder werden beim Schweben heller. Kategorienamen werden in eine Box eingefügt. Im Responsive-Modus werden die Bilder oben platziert.

In diesem Beispiel habe ich ein Hover-Overlay und ein Hover-Symbol hinzugefügt, den Read more-Text geändert, den Auszug auf 100 Zeichen beschränkt und den Kategorietext und die Hintergrundfarben geändert. Die Hover-Animation wird angezeigt, wenn Sie mit der Maus über einen Teil des Beitrags fahren.

Box erweitert

Box Extended platziert den Auszug in einer Box, die das Bild überlappt und entfernt die Box um den Kategorienamen. Das Bild des Autors wird dem Meta-Bereich hinzugefügt. Bild und Text wechseln sich ab. Dies ist eines der eleganteren Blog-Layouts.

In diesem Beispiel habe ich die Kategorieschriftart und die Hintergrundfarben geändert, die Auszugslänge auf 150 Zeichen begrenzt und die Schriftart in Blau geändert und den Text der Schaltfläche "Weiterlesen" geändert. Der Standard-Hover hellt das Bild auf, wie im oberen Bild oben zu sehen ist.

Gesamtbreite

Volle Breite platziert die Bilder links und den Ausschnitt rechts und fügt ganz links ein formatiertes Datum hinzu. Jeder Beitrag wird durch eine Linie getrennt. Der Kategoriename wird in Meta platziert.

In diesem Beispiel werden das Datum und die Metainformationen deaktiviert. Der Text verwendet benutzerdefinierte Farben. Ich habe den Text für die Schaltfläche "Weiterlesen" und "Mehr laden" geändert. Der Auszug ist auf 200 Zeichen begrenzt.

Alle Layouts sind responsiv. Hier ist ein Blick auf das reaktionsschnelle Aussehen von Full Width. Dies zeigt zwei Module nebeneinander in einer 2-spaltigen Reihe.

Blockieren erweitert

Block Extended ist ein Blog-Raster, das den Kategorienamen über dem Bild und der Meta am unteren Rand der Karte hinzufügt. Das Bild wird gezoomt, wenn Sie mit der Maus über einen Teil der Karte fahren. Ich mag diese Art der Mikrointeraktion, weil sie zeigt, dass die Karte anklickbar ist.

Block Extended bietet drei Optionen zum Anzeigen der Bilder. In diesem Beispiel wird das vorgestellte Bild im Hintergrund mit dem Text in einer Überlagerung platziert.

In diesem Beispiel wechselt das Hintergrundbild zwischen den ersten beiden Auswahlmöglichkeiten.

Hintergrund in voller Breite

Hintergrund in voller Breite zeigt eine beschnittene Version des Bildes in voller Breite an und platziert den Ausschnitt mit Meta in einer Überlagerung über dem Bild. Die Auszugsplatzierung wechselt sich ab. Meta wird durch eine Linie vom Auszug getrennt.

In diesem Beispiel wird eine dunkle Überlagerung über dem Bild verwendet, um zu zeigen, dass die Überlagerung des Ausschnitts nicht dieselbe Überlagerung beim Bewegen des Mauszeigers verwendet. Der Hintergrund des Abschnitts ist für dieses Beispiel rot. Beachten Sie, dass das Rot beim Schweben durchscheint. Ich habe auch meinen eigenen Text für die Schaltfläche "Weiterlesen" und einen 2-Pixel-Rahmen hinzugefügt.

Klassisch

Das Classic-Layout zeigt die Blog-Beiträge mit Bildern in voller Größe und Auszügen in voller Breite unter den Bildern an. Die Kategorie und das Datum werden über dem Titel platziert. Der Titel enthält einen kurzen Zeilentrenner, um ihn vom Bild abzuheben. Unter dem Auszug steht der Name des Autors und die Anzahl der Kommentare, getrennt durch einen Strich. Ein dünnerer und breiterer Linientrenner trennt die Pfosten voneinander.

Dieses Layout bietet eine Option zum Anzeigen von sozialen Symbolen. Wenn Sie auf Mehr laden klicken (oder wie ich es bezeichnet habe – Weitere Artikel anzeigen) wird der nächste Satz von Beiträgen angezeigt, der der Anzahl der Beiträge entspricht, die ich zur Anzeige ausgewählt habe. In diesem Beispiel zeige ich zwei Beiträge an. Mehr laden lädt die nächsten 2 Beiträge.

Erstellen eines einzigartigen Layouts mit Divi Blog Extras

Mehrere Module können zusammen verwendet werden, um Magazin-Layouts zu erstellen. Dieses einfache Layout umfasst vier Module, die das Gird Extended-Layout anzeigen. Jedes Modul zeigt verschiedene Kategorien an. Die beiden in der Mitte zeigen jeweils zwei Beiträge an.

Dadurch entsteht ein Magazin-Layout mit unterschiedlichen Kategorien für die verschiedenen Rubriken. Dieses Beispiel zeigt, wie das Extended Grid als responsive aussieht.

Dies ist das gleiche Divi Builder-Layout, verwendet jedoch den Hintergrund in voller Breite. Die Overlays decken die Bilder im Responsive-Modus fast vollständig ab.

In diesem Beispiel wird das klassische Layout für das oberste Modul und Grid Extended für die nächsten beiden Module verwendet. Jedes der Module zeigt unterschiedliche Kategorien an und hat einen eigenen Stil für den Kategorietext. Das oberste Modul zeigt keinen Auszug an.

Dadurch entsteht ein interessantes Magazin-Layout. Ich habe auch die Zeilen so eingestellt, dass sie die volle Breite anzeigen. Sie können die Layouts mischen und anpassen, um ein einzigartiges Design zu erhalten. Ich habe die Layouts mit verschiedenen Kategorien für jedes Modul erstellt. In einem zukünftigen Update wird das Modul eine Versatzfunktion haben, sodass Sie mehrere Module innerhalb derselben Kategorie verwenden können.

Lizenz

Eine einzelne Website kostet 15 US-Dollar. Die erweiterte Lizenz kostet 30 US-Dollar und kann auf unbegrenzten Websites für Sie und Ihre Kunden verwendet werden. Es enthält lebenslange Updates.

Dieses Plugin funktioniert nicht mit Extra.

• Sie können dieses Plugin auf der Website von Divi Extended kaufen.

Abschließende Gedanken

Divi Blog Extras fügt einige schöne Styling- und Designfunktionen hinzu, um Ihrem Blog-Modul etwas Schwung zu verleihen. Es bietet auch die Möglichkeit, Kategoriehintergründe und -text zu gestalten. Es verwendet AJAX zum Laden und enthält eine neue Ladeschaltfläche. Sie können sogar Ihren eigenen Text zu den Schaltflächen für mehr laden und lesen hinzufügen. Jedes dieser Designs eignet sich hervorragend, um Ihrem Blog ein einzigartiges Aussehen vom Standard-Blog zu verleihen. Wenn Sie ein Blog-Design wünschen, das über das Standard-Blog-Modul von Divi Builder hinausgeht, könnte Divi Blog Extras das Modul sein, nach dem Sie suchen.

Wir wollen von dir hören. Haben Sie Divi Blog Extras ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über pulsar011 / shutterstock.com