Divi-Plugin-Highlight: DTS Filterable Portfolio Grid Pro

Mit dem filterbaren Portfolio-Modul von Divi können Sie ein Portfolio entweder im Vollbildmodus oder in einem Raster erstellen. Was wäre, wenn Sie ein anderes Aussehen wünschen, das eine Schaltfläche und Auswahlmöglichkeiten für 3 oder 4 Spalten innerhalb des Rasters hinzufügt? Genau das macht ein Drittanbieter-Plugin namens DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro fügt dem Divi Builder ein neues Modul hinzu. Das Plugin verleiht Ihrem Portfolio ein neues Aussehen und bietet Optionen für 3 oder 4 Spalten in einem Raster. Es zeigt Projektbeitragstypen an. Es enthält benutzerdefinierten Schaltflächentext und benutzerdefinierte erweiterte Optionen.

Das Plugin ist auf der Website des Entwicklers verfügbar.

In diesem Plugin-Highlight werfen wir einen Blick auf DTS Filterable Portfolio Grid Pro und sehen, was es kann. Die Bilder stammen von Unsplash.com.

Installieren von DTS Filterable Portfolio Grid Pro

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Nachdem Sie das Plugin aktiviert haben, navigieren Sie im Dashboard zu Einstellungen und wählen Sie DTS Filterable Portfolio Grid Pro-Aktivierung aus . Geben Sie Ihren API-Schlüssel und Ihre E-Mail ein und speichern Sie die Änderungen.

Moduleinstellungen

Das Plugin fügt dem Divi Builder ein neues Modul hinzu. Es ist blau, also kaum zu übersehen.

Zu den Inhaltseinstellungen gehören die Anzahl der Beiträge, die Kategorieauswahl, die Anzeige des Titels, der Kategorien, der Paginierung, des Hintergrunds und des benutzerdefinierten Schaltflächentexts.

Die Registerkarte Design enthält Einstellungen für Layout, Farben, Schriftarten, Symbole, Überlagerungen, Rahmen und Animationen.

Beispiele – Raster

Die Standardeinstellungen verwenden ein 3-Spalten-Raster. Sie können die Hover-Animation in der mittleren Kachel sehen. Die Kacheln enthalten das Bild mit Titelabschnitt und eine Schaltfläche in der Mitte. Unten wird die Kategorie angezeigt. Die Kacheln zeigen einen Schatten, der sich beim Schweben wegbewegt. Wie Sie sich vorstellen können, ist jedes dieser Elemente anpassbar.

In diesem Beispiel habe ich das Raster in 4 Spalten geändert und die Schaltflächenhintergrundfarbe, Schaltflächenhintergrund-Hoverfarbe und Schaltflächen-Hoverfarbe angepasst. Das vierspaltige Layout ändert die Bildgrößen entsprechend.

In diesem habe ich den Schaltflächenradius reduziert, die Schriftgröße der Schaltflächen erhöht, das Hover-Symbol und seine Farbe geändert und die Hover-Overlay-Farbe geändert. Alle diese Anpassungen sind einfach und intuitiv.

In diesem Beispiel habe ich den Randradius auf 0 gesetzt, um quadratische Ecken für die Schaltfläche zu erstellen. Ich habe die Schriftgrößen für den Schaltflächentext und den Titeltext erhöht und die Schriftstile geändert. Ich habe auch das Hover-Overlay schwarz mit ausreichender Deckkraft gemacht, damit das Bild durchscheint, und das Hover-Symbol geändert.

Dieser verringert die Zeilenhöhe für den Titel. Ich habe auch die Farbe für die Schriftart abgedunkelt und den Buchstabenabstand erhöht. Ich habe die Kategorieschriftart auf Standard zurückgesetzt und auf kursiv gesetzt. Der Schaltflächenradius ist auf 100 eingestellt und ich habe meinen eigenen Schaltflächentext hinzugefügt. Ich habe auch die Überlagerungsfarbe geändert und ein anderes Symbol ausgewählt und seine Farbe in Weiß geändert. In diesem Beispiel wird auch ein Rahmen verwendet, der auf rot und 2 Pixel breit eingestellt ist. Zu den Rahmenoptionen gehören Farbe, Breite und Stil.

Das Modul verfügt über eine Textfarboption für hell und dunkel, falls Sie einen dunklen Hintergrund hinter dem Titel verwenden, aber derzeit gibt es keine Möglichkeit, den Hintergrund hinter dem Titel zu ändern. Ich vermute, dass dies eine kommende Funktion ist.

