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

Fehlerbehebung beim Zuschneiden

Many images on your site will crop either horizontally, vertically, or both. This helps your images look their best within your site's layout and in different browser sizes.

This guide will help you understand the normal cropping that happens in Squarespace and learn how to minimize it as much as possible.

Tip: To crop the original image, use the Image Editor or third party software.

Understanding cropping

Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. When an image is loaded into a container, one of two things happens, depending on the container's settings:

  • Most of the time - The image conforms to the container's dimensions, which vary based on browser width. If the image isn't the same shape as the container, the image crops to fill the container completely.
  • Sometimes - The container’s shape conforms to the dimensions of the image so the whole image displays.

In most cases, images on your site display within the containers' dimensions, and will experience some cropping. This helps images look their best while adapting to different browser sizes.

bryler-overlay.png

Bild-Blöcke

Image Blocks display images at their original height and width ratio, within your site's layout restrictions.

Tipps:

  • Crop the image with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle.
  • After cropping, use the focal point to center the image.
  • Make the image smaller by adding Spacer Blocks on either side.

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 deine Banner auf Mobilgeräten angezeigt werden, findest du 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

Images added to site-wide banner images (added within Site Styles) can repeat, display at the banner height or width, or fill the container completely.

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.

Weitere Informationen findest du in den Seitenabschnitten der Version 7.1. 

Background images can repeat, display at the browser height or width, or fill the browser screen completely.

Tipps:

  • Use Site Styles to choose how the banner image displays.
  • See our troubleshooting tips for help with mobile display.
  • Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.
  • When choosing a full-bleed background image, consider how visitors will access your site.

Galerie-Abschnitte und Galerie-Seiten

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

Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display. 

Mehr dazu erfährst du unter Galerieabschnitte in Version 7.1

How images appear in your Gallery Page depends on your template. Visit your template's guide to learn how images might crop to fit your Gallery Page’s design.

Galerie-Blöcke

How images display in a Gallery Block depends on the format: Slideshow, Grid, Carousel, or Stacked.

Tipps:

  • For any format, resize the whole block by adding Spacer Blocks on either side.
  • Slideshow - The gallery’s height is set by the widest image. To avoid cropping or blank space around images, use images with similar aspect ratios.
  • Grid - In the Design tab, use the aspect ratio to crop all images to the same shape, and change the number of thumbnails per row to change their size. Use the focal point to adjust how each image centers.
  • Carousel - Adjust the height with the cropping handle.
  • Stacked - Each image expands to fill the width of the page or column the block is in.

Portfolio and Index Pages

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

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

Um mehr zu erfahren, gehe zu Portfolio-Seiten.

How images appear in an Index Page depends on your template. Visit your template's guide to learn more.

Shop-Seiten

How cropping affects product images depends on which version of Squarespace your site is on.

Verwende nach dem Hochladen von Bildern in deine Shop-Abschnitte die Anpassungen des Shop-Abschnitts, um sie zu gestalten. Klicke beim Bearbeiten einer Seite auf das Bleistiftsymbol. Du kannst den Abstand, die Spalten, das Seitenverhältnis und die Textausrichtung ändern. Probiere die verschiedenen Stil-Anpassungen aus, um festzulegen, wie deine Produktbilder angezeigt werden. Weitere Informationen zum Anpassen deiner Shop-Seite findest du unter Sammlungs-Seitenabschnitte in Version 7.1.

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 deine Produktbilder auf der Landing-Page zugeschnitten werden, hängt vom Shop-Seitentyp deines Templates ab.

Klassisch

  • In Site Styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
  • If you're cropping, use the Product Item Size tweak to set the shape.
  • Use the focal point to adjust where the image centers.
  • If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
  • Weitere Hilfe findest du unter Shop-Seiten gestalten

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 deiner Shop-Seite festzulegen, verwende die Anpassung Bildseitenverhältnis im Abschnitt Produkte: Layout von Website-Stil.
  • Use the focal point to adjust where the image centers.

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 145 fanden dies hilfreich