Essential Portfolio - Stile der Gallery-Seite

Dieser Artikel wurde automatisch übersetzt und kann Ungenauigkeiten enthalten. Original auf Englisch anzeigen

Die Gallery-Seite von Essential Portfolio ist flexibel und einfach anzupassen, sodass du sie auf deine eigene Arbeit zuschneiden kannst. Wir haben eine Reihe von vordefinierten Layout-Stilen erstellt, mit denen du das Erscheinungsbild der Galerie mit einem Klick ändern kannst. Innerhalb dieser Layouts kannst du unzählige Anpassungen vornehmen, die visuell über Schieberegler im Design editor gesteuert werden.

Die Gallery-Seite hat drei Ansichten – Sets View, Index View und Single View. Diese Hierarchie ermöglicht es dir, deine Arbeit in Sets nach Projekt, Stil oder einer beliebigen anderen Gruppierung zu präsentieren. Das Layout jeder Ansicht ist unabhängig von den anderen, sodass du das Erscheinungsbild der Galerie in jeder Stufe beliebig kombinieren kannst.

📎 Mehr über die Galerie-Ansichten erfahren.

Dieser Artikel soll dir einen Überblick über die verschiedenen Layout-Stile für jede der Ansichten geben. Layouts werden durch die unterschiedlichen Eigenschaften definiert, die jedes auf die Galerie anwendet, wie das Seitenverhältnis der Bilder oder die Richtung des Masonry-Flusses.

🎨 Pass es an: Du kannst jederzeit die Anzahl der Spalten, den Abstand, die Hover-Stile, die Farben und die Typografie für alle Layouts ändern. Im Folgenden haben wir einige weitere Tipps hervorgehoben, um das Beste aus jedem Stil herauszuholen. Keine Sorge, es ist super einfach und es ist kein Programmieren erforderlich.


Sets View

Verwende Sets, um deine Arbeit in Projekte oder Kategorien zu unterteilen und so die Navigation für Besucher zu erleichtern. Du kannst beliebig viele verschachtelte Sets erstellen, zum Beispiel:

📁Arbeit → 📁Auftragsarbeiten → 📁Marken → 📁Bentley.

Es gibt 6 Sets View-Stile:

  • Square Grid
  • Regular Grid
  • Masonry
  • Uniform Grid
  • List
  • Slide

Square Grid

Set Covers werden quadratisch zugeschnitten.

Die Set Information kann darunter oder beim Hovern über dem Set Cover erscheinen.

🎨 Pass es an: Große quadratische Set Covers in zwei Spalten sorgen für einen ausdrucksstarken Look.

Regular Grid

Set Covers erscheinen unbeschnitten, genau wie das Originalbild.

Die Set Information kann darunter oder beim Hovern über dem Set Cover erscheinen.

🎨 Pass es an: Kleinere Set Covers mit großzügigem Abstand erzeugen einen modernen und minimalistischen Look.

Masonry

Set Covers werden in nach unten fließenden Spalten gekachelt.

Die Set Information kann darunter oder beim Hovern über dem Set Cover erscheinen.

🎨 Pass es an: Große Set Covers ohne Abstand können eindrucksvolle Masonry-Galerien erzeugen.

Uniform Grid

Alle Set-Cover-Zuschnitte haben dieselbe Form, aber du kannst das Seitenverhältnis dieses Rechtecks anpassen. So kannst du hohe Set Covers im Kartenstil oder schmale Banner erstellen.

Die Set Information kann darunter oder beim Hovern über dem Set Cover erscheinen.

🎨 Pass es an: Reduziere die Anzahl der Spalten auf 1, um breite Banner über die volle Breite zu erstellen, oder erhöhe die Medienhöhe, um Karten zu erstellen.

List

Standardmäßig zeigt List deine Sets in einer Textliste an, wobei beim Hovern ein Set Cover über die ganze Seite erscheint.

Du kannst auch jedes der Sets auswählen und den Zuschnitt, die Form und die Position auf der Seite einzeln festlegen.
🎨 Pass es an: Blende die Set Covers vollständig aus, um eine minimalistische Nur-Text-Ansicht zu erhalten, oder experimentiere mit verschiedenen Set-Cover-Positionen für einen einzigartigen Look.

Slide

Set Covers werden als Banner über die ganze Seite angezeigt, die beim Scrollen übereinandergleiten und so eine eindrucksvolle Sets-Ansicht erzeugen.
🎨 Pass es an: Setze auf ausdrucksstarke Typografie, um die Cover-Bilder zu ergänzen.


Index View

