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

Bild-Blöcke

Verwenden Sie Bild-Blöcke, um Bilder zu Seiten oder Blogeinträgen in einer Vielzahl von Layouts hinzuzufügen. Jeder Bild-Block zeigt ein Bild an.

Ein Video anschauen

Dieses Video gilt für Squarespace Version 7.0.

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 wähle PosterKarteÜberlappungCollage oder Stapel für andere Layouts. Weitere Unterstützung erhältst du unter Inhalte mithilfe von Blöcken hinzufügen.

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

  1. Verwenden Sie den Tab Inhalt, um ein Bild hinzuzufügen.
  2. Verwenden Sie den Tab Design, um das Layout zu ändern und einen Bild-Link hinzuzufügen.
  3. Verwenden Sie den Tab Animationen , um den Block zu animieren.
  4. Klicken Sie auf Anwenden, um Ihre Änderungen zu speichern.

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

Ein Bild hinzufügen

Im Tab Inhalt des Bildblock-Editors:

in_the_content_tab_of_the_image_block__click_upload_an_image_to_add_your_own_image.png

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.
  • Bild-Editor.

Bild-Block-Layouts

Hier sind Beispiele für jedes Bild-Block-Layout. Sie können das Layout im Tab Design ändern. Während Sie ein Layout auswählen, sehen Sie eine Vorschau davon auf der Seite.

Tipp: Wenn Sie zwischen dem Inline-Layout und einem beliebigen anderen Layout wechseln, müssen Sie den Bild-Text erneut eingeben.

Inline-Bild-Blöcke zeigen Bilder mit optionalen Beschriftungen an, die sich unter dem Bild befinden oder es überlappen.

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 bewegt sich normalerweise in kleineren Browsern und mobilen Gerätenunter die Bilder oder wenn Bild-Blöcke in Spaltenverwendet werden.

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, verwende das Drop-down-Menü Bildposition im Design-Tab des Bild-Block.

card_image_block.png

Überlappung-Bild-Blöcke zeigen auf der einen Seite Bilder und auf der anderen Seite Text an, der das Bild teilweise überlappt. Fügen Sie dem Titel eine Hintergrundfarbe hinzu, um das Element besser hervorzuheben. Der Text bewegt sich in kleineren Browsern und auf Mobilgeräten oder wenn Bild-Blöcke in Spalten verwendet werden in der Regel unter den Bildern.

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, verwende das Drop-down-Menü „Bildposition “ im „Design“-Tab des Bild-Blocks.

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. Der Text bewegt sich in kleineren Browsern und auf Mobilgeräten oder wenn Bild-Blöcke in Spalten verwendet werden in der Regel unter den Bildern.

Collage_image_block.png

Um auszuwählen, auf welcher Seite das Bild angezeigt wird, verwende das Dropdown-Menü Bildposition im Tab Design des Bild-Blocks.

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

Stack_image_block.png

Einen Bild-Link oder Button hinzufügen

Im Tab Design können Sie das Bild in einen Link verwandeln oder einen Button zu seinem Layout hinzufügen.

Um das Bild in einen Link im Inline-Layout umzuwandeln, füge die URL zum Feld Klick-URL hinzu, oder klicke für zusätzliche Optionen auf das Zahnrad-Symbol.

Denken Sie daran:

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

Verwenden Sie für alle anderen Bild-Block-Layouts das Drop-down-Menü Bild-Link. Sie können wählen zwischen:

  • Keiner – Kein Link
  • Bild auf Bild – Das gesamte Bild wird zu einem Link. Füge eine URL in das Feld URL ein, das unterhalb des Drop-down-Menüs angezeigt wird, oder klicke das Zahnrad-Symbol, um weitere Optionen anzuzeigen.
  • Button – Ein Button wird inline mit dem Text unterhalb des Titels und des Untertitels angezeigt. Passe den Button-Text an und füge die URL in den Feldern hinzu, die unterhalb des Drop-down-Menüs angezeigt werden, oder klicke auf das Zahnrad-Symbol, um weitere Optionen anzuzeigen. Erfahre unten mehr über das Styling von Buttons.

Animationen hinzufügen (nur Computer)

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

So fügen Sie Animationen hinzu:

  1. Klicken Sie im Bild-Block-Editor auf Animationen.
  2. Wählen Sie einen Effekt aus dem Drop-Down-Menü Bild-Block animieren aus, um ihn auf das Bild sowie Texte anzuwenden. Wenn Sie eine Option auswählen, sehen Sie eine Vorschau von dieser auf der Seite.
  3. Um das Bild und den Text separat zu animieren, wählen Sie Benutzerdefiniert und wählen Sie dann die Optionen für Bild animieren und Bildtext animieren.
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 – Block, Bild oder Text erscheint zunächst verschwommen und rückt dann in den Fokus
  • Kollidieren – Bild und Text gleiten von den Seiten nach innen
  • Enthüllen – Bild und 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:

  • Bild-Block animieren – Benutzerdefiniert
  • Bild animieren – Von rechts gleiten
  • Bildtext animieren – Von links gleiten

