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

Bild-Blöcke

Mit Bild-Blöcken kannst du Bilder zu Seiten oder Blogeinträgen in vielen verschiedenen Layouts hinzufügen. In jedem Bild-Block wird genau ein Bild angezeigt.

Ein Video anschauen

Einen Bild-Block hinzufügen

So fügen Sie einen Bild-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf eine Einfügemarke und dann auf Bild. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Über den Tab Inhalt kannst du ein Bild und einen Bild-Link hinzufügen.
  3. Klicke auf den Tab Design, um das Layout zu ändern und den Block zu animieren.
  4. Klicke außerhalb des Block-Editors, wenn du fertig bist. Deine Änderungen werden automatisch gespeichert.

Für detailliertere Anweisungen ziehen Sie bitte die folgenden Abschnitte zu Rate.

Ein Bild hinzufügen

Im Tab Inhalt des Bildblock-Editors:

Klicke auf das Symbol + und wähle aus, wie du dein Bild hinzufügen möchtest:

  • Um ein Bild von deinem Gerät hochzuladen, klicke auf Datei hochladen.
  • Um ein Bild wiederzuverwenden, klicke auf Aus Bibliothek auswählen.
  • Um Agenturbilder zu suchen und hinzuzufügen, wähle Agenturbilder durchsuchen aus.

Nachdem du ein Bild hinzugefügt hast, kannst du:

  • Bild bearbeiten oder Bildeffekte hinzufügen
  • Den Bildausschnitt deines Bildes festlegen, indem du auf die drei Punkte und dann auf Bildausschnitt klickst
  • Das Bild ändern, indem du auf Ersetzen klickst
  • Das Bild löschen, indem du auf die drei Punkte und dann auf Entfernen klickst

Denken Sie daran:

  • Verwende ein Bild unter 500 KB, um die besten Ergebnisse zu erzielen. Weitere Tipps zum Bildformat findest du unter Bilder für Websites formatieren.
  • Der Bild-Block wird auf deiner Website ohne ein hochgeladenes Bild nicht angezeigt.

Einen Bild-Link oder Button hinzufügen

Im Tab Inhalt kannst du das Bild in einen Link verwandeln oder einen Button zum Layout hinzufügen.

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

Denken Sie daran:

  • Das Aktivieren einer Lightbox deaktiviert Klick-URLs.
  • Das Inline-Layout unterstützt keine Buttons.

Verwende für alle anderen Bild-Block-Layouts das Drop-down-Menü Link. Du kannst wählen zwischen:

  • None (Keiner) - Kein Link
  • Auf dem Bild – Das gesamte Bild wird zu einem Link. Füge eine URL in das Feld „URL“, das unterhalb des Drop-down-Menüs erscheint, ein oder klicke auf das Zahnrad-Symbol, um weitere Optionen angezeigt zu bekommen.
  • Button – Ein Button wird in der gleichen Zeile („inline“) mit dem Text unter dem Titel und Untertitel angezeigt. Du kannst den Button-Text anpassen und die URL in den Feldern, die unter dem Drop-down-Menü angezeigt werden, einfügen. Klicke auf das Zahnrad-Symbol, um weitere Optionen angezeigt zu bekommen.

Wählen Sie ein Layout

Wenn du 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 – Zeige Bilder mit Text links oder rechts an. In der Regel verschiebt sich der Text in kleineren Browsern, auf Mobilgeräten oder wenn Bild-Blöcke in Spalten verwendet werden unter den Bildern.
  • Überlappung – Zeige Bilder auf der einen Seite und Text auf der anderen Seite an, der das Bild teilweise überlappt. Füge dem Titel eine Hintergrundfarbe 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 zur unteren Seite von den Bildern.
  • Collage – Zeige auf der einen Seite Bilder und auf der anderen Seite Text über Hintergrund-„Karten“ an, der das Bild abgrenzt und überlappt. In der Regel verschiebt sich der Text in kleineren Browsern, auf Mobilgeräten und wenn Bild-Blöcke in Spaltenverwendet werden zur unteren Ecke der Bilder.
  • Stapel – Zeige Bilder mit Text unten an.

Beim Auswählen eines Layouts wird dir eine Vorschau davon auf der Seite angezeigt.

Tipp: Wenn du zwischen dem Inline-Layout und einem beliebigen anderen Layout wechselst, musst du den Bild-Text erneut eingeben.

Animationen hinzufügen

Animationen können nicht über die Squarespace-App hinzugefügt werden.

Im Tab Design des Bild-Block-Editors kannst du Animationen hinzufügen, die Besucher sehen, wenn sie die Seite laden oder aktualisieren.

So fügen Sie Animationen hinzu:

  1. Klicke im Bild-Block-Editor auf Design und dann auf Animationen.
  2. Wähle einen Effekt aus der Liste aus, der auf das Bild und den Text angewendet werden soll. Wenn du eine Option auswählst, siehst du auf der Seite eine Vorschau davon.
  3. Um das Bild und den Text separat zu animieren, wähle Benutzerdefiniert und dann die Optionen für Bild und Text aus.