Die Index view bietet dir einen breiteren Überblick über alles in einem beliebigen Set. Egal, ob du eine Galerie mit kleineren Thumbnails oder das vollständige große Bild zeigen möchtest – dafür gibt es das passende Layout.

Es gibt 6 Index View-Stile:

  • Square Grid
  • Regular Grid
  • Masonry
  • Horizontal Masonry
  • Stream
  • Horizontal Scrolling

Square Grid

Perfekt für große und umfangreiche Sets: Mit kleinen quadratischen Thumbnails kannst du den Besuchern eine große Auswahl bieten.

Die Bildinformationen können beim Hovern über dem Bild angezeigt oder ausgeblendet werden.
🎨 Pass es an: Setze stattdessen auf ein großes und kräftiges Erscheinungsbild mit weniger Spalten und großzügigem Abstand.

Regular Grid

Wie bei der Sets-Ansicht Regular Grid erscheinen die Bilder unbeschnitten in ihrem ursprünglichen Seitenverhältnis.

Die Bildinformationen können darunter, beim Hovern über dem Bild oder ausgeblendet angezeigt werden.
🎨 Pass es an: Ändere die Anzahl der Spalten und den Abstand, um mehr Negativraum für einen modernen Look zu schaffen.

Masonry

Wie bei der Sets-Ansicht fließt die Masonry-Galerie in nach unten verlaufenden Spalten.

Die Bildinformationen können darunter, beim Hovern über dem Bild oder ausgeblendet angezeigt werden.
🎨 Pass es an: Entferne jeglichen Abstand und lass die Bilder die volle Breite einnehmen, um eine beeindruckende Galerie zu erhalten.

Horizontal Masonry

Ähnlich wie Masonry, füllt Horizontal Masonry die Spalten stattdessen horizontal – sodass querformatige Bilder im Vordergrund stehen.

Die Bildinformationen können beim Hovern über dem Bild angezeigt oder ausgeblendet werden.
🎨 Pass es an: Dieser Stil sieht mit großen Bildern und kräftiger Gestaltung großartig aus.

Stream

In dieser Ansicht werden die Bilder vollständig in einer einzigen, nach unten scrollenden Spalte angezeigt. Eine großartige Wahl, um Geschichten in chronologischer Reihenfolge zu präsentieren.

Die Bildinformationen werden unter dem Bild angezeigt.
🎨 Pass es an: Experimentiere mit der maximalen Breite der Spalte, um große Bilder in den Mittelpunkt zu rücken oder mehr Negativraum zu schaffen.

Horizontal Scrolling

Der Stil Horizontal Scrolling ist nur für Websites verfügbar, die ab dem 6. Juli 2021 erstellt wurden.
Die Bilder fließen und scrollen horizontal. Ideal für die Verwendung mit kleineren/minimalistischen Header-Stilen, um die volle Breite des Monitors auszunutzen.

Die Bildinformationen werden unter dem Bild angezeigt oder ausgeblendet.
🎨 Pass es an: Begrenze die Bilder nach Höhe oder Breite und füge Abstand hinzu, um eine seitlich scrollende Galerie mit kleineren Thumbnails zu erstellen, die per Klick zu einer größeren Single View führt.


Single View

Die Single view rückt das einzelne Bild in den Mittelpunkt. Du kannst diese Ansicht wählen, um Bilder so groß wie möglich ohne Ablenkungen darzustellen oder um mit Titeln, Beschreibungen, Schlüsselwörtern und anderen Metadaten mehr Informationen über die Arbeit bereitzustellen.

Es gibt 3 Single-View-Stile:

  • Fullscreen
  • Stacked
  • Panels

und 2 Lightbox-Stile:

  • Frame
  • Minimal

Fullscreen zeigt das einzelne Bild so groß wie möglich an, wobei Symbole zum Anzeigen von Informationen und Thumbnails verwendet werden.
Stacked zeigt das Bild mit Informationen und Thumbnails darunter an.
Panels zeigt die Informationen in einem Panel neben dem Bild an, mit einer Reihe von Thumbnails am unteren Bildschirmrand.



Single View Lightbox

Wenn die Lightbox aktiviert ist, erscheinen die Bilder über der Index-Ansicht, anstatt als separate Seite geladen zu werden.

📎 Mehr über die Lightbox erfahren.

Die Frame-Lightbox ermöglicht es dir, Titel und Beschreibungen sowie die Bildnavigation anzuzeigen.
Die Minimal-Lightbox blendet alles außer dem Bild aus.

🎨 Pass es an: Wähle einen Lightbox-Hintergrund in einer Kontrastfarbe zur Hauptseite (z. B. Schwarz für ein überwiegend helles Theme und umgekehrt), um der Single View einen anderen Kontext zu geben.

Last updated: