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 wähle Bild für einen Inline-Bild-Block oder Plakat, Karte, Überlappung, Collage oder Stapel für andere Layouts aus. Weitere Hilfe findest du unter Inhalte mithilfe von Blöcken hinzufügen.

Block-Menü mit hervorgehobenen Bild-Block-Optionen.

  1. Verwende den Tab Inhalt, um ein Bild und einen Bild-Link hinzuzufügen.
  2. Klicke auf das Tab Design, um das Layout zu ändern und den Block zu animieren.
  3. 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:

  • Um dein eigenes Bild hochzuladen, klicke auf Bild hinzufügen. Du kannst die Bilddatei auch von deinem Computer in den Bild-Uploader ziehen.
  • Klicke zum Hinzufügen eines Agenturbilds auf Nach Bildern suchen. Du kannst zwischen kostenlosen und Premium-Optionen wählen. Mehr dazu erfährst du unter Agenturbilder suchen und hinzufügen.
  • Du kannst über das Fenster „Bildsuche“ Bilder auch wiederverwenden.

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.
  • Du kannst das Bild nach dem Hochladen mit dem Bild-Editor bearbeiten.
  • 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 zu verwandeln, 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.
  • Buttons werden im Inline-Layout nicht unterstützt.

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. Weitere Informationen zum Gestalten von Buttons findest du untenstehend.

Bild-Block-Layouts

Hier findest du Beispiele für jedes Bild-Block-Layout. Du kannst das Layout im Tab Design ändern. 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.

Inline-Bild-Blöcke zeigen Bilder mit optionalen Beschriftungen an, die sich unter dem Bild befinden oder es überlappen. Lege im Tab Inhalt fest, wie die Beschriftung angezeigt wird.

inline_image_block_-_caption_below.pnginline_image_block_-_caption_overlay.png

Poster-Bild-Blöcke zeigen Text über Bildern an, um die Optik eines Banners oder Posters zu erzeugen.

Poster_image_block.png

Karten-Bild-Blöcke zeigen Bilder mit Text links oder rechts an. 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.

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, wähle im Tab Design des Bild-Blocks die Option Bild links oder Bild rechts.

card_image_block.png

Überlappungs-Bild-Blöcke zeigen auf der einen Seite Bilder und auf der anderen Seite Text 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 nach unten.

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, wähle im Tab Design des Bild-Blocks die Option Bild links oder Bild rechts.

overlap_Image_Block.png

Collage-Bild-Blöcke zeigen 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 Spalten verwendet werden nach unten.

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, wähle im Tab Design des Bild-Blocks die Option Bild links oder Bild rechts.

Collage_image_block.png

Stapel-Bild-Blöcke zeigen Bilder mit Text darunter an.

Stack_image_block.png

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 auf Hier eine Beschriftung schreiben, Hier einen Titel schreiben oder Hier einen Untertitel schreiben, um Text zu dem Bild hinzuzufügen.

Die besten Ergebnisse erzielst du mit kurzen Texten. Versuche, Untertitel auf maximal ein bis zwei Sätze zu beschränken. Damit schaffst du ein stimmiges Gleichgewicht zwischen Bild- und Textinhalt und stellst zudem sicher, dass der Text auf Mobilgeräten sichtbar ist.

Tipp: Markiere den Text, um grundlegende Formatierungsänderungen mit der Textsymbolleiste 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 und ist links ausgerichtet.
  • 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 Hier Beschriftung schreiben 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:

Die Größe des Bildes ändern

Sie können die Größe oder den Zuschnitt von Bild-Blöcken auf verschiedene Weise ändern. Ihre Optionen hängen vom Layout ab.

Inline-Bild-Blöcke behalten die Breite der Originalbilddatei bei. Wenn die Bilddatei schmaler ist als der Inhaltsbereich, siehst du auf beiden Seiten des Bildes Leerräume. Auf diese Weise wird die ursprüngliche Bildqualität beibehalten. Wenn du die Leerräume füllen und das Bild in der gesamten Breite des Blocks anzeigen möchtest, aktiviere den Schalter Strecken im Design-Tab des Blocks. Das Strecken eines Bildes kann sich auf die Bildqualität auswirken.

