Bild-Blöcke

Zeige Bilder auf deiner Website an und füge Animationen, Beschriftungen und Links hinzu.

Verwende Bild-Blöcke, um Bilder zu Seiten oder Blogeinträgen hinzuzufügen. In jedem Bild-Block wird genau ein Bild angezeigt.

Ein Video anschauen

Ein Bild hinzufügen

So fügen Sie einen Bild-Block hinzu:

1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und klicke dann auf Bild. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
2. Klicke auf das +-Symbol im Bild-Block.
3. Lade eine Datei von deinem Computer oder Mobilgerät hoch, verwende ein Bild aus deiner Bibliothek wieder oder durchsuche die Agenturbilder. Verwende für optimale Ergebnisse ein Bild mit einer Größe von unter 500 KB.
4. Verwende den Bild-Block-Editor, um das Bild zu ersetzen, zu löschen oder zu bearbeiten.
5. Wenn du den Kreativen Editor verwendest, stelle sicher, dass du auch das mobile Layout festlegst.

Tipp: Der Bild-Block wird ohne ein hochgeladenes Bild nicht auf deiner Live-Website angezeigt.

Bilder von einem Mobilgerät hochladen

Mit der Squarespace-App kannst du Bilder von deinem Handy oder einem anderen Mobilgerät hinzufügen. So lädst du ein Bild hoch:

1. Klicke im Bild-Block-Editor auf + und wähle dann Von Mobilgerät hochladen aus. Dadurch wird eine Push-Benachrichtigung an dein Gerät gesendet.
   • Wenn du zum ersten Mal auf diese Website hochlädst, wird ein QR-Code auf deinem Computer angezeigt. Wenn du die Squarespace-App noch nicht hast, scanne den Code, um sie herunterzuladen, und klicke dann auf Weiter und Push senden.
2. Tippe auf die Benachrichtigung auf deinem Gerät, um das Import-Tool der Squarespace-App zu öffnen. Die App ruft automatisch Bilder aus der Foto-Bibliothek deines Geräts ab.
   • Wenn die Benachrichtigung nicht angezeigt wird, überprüfe die Einstellungen deines Geräts, um sicherzustellen, dass Push-Benachrichtigungen von der Squarespace-App aktiviert sind.
3. Tippe auf das Bild, das du verwenden möchtest, und dann auf Hochladen.
4. Das Bild wird im Bild-Block auf deinem Computer angezeigt. Tippe in der Squarespace-App auf Ersetzen, um ein anderes Bild auszuwählen, oder tippe auf Fertig, um den Uploader zu schließen.

Tipp: Wenn du Bilder von einem Mobilgerät hochlädst, klicke im Pop-up-Fenster, das auf deinem Computer angezeigt wird, auf Fehlerbehebung, um den QR-Code zum Herunterladen der Squarespace-App erneut zu scannen oder die Option zum erneuten Senden der Push-Benachrichtigung zu finden.

Den Bild-Block-Editor öffnen

Im Bild-Block-Editor kannst du Folgendes tun:

• Das Bild ersetzen, löschen oder bearbeiten
• Den Bildausschnitt festlegen
• Die Design-Optionen festlegen
• Alternativtext hinzufügen
• Den Dateinamen bearbeiten
• Eine Lightbox aktivieren oder deaktivieren
• Bildeffekte hinzufügen

So öffnest du den Bild-Block-Editor:

1. Bearbeite die Seite oder den Beitrag.
2. Klicke auf den Bild-Block.
3. Klicke in der Werkzeugleiste des Blocks auf das Bleistiftsymbol.

Einen Bild-Link hinzufügen

Um das Bild im Inline-Layout in einen Link umzuwandeln, füge die URL zum Feld Link hinzu oder klicke auf , um weitere Optionen zu erhalten.

Denk daran:

• Das Aktivieren einer Lightbox deaktiviert Klick-URLs.
• Die meisten Layouts des Klassischen Editors enthalten eine Button-Option.

