Templates

27 Portfolio-Layouts

Raster und Masonry. Filter- und Ladestile. Dazu die dazugehörigen Layouts für einzelne Projekte.

Live-Showcase öffnenDemo-Websites durchsuchen

Zuletzt aktualisiert am

Grids 5

Jedes Raster hier ist ein einziger Canvas Posts-Block mit dem Layout Portfolio. Columns legt fest, wie viele Projekte sich eine Zeile teilen, und Portfolio Gutter bestimmt den Abstand dazwischen, bis auf null. Die Ein-Spalten-Variante aktiviert Alternating Split Cards, sodass jedes Projekt neben seiner Beschreibung steht und das Bild auf jeder zweiten Karte die Seite wechselt.

Masonry 6

Gleicher Block, andere Grid Engine. Wählen Sie einen Masonry-Modus, dann behalten die Karten ihre eigene Höhe und ordnen sich ohne Zeilenraster, an dem sie sich ausrichten müssen, in Spalten an. Die Kartenform bestimmt den Rhythmus: Beschneiden Sie jedes Bild auf eine einheitliche Form oder lassen Sie jedes Projekt seine eigene behalten. Die gemischte Variante verschiebt außerdem den Titel in das Hover-Overlay.

Ladende Stile 5

Diese Einstellungen bestimmen, wie Besucher zu Ihren übrigen Arbeiten gelangen. Pagination Style bietet unter anderem einen clientseitigen Paginator und endloses Scrollen an. Open Projects In-Page lädt ein Projekt oberhalb des Rasters, ohne die Seite zu verlassen, und Open Project In kann es in einem Lightbox-Modal anzeigen. Filter Styles gestaltet den Block Canvas Grid Filter, die Reihe mit den Kategorie-Schaltflächen, in allen seinen Stilen, mit und ohne Shuffle-Schaltfläche.

Einzelprojekt 5

Eine Projektseite übernimmt ihr Layout aus einer Vorlage, die Sie beim Bearbeiten des Projekts in der Einstellung Template auswählen. Die Vorlagen decken vier Medientypen ab: ein großes Bild, einen Galerie-Slider, ein Miniaturraster und ein Video. Jede Vorlage gibt es mit einer Seitenleiste links, rechts oder auf beiden Seiten, in voller Breite oder unter einem vollflächigen Hero-Bereich. Die hier verlinkten Seiten sind eine Auswahl aus diesem Angebot.

Layouts 6

Die Position des Rasters auf der Seite. Die Varianten mit Seitenleiste platzieren denselben Block in einer Hauptspalte neben einer Seitenleiste mit Widgets, etwa aktuellen Beiträgen und einem Schnellkontaktformular. 100 % Breite lässt das Raster von Rand zu Rand laufen, ohne Zwischenraum. Parallax aktiviert Parallax Cards, wodurch jedes Bild zu einer Hintergrundebene wird, die sich beim Scrollen der Seite bewegt.

Jeder Link öffnet eine echte Seite auf der Live-Showcase, gestaltet mit demselben Theme und denselben Blöcken, die Sie installieren.

Auf Ihrer eigenen Website

Erstellen Sie jede dieser Varianten mit einem einzigen Block

Die Auswahl ist zum Anschauen da. Die Blöcke und Templates dahinter werden mit Canvas ausgeliefert, sodass sich jedes Layout oben auf Ihrer Website nachbauen lässt.

Projekte sind Datensätze

Ihre Arbeiten liegen im Portfolio-Inhaltstyp, mit einem Datensatz pro Projekt und Kategorien, die das Grid Filter für seine Schaltflächen auswertet. Fügen Sie ein Projekt hinzu, und jedes Raster auf der Website, das diese Kategorie auflistet, übernimmt es. Die Seite selbst muss nie bearbeitet werden.

Das Raster wird in den Einstellungen festgelegt

Fügen Sie Canvas Posts ein, wählen Sie das Portfolio-Layout und arbeiten Sie danach die Panels Layout und Pagination von oben nach unten durch, wobei Sie die Bezeichnungen auf dieser Seite verwenden. Für die Projektseite selbst fügt Canvas 8 Portfolio-Blöcke hinzu, vom Titel und der Metaliste bis zu verwandten Projekten.

Oder importieren Sie eine fertige Website

21 von 88 Demo-Websites werden mit Portfolio-Projekten importiert, passend für eine Agentur, einen Fotografen oder einen Illustrator. Beginnen Sie mit einer dieser Demos, dann bearbeiten Sie die Projekte, nicht das Layout.

Alle Tarife, alle Layouts

Es gibt kein Portfolio-Add-on. Die Raster, der Filter, die Ladestile und die Einzelprojekt-Vorlagen sind im Tarif Jährlich genauso enthalten wie im Tarif Lebenslang, da jeder Tarif jeden Block enthält.

Auswahl treffen

Welches Portfolio-Layout zu Ihrer Arbeit passt

Gehen Sie von den Bildern aus, denn das Layout ist dafür da, sie zu zeigen. Fotos im gleichen Format passen gut in ein festes Raster, in dem die Reihen bündig abschließen. Eine Mischung aus Hoch- und Querformat gehört in ein Masonry-Layout, in dem jede Karte das Format ihres Bildes behalten kann.

Fallstudien wirken unterschiedlich. Wenn jedes Projekt einen Absatz Kontext braucht, bietet das einspaltige Raster aus Karten mit geteiltem Layout dafür Raum, und eine Version mit Seitenleiste eignet sich für eine Agentur, die ihre Kontaktdaten neben den Arbeiten zeigen möchte.

Planen Sie auch Ihre Projektanzahl ein. Eine kleine Arbeitsauswahl passt mit einem Filter darüber auf einen Bildschirm. Ab wenigen Zeilen wählen Sie einen Ladestil, damit die Seite schnell geöffnet wird: die Paginierung für Besucher, die gern wissen, wo sie sind, oder unendliches Scrollen für Besucher, die stöbern. Für ein einzelnes Projekt wählen Sie die Vorlage zuerst nach den Medien aus, einen Galerie-Slider für ein Shooting oder ein Video für einen Film, und entscheiden Sie zuletzt über Seitenleisten.

Weitere Templates

Der Rest der Bibliothek

Mit einer fertigen Seite starten

Alle 141 Layouts sind in jedem Tarif enthalten, neben jedem Block und jeder Demo-Website.

Canvas erwerben · ab 79 $/JahrDemos in der Vorschau anzeigen