Tipp: In Version 7.1 kannst du Animationen global auf alle Bilder auf deiner Website anwenden.

Wählen Sie aus diesen Animationsoptionen für Ihr Bild, Ihren Text oder beide:

  • Einblenden – Block, Bild oder Text wird eingeblendet
  • Hochgleiten – Block, Bild oder Text gleitet nach oben
  • Herabgleiten – Bild oder Text gleitet nach unten
  • Horizontal geschnitten – Block oder Bild wird in horizontalen Schichten geladen
  • Vertikal geschnitten – Block oder Bild wird in vertikalen Schichten geladen
  • Nach oben kippen – Block oder Bild wird mit einer Aufwärtsneigung herangezoomt
  • Nach unten kippen – Block oder Bild wird mit einer Abwärtsneigung herangezoomt
  • Fokussieren – Der Block, das Bild oder der Text erscheint zunächst verschwommen und wird dann scharf angezeigt.
  • Kollidieren – Bild und Text gleiten von den Seiten nach innen
  • Enthüllen – Das Bild und der Text gleiten von der Mitte nach außen.
  • Von links gleiten – Bild oder Text gleitet von links auf den Bildschirm
  • Von rechts gleiten – Bild oder Text gleitet von rechts auf den Bildschirm

Hier ist ein Beispiel für einen Collage-Bild-Block mit diesen Einstellungen:

  • Animation – Benutzerdefiniert
  • Bildanimation – Von rechts gleiten
  • Textanimation – Von links gleiten

Beispiel für einen Bild-Block mit Animationen.

Text hinzufügen

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

Denke daran:

  • Beschränke Titel auf ein paar 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 innerhalb von Titeltext hinzuzufügen, drücke die Umschalttaste + Enter. Wenn du Zeilenumbrüche hinzufügst, indem du ausschließlich auf Enter drückst, verschwinden die Zeilenumbrüche nach dem Speichern deiner Seite.
Tipp: Markiere den Text, um Formatierungsänderungen mit der Text-Werkzeugleiste vorzunehmen, z. B. fett, kursiv oder Hinzufügen eines Links.

Beschriftungen oder Titel und Untertitel?

Textfelder und Stil-Optionen variieren je nach Layout. Das Inline-Layout unterstützt eine einfache Beschriftung, während die anderen Layouts Titel- und Untertitel-Felder unterstützen.

Das Inline-Layout unterstützt eine Beschriftung:

Wähle im Tab Inhalt eine Anzeigeoption aus dem Drop-down-Menü „Beschriftung“ aus:

  • Aus – Es wird keine Beschriftung angezeigt, sofern das Bild nicht in einer Lightbox dargestellt wird.
  • Beschriftung unten – Beschriftung wird unterhalb des Bildes angezeigt.
  • Beschriftung als Overlay – Die Beschriftung wird über dem Bild in einem dunkelgrauen Balken angezeigt.
  • Beschriftung als Overlay bei Mouseover – Die Beschriftung wird über dem Bild in einem dunkelgrauen Balken angezeigt, wenn der Mauszeiger über das Bild bewegt wird.
Tipp: Wenn du Bildbeschreibung hinzufügen nicht siehst, wechsle im Tab „Inhalt“ den Beschriftungsstil vorübergehend zu Beschriftung unten.

Beschriftungen werden stets in der Lightbox dargestellt. Beschriftungen werden nicht in leeren Bild-Blöcken angezeigt. Um Text ohne ein Bild hinzuzufügen, können Sie stattdessen einen Text-Block verwenden.

Andere Layouts unterstützen einen Titel und Untertitel:

Gestalten Sie den Bild-Block

Einige Layouts verfügen über eigene Stil-Einstellungen für Schriftarten, Farben und Schaltflächen. Wo diese Einstellungen angezeigt werden, hängt von der Versiondeiner Website ab.

So gestaltest Bild-Blöcke global:

  • Die Schriftarten des Blocks kannst du im Schriftarten-Menü ändern.
  • Ändere die Farben für den Abschnitt dieses Blocks im Farben-Menü.
  • Passe die Designfarben für Elemente wie Titel, Bild-Overlay oder Button-Hintergrund mit den Farbanpassungen des Bild-Blocks an.
  • Lege die Schriftgröße und andere Formatierungen in der Text-Werkzeugleiste fest. Die Schriftgröße der Buttons entspricht den Einstellungen für Absatz 2.

So gestaltest du Layout-spezifische Elemente im Bild-Block, wie Textausrichtung oder Inhaltsbreite:

  1. Öffne Website-Stile, während du eine Seite bearbeitest, und klicke dann auf Bild-Blöcke.
  2. Scrolle nach unten zum Abschnitt für das gewünschte Layout, um dessen Anpassungen zu ändern.