Klassischer Editor-Layouts

Bild-Blöcke, die zu Abschnitten des Kreativen Editors hinzugefügt wurden, verfügen über keine integrierten Layout-Optionen. Erstelle ähnliche Layouts, indem du Bild-Blöcke mit anderen Blöcken wie Text-Blöcken und Button-Blöcken überlappst.

Wenn du im klassischen Editor einen Bild-Block hinzufügst, verwendet der Block standardmäßig das Inline-Layout. Um das Layout zu ändern, klicke auf den Tab Design und wähle dann das gewünschte Layout aus:

• Inline – Der grundlegende Bild-Block mit optionalen Beschriftungen, die sich unter dem Bild befinden oder es überlappen. Lege im Tab „Inhalt“ fest, wie die Beschriftung angezeigt wird.
• Plakat – Zeige Text über Bildern an, um die Optik eines Banners oder Plakats zu erzeugen.
• Karte – Anzeige von Bildern mit Text links oder rechts. Der Text verschiebt sich in kleineren Browsern, auf Mobilgeräten und wenn Bild-Blöcke in Spalten verwendet werden in der Regel unter die Bilder.
• Überlappung – Auf der einen Seite wird ein Bild und auf der anderen Seite Text, der das Bild teilweise überlappt, angezeigt. Füge eine Hintergrundfarbe zu dem Titel hinzu, um das Element besser hervorzuheben. In der Regel verschiebt sich der Text in kleineren Browsern, auf Mobilgeräten und wenn Bild-Blöcke in Spalten verwendet werden in den unteren Bereich der Bilder.
• Collage – Es werden auf der einen Seite Bilder und auf der anderen Seite Text über Hintergrund-„Karten“, der das Bild abgrenzt und überlappt, angezeigt. In der Regel verschiebt sich der Text in kleineren Browsern, auf Mobilgeräten und wenn Bild-Blöcke in Spalten verwendet werden in die untere Ecke der Bilder.
• Stapel – Zeige Bilder mit Text unten an.

Während du ein Layout auswählst, wird dir eine Vorschau davon auf der Seite angezeigt. Anhand der Geräteansicht kannst du überprüfen, wie dein Bild-Block auf Mobilgeräten angezeigt wird.

Schnelles Ändern von Layout und Textausrichtung

Im Klassischen Editor kannst du das Layout und die Textausrichtung eines Bild-Blocks ändern, ohne den Editor zu öffnen, indem du die Buttons für Schnellaktionen verwendest. Klicke beim Bearbeiten der Seite auf den Bild-Block und dann auf die Buttons Layout oder Ausrichtung, die zwischen den Bleistift- und Papierkorb-Symbolen angezeigt werden.

Bildform festlegen

Neben dem Zuschneiden und Ändern der Größe kannst du Bild-Blöcke formen, um deinen Bildern Abwechslung und einen einzigartigen visuellen Effekt zu verleihen. Lege die Bildform im Tab Design des Bild-Block-Editors fest:

• Eckenradius – Für einen subtilen Effekt kannst du die Ecken eines Bildes abrunden.
• Form – Für eine dramatischere Änderung kannst du eine Form festlegen, z. B. einen Kreis oder ein Dreieck. Die Form erscheint wie eine Maske über deinem Bild.

Tipp: Wenn deine Website den Kreativen Editor unterstützt, kannst du Form-Blöcke verwenden, um deinen Seiten einfarbige Formen ohne Bilder hinzuzufügen.

Eckenradius

Verwende im Tab Design die Optionen für den Eckenradius, um den Radius für das gesamte Bild oder für einzelne Ecken festzulegen.

Denk daran:

• Um deinen Eckenradius zu entfernen, mach deine Änderungen rückgängig, während du Änderungen vornimmst, oder gib 0 in die Felder für den Eckenradius ein.
• Wenn im Tab Design keine Optionen für den Eckenradius angezeigt werden, stelle sicher, dass Form nicht ausgewählt ist.

Form