Die Hintergrundeinstellungen (Standardfarbe, Farbverlauf, Bild und Video) gelten hinter dem Modul. Die Karten berühren den Rand der Hintergrundfarbe und es gibt keine Polsteranpassungen innerhalb des Moduls.

Dies würde den Hintergrund unangenehm aussehen lassen, aber es gibt ein paar einfache Lösungen. Sie können dem Abschnitt oder der Zeile Padding hinzufügen, wie ich es in allen Bildern in diesem Artikel getan habe, oder Sie können CSS verwenden, um dem Modul Padding hinzuzufügen.

Hier ist das CSS, das ich der Registerkarte "Erweitert" im Abschnitt "Hauptelement" für das Modul hinzugefügt habe. Es weist Divi einfach an, alle 4 Standorte mit Padding zu versehen. Die Werte gelten in der gleichen Reihenfolge wie die Füllfelder von Zeilen und Modulen: oben, rechts, unten, links. Das bedeutet, dass ich dem oberen Padding einen Wert von 40, dem rechten Padding einen Wert von 30, dem unteren Padding 20 und dem linken Padding 30 gegeben habe.

Das Ergebnis ist genau das, was ich wollte – unterschiedliche Polsterungen an allen vier Seiten. Dies macht die Hintergrundfunktion benutzerfreundlicher und ist einfach zu implementieren.

Beispiele – Filter

Da es sich um ein filterbares Portfolio handelt, liegt es nahe, dass der Filter auch anpassbar ist. Wie erwartet gibt es Anpassungen für Schriftstil, Größe, Ausrichtung, Farbe, Abstand und Höhe. Bisher haben wir den Filter mit seinen Standardeinstellungen gesehen.

In diesem Beispiel wird die Schriftart Amatic SC in Rot verwendet. Ich habe die Schriftgröße erhöht, aber Abstand und Höhe auf den Standardwerten belassen.

Dieser verwendet eine Schriftart namens Bevan. Ich verwende ein dunkleres Rot. Die Schriftgröße ist dieselbe wie bei der vorherigen Schriftart.

Dieser verwendet Arvo. Ich habe die Schriftgröße reduziert und eine dunkelgraue Farbe ausgewählt.

Animationen

Die Animationen von Divi sind auch in den Einstellungen des Moduls verfügbar. Wählen Sie Keine, Fade, Slide, Bounce, Zoom, Flip, Fold und Roll. Sie können die Animation auch so anpassen, dass sie nur einmal oder in einer Schleife wiederholt wird, Richtung, Dauer, Verzögerung, Intensität, Startopazität und Geschwindigkeitskurve auswählen.

In diesem Beispiel wird Roll verwendet. Alles andere habe ich standardmäßig belassen.

Verwenden des Portfolio-Rasters in einem Layout

DTS Filterable Portfolio Grid Pro sieht in einem Layout großartig aus. Hier ist ein Beispiel für ein Fotolayout mit Blog, Portfolio und Kontaktformular. Ich verwende die Standardeinstellungen für das Portfolio-Raster und es fügt sich gut ein.

Verwenden des Portfolio-Rasters mit Extra

DTS Filterable Portfolio Grid Pro ist auch mit Extra kompatibel. Hier sehen Sie ein ähnliches Layout wie das obige Divi-Layout. Dabei werden auch die Standardeinstellungen verwendet. Ich verwende ein 3-Spalten-Raster mit nicht übereinstimmenden Bildgrößen. Dies ist eine einfache Lösung – verwenden Sie einfach Bilder derselben Größe.

Lizenz

Es stehen zwei Lizenzoptionen zur Auswahl: Single Site und Extended. Beide beinhalten lebenslange Updates und 6 Monate Support.

Abschließende Gedanken

DTS Filterable Portfolio Grid Pro ist einfach zu bedienen und bietet viele elegante Designs, um Ihr Portfolio hervorzuheben. Es gibt ein paar Funktionen, die ich gerne hinzugefügt hätte, wie Titel- und Meta-Hintergrundfarben, aber es bietet immer noch genügend Funktionen, die leicht zu empfehlen sind. Wenn Sie an einem filterbaren Hintergrundrastermodul mit einem Styling jenseits des Standard-Divi-Moduls interessiert sind, ist DTS Filterable Portfolio Grid Pro einen Blick wert.

Wir wollen von dir hören! Haben Sie DTS Filterable Portfolio Grid Pro ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über AF-Studio / shutterstock.com