Die Projekt-Seite in der Template-Gruppe „York“ ist eine benutzerdefinierte Galerieansicht, die für die Erstellung eleganter Portfolio-Layouts entwickelt wurde. Verwende die Projekt-Seite, um Layouts zu erstellen, die Text und Bilder auf auffällige Weise mischen.
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori und Taylor haben die gleiche zugrundeliegende Struktur und Funktionalität. Diese Anleitung gilt für alle diese Templates. Diese Templates unterstützen außerdem Galerie-Seiten, die verschiedene Optionen bieten.
Version 7.1 unterstützt keine Cover-Seiten. Du kannst in der Squarespace-App keine Projekt-Seiten hinzufügen oder bearbeiten.
Die Projekt-Seite einrichten
So richtest du eine Projekt-Seite ein:
- Öffne das Menü „Seiten“.
- Klicke auf das Symbol +, um ein Projekt hinzuzufügen.
- Füge für optimale Ergebnisse mehrere Bilder oder Videos hinzu und gib jedem einen Titel und eine Beschreibung.
Bilder und Videos hinzufügen
So fügst du Bilder und Videos hinzu:
- Öffne das Menü „Seiten“.
- Klicke auf deine Projekt-Seite im Menü auf der linken Seite.
- Lade Bilder hoch, füge Agenturbilder hinzu und füge Videos hinzu. Alle Videos müssen ein Vorschaubild haben.
- Lege den Veröffentlichungsstatus des Bildes oder Videos fest.
Um die Einstellungen für Bilder und Videos zu bearbeiten, die du bereits hochgeladen hast, doppelklicke auf das Bild oder Video im seitlichen Menü.
Layout
Verwende den Abschnitt Projekt: Layout von Website-Stil, um das Layout anzupassen.
- Bild: Ausrichtung – Richte alle Beschriftungen und Bilder rechts, links oder mittig aus.
- Bild: Abstände – Passe den Abstand zwischen den einzelnen Bildern im Projekt an.
- Banner: Abstände – Passe den Abstand zwischen dem Seiten-Header und dem ersten Bild an. Text: Höhe im Abschnitt Seite: Intro-Text kann dies ebenfalls beinflussen.
- Volle Breite bei Hoch- und Querformat zulassen – Zeige Bilder im Hochformat und quadratische Bilder in der Breite des Hauptinhaltsbereichs an. Wenn Randloses Projekt ausgewählt ist, werden sie in der Breite des Browsers angezeigt. Diese Anpassung erscheint, wenn Beschriftungsstil im Hoch- und Quadratformat auf Standard oder Offset eingestellt ist.
Hinweis: Projekt-Seiten unterstützen keine Lightboxes oder Deeplink-URLs. Du kannst Klick-URLs zu Bildern von Projekt-Seiten hinzufügen. Dies ist möglich, wenn sie mit Galerie-Blöcken oder Übersichts-Blöcken verbunden sind, funktioniert jedoch nicht auf der Projekt-Seite selbst. Wenn du einen Link haben möchtest, der auf der Projekt-Seite funktioniert, füge einen Link zur Beschriftung des Bildes hinzu.
Beschriftungen hinzufügen
So kannst du Titel und Beschreibungstext hinzufügen oder anpassen:
- Öffne das Menü „Seiten“.
- Klicke auf die Projekt-Seite.
- Doppelklicke auf das Bild im seitlichen Menü.
- Füge deinen Text zu den Feldern Titel und Beschreibung hinzu.
Titel und Beschreibungen werden bei Querformatbildern unterhalb angezeigt. Bei Bildern im Hochformat und bei quadratischen Bildern werden diese unterhalb oder daneben angezeigt. Passe deren Layout im Abschnitt Projekt: Layout von Website-Stil an.
- Verwende die Anpassung Projekt-Beschriftungen anzeigen, um alle Bildnamen und Beschreibungstexte anzuzeigen oder auszublenden.
- Querformat-Abstände einklappen entfernt den Leerraum unter Bildern im Querformat, die keine Beschriftungen haben.
Verwende die Anpassungen im Abschnitt Projekt: Schriftarten von Website-Stil, um den Text deines Bildtitels und deiner Beschreibungen zu gestalten.
- Um den Text links, rechts oder mittig auszurichten, verwende die Anpassungen Beschriftungs-Titel: Ausrichtung und Beschriftungs-Textkörper: Ausrichtung.
- Für Beschriftungen, die neben Hochformat- oder quadratischen Bildern angezeigt werden, verwende die Anpassung Abwechselnde Beschriftungen am Bild ausrichten.
Wenn du Bild-Ausrichtung: Mittig gewählt und Projekt-Beschriftungen anzeigen aktiviert hast, kannst du mit den Anpassungen Beschriftungsstil im Hoch- und Quadratformat und Beschriftungsstil im Querformat genauer anpassen, wo die Beschriftungen auf der Seite angezeigt werden.
- Wenn du Standard wählst, wird die Beschriftung direkt unter dem Bild angezeigt, und Offset verschiebt die Beschriftung weiter nach unten, in gleichem Abstand zum nächsten Bild.
- Wenn du Beschriftungsstil im Hoch- und Quadratformat: Abwechselnd wählst, werden Beschriftungen an die Seite von Bildern im Quadrat- und Hochformat verschoben. Die Beschriftungen wechseln sich von links nach rechts ab. Bilder ohne Beschriftungen werden zentriert.
- Wenn du Beschriftungsstil im Querformat: Einrückung wählst, werden die Beschriftungen unter Bildern im Querformat nach oben verschoben, sodass sie sich leicht überlappen.
Bild- und Videogrößen
Bilder auf Projekt-Seiten werden nie größer als ihre ursprünglichen Abmessungen, selbst wenn sie auf Randlos gesetzt werden. Dadurch wird verhindert, dass deine Bilder verschwommen oder pixelig aussehen.
- Im Allgemeinen wird die Bildgröße auf deiner Projekt-Seite durch die Originalabmessungen deines Bildes bestimmt. Wenn du möchtest, dass das Bild auf der Seite größer aussieht, lade ein Bild mit größeren Abmessungen hoch.
- Um die Größe des Bildes auf der Seite zu verringern, lade ein Bild mit kleineren Abmessungen hoch.
- Die Anpassung Website: Äußeres Padding kann sich auf die Breite von Bildern auswirken, die nicht auf „Randlos“ eingestellt sind.
- Die Breite des Videos wird von der Hosting-Website festgelegt. Um die Video-Breite anzupassen, verwende den Video-Einbettungscode und lege die Breite manuell im Code fest.
- Hilfestellungen zu Bannern und Responsive Design findest du in unseren Best Practices.
Randlose Bilder
Randlose Bilder reichen bis zu den Rändern des Browsers und ignorieren das äußere Padding. Um dies zu aktivieren, vergewissere dich zunächst, dass deine Bilder groß genug sind. Bilder auf Projekt-Seiten sind nie größer als ihre ursprünglichen Abmessungen. Sie werden auch nicht breiter als 2500 Pixel angezeigt, da Squarespace das Responsive Design optimiert. Wir empfehlen jedoch, Bilder mit einer Breite von mindestens 2500 Pixeln hochzuladen, um optimale Ergebnisse zu erzielen.
Wenn deine Bilder groß genug sind, kannst du Website-Stil verwenden, um sie randlos zu machen. Dies betrifft alle Projekt-Seiten auf deiner Website.
Auf Projekt-Seiten können Bilder nur in folgenden Fällen randlos angezeigt werden:
- Die Bilder sind zentriert.
- Beschriftungen befinden sich unter Bildern.
- Bilder im Querformat müssen auf randlos eingestellt werden, bevor Bilder, die nicht im Querformat sind, auf randlos gesetzt werden können.
Um alle deine Bilder randlos anzuzeigen, nimm zunächst die Einstellungen für Bilder im Querformat vor:
- Öffne Website-Stil und scrolle zum Abschnitt Projekt: Layout.
- Wähle Bild-Ausrichtung: Mittig. Dadurch werden deine Bilder zentriert.
- Vergewissere dich, dass Projekt-Beschriftungen anzeigen aktiviert ist, auch wenn du keine Beschriftungen hast.
- Wähle Randloses Projekt. Dadurch werden deine Bilder im Querformat auf randlos gesetzt.
Nimm anschließend die Einstellungen für Bilder vor, die nicht im Querformat sind:
- Wähle Beschriftungsstil im Hoch- und Quadratformat: Standard oder Offset. Dadurch werden alle Beschriftungen unter deinen Bildern angezeigt, die nicht im Querformat sind.
- Aktiviere Volle Breite bei Hoch- und Quadratformat zulassen. Dadurch werden deine Nicht-Querformatbilder auf randlos gesetzt.
- Save and refresh the page.
Bilder verschieben
Um die Reihenfolge der Bilder auf der Seite neu anzuordnen, ändere die Reihenfolge innerhalb des Menüs der Seite. Das seitliche Menü von Projekt-Seiten hat die gleiche Funktionalität wie Galerie-Seiten.
Du kannst ein Bild und den entsprechenden Titel sowie die Beschriftung zwischen jeder Projekt-Seite oder Galerie-Seite verschieben. Mehr dazu erfährst du unter Inhalte zwischen Seiten verschieben.
Kopfzeile und Footer
Zusätzlich zu Bildern und Beschriftungen unterstützen Projekt-Seiten:
- Seiten-Banner – Ein Bild oder Video, das oben auf der Seite angezeigt wird.
- Seitentitel, Beschreibung und Kategorietext – Text, der oben auf der Seite angezeigt wird. Wenn du ein Seiten-Banner hast, wird dieser Text über dem Bild oder Video angezeigt.
- Header- und Footer-Bereiche – Bereiche am oberen und unteren Rand der Seite, die du mit deinen eigenen Inhalten anpassen kannst.
Wenn deine Projekt-Seite kein ausgewähltes Bild hat, wird das erste Bild, das zu deiner Projekt-Seite hinzugefügt wird, automatisch zum Banner-Bild oben auf der Seite. Füge ein ausgewähltes Bild hinzu, um es zu ersetzen, oder deaktiviere Projekt-Banner anzeigen unter Website-Stile, um es auf allen Projekt-Seiten auszublenden.
Seite wird geladen
Bilder und Beschriftungen auf Projekt-Seiten scheinen von unten nach oben zu gleiten, wenn du auf der Seite nach unten scrollst. Um diesen Effekt zu entfernen, deaktiviere die Option Bilder und Beschriftungen kaskadieren. Wenn diese Option deaktiviert ist, werden Bilder und Beschriftungen stattdessen eingeblendet.
Galerie-Seite vs. Projekt-Seite
Zusätzlich zu Projekt-Seiten unterstützen diese Templates die Standard-Galerie-Seite.
Während sich Projekt-Seiten hervorragend für eine Mischung aus Bildern und Text eignen, sind Galerie-Seiten ideal, um den Schwerpunkt allein auf Bilder und Videos zu legen. Im Gegensatz zu Projekt-Seiten unterstützen Galerie-Seiten Deeplink-URLs, Klick-URLs und Lightbox-Funktionen.
Um beide Optionen auszuprobieren, kannst du Bilder zwischen Galerie-Seiten und Projekt-Seiten verschieben.
Hinweis: Galerie-Seiten unterstützen keine Seiten-Banner-Videos.
Vorlagen wechseln
Wenn du zu einem anderen Template als York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori oder Taylor wechselst, werden deine Projekt-Seiten in Galerie-Seiten umgewandelt.
Wenn du zurück zu York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori und Taylor wechselst, musst du möglicherweise neue Projekt-Seiten und Galerie-Seiten erstellen und Bilder in diese verschieben, um dein Originalformat wiederherzustellen.
Mobilgerät
Auf Mobilgeräten und schmalen Browsern werden Inhalte vertikal in einer einzigen Spalte angeordnet.