Sie können die Größe und den Zuschnitt des Bildes auch auf andere Weise ändern:

Bilder im Poster-Layout werden automatisch gestreckt, um die gesamte Breite des Blocks auszufüllen.

So änderst du die Größe und den Zuschnitt des Bildes:

So änderst du die Größe und den Zuschnitt des Bildes:

So änderst du die Größe und den Zuschnitt des Bildes:

So änderst du die Größe und den Zuschnitt des Bildes:

Bilder im Stapel-Layout werden automatisch gestreckt, um die gesamte Breite des Blocks auszufüllen.

So änderst du die Größe und den Zuschnitt des Bildes:

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.

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.

Version 7.1

In Version 7.1 haben einige Layouts ihre eigenen Stil-Einstellungen im Design-Menü. Um Schriftarten und Farben zu gestalten, kannst du:

  • Die Schriftarten des Blocks kannst du im Schriftarten-Menü ändern. Die Schriftgröße der Buttons orientiert sich an Absatz 2.
  • Die Farben des Blocks für den Abschnitt dieses Blocks kannst du im Farben-Menü ändern.
  • Die Designfarben für Elemente in den Blöcken anpassen, wie z. B. Titel, Bild-Overlay oder Button-Hintergrund.

So formatierst du andere Elemente im Bild-Block, wie Textausrichtung oder Inhaltsbreite:

  1. Klicke im Hauptmenü auf Design und dann auf Bild-Blöcke.
  2. Scrolle nach unten zum Abschnitt für das gewünschte Layout, um dessen Anpassungen zu ändern. Die konkreten Anpassungen für die einzelnen Layouts findest du untenstehend.

Der Inline-Bild-Block verfügt über keine individuellen Design-Optionen. Beschriftungsstile stimmen mit der Schriftart und Farbauswahl des Abschnitts überein.

Scrolle nach unten zum Abschnitt Bild-Block: Plakat, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Plakat-Bild-Blöcke auf deiner Website aus:

  • Textausrichtung: Links, Mitte, Rechts – Hier kannst du den Titel und Untertitel ausrichten
  • Inhaltsbreite – Lege die Breite der Beschriftung fest
  • Titel: Trennung – Hier kannst du den Abstand zwischen dem Titel und Untertitel festlegen
  • Button: Trennung – Hier kannst du die Position des Buttons festlegen

Scrolle nach unten zum Abschnitt Bild-Block: Karte, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Karten-Bild-Blöcke auf deiner Website aus:

  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel und Untertitel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Bild: Trennung – Hier kannst du den Abstand zwischen Bild und Text festlegen
  • Titel: Trennung – Hier kannst du den Abstand zwischen dem Titel und Untertitel festlegen
  • Button: Trennung – Hier kannst du die Position des Buttons festlegen

Scrolle nach unten zum Abschnitt Bild-Block: Überlappung, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle überlappenden Bild-Blöcke auf deiner Website aus:

  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel und Untertitel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Titel: Überlappung – Lege fest, inwieweit der Titel das Bild überlagern soll. Dies wirkt sich auf die Textgröße aus.
  • Titel: Trennung – Hier kannst du den Abstand zwischen dem Titel und Untertitel festlegen
  • Button: Trennung – Hier kannst du die Position des Buttons festlegen

Scrolle nach unten zum Abschnitt Bild-Block: Collage, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Karten-Bild-Blöcke auf deiner Website aus:

  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel und Untertitel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Inhaltsbreite – Lege die Breite der Beschriftung fest
  • Inhalt: Offset – Hier kannst du festlegen, inwieweit die Beschriftung das Bild überlagern soll. Dies wirkt sich auf die Textgröße aus.
  • Inhalt: Padding – Hier kannst du das Padding auf beiden Seiten der Beschriftung festlegen
  • Titel: Trennung – Hier kannst du den Abstand zwischen dem Titel und Untertitel festlegen
  • Button: Trennung – Hier kannst du die Position des Buttons festlegen

