Fehlerbehebung beim Zuschneiden

Schritte zum Minimieren von unerwünschtem Zuschneiden und Tipps, damit deine Bilder optimal aussehen.

Zuletzt aktualisiert: 31. Oktober 2024

Viele Bilder auf deiner Website werden beschnitten, entweder horizontal, vertikal oder in beide Richtungen. Dies sorgt dafür, dass deine Bilder innerhalb des Layouts deiner Website und unabhängig von der jeweiligen Browsergröße immer optimal zur Geltung kommen.

Diese Anleitung hilft dir, das normale Zuschneiden in Squarespace zu verstehen und zu lernen, wie du das Zuschneiden nach deinen Wünschen minimieren kannst.

Tipp

Für das Zuschneiden des ursprünglichen Bildes kannst du den Bild-Editor oder eine Drittanbieter-Software verwenden.

Zuschneiden näher erklärt

Jedes Bild auf deiner Website befindet sich in einem Container, einem unsichtbaren Feld, das steuert, wie das Bild in Bezug auf andere Inhalte auf der Seite angezeigt wird. Wenn ein Bild in einen Container geladen wird, passiert je nach den Einstellungen des Containers eines von zwei Dingen:

  • In den meisten Fällen entspricht das Bild den Abmessungen des Containers, die je nach Browserbreite variieren. Wenn das Bild nicht die gleiche Form wie der Container hat, wird das Bild ausgefüllt, um den Container vollständig zu füllen.
  • Manchmal entspricht die Form des Containers den Abmessungen des Bildes, sodass das gesamte Bild angezeigt wird.

Normalerweise werden Bilder auf deiner Website innerhalb der Abmessungen der Container angezeigt, wodurch einige zugeschnitten werden. Dies trägt zur optimalen Anzeige von Bildern bei, während die Bilder sich gleichzeitig an verschiedene Browsergrößen anpassen.

bryler-overlay.png

Bild-Blöcke

Bild-Blöcke zeigen Bilder in ihrem ursprünglichen Verhältnis von Höhe und Breite innerhalb der Layout-Beschränkungen Ihrer Website an.

Tipps:

  • Im Kreativen Editor werden Bild-Blöcke, die auf Füllen eingestellt sind, zugeschnitten, wenn du ihre Größe änderst. Wenn Bild-Blöcke auf Anpassen eingestellt sind, wird beim Verkleinern bzw. Vergrößern das ursprüngliche Seitenverhältnis beibehalten.
  • Schneide im Klassischen Editor Bild-Blöcke mit dem Zuschneidewerkzeug zu. Durch Doppelklicken auf das Zuschneidewerkzeug wird das Bild auf sein ursprüngliche Seitenverhältnis zurückgesetzt. Verkleinere das Bild, indem du auf beiden Seiten Abstands-Blöcke hinzufügst.
  • Verwende nach dem Zuschneiden den Bildausschnitt, um das Bild zu zentrieren.

Banner

Wenn deine Banner-Bilder das gleiche Seitenverhältnis haben, lässt sich besser absehen, wie sie zugeschnitten werden. Stelle sicher, dass du deine Bilder optimierst, indem du unsere Tipps zur Formatierung von Banner-Bildern befolgst.

Es gibt andere Möglichkeiten, das Zuschneiden von Bannern auf deiner Website zu kontrollieren, je nachdem, welche Version von Squarespace deine Website nutzt.

Du erstellst Banner-Bilder in Version 7.1, indem du Hintergrundbilder zu Seitenabschnitten hinzufügst. Diese Bilder werden immer bis zu einem gewissen Grad abgeschnitten, insbesondere auf Mobilgeräten. Um das Banner anzupassen, kannst du:

  • Ändere die Menge des Inhalts, der das Banner überlagert. Viele Inhalte erhöhen die Höhe des Banners und führen dazu, dass das Bild stärker zugeschnitten wird.
  • Die Banner-Größe ändern.
  • Den Bildausschnitt verwenden, um zu ändern, wie das Bild zentriert wird.

