Schritte zum Minimieren von unerwünschtem Zuschneiden und Tipps, damit deine Bilder optimal aussehen.
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.
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 festgelegt sind, zugeschnitten, wenn du ihre Größe änderst. Bild-Blöcke, die auf Anpassen festgelegt sind, werden kleiner oder größer.
- Schneide im Klassischen Editor Bild-Blöcke mit dem Zuschneidewerkzeug zu. Um das Bild auf seine ursprünglichen Abmessungen zurückzusetzen, doppelklicke auf das Zuschneidewerkzeug. 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.
Banner werden immer bis zu einem gewissen Grad zugeschnitten, vor allem auf Mobilgeräten. Um das Banner anzupassen, kannst du:
- Gestalte das Banner-Bild und den Text.
- Ändere die Banner-Größe, einschließlich Höhe und Breite.
- 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 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:
- Erfahren Sie, wie Sie die Banner Ihrer Website gestalten und ihre Höhe festlegen können.
- Verwende den Bildausschnitt, um anzupassen, wie das Bild zentriert wird.
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:
- Verwenden Sie Website-Stile, um festzulegen, wie das Banner-Bild angezeigt wird.
- Wähle Anpassungen, die sowohl auf Mobilgeräten als auch auf einem Computer gut aussehen.
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.
- Version 7.1 verwendet Galerie-Abschnitte
- Version 7.0 verwendet Galerie-Seiten
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:
- Version 7.1 verwendet Portfolio-Seiten.
- Version 7.0 verwendet Index-Seiten.
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.
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.
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.