Divi-Plugin-Highlight: Divi FilterGrid

Divi FilterGrid ist ein Drittanbieter-Plugin, das dem Divi Builder ein neues filterbares Modul hinzufügt. Es kann Beiträge von jedem benutzerdefinierten Beitragstyp anzeigen und benutzerdefinierte Filter erstellen, um sie gemäß einer von Ihnen gewählten Taxonomie anzuzeigen. Zeigen Sie Blogbeiträge, Projekte, Produkte an, erstellen Sie Galerien und vieles mehr.

In diesem Plugin-Highlight werfen wir einen Blick auf Divi FilterGrid, sehen, was es kann und wie einfach es zu bedienen ist. Sie können das Plugin auf der Website des Entwicklers kaufen.

Divi FilterGrid-Modul

Das Divi FilterGrid-Modul wird dem Divi Builder hinzugefügt. Das Icon ist farbig und hebt sich vom Rest ab.

Divi FilterGrid-Inhaltsregisterkarte

Die Registerkarte Inhalt fügt viele Funktionen hinzu. Dazu gehören Post-Elemente, Abfrageoptionen, Filteroptionen, Paginierungsoptionen und Hintergrund zum Anpassen aller Hintergrundfarben. Es enthält auch die Standard-Link- und Admin-Label-Optionen.

Beitragselemente

Mit den Optionen zum Posten von Elementen können Sie das vorgestellte Bild ein- oder ausblenden und dann die Miniaturansichtsaktion festlegen. Sie können auf den Beitrag verlinken, das Bild in einer Lightbox oder in einer Lightbox-Galerie anzeigen, den Beitrag in einem Popup anzeigen oder eine benutzerdefinierte Lightbox-Galerie öffnen. In diesem Beispiel zeige ich den Beitrag in einem Popup.

Dieser öffnet das Bild in einer Lightbox-Galerie. Der Leser kann die Pfeile auswählen, um die vorgestellten Bilder aller Beiträge anzuzeigen. Wenn Sie auf den Beitragstitel klicken, wird der Beitrag immer noch im selben Tab geöffnet.

Sie können auch die Überlagerungsfarbe, das Symbol und die Symbolfarbe ändern. Ich habe jedes von diesen im Bild oben angepasst. Sie können auch den Titel anzeigen, den Link zum Titel hinzufügen, einen Auszug hinzufügen, die Anzahl der Auszugszeichen begrenzen, eine Schaltfläche zum Weiterlesen anzeigen, benutzerdefinierte Felder hinzufügen und vieles mehr. Ich habe einen Auszug hinzugefügt und das Post-Meta deaktiviert.

Abfrageoptionen

Mit Abfrageoptionen können Sie den Abfragetyp aus Standard, Erweitert und Benutzerdefiniert auswählen. Wählen Sie die Kategorien, die Postnummer, die Offsetnummer und die Sortierung nach Optionen. In diesem Beispiel habe ich eine Kategorie ausgewählt.

Die erweiterten Optionen bieten Ihnen mehrere neue Funktionen. Wählen Sie bestimmte Beitragstypen, Taxonomien und Begriffe aus und schließen Sie Begriffe und Taxonomien aus. Sie können auch private Posts und Sticky Posts anzeigen. Im obigen Beispiel lege ich eine Taxonomie fest. Ich kann die spezifischen Kategorien oder Tags auswählen, die ich verwenden möchte, und dann ihre Beziehung zum Suchbegriff angeben. Die untergeordneten Begriffe funktionieren auf die gleiche Weise. Auf diese Weise erhalten Sie zusätzliche Details und können Beiträge nicht nur basierend auf Kategorien oder Tags anzeigen. Sie können auch Postnummern- und Bestelloptionen für Taxonomien festlegen.

Der benutzerdefinierte Abfragetyp ermöglicht Ihnen die Verwendung von benutzerdefinierten Inhalten. Es enthält einen Link zur Dokumentation, in der Sie erfahren, wie Sie dies einrichten. Benutzerdefinierte Abfragen werden mit Code in der Datei functions.php durchgeführt. Die Dokumentation enthält mehrere Beispiele, die Sie schrittweise durchgehen.

Filteroptionen

Mit den Filteroptionen können Sie das Raster nach Suchbegriffen filtern. Wählen Sie den Standardfilter aus und Sie sehen ein Modal, in dem Sie Kategorien und Tags für Beiträge und Projekte auswählen können. Sie können auch die Reihenfolge festlegen und nach ID, Name oder einer benutzerdefinierten Reihenfolge filtern. Für die benutzerdefinierte Reihenfolge sehen Sie ein Feld, in das Sie die Werte durch Kommas getrennt eingeben können.