Informationen dazu, wie Ihre Banner auf Mobilgeräten angezeigt werden, finden Sie unter Wie wird meine Website auf Mobilgeräten dargestellt?

Seiten Banner

Bis auf ein paar Ausnahmen werden die Seitenbanner immer zu einem gewissen Grad zugeschnitten, insbesondere auf mobilen Geräten. Wie stark der Beschnitt ist, hängt von der Höhe des Banners und der Breite des Browsers ab.

Tipps:

Seitenübergreifende Banner

Bilder, die zu seitenübergreifenden Banner-Bildern hinzugefügt wurden (im Website-Stil hinzugefügt), können sich wiederholen, auf Bannerhöhe oder -breite angezeigt werden oder den Container vollständig ausfüllen.

Tipps:

Hintergrundbilder oder -videos

Wie du das Zuschneiden von Hintergrundbildern oder -videos steuerst, hängt davon ab, welche Version von Squarespace deine Website nutzt.

Wenn das Hintergrundbild oder -video deines Abschnitts abgeschnitten wirkt, ändere die Höhe oder Breite des Bereichs, um mehr von deinem Bild oder Video anzuzeigen.

Hintergrundbilder können sich wiederholen, in der Höhe oder Breite des Browsers angezeigt werden oder den Browserbildschirm vollständig ausfüllen.

Tipps:

  • Verwenden Sie Website-Stile, um auszuwählen, wie das Banner-Bild angezeigt wird.
  • Weitere Informationen zur Anzeige auf Mobilgeräten findest du in unseren Tipps zur Fehlerbehebung.
  • Bilder, die an ihrer längsten Kante mehr als 2500 Pixel groß sind, können Probleme auf Mobilgeräten verursachen.

Galerie-Abschnitte und Galerie-Seiten

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

Laden Sie Bilder direkt im Galerie-Abschnitt hoch und verwalten Sie dann den Tab Galerie, um zu steuern, wie Bilder angezeigt werden.

Mehr dazu erfährst du unter Galerieabschnitte.

Wie Bilder auf Ihrer Galerie-Seite angezeigt werden, hängt von Ihrem Template ab. Besuchen Sie den Leitfaden zu Templates, um zu erfahren, wie Bilder auf das Design Ihrer Galerie-Seite zugeschnitten werden können.

Galerie-Blöcke

Wie Bilder in einem Galerie-Block angezeigt werden, hängt vom Format ab: Slideshow, Raster, Karussell oder als Stapel.

Tipps:

  •  Alle Formate – Ändere im Klassischen Editor die Größe des gesamten Blocks, indem du auf beiden Seiten Abstands-Blöcke hinzufügst.
  • Slideshow - Die Höhe der Galerie wird durch das größte Bild festgelegt. Um ein Beschneiden der Bilder oder Leerräume darum herum zu vermeiden, verwende Bilder mit ähnlichen Seitenverhältnissen.
  • Raster – Verwende im Tab Design das Seitenverhältnis, um alle Bilder auf dieselbe Form zuzuschneiden, und ändere die Anzahl der Vorschaubilder pro Zeile, um ihre Größe zu ändern. Verwende den Bildausschnitt, um anzupassen, wie das Bild zentriert wird.
  • Karussell – Passe die Höhe mit dem Zuschneidewerkzeug an.
  • Stapel – Jedes Bild wird erweitert, um die Breite der Seite oder Spalte zu füllen, in der sich der Block befindet.

Portfolio- und Index-Seiten

Portfolio- und Index-Seiten sind in verschiedenen Versionen von Squarespace verschiedene Seitentypen, aber sie funktionieren auf ähnliche Weise:

Bewegen Sie den Mauszeiger über einen Portfolio-Abschnitt, um ein Bild hinzuzufügen. Verwenden Sie anschließend den Galerie-Tab, um zu kontrollieren, wie es angezeigt wird.

Um mehr zu erfahren, gehe zu Portfolio-Seiten.

