Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Ein Bild skalieren

Wenn Sie einen Bild-Block zu einer Seite oder einem Blog-Eintrag hinzufügen, hängt die Größe der Darstellung auf Ihrer Website von mehreren Faktoren ab:

Diese Anleitung vermittelt Ihnen ein besseres Verständnis dieser Faktoren und erläutert zudem die verschiedenen Möglichkeiten der Bildskalierung.

Watch a video

Bevor Sie beginnen

  • Diese Anleitung betrifft das Skalieren von Bild-Blöcken. Hierdurch haben Sie die Möglichkeit, Bilder zu regulären Seiten, Blog-Einträgen und sonstigen Inhaltsbereichen in Squarespace hinzuzufügen. Informationen zu anderen Bildtypen finden Sie hier: Sonstige Bilder.
  • Wir empfehlen, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen. Mit dieser Größe stellen Sie sicher, dass Bilder visuell ansprechend dargestellt werden, ohne Ihre Website zu überlasten.
  • Wenn Sie ein Starter Layout mit einem Platzhalter im Bild-Block verwenden, sollten Sie zunächst Ihr eigenes Bild zum Block hinzufügen, bevor Sie die Größe anpassen.

Mit anderen Blöcken skalieren

Wenn Sie einen Bild-Block hinzufügen, wird dieser automatisch vergrößert, um die gesamte Breite des Inhaltsbereichs auszufüllen. Sie können den Bild-Block verkleinern, indem Sie weitere Blöcke auf beiden Seiten hinzufügen. Das Seitenverhältnis (Breite : Höhe) wird beibehalten, sodass das gesamte Bild schrumpft, ohne die Form zu verändern.

Dies erreichen Sie am besten mit Abstands-Blöcken, die Leerflächen einfügen. Fügen Sie diese Flächen links oder rechts zu einem Bild-Block hinzu und bewegen Sie dann das Resize handle (Skalierwerkzeug), um den Bild-Block zu skalieren.

  1. Klicken Sie auf Insert Point (Einfügepunkt), um einen Abstands-Block hinzuzufügen.
  2. Ziehen Sie den Abstands-Block auf die linke oder rechte Seite des Bild-Blocks.
  3. Klicken und ziehen Sie das Resize handle (Skalierwerkzeug).

Fügen Sie Abstands-Blöcke in gleicher Größe auf beiden Seiten ein, um das Bild zu zentrieren.

Andere Blöcke

Dieselbe Methode empfiehlt sich auch für andere Blöcke. Dies ist besonders hilfreich, wenn Text neben Bildern erscheinen soll, wie etwa im .gif unten dargestellt.

 

Das ursprüngliche Bild zuschneiden

Zuschneiden kann die Höhe und Form eines Bildes verändern, da Teile des Bildes entfernt werden. 

Verwenden Sie den Adobe Creative Cloud Image Editor (siehe unten) oder eigene Drittanbieter-Software und laden Sie das Bild erneut hoch, um das ursprüngliche Bild zuzuschneiden.

Tipp: In den meisten Fällen behält das zugeschnittene Bild auf Ihrer Website seine Breite bei. Machen Sie von einer der anderen Methoden in dieser Anleitung Gebrauch, um die Breite zu verändern.

crop-with-adobe.png

Das Zuschneidewerkzeug verwenden

Bei den Layouts Inline (Klassisch) und Poster besteht die Möglichkeit, das Zuschneidewerkzeug anzuklicken und zu ziehen, um das Bild vertikal zuzuschneiden. In diesem Fall behält das Bild die ursprüngliche Breite, nur die Höhe wird verändert.

  1. Klicken Sie auf den Bild-Block. Es erscheint eine Umrandung mit einem runden Zuschneidewerkzeug am unteren Ende. 
  2. Klicken Sie auf das Zuschneidewerkzeug und ziehen Sie es, um das Bild zuzuschneiden.

Tipps:

  • Halten Sie Shift gedrückt, während Sie das Zuschneidewerkzeug ziehen, um das Bild in 20-Pixel-Schritten zu skalieren. Auf diese Weise können Sie die Unterseite des Bildes an einem anderen Block ausrichten.
  • Das Zuschneidewerkzeug erscheint erst, nachdem Sie ein Bild hinzugefügt haben.
  • Sie können den Mittelpunkt des zugeschnittenen Bildes mit Fokuspunkten festlegen.
  • Doppelklicken Sie auf das Zuschneidewerkzeug, um den Zuschnitt rückgängig zu machen.
  • Ziehen Sie das Werkzeug nach unten, um das Bild mittels Zoom zu vergrößern.

 

 

Klicken und ziehen Sie das Zuschneidewerkzeug nach unten, um das Bild horizontal zuzuschneiden. Auf diesem Weg vergrößern Sie das Bild und trennen die Seiten ab. 

 

Mit dem Style Editor skalieren

Die Layouts Card (Karte)Overlap (Überlappung) und Collage verfügen im Style Editor über eigene Skalierungsoptionen.

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Style Editor.
  2. Scrollen Sie zum Abschnitt des gewählten Layouts (beispielsweise zum Abschnitt Image Block: Card (Bild-Block: Karte)).
  3. Verwenden Sie die Anpassung Image Width (Bildbreite), um die Größe zu ändern. Bildtext wird je nach verfügbarem Platz automatisch vergrößert oder verkleinert.
Tipp: Dies beeinflusst alle Bild-Blöcke mit diesem Layout.

adjust-layout.gif

Den Block zum Füllen strecken

Wenn Sie das Layout Inline (Klassisch) verwenden und Ihr Bild schmaler als der Bild-Block ist, wird das Bild seine ursprüngliche Breite beibehalten. Dies führt dazu, dass innerhalb des Blocks auf beiden Seiten des Bildes Leerflächen erscheinen. Auf diesem Weg wird die ursprüngliche Bildqualität beibehalten.

Um diese Leerflächen zu entfernen, damit das Bild die gesamte Breite des Blocks ausfüllt, öffnen Sie den Bild-Block und setzen Sie einen Haken bei Stretch (Strecken). 

Tipps:

  • Das Strecken eines Bildes kann sich auf die Bildqualität auswirken.
  • Wir empfehlen, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen, damit Bilder nicht unnötig gestreckt werden müssen.
  • Wenn das Bild breiter als der Bereich des Bild-Blocks ist, wird es entsprechend verkleinert (nicht zugeschnitten).
  • Die anderen Layouts werden automatisch gestreckt.

Optionen nach Layout

Hier sehen Sie eine Kurzübersicht der verschiedenen Optionen, die in den unterschiedlichen Layouts zur Verfügung stehen:

Option Inline Poster Card (Karte) Overlap (Überhang) Collage Stack (Stapel)
Mit Blöcken skalieren
Das ursprüngliche Bild zuschneiden
Zuschneidewerkzeug
Style 
Editor

Zum Füllen strecken entf. entf. entf. entf. entf.

Sonstige Bilder

Sie haben weitere Möglichkeiten, Bilder zu Ihrer Website hinzuzufügen. Dabei stehen Ihnen jeweils eigene Skalierungsoptionen zur Verfügung:

Tipp: Die Methode zur Skalierung mit anderen Blöcken kann für jeden beliebigen Block angewendet werden.
War dieser Beitrag hilfreich?
102 von 274 fanden dies hilfreich