Portfolio-Seiten gestalten

Passe die Portfolio-Seiten und Projekte deiner Website an.

Zuletzt aktualisiert: 8. Juli 2024

Portfolio-Seiten sind stilisierte Landing-Pages, die Besucher zu Projekten verlinken. Du kannst die Portfolio-Seiten an deine Marke und deinen Stil anpassen. In dieser Anleitung findest du die Stil-Optionen für Portfolio-Seiten und ihre einzelnen Projekte. Besuche Portfolio-Seiten, um eine Portfolio-Seite zu erstellen und Inhalte hinzuzufügen.

Portfolio-Seiten und Portfolio-Projekte im Vergleich

Portfolio-Seiten sind in zwei Teile gegliedert: Die Haupt-Portfolio-Seite, die ein Raster mit ausgewählten Bildern oder eine Liste von Links erstellt, auf die Besucher klicken, um dein Portfolio zu erkunden, und die einzelnen Projekte, zu denen diese Links führen und auf denen du Inhalte hinzufügen kannst.

Öffnen der Stiloptionen

Du gestaltest die Portfolio-Seite und die Projekte an zwei Stellen:

  • Portfolio-Seite – Klicke auf der Portfolio-Seite auf Bearbeiten und dann auf das Bleistiftsymbol im Portfolio-Abschnitt.
  • Projekte – Klicke auf das Projekt auf der Portfolio-Seite, um es zu öffnen, klicke auf Bearbeiten und dann auf das Bleistiftsymbol in dem Abschnitt, den du gestalten möchtest. Jedes Projekt besteht aus Abschnitten, wobei jeder Abschnitt seine eigenen Stil-Optionen hat.

Portfolio-Seite

Auf deiner Portfolio-Seite werden alle deine Projekte als ausgewählte Bilder oder Text-Links angezeigt, auf die Besucher klicken, um die einzelnen Projekte zu öffnen.

In den Portfolio-Abschnittsstilen kannst du die folgenden Details anpassen:

Denk daran:

  • Diese Änderungen gelten für alle Portfolio-Seiten mit dem gleichen Layout.
  • Alle an einem bestimmten Layout vorgenommenen Änderungen werden gespeichert, auch wenn du zu einem neuen Layout wechselst. Wenn du also zu einem vorherigen Layout zurückkehrst, werden deine Einstellungen wiederhergestellt.
  • Abhängig von der Anzahl der Projekte auf deiner Portfolio-Seite wirken sich einige Stil-Anpassungen möglicherweise nicht auf dein Layout aus. Wenn du beispielsweise ein Mouseover-Hintergrund-Layout mit einer großen Anzahl von Projekten hast, hat die Höhenanpassung möglicherweise keine sichtbare Wirkung, da der Abschnitt eine bestimmte Höhe haben muss, um alle Projekt-Links anzuzeigen. Verwende stattdessen die Anpassung durch den vertikalen Link-Abstand.

Raster-Layouts formatieren

Raster-Layouts zeigen deine Projekte in einem Raster mit ausgewählten Bildern an. Besucher klicken auf das Bild oder den Titeltext, um das Projekt zu öffnen. Deine Optionen im Format-Tab der Abschnittsstile unterscheiden sich je nach gewähltem Raster-Layout.

Das Layout Raster: Simple zeigt die ausgewählten Bilder in einem Raster an, wobei der Titeltext des Projekts unter den Bildern steht. Nachdem du dieses Layout ausgewählt hast, kannst du die folgenden Stil-Anpassungen ändern:

  • Breite – Wähle Voll, damit der Inhalt sich über die gesamte Breite des Abschnitts erstreckt, oder Einrückung, um das Padding links und rechts vom Inhalt zu vergrößern.
  • Höhe – Stelle die Höhe des Abschnitts zwischen Klein, Mittel, Groß oder Benutzerdefiniert ein. Beachte, dass die Abschnittshöhe auch von der Menge des vorhandenen Inhalts beeinflusst wird.
  • Spalten – Stelle das Raster so ein, dass es 2, 3 oder 4 Spalten hat.
  • Horizontale Abstände
  • Vertikale Abstände
  • Seitenverhältnis – Lege das Seitenverhältnis der Bilder fest.
  • Textausrichtung – Richte den Text links oder mittig unter den Bildern aus.
  • Mouseover-Effekt – Füge einen Verblassen- oder Zoom-Effekt hinzu, wenn ein Mauszeiger über ein Bild bewegt wird.
  • Mouseover-Deckkraft – Wenn du den Mouseover-Effekt Verblassen verwendest, stelle die Mouseover-Deckkraft niedriger ein, um ein festeres Overlay zu erhalten, oder höher für ein transparenteres Overlay.
  • Text-Abstände