Scrolle nach unten zum Abschnitt Bild-Block: Stapel, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Stapel-Bild-Blöcke auf deiner Website aus:

  • Textausrichtung: Links, Mitte, Rechts – Hier kannst du den Titel und Untertitel ausrichten
  • Bild: Trennung – Hier kannst du den Abstand zwischen Bild und Text festlegen
  • Titel: Trennung – Hier kannst du den Abstand zwischen dem Titel und Untertitel festlegen
  • Button: Trennung – Hier kannst du die Position des Buttons festlegen

Version 7.0

In Version 7.0 haben einige Layouts ihre eigenen Stil-Einstellungen in den Website-Stilen. So findest du diese Optionen:

Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stile.

Der Inline-Bild-Block verfügt nicht über individuelle Optionen unter „Website-Stile“. Beschriftungsstile werden vom Template festgelegt.

Scrollen Sie nach unten zum Abschnitt Bild-Block: Plakat, um diese Anpassungen zu ändern. Diese Anpassungen betreffen alle Poster-Bild-Blöcke auf Ihrer Website:

  • Textausrichtung: Links, Rechts, Mitte – Hier kannst du den Titel und Untertitel ausrichten
  • Titel: Schriftart – Legen Sie die Schriftart und -größe des Titels fest
  • Titel: Farbe
  • Untertitel: Schriftart – Legen Sie die Schriftart und -größe des Untertitels fest
  • Untertitel: Farbe
  • Inline-Link: Farbe – Legen Sie die Link-Farbe des Titels und Untertitels fest
  • Titel: Trennung – Legen Sie den Abstand zwischen dem Titel und Untertitel fest
  • Bild: Overlay-Farbe – Fügen Sie einen Farbfilter über dem Bild hinzu
  • Inhaltsbreite – Legen Sie die Breite der Beschriftung fest
  • Titel: Hintergrundfarbe – Fügen Sie eine Farbe hinter dem Titel hinzu

Wenn Sie einen Button hinzugefügt haben, verwenden Sie diese Anpassungen, um ihn anzupassen:

  • Button: Schriftart – Legen Sie die Schriftart und -größe des Buttons fest
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button: Randfarbe – Ändern Sie die Farbe des Randes über die Anpassung Button: Randbreite
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button: Abrundung
  • Button: Trennung – Legen Sie die Position des Buttons fest

Wenn Sie fertig sind, klicken Sie auf Speichern.

Tipp: Du kannst die Deckkraft für jede Farbanpassung festlegen.

Scrolle nach unten zum Abschnitt Bild-Block: Karte, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Karten-Bild-Blöcke auf deiner Website aus:

  • Dynamische Schriftgröße – Passt die Textgröße abhängig von der Breite des Blocks und des Browsers an. Der Titel- und Untertiteltext werden nicht kleiner als 14 Pixel eingestellt.
  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel und Untertitel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Titel: Schriftart – Legen Sie die Schriftart und -größe des Titels fest
  • Titel: Farbe
  • Untertitel: Schriftart – Legen Sie die Schriftart und -größe des Untertitels fest
  • Untertitel: Farbe
  • Inline-Link: Farbe – Legen Sie die Link-Farbe des Titels und Untertitels fest
  • Titel: Trennung – Legen Sie den Abstand zwischen dem Titel und Untertitel fest
  • Karte: Hintergrundfarbe – Ändern Sie den Hintergrund, der hinter dem Text angezeigt wird
  • Karte: Freiraum – Legen Sie den Freiraum auf beiden Seiten des Texts fest
  • Karte: Trennung – Legen Sie den Abstand zwischen dem Bild und dem Hintergrund der Karte fest
  • Bild: Overlay-Farbe – Fügen Sie einen Farbfilter über dem Bild hinzu
  • Titel: Hintergrundfarbe – Fügen Sie eine Farbe hinter dem Titel hinzu

Wenn Sie einen Button hinzugefügt haben, verwenden Sie diese Anpassungen, um ihn anzupassen:

  • Button: Schriftart – Legen Sie die Schriftart und -größe des Buttons fest
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button: Randfarbe – Ändern Sie die Farbe des Randes über die Anpassung Button: Randbreite
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button: Abrundung
  • Button: Trennung – Legen Sie die Position des Buttons fest

