Divi Plugin Highlight – Divi Portfolio Grid

Divi enthält ein Portfolio-Modul, das Ihr Portfolio in voller Breite oder in einem Raster-Layout anzeigt und alle grundlegenden Funktionen enthält, die Sie von einem Divi-Modul erwarten – Hintergründe, Schriftarten, Farben, Rahmen, Überlagerungen, Symbole usw. Was ist, wenn Sie a ein anderes Layout, wie ein mehrspaltiges Design, oder neue Features wie eine anpassbare Schaltfläche? Sie könnten an einem Drittanbieter-Plugin namens Divi Portfolio Grid interessiert sein.

Divi Portfolio Grid ist ein Drittanbieter-Plugin aus dem Divi Theme Store. Es bietet Ihnen nicht nur die Standardfunktionen des Divi-Moduls, sondern auch ein 2-, 3- und 4-spaltiges Layout mit neuen Styling-Funktionen, damit Sie einzigartige Portfolios erstellen können. Es fügt auch eine Schaltfläche mit Text- und Hover-Effekten hinzu, um die Farben zu ändern.

In dieser Übersicht sehen wir uns Divi Portfolio Grid anhand eines von mir erstellten Beispielportfolios an. Alle in den Portfolios und Hintergründen verwendeten Bilder wurden von Unsplash.com übernommen.

Installieren des Divi Portfolio Grid-Plugins

Bevor Sie das Plugin hochladen können, müssen Sie die Download-Datei entpacken. In der gezippten Datei finden Sie die gezippte Plugin-Datei zusammen mit einer PDF-Kurzanleitung. Die Kurzanleitung ist ein Dokument, das Sie durch die Installation führt und einen Überblick über die Verwendung des Moduls gibt. Laden Sie die gezippte Plugin-Datei hoch, die sich in der Download-Datei befindet, installieren und aktivieren Sie sie wie gewohnt.

Funktionen des benutzerdefinierten Portfoliomoduls

Das Plugin fügt dem Divi Builder ein neues Modul namens Custom Portfolio Module hinzu. Das Modul funktioniert wie jedes andere Divi Builder-Modul aus dem Backend – Sie können es also per Drag-and-Drop in eine beliebige Zeile ziehen und Inhalt, Design und erweiterte Einstellungen anpassen.

Passen Sie die Hintergrundfarbe an, wählen Sie ein Hintergrundbild, wählen Sie ein Layout, erstellen Sie benutzerdefinierten Schaltflächentext, wählen Sie die Anzahl der anzuzeigenden Beiträge, wählen Sie die Kategorie, zeigen Sie Meta an, wählen Sie Farben usw.

Alle Standard-Design-Features sind auch hier. Passen Sie Farben, Schriftarten, Schaltflächen, Symbole, Überlagerungen und mehr an.

Beispiele – Verwenden des benutzerdefinierten Portfolio-Moduls von Divi

Für meine Beispiele habe ich eine Seite erstellt, einen Hintergrund hinzugefügt, um ihr etwas visuelles Flair zu verleihen, die Zeile auf die volle Breite gesetzt und das Portfolio Grid-Modul hinzugefügt. Bevor wir uns das ansehen, werfen wir zum Vergleich einen kurzen Blick auf das Standard-Portfoliomodul von Divi Building.

Standard-Divi-Portfoliomodul

Hier ist ein Blick auf die Seite mit dem Standard-Divi-Portfoliomodul. Ich habe es auf Rasterlayout eingestellt und die Schriftfarbe auf hell eingestellt. Alle anderen Funktionen sind auf Standard gesetzt. Es enthält auch Hover-Overlays mit Symbolen (im Rastermodus), Rahmen, Hintergrund, Meta und Schriftarten.

Das vorgestellte Bild des Projekts wird mit dem Projekttitel und der Kategorie unter dem Bild angezeigt. Mit einem Klick auf den Titel gelangen Sie zum Projekt. Ein Klick auf den Kategorietitel öffnet eine Kategorieseite für diese Kategorie. Es enthält auch Hover-Effekte mit Überlagerungsfarbe und Symboloptionen bei Verwendung des Rasterlayouts.

Beispiele für benutzerdefinierte Portfolio-Module

Es enthält drei Layouts zur Auswahl, sodass Sie Ihre Portfolios in 2, 3 oder 4 Spalten einrichten können. Schauen wir uns jedes der Layouts mit verschiedenen Anpassungen und Funktionen an.

Hier ist ein Blick auf das 2-Spalten-Layout. Es zeigt das vorgestellte Bild des Projekts an, enthält den anklickbaren Titel und die Kategorie in einer Leiste unter dem Bild und platziert eine Schaltfläche mit Text über dem Bild und der Leiste. Dies sind die Standardfunktionen und -farben.

Das Bild enthält die gleichen Hover-Effekte wie das Standard-Portfolio-Modul, aber die Schaltfläche enthält auch Hover-Effekte. In diesem Beispiel können Sie sehen, dass die Standardeinstellungen der Schaltfläche den violetten Hintergrund in Rot ändern.