Klicke im Tab Design auf Form, wähle ein Seitenverhältnis (1:1, 2:3 oder 3:2) und wähle dann die Form aus. Um die Form zu entfernen, wähle im Tab Design eine andere Option (entweder Anpassen/Füllen oder Original).

Denk daran:

• Mit dem Bildausschnitt kannst du anpassen, wie dein Bild in der Form angezeigt wird
• Wenn du Bilder zum Öffnen in einer Lightbox einrichtest, wird die ursprüngliche Form deines Bildes angezeigt, wenn Besucher das Bild anklicken
• Wenn du die Kreisform wählst, dein Bild jedoch als Oval erscheint, verwende unseren integrierten Bild-Editor, um dein Bild auf ein Seitenverhältnis von 1:1 zuzuschneiden

Die Größe des Bildes ändern

Du kannst die Größe von Bild-Blöcken auf verschiedene Arten ändern oder zuschneiden. Die primäre Methode zum Ändern der Größe eines Bildes ist:

• Kreativer Editor – Klicke und ziehe von den Ecken oder Seiten aus und verwende die Option Füllen im Tab „Design“, um das Bild zuzuschneiden und zu formen
• Klassischer Editor – Ändere die Größe mithilfe von Blöcken

Für alle Bild-Blöcke kannst du auch den Bild-Editor verwenden, um das Originalbild zuzuschneiden. Denke daran, dass diese Änderung dauerhaft ist.

Größe im Klassischen Editor ändern

Im klassischen Editor kannst du den Bild-Block verkleinern, indem du Blöcke auf beiden Seiten hinzufügst. Das erreichst du am besten mit Abstands-Blöcken, die Leerräume schaffen.

So änderst du die Größe mit Blöcken:

1. Klicke auf eine Einfügemarke, um einen Abstands-Block hinzuzufügen.
2. Ziehe den Abstands-Block auf die linke oder rechte Seite des Bild-Blocks.
3. Klicke und ziehe das Skalierungstool.

Denk daran:

• Füge Abstands-Blöcke in gleicher Größe auf beiden Seiten ein, um das Bild zu zentrieren.
• Bei Inline- und Plakat-Layouts im Klassischen Editor klickst und ziehst du das Zuschneidewerkzeug, um das Bild vertikal zuzuschneiden. Dadurch bleibt das Bild gleich breit, aber die Höhe wird geändert.
• Die Layouts Karte, Überlappung und Collage verfügen in den Stil-Einstellungen des klassischen Editors über eine Skalierungsoption:

Denke daran, dass sich diese Änderungen auf alle Bild-Blöcke mit diesem Layout auswirken.

Tipp: Du kannst das Padding, das automatisch auf Bild-Blöcke angewendet wird, entfernen, indem du benutzerdefinierten Code hinzufügst. Weitere Informationen findest du in diesem Beitrag im Squarespace Forum. Hinweis: Bei benutzerdefinierten Code-Modifikationen kann dich unser Support nicht unterstützen. Das bedeutet, dass wir keine Unterstützung bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen bieten können.

Den Block füllen

Du kannst Bilder so einstellen, dass sie den gesamten Bereich des Blocks im Kreativen Editor und im Inline-Layout des Klassischen Editors ausfüllen. Die anderen klassischen Layouts füllen den Blockbereich automatisch aus.

• Kreativer Editor – Verwende die Option Füllen im Tab Design, damit das Bild den Container füllt. Wenn du Anpassen wählst, wird das Bild mit Padding umgeben.
• Klassischer Editor – Aktiviere den Schalter Strecken im Tab Design.
• Wenn das Bild breiter als der Bereich des Bild-Blocks ist, wird es entsprechend verkleinert (nicht zugeschnitten).

Denk daran:

• Das Strecken eines Bildes kann sich auf die Bildqualität auswirken.
• Wir empfehlen dir, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen, damit Bilder nicht unnötig gestreckt werden müssen.

Animationen und Bildeffekte hinzufügen

