Randlose Bilder

Erziele einen visuellen Eindruck, indem du breite Bilder hinzufügst, die bis zum Rand des Bildschirms reichen.

Zuletzt aktualisiert: 22. August 2024

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 du loslegst

  • Um ein randloses 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 der 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ähle folgende 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.

Füge ein Banner zu einem beliebigen Abschnitt hinzu, 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 – Aktivieren SieSeiten-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. Stelle 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, bei dem Text und Bilder auf auffällige Weise kombiniert werden.

Aktiviere 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.

Weitere Informationen finden Sie unter Bild-Blöcke.

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-Templates unterstützen Index-Seiten und jeder Index hat einen 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üfe die Option „Index in voller Breite“ und passe das Vorschaubild-Padding auf 0 % und das Leinwand-Padding auf 0 px an (gib 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.

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.