Paginierungsoptionen

Mit den Paginierungsoptionen können Sie den Paginierungstyp auswählen. Wählen Sie eine Seite aus, eine Schaltfläche zum Laden mehr oder um mehr beim Scrollen zu laden. Für die ausgelagerte Option können Sie die Pfeile, den Text und die Anzahl der Seiten auswählen, die in den Links angezeigt werden. Ich habe in diesem Beispiel Text hinzugefügt und die Pfeile geändert.

Hintergrund

Mit den Hintergrundeinstellungen können Sie die Hintergründe des Rasters, der Filter, des aktiven Filters, der Paginierung und der aktiven Paginierung anpassen. Es enthält auch die Standard-Hintergrundoptionen, die Sie in einem Divi-Modul erwarten würden. Im obigen Beispiel habe ich die Hintergrundfarben für Filter, Raster und Paginierung angepasst.

Divi FilterGrid-Design-Registerkarte

Die Registerkarte Design bietet Anpassungen für die Layout-Optionen, Post-Titeltext, Post-Metadaten-Text, Post-Inhaltstext, Filtertext, Paginierungstext, Schaltfläche Mehr lesen, Schaltfläche Mehr laden und alle Standardoptionen des Divi-Moduls.

Layout-Optionen

Mit den Layoutoptionen können Sie ein Layout, eine Skin auswählen, die Elementbreite, die Spalten- und Zeilenabstandsgröße und die Rasterschriftgröße festlegen. Ich habe die Breite der Elemente verringert, die Rinne entfernt und Mitternacht für den Skin ausgewählt. Ich habe auch die Schriftgröße reduziert.

Dies sind linke vertikale Filter. Es platziert die Filter in einem vertikalen Stapel auf der linken Seite. Ich habe die Artikelbreite erhöht, damit die Bilder größer sind.

Dies ist Elemente im Overlay. Die Beiträge sind bei dieser Option kürzer.

Zoom Image zeigt jedes Bild mit einem Overlay und dem Titel in der Mitte. Das Bild wird beim Schweben gezoomt.

Bibliothek zeigt die Karten mit einem Rahmen an und platziert den Titel über dem Bild.

Dies ist das Listenlayout mit dem Standard-Skin.

Dies ist Vollbreite. Es platziert den Titel, das Meta und den Auszug am unteren Rand des Bildes.

Divi FilterGrid-Modul Registerkarte Erweitert

Die Registerkarte Erweitert fügt 15 benutzerdefinierte CSS-Felder für fast jedes Element innerhalb des Moduls hinzu. CSS-Benutzer werden keine Probleme haben, auf bestimmte Elemente zum Anpassen gezielt abzuzielen.

Divi FilterGrid-Modul-Styling

Die Layout-Optionen können einige interessante Designs erstellen. In diesem Beispiel habe ich die Breite reduziert, sodass sie in einer einzigen Zeile angezeigt werden. Ich habe auch das Meta und den Auszug entfernt.

Für diesen habe ich die Artikelbreite erhöht. Dadurch entsteht ein schönes Mosaik-Galerie-Design.

In diesem habe ich den Titel, das gesamte Meta, den Auszug und die Schaltfläche Weiterlesen hinzugefügt. Ich habe die Farbe des Titels geändert, alles in Großbuchstaben geschrieben, die Größe erhöht, zentriert und den Zeichenabstand erhöht. Ich habe auch die Größe der Schaltfläche "Weiterlesen" reduziert und den Text weiß gestaltet.

Es gibt viele Styling-Optionen für die Schaltfläche Weiterlesen. Für dieses habe ich zur Standardgröße zurückgekehrt, aber den Text leichter gemacht. Ich habe die Kanten abgerundet und ihm einen Hintergrundverlauf gegeben.

Es wird nicht im Editor-Modus angezeigt, aber Sie können der Schaltfläche auch ein Bild hinzufügen. Sie können das Bild allein, mit einer einfarbigen Überlagerung oder mit einer Verlaufsüberlagerung hinzufügen. In diesem Beispiel habe ich das Bild hinter meinem grünen Farbverlauf hinzugefügt.

Der Text der Post-Metadaten passt alle Post-Meta zusammen an. Ich habe die Farbe und den Zeilenabstand geändert.

