Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Randlose Bilder

Ein randloses Bild erstreckt sich von einem Rand deines Browserfensters zum anderen und dehnt sich über die gesamte Breite deiner Website aus. Dies schafft ein großzügiges Erscheinungsbild und rückt die Bilder deiner Website in den Mittelpunkt.

In Version 7.1 kannst du randlose Bilder zu jeder Seite hinzufügen. In Version 7.0 hängt die Fähigkeit deiner Website, randlose Bilder anzuzeigen, vom Template ab.

7.1_full_bleed.jpg

Bevor Sie anfangen

  • Um ein vollflächiges Bild auf deiner Website zu erstellen, empfehlen wir, ein Bild mit einer Breite zwischen 1500 Pixeln und 2500 Pixeln hochzuladen.
  • Da sich die Größe von randlosen Bildern je nach Breite des Browsers ändert, werden sie immer in gewissem Maße beschnitten
  • Auch wenn diese Begriffe gelegentlich austauschbar verwendet werden, erstrecken sich „randlose“ Bilder bis zum Rand des Browser-Bildschirms, während Bilder „in voller Breite“ nur bis zum Rand des Hauptinhaltsbereichs reichen.

Hintergrundbilder

Hintergrundbilder funktionieren unterschiedlich, je nachdem, auf welcher Version von Squarespace sich deine Website befindet.

Erstelle in einem beliebigen Abschnitt ein randloses Hintergrundbild, indem du den Schalter Hintergrundbreite unter Abschnittsstile auf Randlos umschaltest. 

Damit ein Hintergrundbild eine ganze Seite ausfüllt, füge den gesamten Inhalt dieser Seite zu einem Abschnitt hinzu.

Einige Templates sind mit Blick auf große, auffällige Bilder gestaltet, während andere Leerräume und mehr Freiraum rund um Blöcke betonen.

Jedes Template, das ein Hintergrundbild für die gesamte Website unterstützt, kann dieses randlos anzeigen. Um ein Hintergrundbild als randlos einzustellen, wählen Sie die Stil-Einstellung Größe: Cover.

Du kannst auch zu jedem Template eine Cover-Seite hinzufügen. Viele Cover-Seiten-Layouts verwenden randlose Hintergrundbilder.

Banner

Banner-Bilder funktionieren unterschiedlich, je nachdem, auf welcher Version von Squarespace sich deine Website befindet.

Erstelle ein Banner anhand eines beliebigen Abschnitts, indem du ein Hintergrundbild oder -video hinzufügst und dann den Schalter Hintergrundbreite unter Abschnittsstile auf Randlos stellst. 

Banner werden oben auf deiner Website angezeigt, entweder unter oder hinter dem Header.

In diesen Template-Familien werden Banner in voller Browser-Breite angezeigt:

  • Adirondack – Banner werden in voller Website-Breite angezeigt, aber nicht auf die volle Browser-Breite erweitert.
  • Brine
  • Bedford
  • Five
  • Pacific
  • Supply – Vertikale Banner werden in Blogeinträgen und Events in der Höhe des Browsers angezeigt.
  • Tremont
  • York – Aktiviere Seiten-Banner anzeigen und Randloses Banner unter Website-Stile. 

Galerie-Abschnitte und Galerie-Seiten

Je nachdem, unter welcher Version von Squarespace sich deine Website befindet, hat deine Website unterschiedliche Galerie-Optionen.

Bilder in Galerie-Abschnitten können randlos angezeigt werden. Schalte in Galerie-Abschnittsstile den Schalter Breite auf Randlos um.

In diesen Template-Familien werden Galerie-Layouts randlos angezeigt:

Template Galerie-Stil
Ishimoto Karussell
Momentum Slideshow

Tremont

Grid (Raster)
Wexley

Raster. Passen Sie das Index: Element-Padding und das Äußere Padding an.

Projektseiten

Die York-Familie unterstützt einen speziellen Seiten-Typ namens Projekt-Seite, der Text und Bilder auf auffällige Weise kombiniert.

Aktivieren Sie unter Website-Stile Randloses Projekt und Volle Breite bei Hoch- und Querformat zulassen, um alle Bilder in Browser-Breite anzuzeigen.

Bild-Blöcke

Bild-Blöcke werden in Standardbreite innerhalb des Padding des Hauptinhaltsbereichs angezeigt, in der gleichen Breite wie alle anderen Blöcke. Sie verfügen über keine randlosen Optionen.

Näheres erfahren Sie unter Bildgröße anpassen.

Portfolio- und Index-Seitenbilder

Portfolio- und Index-Seiten funktionieren auf ähnliche Weise:

  • In Version 7.1 ist eine Portfolio-Seite ein Raster von Bildern, die zu anderen Seiten auf deiner Website verlinken. Alle 7.1-Websites unterstützen Portfolio-Seiten. 
  • In Version 7.0 ist eine Index-Seite ein einzigartiges Layout von Bildern, die zu anderen Seiten auf deiner Website verlinken. Nur einige 7.0-Vorlagen unterstützen Index-Seiten, und jeder Index hat seinen eigenen Stil.

Portfolio-Seiten können im Layout Portfolio-Index-Hintergrund randlos angezeigt werden. 

Index-Seiten zeigen in diesen Template-Familien randlose Bilder oder Bilder-Collagen an:

Template

Optionen

Avenue

Vorschaubild-Raster. Überprüfen Sie Index in voller Breite und passen Sie das Vorschaubild-Padding auf 0 % und das Canvas-Padding auf 0 px an (geben Sie manuell 0 px ein).

Brine

Gestapelte Banner und Galerie-Abschnitte.

Bedford

Gestapelte Banner

Flatiron

Vorschaubild-Raster oder Mosaik

Forte

Slideshow

Momentum

Slideshow

Pacific

Gestapelte Banner

Tremont

Slideshow

York

Gestapelte Banner. Wählen Sie Website: Äußeres Padding: Benutzerdefiniert und Website: Benutzerdefiniertes Padding auf 0 px setzen.

War dieser Beitrag hilfreich?
30 von 200 fanden dies hilfreich