Das Layout Raster: Overlay zeigt die ausgewählten Bilder in einem Raster an, wobei der Titeltext des Projekts die Bilder überlagert. Nachdem du dieses Layout ausgewählt hast, kannst du die folgenden Stil-Anpassungen ändern:

  • Breite – Wähle Voll, damit der Inhalt sich über die gesamte Breite des Abschnitts erstreckt, oder Einrückung, um das Padding links und rechts vom Inhalt zu vergrößern.
  • Höhe – Stelle die Höhe des Abschnitts zwischen Klein, Mittel, Groß oder Benutzerdefiniert ein. Beachte, dass die Abschnittshöhe auch von der Menge des vorhandenen Inhalts beeinflusst wird.
  • Spalten – Stelle das Raster so ein, dass es 2, 3 oder 4 Spalten hat.
  • Horizontale Abstände
  • Vertikale Abstände
  • Seitenverhältnis – Lege das Seitenverhältnis der Bilder fest.
  • Text-Platzierung – Lege fest, wo der Text auf dem Bild angezeigt wird.
  • Text anzeigen – Wähle aus, ob der Text Vor dem Mouseover oder Nach dem Mouseover angezeigt werden soll. Lies unsere Tipps für Mobilgeräte, wie sich dies auf die Anzeige von Titeln auf Mobilgeräten auswirkt.
  • Overlay-Deckkraft – Stelle die Mouseover-Deckkraft niedriger für ein festeres Overlay oder höher für ein transparenteres Overlay ein.

Mouseover-Layouts formatieren

Mouseover-Layouts zeigen deine Projekte als Liste von Links an, wobei die ausgewählten Bilder angezeigt werden, wenn du den Mauszeiger im Mouseover über die Links bewegst. Besucher klicken auf den Link, um das Projekt zu öffnen. Deine Optionen im Format-Tab der Abschnittsstile unterscheiden sich je nach dem ausgewählten Mouseover-Layout. Mouseover-Layouts haben ein halbtransparentes Overlay auf den ausgewählten Bildern des Projekts. Es ist nicht möglich, dies zu erhöhen oder zu entfernen:

Das Layout Mouseover: Fest zeigt die Titel des Projekts als Links an. Wenn Besucher den Mauszeiger als Mouseover über einen Link bewegen, erscheint das ausgewählte Bild des Projekts an einer festen Position auf der Seite. Nachdem du dieses Layout ausgewählt hast, kannst du die folgenden Stil-Anpassungen ändern:

  • Link-Format – Wähle zwischen Inline, wo Links nebeneinander angezeigt werden, oder Gestapelt, wo jeder Link in einer eigenen Zeile erscheint.
  • Auswahl im Vordergrund – Wenn diese Option aktiviert ist, wird der Link-Text, über den der Kunde den Mauszeiger bewegt, vor dem ausgewählten Bild angezeigt.
  • Vertikale Link-Abstände
  • Trennzeichen – Wähle aus, wie Links im Inline-Format aufgeteilt werden sollen. Weitere Informationen findest du unter Trennzeichen.
  • Animations-Typ – Lege eine Animation für das ausgewählte Bild fest.
  • Animations-Dauer – Lege die Geschwindigkeit für die Animation des ausgewählten Bildes fest.
  • Bildgröße

Das Layout Mouseover: Cursor folgen zeigt die Titel des Projekts als Links an. Wenn Besucher den Mauszeiger im Mouseover über einen Link bewegen, erscheint das ausgewählte Bild des Projekts und folgt dem Cursor, bis sie den Mauszeiger über einen anderen Link bewegen. Nachdem du dieses Layout ausgewählt hast, kannst du die folgenden Stil-Anpassungen ändern:

  • Link-Format – Wähle zwischen Inline, wo Links nebeneinander angezeigt werden, oder Gestapelt, wo jeder Link in einer eigenen Zeile erscheint.
  • Auswahl im Vordergrund – Wenn diese Option aktiviert ist, wird der Link-Text, über den der Kunde den Mauszeiger bewegt, vor dem ausgewählten Bild angezeigt.
  • Vertikale Link-Abstände
  • Trennzeichen – Wähle aus, wie Links im Inline-Format aufgeteilt werden sollen. Weitere Informationen findest du unter Trennzeichen.
  • Animations-Typ – Lege eine Animation für das ausgewählte Bild fest.
  • Animations-Dauer – Lege die Geschwindigkeit für die Animation des ausgewählten Bildes fest.
  • Bildgröße
  • Geschwindigkeit beim Folgen – Lege fest, wie schnell das Bild dem Cursor folgt. Bei 0 % folgt das Bild dem Cursor nicht.