Wenn Sie fertig sind, klicken Sie auf Speichern.

Tipp: Du kannst die Deckkraft für jede Farbanpassung festlegen.

Scrolle nach unten zum Abschnitt Bild-Block: Überlappung, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle überlappenden Bild-Blöcke auf deiner Website aus:

  • Dynamische Schriftgröße – Passt die Textgröße abhängig von der Breite des Blocks und des Browsers an. Der Titel- und Untertiteltext werden nicht kleiner als 14 Pixel eingestellt.
  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Titel: Überlappung – Wählen Sie, wie viel vom Titel das Bild überlagert. Dies hat Auswirkungen auf die Textgröße.
  • Titel: Schriftart – Legen Sie die Schriftart und -größe des Titels fest
  • Titel: Farbe
  • Untertitel: Schriftart – Legen Sie die Schriftart und -größe des Untertitels fest
  • Untertitel: Farbe
  • Inline-Link: Farbe – Legen Sie die Link-Farbe des Titels und Untertitels fest
  • Titel: Trennung – Legen Sie den Abstand zwischen dem Titel und Untertitel fest
  • Bild: Overlay-Farbe – Fügen Sie einen Farbfilter über dem Bild hinzu
  • Titel: Hintergrundfarbe – Fügen Sie eine Farbe hinter dem Titel hinzu

Wenn Sie einen Button hinzugefügt haben, verwenden Sie diese Anpassungen, um ihn anzupassen:

  • Button: Schriftart – Legen Sie die Schriftart und -größe des Buttons fest
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button: Randfarbe – Ändern Sie die Farbe des Randes über die Anpassung Button: Randbreite
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button: Abrundung
  • Button: Trennung – Legen Sie die Position des Buttons fest

Wenn Sie fertig sind, klicken Sie auf Speichern.

Tipp: Du kannst die Deckkraft für jede Farbanpassung festlegen.

Scrolle nach unten zum Abschnitt Bild-Block: Collage, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Collage-Bild-Blöcke auf deiner Website aus:

  • Dynamische Schriftgröße – Passt die Textgröße abhängig von der Breite des Blocks und des Browsers an. Der Titel- und Untertiteltext werden nicht kleiner als 14 Pixel eingestellt.
  • Inhalts-Position: Oben, Mitte, Unten
  • Textausrichtung: Links, Mitte, Rechts, Übereinstimmend, Entgegengesetzt – Hier kannst du den Titel und Untertitel ausrichten. Übereinstimmend richtet den Text auf der gleichen Seite wie das Bild aus. Entgegengesetzt richtet den Text auf der anderen Seite aus.
  • Bildbreite – Legen Sie die Breite des Bildes fest
  • Inhaltsbreite – Legen Sie die Breite der Beschriftung fest. Dies hat Auswirkungen auf die Textgröße.
  • Inhalt: Offset – Wählen Sie, wie viel von der Beschriftung das Bild überlagert. Dies hat Auswirkungen auf die Textgröße.
  • Titel: Schriftart – Legen Sie die Schriftart und -größe des Titels fest
  • Titel: Farbe
  • Untertitel: Schriftart – Legen Sie die Schriftart und -größe des Untertitels fest
  • Untertitel: Farbe
  • Inline-Link: Farbe – Legen Sie die Link-Farbe des Titels und Untertitels fest
  • Titel: Trennung – Legen Sie den Abstand zwischen dem Titel und Untertitel fest
  • Karte: Hintergrund – Ändern Sie die Hintergrundfarbe, die hinter der Beschriftung angezeigt wird
  • Karte: Freiraum – Legen Sie den Freiraum auf beiden Seiten der Beschriftung fest
  • Bild: Overlay-Farbe – Fügen Sie einen Farbfilter über dem Bild hinzu