In Version 7.0 haben alle Bild-Block-Layouts mit Ausnahme von Inline ihre eigenen Stil-Einstellungen unter „Website-Stil“. So findest du diese Optionen:

  1. Klicke im Hauptmenü auf Design und dann auf Website-Stil.
  2. Scrolle nach unten zum Abschnitt für das gewünschte Layout, um dessen Anpassungen zu ändern.

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.

Bildformen hinzufügen

Verwende Bildformen, um deinen Bildern Abwechslung und einen einzigartigen visuellen Effekt zu verleihen. Die Form, die du wählst, erscheint wie eine Maske über deinem Bild. Du kannst Bildformen zu jedem Bild-Block-Layout hinzufügen. Wähle aus drei Seitenverhältnissen: 1:1, 2:3 und 3:2.

So fügst du Bildformen hinzu:

  1. Klicke im Bild-Block-Editor auf Design.
  2. Wähle Form und klicke dann auf Form.
  3. Wähle ein Seitenverhältnis und klicke dann auf die Form, die du verwenden möchtest.

Nachdem du eine Form ausgewählt hast, kannst du:

  • Den Bildausschnitt verwenden, um anzupassen, wie dein Bild in der Form erscheint.
  • Animationen aktivieren, um visuelle Bewegungen hinzuzufügen.
  • Die Form entfernen. Wähle im Tab Design die Option Original aus, um zur ursprünglichen Form zurückzukehren.

Denken Sie daran:

Einen Eckenradius hinzufügen

Mit der Einstellung für den Eckenradius kannst du die Ecken eines Bildes abrunden. Im Tab Design des Bild-Block-Editors:

  1. Gehe zu Eckenradius und klicke, um den Radius für dein gesamtes Bild oder für einzelne Ecken festzulegen.
  2. Gib im Feld „Eckenradius“ Zahlen (gemessen in Pixeln) ein, um die Form des Rands zu ändern.
  3. Bewege den Mauszeiger über Fertig und klicke dann auf Speichern.

Denken Sie daran:

  • Änderungen, die du am Radius eines Bild-Blocks vornimmst, gelten nur für den einzelnen Bild-Block. Das Bild auf deiner Website wird dadurch nicht verändert.
  • 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.

Die Größe des Bildes ändern

Du kannst die Größe von Bild-Blöcken je nach Layout auf verschiedene Arten ändern oder zuschneiden. Um mehr zu erfahren, besuche Ein Bild skalieren.

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.

Bitte beachte, dass codebasierte Anpassungen nicht in den Rahmen unserer Kundenbetreuung fallen. Das bedeutet, dass wir keine Unterstützung bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen bieten können.

Bild-Blöcke auf Mobilgeräten

Das Layout jedes Bild-Blocks behält die gewählte Formatierung auch auf Mobilgeräten bei. Der Text wird auf Mobilgeräten verschoben und an das jeweilige Modell angepasst. Dabei wird eine ähnliche Position im Verhältnis zum Bild gewählt.

  • Verwende die Geräteansicht, um zu sehen, wie dein Bild-Block aussehen wird.
  • Mit Ausnahme von Inline- und Stapel-Layouts behalten Beschriftungen ihre festgelegte Breite relativ zum Bild bei. Dies bedeutet, dass längere Beschriftungen auf Mobilgeräten schwieriger zu lesen sind oder abgeschnitten erscheinen. Dies kann besonders im Plakat-Layout sichtbar sein, das für eine begrenzte Textmenge ausgelegt ist.
  • Beschriftungen für das Karten-Layout werden statt neben dem Bild unter dem Bild angezeigt. Beim Collage- und Überlappungs-Layout werden Beschriftungen statt neben dem Bild nahe der Unterkante des Bildes angezeigt.
  • Die Layouts „Karte“, „Collage“, „Überlappung“ und „Stapel“ weisen im Website-Stil-Menü die Option Dynamische Schriftgröße auf. Wenn diese Anpassung aktiviert ist, unterschreitet der Text nie die Mindestgröße von 14 Pixeln.
  • Auf Mobilgeräten werden mehrere Bild-Blöcke vertikal gestapelt.

Problembehandlung bei Bildfarben

Wenn ein Bild im CMYK-Modus anstelle des RGB-Modus gespeichert wird, können seine Farben auf deiner Squarespace-Website von dem abweichen, was du in der Originalbilddatei siehst.

Speichere deine Bilder immer im RGB- oder sRGB-Modus. Der RGB-Farbmodus ist ein Format, das internetsicher ist, während CMYK speziell für das Drucken geeignet ist und in den meisten Browsern nicht gerendert wird. Weitere Tipps zur Bildformatierung findest du unter Bilder für Websites formatieren.

Nächste Schritte

Nachdem du den Bild-Block eingerichtet hast, kannst du ihn neu anordnen, bearbeiten oder entfernen:

  • 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.
  • Um das Bild zu ersetzen, ohne einen neuen Bild-Block hinzuzufügen, klicke im Tab „Inhalt“ des Block-Editors auf Bild entfernen und lade dann ein neues Bild hoch.
  • Den Block löschen.
War dieser Beitrag hilfreich?
103 von 429 fanden dies hilfreich