Das Layout Mouseover: Hintergrund zeigt die Titel des Projekts als Links an. Wenn Besucher den Mauszeiger als Mouseover über einen Link bewegen, wird das ausgewählte Bild des Projekts als Abschnittshintergrundbild angezeigt und bleibt, bis sie den Mauszeiger über einen anderen Link bewegen. Nachdem du dieses Layout ausgewählt hast, kannst du die folgenden Stil-Anpassungen ändern:

  • Breite – Lege das Hintergrundbild auf Randlos oder Voll fest.
  • Höhe – Stelle die Höhe des Abschnitts zwischen Klein, Mittel, Groß oder Benutzerdefiniert ein. Beachte, dass die Abschnittshöhe auch von der Menge des vorhandenen Inhalts beeinflusst wird.
  • Vertikale Ausrichtung – Lege die vertikale Ausrichtung für Links fest.
  • Horizontale Ausrichtung – Lege die horizontale Ausrichtung für Links fest.
  • Link-Format – Wähle zwischen Inline, wo Links nebeneinander angezeigt werden, oder Gestapelt, wo jeder Link in einer eigenen Zeile erscheint.
  • Vertikale Link-Abstände
  • Trennzeichen – Wähle aus, wie Links im Inline-Format aufgeteilt werden sollen. Weitere Informationen findest du unter Trennzeichen.
  • Animations-Typ – Lege eine Animation für das ausgewählte Bild fest.
  • Animations-Dauer – Lege die Geschwindigkeit für die Animation des ausgewählten Bildes fest.
  • Letzte Auswahl beibehalten – Aktiviere diese Option, um das ausgewählte Bild des letzten Links anzuzeigen, über den die Besucher den Mauszeiger bewegt haben, bis sie den Mauszeiger über einen anderen Link bewegen. Wenn diese Option deaktiviert ist, wird der Abschnittshintergrund angezeigt, es sei denn, die Besucher bewegen den Mauszeiger über einen Link.
  • Trennzeichen – Wähle eine Art von Trennzeichen aus, um Links im Inline-Format zu unterteilen. Weitere Informationen findest du unter Trennzeichen.

Projekttiteltext

Der Titel jedes Projekts erscheint auf der Haupt-Portfolio-Seite, je nach Layout entweder unter dem ausgewählten Bild, als Overlay über dem ausgewählten Bild oder in einer Liste von Links. Du kannst den Titeltext in den Einstellungen des Projekts bearbeiten. Der Titeltext folgt den Schriftart- und Farbstilen für die gesamte Website.

Titel: Schriftart

So gestaltest du die Schriftart des Projekttitels:

  1. Öffne Website-Stil, während du eine Seite bearbeitest, und klicke dann auf Schriftarten.
  2. Klicke auf Überschriften.
  3. Wähle eine Schriftfamilie und ändere die anderen Stil-Einstellungen.
  4. Verwende unter Größeden entsprechenden Überschriften-Schieberegler, um die Titelgröße anzupassen.

Der von dir verwendete Schieberegler hängt vom Seiten-Layout deines Portfolios ab:

  • Raster: Einfach – Überschrift 4
  • Raster: Overlay – Überschrift 3
  • Mouseover-Layouts – Überschrift 1

Beachte, dass sich eine Änderung des Überschriftenformats auf den gesamten Text auf deiner Website mit dieser Formatierung auswirkt. Um die Schriftart und Größe des Titeltextes individuell zu gestalten, klicke auf Stile zuweisen, suche nach der Anpassung Titel für dein Layout und ändere den Stil und die Größe in Benutzerdefiniert.

Nachdem du Änderungen vorgenommen hast, klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Titel: Farbe

So gestaltest du die Titelfarbe des Projekts:

  1. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann auf Farben.
  2. Klicke auf das Bleistiftsymbol im Farbschema des Portfolio-Abschnitts.
  3. Scrolle nach unten und suche den Portfolio-Abschnitt, der zu deinem Layout passt.
  4. Ändere die Farbe über die Anpassung des Projekttitels. Jedes Portfolio-Layout hat eine eigene Projekttitel-Anpassung.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Trennzeichen

Bei Mouseover-Layouts mit Inline-Links kannst du „Trennzeichen“ oder Interpunktionszeichen hinzufügen, um deine Projekt-Links visuell zu trennen.

So wählst du Trennzeichen oder blendest sie aus:

  1. Klicke auf der Portfolio-Seite auf Bearbeiten.
  2. Fahre mit der Maus über den Portfolio-Abschnitt und klicke auf das Bleistiftsymbol.
  3. Stelle unter dem Tab Format die Option Link-Format auf Inline ein.
  4. Scrolle nach unten und klicke auf Trennzeichen. Wähle dann eine der Optionen aus, oder wähle Keine, um sie auszublenden.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.
