Passe die Portfolio-Seiten und Projekte deiner Website an.

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:

• Format – Lege das Layout der Portfolio-Seite fest. Jedes Raster-Layout und jedes Mouseover-Layout verfügt über einzigartige Formatierungsoptionen.
• Hintergrund – Füge hinter den Projekt-Links ein Hintergrundbild, ein Hintergrundvideo oder Creative Backgrounds hinzu.
• Farben – Lege die Farben deiner Website fest oder ändere das Abschnittsdesign des Portfolios.

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.

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:

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.

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.