Layout wählen

Im letzten Schritt des Portfolio-Setups wählst du das Standard-Layout für dein Portfolio. Anders als bei anderen Modulen ist dies eine aktive Auswahl.

Übersicht

Das Portfolio-Modul bietet 2 Layout-Optionen:

Grid

Gleichmäßiges Raster-Layout.

Masonry

Pinterest-ähnliches Layout.

Was du im Setup siehst

Der Layout-Schritt ist ein aktiver Auswahlschritt. Du siehst:

Eine Info-Box mit der Beschreibung des Schritts
Zwei Layout-Karten zur Auswahl:
- Grid - Gleichmäßiges Raster-Layout
- Masonry - Pinterest-ähnliches Layout
Die ausgewählte Option wird markiert

Gleichmäßiges Raster-Layout

Eigenschaft	Beschreibung
Aussehen	Alle Karten gleich groß
Spalten	Konfigurierbar (Portrait/Landscape)
Ideal für	Einheitliche Projektdarstellung

┌──────────┐ ┌──────────┐ ┌──────────┐
│          │ │          │ │          │
│ Projekt  │ │ Projekt  │ │ Projekt  │
│    1     │ │    2     │ │    3     │
│          │ │          │ │          │
└──────────┘ └──────────┘ └──────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐
│          │ │          │ │          │
│ Projekt  │ │ Projekt  │ │ Projekt  │
│    4     │ │    5     │ │    6     │
│          │ │          │ │          │
└──────────┘ └──────────┘ └──────────┘

Vorteile:

Einheitliches Erscheinungsbild
Klare Struktur
Professioneller Look
Einfache Navigation

Einstellungen im Editor:

Spalten (Hochformat): 1-4
Spalten (Querformat): 2-6
Abstand zwischen Elementen
Seitenverhältnis
Eckenradius

Pinterest-ähnliches Layout mit variablen Höhen

Eigenschaft	Beschreibung
Aussehen	Karten mit unterschiedlichen Höhen
Dynamisch	Passt sich an Bildverhältnisse an
Ideal für	Kreative Portfolios

┌──────────┐ ┌──────────┐ ┌──────────┐
│          │ │          │ │          │
│ Projekt  │ │ Projekt  │ │          │
│    1     │ │    2     │ │ Projekt  │
│          │ │          │ │    3     │
└──────────┘ └──────────┘ │          │
┌──────────┐ ┌──────────┐ └──────────┘
│ Projekt  │ │          │ ┌──────────┐
│    4     │ │ Projekt  │ │ Projekt  │
└──────────┘ │    5     │ │    6     │
┌──────────┐ │          │ │          │
│ Projekt  │ └──────────┘ └──────────┘
│    7     │
│          │
└──────────┘

Vorteile:

Visuell interessant
Zeigt verschiedene Bildformate optimal
Moderner, kreativer Look
Mehr Bilder sichtbar

Einstellungen im Editor:

Spalten (Hochformat): 2-3
Spalten (Querformat): 3-5
Abstand zwischen Elementen
Eckenradius

So wählst du das Layout

Layout-Schritt erreichen

Nach den Firebase Storage Rules (oder direkt nach Speicherort bei lokalem Speicher) erreichst du den Layout-Schritt.
Layouts vergleichen

Du siehst zwei Layout-Karten:
- Grid: „Gleichmäßiges Raster-Layout”
- Masonry: „Pinterest-ähnliches Layout”
Layout auswählen

Tippe auf das gewünschte Layout:
- Die ausgewählte Option wird mit farbiger Umrandung und Häkchen markiert
- Der Schritt wird als abgeschlossen markiert
Fertig!

Nach der Auswahl ist das Portfolio-Setup abgeschlossen. Du kannst jetzt Projekte erstellen.

Empfehlungen nach Anwendungsfall

Empfohlenes Layout: Grid

Eigenschaft	Grund
Einheitliche Darstellung	Produkte gleich groß
Professioneller Look	Seriöser Eindruck
Klare Struktur	Einfache Orientierung

Für Produktdesign-Portfolios: Grid für einheitliche Präsentation.

Empfohlenes Layout: Masonry

Eigenschaft	Grund
Variable Höhen	Verschiedene Bildformate
Kreativ	Künstlerischer Look
Mehr Bilder	Kompaktere Darstellung

Für Fotografie-Portfolios: Masonry für natürliche Bilddarstellung.

Empfohlenes Layout: Grid

Eigenschaft	Grund
Screenshots gleich groß	Einheitliche Browser-Mockups
Professionell	Business-Look
Vergleichbarkeit	Projekte nebeneinander

Für Webdesign-Portfolios: Grid für professionelle Darstellung.

Empfohlenes Layout: Masonry

Eigenschaft	Grund
Verschiedene Formate	Hoch- und Querformat
Galerie-Feeling	Museum-ähnlich
Visuell interessant	Abwechslungsreich

Für Kunst-Portfolios: Masonry für galerieähnliche Präsentation.

Layout später ändern

Das Layout kann jederzeit im Portfolio-Editor geändert werden:

Öffne den Edit Mode
Gehe zu Module & Features > Portfolio
Tippe auf „Bearbeiten”
Wechsle zum Tab „Layout”
Wähle ein neues Layout
Änderungen werden sofort übernommen

Weitere Einstellungen im Editor

Nach dem Setup hast du im Portfolio-Editor Zugriff auf viele weitere Einstellungen:

Layout-Tab

Einstellung	Beschreibung
Layout-Typ	Grid oder Masonry
Spalten (Portrait)	Anzahl Spalten im Hochformat
Spalten (Landscape)	Anzahl Spalten im Querformat
Abstand	Abstand zwischen Elementen
Seitenverhältnis	Verhältnis Breite/Höhe (nur Grid)

Aussehen-Tab

Einstellung	Beschreibung
Hintergrundfarbe	Seiten-Hintergrund
Kartenfarbe	Hintergrund der Projektkarten
Textfarbe	Farbe für Titel und Beschreibung
Eckenradius	Rundung der Kartenecken
Schatten	Schatten unter den Karten

Funktionen-Tab

Einstellung	Beschreibung
Lightbox	Vollbild-Ansicht aktivieren
Zoom	Pinch-to-Zoom in der Lightbox
Teilen	Bilder teilen ermöglichen
Filter	Nach Kategorien/Tags filtern

👉 Zum Portfolio-Editor

Nach dem Setup

Nach Abschluss des Setups kannst du:

Kategorien erstellen - Organisiere deine Projekte thematisch
Projekte erstellen - Füge Projekte mit Bildern und Details hinzu
Layout anpassen - Ändere Grid zu Masonry oder umgekehrt
Funktionen aktivieren - Lightbox, Teilen und mehr

Tipps

Setup abschließen

Nach der Layout-Auswahl:

Wähle Grid oder Masonry
Das Portfolio-Modul ist jetzt vollständig eingerichtet
Du kannst jetzt Projekte erstellen und verwalten

Nächste Schritte

Portfolio-Editor Erstelle und verwalte Projekte

Layout anpassen Spalten und Abstände konfigurieren

Zurück zur Übersicht Portfolio-Modul Setup Übersicht