Wenn Sie einen Button hinzugefügt haben, verwenden Sie diese Anpassungen, um ihn anzupassen:

  • Button: Schriftart – Legen Sie die Schriftart und -größe des Buttons fest
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button: Randfarbe – Ändern Sie die Farbe des Randes über die Anpassung Button: Randbreite
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button: Abrundung
  • Button: Trennung – Legen Sie die Position des Buttons fest

Wenn Sie fertig sind, klicken Sie auf Speichern.

Tipp: Du kannst die Deckkraft für jede Farbanpassung festlegen.

Scrolle nach unten zum Abschnitt Bild-Block: Stapel, um diese Anpassungen zu ändern. Diese Anpassungen wirken sich auf alle Stapel-Bild-Blöcke auf deiner Website aus:

  • Dynamische Schriftgröße – Passt die Textgröße abhängig von der Breite des Blocks und des Browsers an. Der Titel- und Untertiteltext werden nicht kleiner als 14 Pixel eingestellt.
  • Textausrichtung: Links, Rechts, Mitte
  • Titel: Schriftart – Legen Sie die Schriftart und -größe des Titels fest
  • Titel: Farbe
  • Untertitel: Schriftart – Legen Sie die Schriftart und -größe des Untertitels fest
  • Untertitel: Farbe
  • Inline-Link: Farbe – Legt Sie die Link-Farbe des Titels und Untertitels fest
  • Titel: Trennung – Legen Sie den Abstand zwischen dem Titel und Untertitel fest
  • Karte: Hintergrund – Ändern Sie die Hintergrundfarbe, die hinter der Beschriftung angezeigt wird
  • Karte: Freiraum – Legen Sie den Freiraum auf beiden Seiten der Beschriftung fest
  • Bild: Overlay-Farbe – Fügen Sie einen Farbfilter über dem Bild hinzu

Wenn Sie einen Button hinzugefügt haben, verwenden Sie diese Anpassungen, um ihn anzupassen:

  • Button: Schriftart – Legen Sie die Schriftart und -größe des Buttons fest
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button: Randfarbe – Ändern Sie die Farbe des Randes über die Anpassung Button: Randbreite
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button: Abrundung
  • Button: Trennung – Legen Sie die Position des Buttons fest

Wenn Sie fertig sind, klicken Sie auf Speichern.

Tipp: Du kannst die Deckkraft für jede Farbanpassung festlegen.

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.

  • Die Geräteansicht vermittelt Ihnen einen Eindruck davon, wie Ihr Bild-Block aussehen wird.
  • Mit Ausnahme von Inline- und Stapellayouts behalten Beschriftungen ihre festgelegte Breite relativ zum Bild bei. Dies bedeutet, dass längere Untertitel auf Mobilgeräten schwieriger zu lesen sind oder abgeschnitten erscheinen. Dies kann besonders im Poster-Layout sichtbar sein, das für eine begrenzte Textmenge ausgelegt ist.
  • Beschriftungen für das Karten-Layout bewegen sich von neben dem Bild zu unter dem Bild. Für die Collage- und Überlappungs-Layouts bewegen sich Beschriftungen von neben dem Bild zur Unterseite des Bildes.
  • Die Layouts „Karte“, „Collage“, „Überlappung“ und „Stapel“ weisen im Menü „Website-Stil“ die Option Dynamische Schriftgröße auf. Wenn diese Anpassung aktiviert ist, unterschreitet Text nie die Mindestgröße von 14 Pixeln.
  • Mehrere Bild-Blöcke werden auf Mobilgeräten vertikal gestapelt.

Problembehandlung bei Bildfarben

Wenn ein Bild im CMYK-Modus anstelle des RGB-Modus gespeichert wurde, können seine Farben auf Ihrer Squarespace-Website von dem abweichen, was Sie in der Orginalbilddatei sehen.

Sie sollten Ihre Bilder immer im RGB- oder sRGB-Modus speichern. RGB ist ein Farbmodus, der internetsicher ist, während CMYK speziell für das Drucken entwickelt wurde und daher in den meisten Browsern nicht dargestellt werden kann. Weitere Tipps zur Formatierung von Bildern finden Sie unter Ihre Bilder zur Darstellung im Internet 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?
82 von 345 fanden dies hilfreich