Forward_slash_delimiters_on_a_portfolio_page.png

Projekte

Projekte werden aus Seitenabschnitten erstellt, sodass deine Stil-Optionen davon abhängen, welche Abschnitte du hinzufügst. Du kannst Block-Abschnitte, Galerie-Abschnitte oder Auto-Layouts hinzufügen.

Gestalte einen Abschnitt, indem du auf das Bleistiftsymbol klickst, das angezeigt wird, wenn du den Mauszeiger darüber bewegst. Mehr dazu erfährst du unter Stil-Änderungen vornehmen.

Projekt-Paginierung

Links zu den nächsten und vorherigen Projekten in einem Portfolio werden am Ende jeder Projekts angezeigt. Alle Portfolio-Seiten haben dieselben Stile für die Seitennummerierung, auch wenn sie unterschiedliche Layouts verwenden.

Schriftart der Seitennummerierung

So formatierst du die Schriftart der Seitennummerierung:

  1. Öffne Website-Stil, während du eine Seite bearbeitest, und klicke dann auf Schriftarten.
  2. Klicke auf Überschriften.
  3. Wähle eine Schriftfamilie und ändere die anderen Stil-Einstellungen.
  4. Verwende unter Größe den Schieberegler Überschrift 3, um die Titelgröße anzupassen.

Beachte, dass sich eine Änderung des Überschriftenformats auf den gesamten Text auf deiner Website mit dieser Formatierung auswirkt. Um die Schriftart und Größe des Titeltextes individuell zu gestalten, klicke auf Stile zuweisen, suche unter Portfolio: Element nach der Anpassung Seitennummerierung und ändere den Stil und die Größe in Benutzerdefiniert.

Nachdem du Änderungen vorgenommen hast, klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Farbe der Seitennummerierung

Die Farbe der Seitennummerierung folgt dem Farbschema im unteren Abschnitt jedes Projekts. Wenn Projekte in ihren unteren Abschnitten unterschiedliche Farbschemas verwenden, kann die Farbe der Seitennummerierung zwischen den Projekten variieren.

So formatierst du die Farbe der Seitennummerierung:

  1. Öffne Website-Stil, während du eine Seite bearbeitest, und klicke dann auf Farben.
  2. Klicke auf das Bleistiftsymbol im Farbschema des Portfolio-Abschnitts.
  3. Scrolle nach unten und finde die Anpassungen für Portfolio: Element.
  4. Ändere den Titeltext mit der Anpassung Projekt: Titel Seitennummerierung und das Symbol der Seitennummerierung mit der Anpassung Projekt: Symbol Seitennummerierung.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Die Änderungen wirken sich auf alle Abschnitte aus, die dasselbe Farbschema verwenden.

Schriftarten und Farben

Farben und Schriftarten auf der Portfolio-Seite und den Projekten folgen deinen Schriftart- und Farbanpassungen für die gesamte Website. Du kannst auch das Farbschema des Portfolio-Seitenabschnitts und der Abschnitte in Projekten in ihren jeweiligen Abschnitts-Website-Stil ändern.

Verwende im Farbschema deines Portfolios die Portfolio-Farbanpassungen, die zu deinem Layout passen. Verwende im Farbschema des letzten Abschnitts jedes Projekts die Anpassungen für Portfolio: Element um die Seitennummerierung am unteren Rand jedes Projekts zu gestalten. Dies kann zwischen den Projekten variieren, je nachdem, welches Farbschema der untere Abschnitt verwendet. 

Mobilgerät

Auf Mobilgeräten oder Tablets lassen sich Portfolio-Layouts vertikal in einer einzigen Spalte stapeln, unabhängig von der Anzahl der Spalten oder dem Link-Format in größeren Browsern.

Mouseover-Effekte werden in den meisten mobilen Browsern nicht unterstützt. Wenn du also das Layout Raster: Overlay verwendest, bei dem die Titel so eingestellt sind, dass sie nach dem Mouseover angezeigt werden, werden die Titel für Besucher auf Mobilgeräten möglicherweise nicht angezeigt.

So stellst du sicher, dass die Titel auf allen Geräten für das Layout Raster: Overlay angezeigt werden:

  1. Klicke auf der Portfolio-Seite auf Bearbeiten, bewege den Mauszeiger über den Portfolio-Abschnitt und klicke auf das Stiftsymbol.
  2. Wähle im Format-Tab im Drop-down-Menü Vor Mouseover die Option Text anzeigen aus.
  3. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.