Du kannst subtile Animationen zu deinen Bildern hinzufügen, um deine Website optisch interessanter zu gestalten:

• Kreativer Editor – Aktiviere Seitenweite Animationen unter Website-Stile oder füge Bildeffekte hinzu
• Klassischer Editor – Aktiviere Blockanimationen im Tab Design jedes Bild-Blocks, den du animieren möchtest.

Text hinzufügen

Bild-Blöcke im Klassischen Editor verfügen über integrierte Beschriftungsoptionen, während der Kreative Editor mehr Vielseitigkeit bietet.

Tipp: Wir empfehlen außerdem, einen Alternativtext zu jedem Bild hinzuzufügen, um die Barrierefreiheit und SEO zu verbessern. Wie du deine Bilder barrierefreier gestalten kannst, erfährst du unter Audio, Bilder und Videos barrierefrei gestalten. 

Kreativer Editor

Verwende in Abschnitten des Kreativen Editors einen Text-Block, um Text hinzuzufügen, der an einen Bild-Block angrenzt oder diesen überlagert.

Klassischer Editor

Klicke im Klassischen Editor in Textfelder, um Text zu dem Bild hinzuzufügen. Möglicherweise wird dir Platzhaltertext wie Bildbeschreibung hinzufügen oder Platz für etwas Besonderes.

Nicht vergessen:

• Beschränke die Titel auf wenige Wörter. Verwende für Untertitel und Beschriftungen einen oder zwei Sätze. Damit schaffst du ein gutes Gleichgewicht zwischen Wörter und Bild und stellst zudem sicher, dass der Text auf Mobilgeräten sichtbar ist.
• Um Zeilenumbrüche im Titeltext hinzuzufügen, drücke die Umschalttaste + Eingabetaste.
• Markiere den Text und verwende die Werkzeugleiste, um Formatierungsänderungen wie Fettdruck und Kursivschrift vorzunehmen oder einen Link hinzuzufügen.
• Mit Ausnahme von Inline- und Stapel-Layouts behält der Text auf Mobilgeräten und schmalen Browsern seine festgelegte relative Breite zum Bild bei.
• Wenn du zum ersten Mal zwischen dem Inline- und einem anderen Layout wechselst, musst du Bildtexte erneut eingeben.

Das Inline-Layout unterstützt eine einfache Beschriftung, während die anderen Layouts Titel- und Untertitel-Felder unterstützen.

Schriftarten und Farben

Kreativer Editor

In Abschnitten des Kreativen Editors kannst du eine Overlay-Farbe zum Bild-Block hinzufügen, indem du den Schalter Overlay im Design-Tab aktivierst. Overlays wenden einen Farbfilter über den Bildern an, um ihnen einen leichten Farbton zu verleihen. 

Verwende die Farbauswahl, um eine Farbe und Transparenz für das Overlay auszuwählen. Klicke auf Mischmodus, um einen zusätzlichen visuellen Effekt zum Overlay hinzuzufügen. Diese visuellen Effekte werden je nach Browser des Besuchers mit geringfügigen visuellen Unterschieden gerendert.

Klassischer Editor

Wie du Bild-Block-Schriftarten und -farben im Klassischen Editor gestaltest, hängt von der Version deiner Website ab.

Der Inline-Bild-Block hat keine eigenen Design-Anpassungen unter Website-Stil. Weitere Informationen zu Schriftstilen, Farben und Größen von Beschriftungen findest du unter Bildbeschriftungen gestalten.

Nächste Schritte

Nach dem Einrichten des Bild-Blocks kannst du Folgendes tun:

• Du kannst den Block per Drag-and-drop an die gewünschte Stelle verschieben oder Spalten und Zeilen erstellen.
• Verwenden Sie den Bild-Editor, um Bilder abzuschneiden, Sie zu drehen oder ihnen Filter hinzuzufügen.
• Den Block löschen.

Informationen zur Behebung von Bildproblemen findest du unter Bilder für Websites formatieren