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

Fehlerbehebung beim Zuschneiden

Viele Bilder auf deiner Website werden entweder horizontal, vertikal oder auf beide Formate zugeschnitten. 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 so gut wie möglich 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:

  • Schneide das Bild mit dem Zuschneidewerkzeug zu. Um das Bild auf seine ursprünglichen Abmessungen zurückzusetzen, doppelklicke auf das Zuschneidewerkzeug.
  • Verwende nach dem Zuschneiden den Bildausschnitt, um das Bild zu zentrieren.
  • Verkleinere das Bild, indem du auf beiden Seiten Abstands-Blöcke hinzufügst.

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.

Banner werden immer bis zu einem gewissen Grad zugeschnitten, vor allem auf Mobilgeräten. Um das Banner anzupassen, kannst du:

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 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 Ihres Abschnitts abgeschnitten wirkt, ändern Sie die Höhe oder Breite des Bereichs, um mehr von Ihrem Bild oder Video anzuzeigen.

Mehr dazu erfährst du unter Seitenabschnitte.

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.
  • Bei der Auswahl eines randlosen Hintergrundbildes solltest du bedenken, wie Besucher auf deine Website zugreifen.

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:

  • Ändere für jedes Format 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 breiteste Bild festgelegt. Um ein Zuschneiden oder Leerräume um Bilder 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 jedes 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-Abschnitten die Anpassungen des Shop-Abschnitts, um sie zu gestalten. Klicke beim Bearbeiten einer Seite auf das Bleistiftsymbol. Du kannst die Abstände, 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-Seitenabschnitte.

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

  • 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

  • Die erweiterte Shop-Seite schneidet Bilder immer auf die gleiche Form zu. Dies verleiht deiner Seite ein einheitliches Erscheinungsbild.
  • 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.

advancedprodcutscropping.png

Einzigartig

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

Cover-Seiten

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.

War dieser Beitrag hilfreich?
14 von 158 fanden dies hilfreich