Sie können auch einen schönen Schwebeeffekt sehen, der einen Schatten hinter der Karte erzeugt, über die Sie schweben. Der Titel wird als Tooltip angezeigt. Das Hover-Overlay ist auch eine Standardfunktion und muss daher nicht aktiviert werden. Der Übergang des Schwebeeffekts zeigt einen stärkeren Schatten, bis der Übergang abgeschlossen ist.

Hier ist ein Blick auf das 3-Spalten-Layout. In diesem Beispiel habe ich die Farbe des Schaltflächenhintergrunds und -texts geändert und den Text geändert, um meine eigene Nachricht anzuzeigen.

Die Schaltfläche enthält auch den Schatten-Hover-Effekt. In diesem Beispiel fahre ich nur über die Schaltfläche, sodass das Bild seinen Hover-Effekt nicht anzeigt. Der Knopfhintergrund und -text haben die Farbe geändert.

In diesem Beispiel wird das 4-Spalten-Layout verwendet. Ich habe den Schaltflächenradius auf 0 gesetzt und alle Schriftstile geändert.

Der Hover-Effekt platziert eine blaue Überlagerung mit 47% Deckkraft (sorry wegen der ungeraden Zahl, aber dort hat meine Maus aufgehört, also habe ich damit angefangen) und ein Kontrollkästchen-Symbol in Rot. Die Schaltfläche ändert sich von dunkelgrau mit hellem Tab-Text zu gebrochenem Weiß mit dunkelgrauem Text.

In diesem Beispiel habe ich einen Hintergrund hinzugefügt, der hinter dem Titel und dem Meta angezeigt wird. Ich habe einen roten Rand mit einer Breite von 2 Pixeln hinzugefügt (so ist er im Bild gut zu erkennen). Ich habe alle Schriftarten und Farben angepasst und die Hintergrundfarbe der Schaltfläche, die Hover-Farbe und die Symbolfarbe geändert. Ich habe die standardmäßige Hover-Overlay-Farbe belassen, um den Kontrast zwischen dem angezeigten Bildbereich und dem Hintergrundbild hinter dem Titel- und Metabereich anzuzeigen.

Die Schaltfläche wird nur angezeigt, wenn Sie den Titel anzeigen. In diesem Beispiel wird nur die Kategorie angezeigt.

In diesem Beispiel wird nur der Projekttitel angezeigt. Da der Titel angezeigt wird, wird auch die Schaltfläche angezeigt.

In diesem Beispiel habe ich eine rote Überlagerung mit einer Deckkraft von 66 platziert. Ich habe das Hover-Symbol geändert und die Schaltfläche und ihre Hover-Effekte angepasst. Hinter dem Titel wird ein Hintergrundbild (von einem grauen Himmel) platziert. Dieser verwendet verschiedene Projektkategorien. Der Schaltflächenradius ist auf 10 eingestellt.

Divi Portfolio Grid – Responsive

Das Plugin reagiert. Hier ist das 3-Spalten-Layout auf einem iPad (emuliert in den Chrome-Entwicklertools) im Hochformat. Weitere Informationen zu den Google Chrome-Entwicklertools finden Sie im Artikel Warum Sie jetzt mit der Verwendung der Chrome-Entwicklertools beginnen sollten.

Dies ist das gleiche Layout im Querformat.

Dies ist das gleiche Layout auf einem Galaxy S5 im Hochformat.

Und hier ist das Layout mit einem Galaxy S5 im Querformat.

Lizenz, Updates und Dokumentation

Die Lizenz umfasst die unbegrenzte Nutzung und beinhaltet lebenslange Updates. Die Dokumentation wird in der PDF-Datei bereitgestellt, die im gezippten Ordner enthalten ist. Es ist ein kurzes Dokument und bietet eine exemplarische Vorgehensweise mit Bildern, um Ihnen den Einstieg zu erleichtern. Es ist ein einfach zu bedienendes Plugin und ich fand alles intuitiv. Wenn Sie es gewohnt sind, Divi-Module zu verwenden, sollten Sie sich mit diesem Modul wie zu Hause fühlen.

Divi Portfolio Grid kann im Divi Theme Store erworben werden.

Abschließende Gedanken

Divi Portfolio Grid ist einfach zu bedienen und bietet gegenüber dem Standard-Divi-Portfoliomodul genügend zusätzliche Funktionen, die für viele Benutzer unverzichtbar sind. Es enthält 2-, 3- und 4-Spalten-Layouts, fügt eine Schaltfläche mit Hover-Effekten, Überlagerungen mit Symbolen und das gesamte Modul-Styling hinzu, das Sie erwarten würden, einschließlich erweiterter CSS-Funktionen, damit Sie es mit Ihrem eigenen Code anpassen können. Wenn Sie ein Portfolio mit Funktionen wünschen, die über das standardmäßige Divi-Portfoliomodul hinausgehen, ist Divi Portfolio Grid möglicherweise das Modul, das Sie benötigen.

Wir möchten von Ihnen hören! Haben Sie Divi Portfolio Grid ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über 2RAL / shutterstock.com