Mit dem Filtertext können Sie die Schriftart für den Filter formatieren. Ich habe die Schriftgröße erhöht, die Farbe geändert und einen Schatteneffekt hinzugefügt. Der Standardfilterstil hat eine andere Farbe für den ausgewählten Filter. Sie können dies separat in der Option Hintergründe auf der Registerkarte Inhalt anpassen.

In diesem Beispiel passe ich den Paginierungstext an. Ich habe die Farbe geändert, die Größe erhöht, einige Zeichenabstände hinzugefügt und einen Schatten hinzugefügt. Ich habe auch die Stärke der Unschärfe angepasst.

Die Schaltfläche "Mehr laden" enthält auch die grundlegenden Styling-Optionen. Ich verwende den Standardtext (er kann auf der Registerkarte Inhalt geändert werden). Ich habe auch den Text auf Weiß gesetzt (standardmäßig ist er grün).

Ich habe die Schriftgröße erhöht, den Zeichenabstand hinzugefügt, den Rahmen angepasst, einen Farbverlauf hinzugefügt und deaktiviert, dass nur das Symbol beim Schweben angezeigt wird.

Divi FilterGrid und benutzerdefinierte Beitragstypen

Ich fand es einfach, mit benutzerdefinierten Beitragstypen zu verwenden. Klicken Sie in den Abfrageoptionen auf Beitragstypen auswählen und wählen Sie dann den Beitragstyp aus dem Modal aus.

Es zeigt immer noch den ursprünglichen Filter an, aber Sie können Ihren eigenen erstellen oder ihn deaktivieren. Klicken Sie in den Filteroptionen auf Taxonomien filtern und wählen Sie Ihre Taxonomien aus der Liste aus. Klicken Sie auf Werte festlegen .

Ich habe jetzt einen benutzerdefinierten Filter für meine WooCommerce-Produkte.

Ich habe jetzt ein WooCommerce-Produktmodul, das ich nach Herzenslust stylen kann.

Divi FilterGrid-Blog-Beispiel

Für dieses Beispiel habe ich das Blog-Modul von der Dog Walker-Layout-Blogseite ersetzt. Ich habe es so gestaltet, dass es den Farben, Schriftstilen und den abgerundeten Ecken für die Beiträge entspricht. Ich habe dann WooCommerce-Produkte hinzugefügt, um in der Blog-Liste zu erscheinen. Dies ist eine großartige Möglichkeit, verschiedene Arten von Inhalten in Ihren Blog-Stream hinzuzufügen.

Das Ergebnis sieht fantastisch aus. Es erstellt einen filterbaren Blog, oder Sie können den Filter deaktivieren und nur den Inhalt anzeigen.

Divi FilterGrid Modul Dokumentation und Preis

Die Dokumentation ist auf der Website des Entwicklers verfügbar. Klicken Sie auf die Schaltflächen, um spezifische Informationen zu erweiterten Funktionen anzuzeigen. Sie können die FAQ-Seite besuchen oder von hier aus ein Support-Ticket einreichen. Sie können auch auf das Fragezeichen für jede Funktion im Modul klicken, um eine Erklärung zur Verwendung anzuzeigen.

Es gibt vier Optionen zum Kauf von Divi FilterGrid:

• Einzelne Site – $19
• 5 Seiten – $39
• Unbegrenzte Sites – $59
• Lebenslange unbegrenzte Sites – 129 $

Sie können das Plugin auf der Website des Entwicklers kaufen.

Gedanken beenden

Divi FilterGrid ist ein interessantes Plugin. Es ist ein hervorragendes Modul zum Anzeigen verschiedener Arten von Inhalten. Sie können praktisch jeden Beitragstyp anzeigen und mehrere Beitragstypen zusammen anzeigen. Die Filteroptionen können beliebig komplex sein.

Ich liebe es, die Farbanpassungsoptionen für die Hintergründe zu haben. Die Farboptionen auf der Registerkarte Inhalt bedeuten, dass sich die Farboptionen an zwei verschiedenen Orten befinden. Ich denke, es wäre ein bisschen intuitiver, wenn diese Farbanpassungen auf die Registerkarte Design verschoben würden. Schön ist es jedoch, die Farben unabhängig voneinander anpassen zu können.

Ich fand es sehr intuitiv. Ich empfehle Ihnen, alle Optionen zu erkunden. Wenn Sie daran interessiert sind, ein leistungsstarkes gefiltertes Raster hinzuzufügen, um Ihre Beitragstypen anzuzeigen, ist Divi FilterGrid ein einfach zu empfehlendes Plugin.

Wir wollen von dir hören. Haben Sie Divi FilterGrid ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über Thepanyo / shutterstock.com