Das Portfolio-Modul in Divi kannst du verwenden, um deine Projekte und Referenzen auf deiner WordPress-Webseite automatisch anzuzeigen und strukturiert zu präsentieren, zum Beispiel wenn du Freelancer*in oder Designer*in bist. So musst du nicht mühsam einzelne Beiträge verlinken oder ein statisches Portfolio anlegen, sondern profitierst von einem dynamischen System, ähnlich wie bei Blogbeiträgen.
In diesem Beitrag erkläre ich dir Schritt für Schritt, wie du das Element anpassen kannst.
Projekte anlegen und strukturieren
Vor der Nutzung des Portfolio-Moduls solltest du einige Projekte anlegen, zum Beispiel abgeschlossene Kundenaufträge oder -referenzen.
Gehe dazu im Backend deiner WordPress-Webseite im Menü zu dem Punkt „Projekte“.
Strukturierte Inhalte: Gib jedem Projekt ein Titelbild, einen kurzen beschreibenden Text, eine Kategorie und optional einen Tag. Das Bild ist besonders wichtig, denn das Portfolio-Modul zeigt standardmäßig das Beitragsbild an. So erhält das Portfolio eine einheitliche Optik.
Einheitliche Gestaltung: Stelle sicher, dass alle Projekteinträge nach dem gleichen Schema aufgebaut sind (z. B. immer ein Titelbild nutzen). So vermeidest du, dass in der späteren Übersicht leere oder „unrunde“ Stellen entstehen.
Portfolio Modul einfügen und einrichten
Öffne im Divi-Builder den Bereich, in dem du die Projekte anzeigen möchtest, und füge das Portfolio-Modul ein.
Individuelle Einstellungen und Design anpassen:
Layout: Ich empfehle dir, das Gitter-Layout (Grid) statt der vollen Breite zu wählen, da dies optisch ansprechender und übersichtlicher ist.
Kategorien filtern: Du kannst bestimmen, welche Projekte gezeigt werden. Filtere nach Projekt-Kategorien, um gezielt bestimmte Arbeiten zu zeigen, wenn du beispielsweise zwischen Webdesign, Printprojekten oder Fotografie unterschieden möchtest. Auch das Ausblenden von Kategorien oder Titeln ist möglich, sodass nur noch das Bild präsent ist und deine Arbeit in den Vordergrund rückt.
Elemente ausblenden: Falls du z. B. keine Kategorien oder Projekttitel in der Übersicht sichtbar haben möchtest, kannst du diese gezielt ausblenden. Dann bleibt z. B. nur noch das Titelbild als Teaser sichtbar.
Überlagerungen (Overlays): Stelle ein Overlay ein, das beim Überfahren des Projektbildes mit der Maus („Hover“) erscheint. Ändere Farbe und Icon (z. B. statt des standardmäßigen Pluszeichens einen Pfeil), um die Nutzer zum Klick auf das Projektbild zu motivieren.
Bildoptionen: Optimiere das Aussehen deiner Projektbilder durch Einstellungen wie Umrandung, Schatten, Sättigung, Helligkeit und Kontrast.
Text und Metadaten: Passe die Darstellung der Titel, Kategorien und Metatexte an. Wähle Schriftgröße, Abstand und Farbe nach Belieben.
Paginierung/Nummerierung: Zeigt dein Portfolio mehr als vier Projekte, erscheint automatisch eine Blätterfunktion. Auch deren Aussehen kannst du individuell gestalten.
Weitere Tipps:
Achte darauf, dass alle Projekte ähnlich aufgebaut sind und ein Titelbild haben. Besonders bei Übersichten mit mehreren Projekten fällt eine fehlende oder abweichende Gestaltung sofort auf und wirkt unprofessionell. Je strukturierter du deine Projekte anlegst, desto besser wird die Portfolio-Seite wirken.
Halte dein Portfolio aktuell, indem du regelmäßig neue Projekte anlegst und abgeschlossene Aufträge hinzufügst.
Mit dem Divi-Portfolio-Modul sorgst du dafür, dass deine Projekte ins richtige Licht gerückt und zum echten Hingucker für potenzielle Kund*innen werden. Egal, ob du nur eine kleine Auswahl zeigen oder eine Vielzahl von Projekten verwalten möchtest.
Viel Erfolg beim Gestalten deines Online-Portfolios!
