Webseiten erstelle ich in WordPress und vorzugsweise mit den Theme Divi. Auch diese Site habe ich mit Divi gebaut. Dabei hat mir die Darstellung des Portfolio viel Kopfzerbrechen bereitet. Divis implementierte Möglichkeiten sind einfach nur häßlich.
Mehr über das Theme Divi erfahrt Ihr auf der Homepage von Elegantthemes (Affiliate Link)*.
Divi ist ein sehr beliebter Themebuilder für WordPress. Das Theme Divi bietet mir als Designerin die Möglichkeit, mit relativ wenig Programmieraufwand, eine Site so zu gestalten, wie ich sie mir vorstelle. Für Designerinnen, Fotografinnen, Illustrator*innen und andere Kreative ist es aber wichtig die eigenen Arbeiten in einem Portfolio zu präsentieren. Leider ist Divi hier nicht perfekt. Ich habe einige Portfolio-Plugins testen müssen, weil die Gestaltungsmöglichkeiten von Divis nativen Portfolio-Modulen nicht meinen Ansprüchen genügen.
Meine Anforderungen an ein Portfolio
- filterbar nach Kategorien oder Tags
- das Design und die Begriffe im Filtermenü, sowie die Reihenfolge der Begriffe bestimme ich
- die Anzahl der Bilder pro Zeile und den Abstand dazwischen bestimme ich
- bei Mouse Over erscheint Text im Overlay, kein Icon
- welche Texte das sind und wie sie aussehen bestimme ich
- Möglichkeit Bilder in einer Lightbox zu zeigen
- blättern in der Lightbox innerhalb der gefilterten Auswahl
- oder Wahlweise eine Verlinkung zu dem jeweiligen Projekt
Welche Möglichkeiten bietet Divi von „Natur aus“ an?
Für ein projektbasiertes Portfolio hat Divi zwei Module im Angebot: Portfolio und Filterbares Portfolio. Mich interessiert nur das Modul Filterbares Portfolio. Hier werden die Featured Images der Projekte in einer Galerieansicht gezeigt, die man per Kategorie filtern kann. Es gibt leider nur die Möglichkeit einer Galerie mit einem Bild (Volle Breite) oder vier Bildern (Gitter) pro Zeile. Titel und/oder Kategorien können angezeigt werden, stehen aber immer unter dem Bild. Bei Rollover kann ich ein Overlay mit Farbe und Icon anzeigen lassen, aber keinen Text. Der Abstand zwischen den Bildern wird von den Grundeinstellungen festgelegt.
Im Filtermenü kann ich zwar den Text gestalten, nicht aber das Aussehen der Buttons bzw. Menüeinträge. Die Menüeinträge sind zudem alphabetisch sortiert. Auf die Sortierung habe ich keinen Einfluss. Jedes Bild ist mit dem entsprechenden Projekt verlinkt.
Das Modul Portfolio ist im Prinzip wie das Filterbare Portfolio, nur ohne Filter.
Zur Darstellung einer Mediengalerie hat Divi das Modul Gallery. Hier ist nur ein Rollover mit Overlay und Icon möglich, nicht mit Text. Die Lightbox kann nicht gestaltet werden, es gibt nicht die Möglichkeit zu filtern. Um etwas anderes als vier Bilder pro Zeile zu anzuzeigen, ist Programmierung mit CSS nötig.
Lösungen mit Plugins
Um meine Anforderungen umzusetzen, hätte es also sehr viel CSS-Code benötigt. Also habe ich mich auf die Suche nach Plugins gemacht. Gute Plugins gibt es aber nicht umsonst.
DiviBooster
Divi Booster ist ein Plugin speziell für Divi und bietet erweiterte Einstellungen für das Theme. Hier betrachte ich nur die zusätzlichen Einstellmöglichkeiten für die Divi Module „Portfolio“, „Filterable Portfolio“ und „Gallery“.
- die Auswahl der Bilder ist manuell aus der Medienübersicht möglich, Reihenfolge individuell per Drag&Drop
- Overlay nur mit Icon möglich
- kein Filtermenü
- Lightbox blättern möglich, in Lightbox nur Titel anzeigen möglich
- Anzahl Bilder pro Zeile nicht variierbar für unterschiedliche Devices
- Abstände zwischen Bildern sehr kompliziert: Design > Layout: in % über image area width (z.B. 94%), Abstände zwischen Zeilen in % (z.B. 3%) über image row spacing. Für gleiche Abstände muss es zusammen 100% ergeben. Im Beispiel: 2 Bilder pro Zeile, 94% bedeutet links und rechts vom Modul 1,5% und zwischen den Bildern 3%, dann muss zwischen den Rows 3% (3+1,5+1,5+94=100)
Fazit: Zu wenige Optionen, für Portfolios nicht viel besser als Divis eigene Einstellmöglichkeiten. Ansonsten lohnt sich schon ein Blick in Divi Booster. Er hat nämlich eine ganze Menge andere schöne Features.
Lizenzen: Single Site $39, 3 Sites $59, Unlimited Sites $79 / Einmalig und lebenslang
Hier ist der Link: https://divibooster.com/
Divi Filter Grid
Auf dem Divi Market Place von Elegantthemes habe ich das Plugin Divi Filter Grid gefunden. Es bietet laut Beschreibung alles, was ich möchte:
- Funktioniert mit Projekten, Seiten, Posts,…
- Auswahl der gezeigten Bilder (featured image des Posts) über Tags oder Categories, mit AND und OR verfeinerte Auswahl möglich
- Anzahl der Bilder pro Zeile bestimmen über > Design > Layout > Items width in %
- Overlay bei Rollover mit Post-Title und Excerpt möglich
- Filter ja. Auswahl und Reihenfolge der Menüpunkte möglich
- Paginierung u.a. auch „load more on scroll“ möglich
- Verlinkung zu Lightbox, Popup oder Post möglich
- blättern innerhalb des Posts oder Popups blättert durch alle Projekte, nicht nur durch die Filter-Auswahl, aber das hinzubekommen ist wohl unmöglich
- blättern in Lightbox blättert durch Filter-Auswahl, so wie ich es möchte
- in Lightbox Post-Titel anzeigen möglich, sowie Image-Title, Image Caption oder Image-Description, Post-Excerpt nicht
- Lightbox Gestaltung NICHT möglich
- Verlinkung aus Lightbox zu einer URL geht nur bei Verwendung eines Popups, nicht sehr elegant
- in der Lightbox passen sich Bild und Text der Größe des Browserfensters an
Zunächst muss für jedes Bild, das in der Galerie gezeigt werden soll, ein Projekt mit Kategorien, Featured Image und Excerpt angelegt werden. Dann kann man sich überlegen, ob man zu einer blätterbaren Lightbox, einem Popup oder zu dem entsprechenden Post verlinken möchte und dies entsprechend konfigurieren.
Fazit: Divi Filter Grid bietet sehr viele Möglichkeiten. Alle konnte ich noch nicht testen.
Lizenzen: Ein Jahr Support und updates: Single Site – $29.00/Jahr, 5 Sites – $49.00/Jahr, Unlimited Sites – $79.00/Jahr, lebenslanger Support und Updates: unlimited Sites – $139.00
Das Plugin bekommt man über den Divi Market Place (Affiliate Link)*
Portfolio Designer Pro
Ein sehr schönes Plugin mit unendlich vielen Möglichkeiten. Es erfüllt fast alle meine Anforderungen.
- großer Vorteil von Portfolio Designer Pro: es funktioniert nicht nur mit Divi
- kann sowohl als Bild-Galerie mit Lightbox (Diashow oder blättern), als auch als Projektgalerie der Featured Images mit Link zum Post verwendet werden
- anwendbar für alle Arten von Posttypes: Projekte, Posts, Seiten, Medien, Galerien
- viel zu viele, und darum auch großteils hässliche Effekte
- verschiedene vorgegebene Overlay-Designs, Farben, Texte (Title und Content), Icons oder beides, teilweise editierbar
- Auswahl nach Tags oder Kategorien möglich
- Filterfunktion, Filtermenü kann gestaltet werden, aber Filterbegriffe nicht wählbar. Es werden alle gewählten Kategorien mit Child-Kategorien im Filter angezeigt
- verschiedene Möglichkeiten der Paginierung / des Nachladens
- Anzahl Bilder pro Zeile auf unterschiedlichen Geräten festlegbar. Sogar unterscheidbar ob großer oder kleiner Desktop, Tablet oder Handy im Quer- oder Hochformat
- Lightbox kann gestaltet werden
- es gibt auch die Möglichkeit Slider mit verschiedenen Animationen zu wählen
Leider es ist sehr unübersichtlich bei der Konfiguration, die Vorschau ist miserabel. Man konfiguriert sozusagen blind und kann sich das Ergebnis erst hinterher ansehen. Und es hat auch einige Bugs. Bei mir beispielsweise sah derselbe Effekt in zwei Portfolios unterschiedlich aus und, wenn ich eine Einstellung geändert hatte, war auf einmal eine andere Einstellung verloren gegangen.
Fazit: Leider haben mich die erwähnten Nachteile davon abgehalten dieses schöne Plugin zu verwenden, was ich sehr schade fand.
Lizenzen: für eine Single Site $ 39,- mit einem Jahr Updates und priority Support. Es gibt auch eine Free Version, die natürlich viel weniger kann.
Hier geht es zur Entwickler-Site: https://wpportfoliodesigner.com/
Divi Gallery Extended
Braucht man nur eine Galerie ohne Link zu einem Post aber mit einer einer Lightbox, dann bietet sich das Plugin Divi Extended Gallery an. Dies funktioniert aber nur mit Bildern.
- Auswahl der Bilder manuell aus Medienübersicht, Reihenfolge individuell per Drag&Drop
- Nachladen nicht möglich, nur Paginierung
- Overlay nur mit Icon möglich
- Filter möglich, Taxonomie zieht er sich aus den „Attachment Category“-Tags der Bilder. Dieses Feature fügt das Plugin der Medienübersicht hinzu. So können für jedes Bild Kategorien festgelegt werden
- eigene Auswahl der Menüpunkte im Filtermenü ist nicht möglich, die Reihenfolge ist sehr willkürlich
- Filterdesign unter Design –> Category
- Filterauswahl baut sich relativ hübsch auf
- Lightbox blättern möglich, blättert in gefilterter Auswahl
- Titel und Caption (Beschriftung) in Lightbox anzeigen möglich
- die Texte unter dem Lightboxbild kann man stylen, aber nur einheitlich. Sonst braucht es wieder mal zusätzliches CSS
- wenn das Browserfenster zu klein ist, skaliert zwar das Bild in der Lightbox, nicht aber der Text unter dem Bild. Dieser ist nur durch scrollen zu lesen. Workaround: den Text auf die Bilder stellen, dann funktioniert es
Fazit: Meine 1. Wahl für eine Bildergalerie mit sehr vielen schönen Features.
Lizenzen: Single Site $29.00, Unlimited Sites $49.00. lebenslange Updates & ein Jahr Support.
Das Plugin Divi Gallery Extended gibt es auch auf dem Divi Marketplace (Affiliate Link)*
Fazit
Am Ende habe ich mich für ein projektbasiertes Portfolio mit dem PlugIn Divi Filter Grid entschieden.
Beitragsbild: Pixabay, Lisa Runnels
*Links mit dem Hinweis „Affiliate Link“ bedeuten, dass, wenn Du darauf klickst und ein Produkt kaufst, ich eine Provision erhalte. Das kostet Dich nicht mehr und mir würdest Du eine Freude bereiten.