Wie Bilder auf einer Index-Seite erscheinen, hängt von Ihrem Template ab. Werfen Sie einen Blick auf den Leitfaden Ihres Templates, um mehr zu erfahren.

Shop-Seiten

Wie sich das Zuschneiden auf Produktbilder auswirkt, hängt davon ab, welche Version deine Squarespace-Website hat.

Verwende nach dem Hochladen von Bildern in deinen Shop die Anpassungen des Shop-Abschnitts, um sie zu gestalten. Fahre beim Bearbeiten der Seite mit dem Cursor als Mouseover über den Shop-Abschnitt und klicke auf das Bleistiftsymbol. Du kannst die Abstände, die Spalten, das Seitenverhältnis und die Textausrichtung ändern. Probiere verschieden Stil-Anpassungen aus, um festzulegen, wie deine Produktbilder angezeigt werden. Weitere Informationen zum Anpassen deiner Shop-Seite findest du unter Sammlungs-Seite Abschnitte.

Seitenverhältnisse von Produktbildern

Es ist nicht möglich, Produktbilder auf Shop-Seiten automatisch zuzuschneiden. Wir empfehlen, dass deine Produktbilder ähnliche Seitenverhältnisse aufweisen. Bevor du beispielsweise Bilder auf deine Website hochlädst, solltest du sicherstellen, dass deine Produktbilder konsistent im Quer- oder Hochformat ausgerichtet sind.

Wenn deine Produktbilder unterschiedliche Ausrichtungen haben, verwende unseren integrierten Bild-Editor oder Drittanbieter-Tools, um deine Bilder zuzuschneiden. Du kannst mit Produkt-Blöcken auch ein benutzerdefiniertes Layout für deine Produkte erstellen.

Wie Ihre Produktbilder auf der Landing-Page zugeschnitten werden, hängt vom Shop-Seitentyp Ihres Templates ab.

Klassisch

Für klassische Shop-Seiten:

  • Verwenden Sie in Website-Stilen die Anpassung für das automatische Zuschneiden von Produktbildern, um auszuwählen, ob die Bilder auf dieselbe Form zugeschnitten oder in ihren ursprünglichen Formen angezeigt werden.
  • Wenn Sie sich für Zuschneiden entscheiden, legen Sie mit der Anpassung für die Produktartikelgröße die Form fest.
  • Verwende den Bildausschnitt, um anzupassen, wo das Bild zentriert wird.
  • Wenn Sie sich gegen Zuschneiden entscheiden, wählen Sie mit der Anpassung Farbe des Produkt-Overlays die Farbe aus, die hinter dem Bild angezeigt wird.
  • Weitere Hilfe finden Sie auf Gestalten der Shop-Seiten.
prodpagebackground.png

Erweitert

Für erweiterte Shop-Seiten:

  • Bilder werden immer auf dieselbe Form zugeschnitten. Dies trägt dazu bei, deiner Seite ein einheitliches Erscheinungsbild zu verleihen.
  • Um die Form für alle Bilder auf Ihrer Shop-Seite festzulegen, verwenden Sie die Anpassung Bildseitenverhältnis im Abschnitt Produkte: Layout der Website-Stile.
  • Verwende den Bildausschnitt, um anzupassen, wo das Bild zentriert wird.
  • Weitere Hilfe finden Sie auf Gestalten der Shop-Seiten.
advancedprodcutscropping.png

Einzigartig

Besuche diese Links, um mehr über die Vorschaubild-Stile für eine der einzigartigen Shop-Seiten zu erfahren:

Cover-Seiten

So erlangst du Zugriff auf diese Funktion

Version 7.1 unterstützt keine Cover-Seiten.

Cover-Seiten werden insbesondere auf Mobilgeräten immer – mal mehr, mal weniger stark – zugeschnitten. Wie stark dieser Beschnitt ist, hängt von der Höhe des Bildes, der Breite des Browsers und dem von dir gewählten Layout ab.

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.