Beispiel für einen Bild-Block mit Animationen.

Text hinzufügen

Nachdem Sie auf Anwenden geklickt haben, um den Block zu speichern, klicken Sie auf Hier eine Beschriftung schreibenHier einen Titel schreiben oder Hier einen Untertitel schreiben, um Text zu dem Bild hinzuzufügen.

Die besten Ergebnisse erzielen Sie mit kurzen Texten. Versuchen Sie, Untertitel auf maximal ein bis zwei Sätze zu beschränken. Damit schaffen Sie ein stimmiges Gleichgewicht zwischen Bild- und Textinhalt und stellen zudem sicher, dass der Text auf Mobilgeräten sichtbar ist.

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ählen Sie im Tab Design eine Anzeigeoption aus dem Drop-Down-Menü „Beschriftung“:

  • Beschriftung nicht anzeigen – Es wird keine Unterschrift 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 Sie Hier Beschriftung schreiben nicht sehen, ändern Sie den Beschriftungsstil vorübergehend zu Beschriftung unten im Tab „Design“.

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:

  • Zwei Text-Felder, eines über dem anderen
  • Im Design-Menü ausgewählte Stil-Optionen
  • Füge Alternativtext manuell im Feld Dateiname im Tab Inhalt hinzu.

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, sehen Sie auf beiden Seiten des Bildes Leerräume. Auf diese Weise wird die ursprüngliche Bildqualität beibehalten. Wenn Sie die Leerräume füllen und das Bild in der gesamten Breite des Blocks anzeigen möchten, aktivieren Sie die Option Strecken im Tab „Design“. 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: Sie können das Padding, das automatisch auf Bild-Blöcke angewendet wird, mit einer code-basierten Lösung entfernen. Weitere Informationen finden Sie 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.

Der Inline-Bild-Block hat keine eindeutigen Gestaltungsmöglichkeiten. Beschriftungsstile stimmen mit der Schriftart und der Farbauswahl des Abschnitts überein.

Andere Layouts haben individuelle Optionen im Design-Menü:

  1. Klicke im Hauptmenü auf Design und dann auf Bild-Blöcke
  2. Scrolle nach unten zum Abschnitt für jedes Layout, um dessen Anpassungen zu ändern: Diese Anpassungen betreffen alle Bild-Blöcke auf deiner Website mit dem jeweiligen Layout.
  3. Um die Schriftart des Blocks zu ändern, ändere die Schriftart deiner Website.
  4. Um die Farben des Blocks zu ändern, ändere die Farben für den Abschnitt dieses Blocks.
  5. Um den Button des Blocks zu stylen, passe die Button-Einstellungen deiner Website an. Die Schriftart der Schaltfläche entspricht der Schriftart der gesamten Seite. Die Farbe des Buttons entspricht den Farben dieses Abschnitts.

Version 7.0

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

Klicke 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
  • 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.

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

  • 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 – Richten Sie den Titel und Untertitel aus.Übereinstimmend richtet den Text auf derselben Seite wie das Bild aus. Entgegengesetztrichtet 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.

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

  • 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 – Richten Sie den Titel aus. Übereinstimmend richtet den Text auf derselben Seite wie das Bild aus. Entgegengesetztrichtet 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.

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

  • 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 – Richten Sie den Titel und Untertitel aus. Übereinstimmend richtet den Text auf derselben Seite wie das Bild aus. Entgegengesetztrichtet 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.

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

  • 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 der Inline- und Stapel-Layouts behalten Beschriftungen die eingestellte Breite im Verhältnis zum Bild bei. Dies kann dazu führen, dass längere Beschriftungen schwerer zu lesen sind oder auf Mobilgeräten abgeschnitten angezeigt werden.
  • Beschriftungen für die Layouts Karte, Collage und Überlappung bewegen sich von neben dem Bild zu unter dem Bild.
  • 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 Sie den Bild-Block eingerichtet haben, können Sie die folgenden Schritte durchführen, um ihn neu anzuordnen, zu bearbeiten oder zu entfernen:

  • Ziehen Sie den Block durch Ziehen und Ablegen, um ihn zu verschieben oder Spalten und Zeilen zu erstellen. Weitere Informationen finden Sie unter Verschieben von Blöcken zum Anpassen von Layouts.
  • Verwenden Sie den Bild-Editor, um Bilder abzuschneiden, Sie zu drehen oder ihnen Filter hinzuzufügen.
  • Ersetzen Sie das Bild, indem Sie auf Entfernen im Tab „Inhalt“ des Block-Editors klicken und anschließend ein neues Bild hochladen. Auf diese Weise müssen Sie keinen neuen Bild-Block hinzufügen.
  • Um einen Banner-Bild-Effekt mit dem Block zu erstellen, verschieben Sie ihn an den Anfang einer Seite. Erfahren Sie mehr unter Banner-Bilder hinzufügen.
  • Den Block löschen.
War dieser Beitrag hilfreich?
70 von 283 fanden dies hilfreich