Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Bild-Blöcke im Überblick

Mithilfe von Bild-Blöcken werden einzelne Bilder zu Seiten oder Blog-Einträgen hinzugefügt. Sie können eigene Bilder hochladen oder Bilder von Getty Images auf Lizenzbasis verwenden.

Es gibt sechs verschiedene Layout-Optionen für Bild-Blöcke. Design und Verhalten bleiben in allen Templates gleich.

Hinweis: Der Style von Beschriftungen richtet sich beim Inline-Layout nach Ihrem gewählten Template.
Tipp: Banner-Bilder, Hintergrundbilder, Galerie-Blöcke und Galerie-Seiten sind weitere Möglichkeiten, Ihrer Website Bilder hinzuzufügen.

Bild-Blöcke im Vergleich

Hier finden Sie eine Übersicht über die Unterschiede der sechs verschiedenen Layouts für Bild-Blöcke mit beispielhafter individueller Gestaltung.

Poster

Im Poster-Bild-Block wird Text über dem Bild angezeigt.

poster.jpg

Card (Karte)

Im Card-Bild-Block wird Text rechts oder links neben einem Bild angezeigt.

card.jpg

Overlap (Überhang)

Im Overlap-Bild-Block wird auf der einen Seite ein Bild und auf der anderen Seite Text angezeigt, der das Bild teilweise überschneidet. Fügen Sie dem Titel eine Hintergrundfarbe hinzu, um das Element besser hervorzuheben. 

overlap.jpg

Collage

Im Collage-Bild-Block wird auf der einen Seite ein Bild und auf der anderen Seite Text über einer „Karte“ im Hintergrund angezeigt, der das Bild abgrenzt und überschneidet.

collage.jpg

Stack (Stapel)

Im Stack-Bild-Block wird Text unter einem Bild angezeigt; die Auswahl einer Hintergrundfarbe ist optional.

stack.jpg

Inline

Im Inline-Bild-Block wird ein einfaches Bild mit optionaler Beschriftung angezeigt (unser klassischer Bild-Block).

inline.jpgs

Beliebige Kombinationen

Sie können mehrere Bild-Block-Styles auf einer Seite oder in einem Eintrag verwenden und nach Belieben miteinander kombinieren.

  • Jedes Layout verfügt über eigene Style-Optionen.
  • Die Style-Optionen eines Layouts gelten für die gesamte Website. So wird beispielsweise jeder Poster-Bild-Block auf Ihrer Website gleich gestaltet.

mixed-layout.jpg

Beschriftungen oder Titel und Untertitel?

  • Das Inline-Layout unterstützt eine einfache Beschriftung. Daher ist es besonders gut geeignet, um den Namen eines Künstlers anzugeben, einen Herausgeber zu erwähnen oder den Titel eines Bildes anzuzeigen. Machen Sie sich mit den Style-Optionen für Beschriftungen vertraut, die automatisch eingerichtet werden.
  • Alle anderen Layouts bieten Titel- und Untertitelfelder, für die eine größere Auswahl an Style-Optionen zur Verfügung steht. Darüber hinaus kommt der eigentliche Text besser zur Geltung, sodass eine umfangreichere Interaktion zwischen Bild- und Textinhalt entsteht. Näheres erfahren Sie in den Anleitungen der Layouts  PosterCard (Karte)Overlap (Überhang)Collage und Stack (Stapel).

Die Layout-Styles bieten verschiedene Vorteile: 

Inline Alle anderen Layouts
  • Ein Beschriftungsfeld
  • Text-Styles werden automatisch eingerichtet (richtet sich im Normalfall nach dem Fließtext)
  • Kann bei Mouseover angezeigt werden
  • Alt-Text wird automatisch erstellt
  • Zwei Textfelder: Titel und Untertitel
  • Textgestaltung erfolgt über den Style Editor
  • Verschiedene Anzeigeoptionen je nach Layout
  • Alt-Text wird manuell hinzugefügt

Schritt 1 – Einen Bild-Block hinzufügen

So fügen Sie einen beliebigen Bild-Block hinzu:

  1. Öffnen Sie eine Seite oder den Eintrags-Editor.
  2. Klicken Sie auf einen Einfügepunkt oder das Symbol +.
  3. Wählen Sie unter Image Layouts (Bild-Layouts) zwischen Poster, Card (Karte), Overlap (Überhang), Collage oder Stack (Stapel). Wenn Sie das Inline-Layout verwenden möchten, wählen Sie im Bereich Basic (Basis) die Option Image (Bild) aus.

image-block-menu.jpg

Schritt 2 – Ein Bild hinzufügen

Tipp: Für bestmögliche Ergebnisse empfehlen wir, ausschließlich Bilder zu verwenden, die nicht größer als 500 KB sind. Näheres erfahren Sie hier: Bilder zur Darstellung im Internet formatieren.

Option 1 – Ihr eigenes Bild hinzufügen

Ziehen Sie Ihr Bild im Fenster Edit Image (Bild bearbeiten) in den Bild-Uploader. Sie können auch auf den Bild-Uploader klicken, um eine Datei auf Ihrem Computer auszuwählen. Klicken Sie auf Apply (Anwenden).

add-image.jpg

Option 2 – Getty Image verwenden

Durch unsere Kooperation mit Getty Images können Sie einzelne Lizenzen für Archivbilder für 10 $ erwerben. Dies ist eine großartige Möglichkeit, wenn Sie noch nicht über eigene Bilder verfügen, die Sie benutzen können.

Klicken Sie auf Getty Images, um ein Archivbild als Vorschaubild auszusuchen, anzusehen und zu erwerben. Näheres erfahren Sie in unserer Übersicht zu Getty Images und Squarespace.

add-getty-image.jpg

Schritt 3 - Text hinzufügen und gestalten (optional)

Klicken Sie auf Write here (Hier schreiben), um eine Beschreibung oder einen Titel mit Untertitel zu einem Bild hinzuzufügen.

Textfelder und Style-Optionen variieren je nach Layout:

Die beste Wirkung 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.

Tipp: Sie können auch Alt-Text erstellen, damit Suchmaschinen Ihr Bild besser erfassen können.

Schritt 4 - Designeinstellungen anpassen

Im Reiter Design:

  • Richten Sie die Beschriftungsanzeige, Lightbox-Einstellungen und einen Hyperlink für das Inline-Layout ein.
  • Verwenden Sie das Drop-Down-Menü Image Link (Bild-Link), um einen Button oder Hyperlink für die Layout-Formate Poster, Karte, Überhang, Collage oder Stapel einzurichten.
  • Legen Sie die Image Position (Bild-Position) der Layout-Formate Card (Karte), Overlap (Überhang) oder Collage fest.

Schritt 5 – Speichern

Klicken Sie auf Apply (Anwenden), um Änderungen am Block zu speichern.

Schritt 6 - Das Design anpassen

Für Bild-Blöcke mit den Layouts Poster, Card (Karte), Overlap (Überhang), Collage und Stack (Stapel) gibt es im Style Editor eigene Style-Einstellungen. Die Vorschau des Bildes auf Ihrer Seite verändert sich, sodass Sie Änderungen in Echtzeit verfolgen können. Wir empfehlen, ein wenig mit den Einstellungen zu spielen, bis Sie ein Design gefunden haben, das Ihnen gefällt.

Näheres erfahren Sie in unseren Layout-Anleitungen:

Den Bild-Block verschieben

Ziehen Sie den Block nach dem Speichern des Bildes in einen beliebigen Bereich der Seite und legen Sie ihn dort ab. Mit dieser Methode können Sie auch den Text um das Bild herum mit Textumbrüchen versehen. Näheres erfahren Sie hier: Blöcke verschieben.

moving_a_block.gif

Das Bild skalieren und zuschneiden

So ändern Sie die Größe Ihres Bildes:

Jedes Layout verfügt über eigene zusätzliche Skalier- und Zuschneide-Optionen.

Das Bild zum Öffnen in einer Lightbox einrichten

Nur das Inline-Layout unterstützt die Verwendung einer Lightbox. Gehen Sie zum Öffnen Ihres Bildes in einer Lightbox folgendermaßen vor:

  1. Doppelklicken Sie auf das Bild, um den Bild-Editor zu öffnen.
  2. Klicken Sie auf den Reiter Design.
  3. Vergewissern Sie sich, dass Sie die Layout-Einstellung Inline verwenden.
  4. Setzen Sie den Haken neben Enable Lightbox (Lightbox aktivieren).
  5. Wählen Sie aus dem Drop-Down-Menü Lightbox Theme (Lightbox-Motiv) den gewünschten Style Ihrer Lightbox aus.
Hinweis: Beschriftungen werden stets in der Lightbox-Ansicht dargestellt. Die Verwendung einer Lightbox deaktiviert Hyperlinks. 

Bild mit dem Adobe Creative Cloud Image Editor bearbeiten

Klicken Sie auf Edit (Bearbeiten), um das Bild mit dem Adobe Creative Cloud Image Editor zu drehen, zuzuschneiden oder mit Filtern zu versehen.

edit.jpg

Das Bild entfernen oder ersetzen

Löschen Sie den Block, indem Sie auf der Seite oder im Eintrags-Editor auf das Papierkorb-Symbol klicken.

Wenn Sie das Bild entfernen möchten, ohne den Block zu entfernen, öffnen Sie den Bild-Block-Editor und klicken Sie auf Remove (Entfernen). Ersetzen Sie das Bild dann mit einem anderen Bild Ihrer Wahl.

remove.jpg

Layout ändern

Im Reiter Design des Block-Editors können Sie zu einem anderen Layout-Design wechseln. Auf diese Weise ändern Sie das Design und Verhalten Ihres Bildes, ohne den Block löschen und wieder hinzufügen zu müssen.

  1. Doppelklicken Sie auf den Block im Seiten-Editor.
  2. Klicken Sie auf den Reiter Design.
  3. Wählen Sie das neue Layout.
  4. Sobald Sie eine Auswahl treffen, wird die Vorschau des Bildes auf Ihrer Seite entsprechend verändert, sodass Sie Änderungen stets in Echtzeit verfolgen können.
Tipp: Wenn Sie zwischen dem Inline-Layout und einem beliebigen anderen Layout wechseln, müssen Sie den Bild-Text erneut eingeben.

Einen Bild-Link oder Button hinzufügen

Zur Erstellung von Links im Bild-Block stehen Ihnen zwei Möglichkeiten offen:

  • Verwandeln Sie das Bild in einen anklickbaren Link.
  • Fügen Sie unter dem Titel und Untertitel einen Button hinzu (alle Layouts außer Inline)

Inline-Layout

Fügen Sie einen Hyperlink über den Reiter Design im Block-Editor ein, um Ihr Bild zu verlinken.

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

Alle anderen Layouts

Richten Sie im Reiter Design des Block-Editors einen Link über das Drop-Down-Menü Image Link (Bild-Link) ein. Folgende Optionen stehen Ihnen zur Auswahl:

  • None (Keiner) - Kein Link
  • On Image (Auf Bild) - Das gesamte Bild wird zu einem anklickbaren Link
  • Button - Fügen Sie unter dem Titel und Untertitel einen Button ein, der sich an der Textausrichtung orientiert.

Verwenden Sie das Feld Hyperlink, um den Link Ihres Bildes oder Buttons einzurichten. Sie können Ihr Bild mit einer anderen Seite Ihrer Website, einer externen Website oder mit einer Datei verlinken.

Verwenden Sie den Style Editor, um den Button nach Ihren Vorstellungen anzupassen. Scrollen Sie nach unten zum Bereich des gewählten Layouts, um die folgenden Anpassungen zu ändern:

  • Button Font (Button-Schriftart) - Richten Sie die Schriftart und Schriftgröße des Buttons ein
  • Button Font Color (Farbe der Button-Schriftart)
  • Button Background Color (Hintergrundfarbe des Buttons)
  • Button Border Color (Farbe des Button-Randes) - Richten Sie die Farbe des Randes über die Anpassung Button Border Width (Button-Randbreite) ein
  • Button Border Width (Button-Randbreite)
  • Button Padding
  • Button Rounding (Button-Abrundung) 
  • Button Separation (Button-Trennung) - Richten Sie die Position des Buttons ein

button.png

Das Bild skalieren oder zuschneiden

Für alle Layouts:

Jedes Layout verfügt über zusätzliche Skalier- und Zuschneide-Optionen.

Alt-Text erstellen

Mithilfe von Alt-Text können Suchmaschinen Ihr Bild besser erfassen.

Zum Inline-Layout hinzugefügte Beschriftungen werden automatisch als Alt-Text des Bildes verwendet. Wenn Sie zwar Alt-Text, aber keine Beschriftung hinzufügen möchten, fügen Sie zunächst den gewünschten Beschriftungstext hinzu und aktivieren Sie dann die Anzeigeoption Do Not Display Caption (Beschriftung nicht anzeigen).

Bei allen anderen Layouts werden Beschriftungen nicht automatisch zu Alt-Text. Dies kann mithilfe des Inline-Layouts jedoch manuell eingestellt werden:

  1. Öffnen Sie den Block-Editor.
  2. Wählen Sie im Reiter Design das Inline-Layout aus.
  3. Verwenden Sie dann das Beschriftungsfeld, um Alt-Text hinzuzufügen.
  4. Wechseln Sie zu einem beliebigen anderen Layout und fügen Sie dann Ihren gewünschten Text hinzu, der als Beschriftung angezeigt werden soll. Der im Inline-Layout hinzugefügte Text wird weiterhin als Alt-Text verwendet.
Tipp: Wenn Write here (Hier schreiben) im Inline-Layout nicht angezeigt wird, wählen Sie vorübergehend den Beschriftungsstil Caption Below (Beschriftung unten) im Reiter Design aus.

Ein Bild als Seitenbanner verwenden

Tipps zur Verwendung eines Bild-Blocks als Seitenbanner finden Sie hier: Banner-Bilder hinzufügen.

image-block-as-a-banner.png

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.

  • 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. 
  • Die Geräteansicht vermittelt Ihnen einen Eindruck davon, wie Ihr Bild-Block aussehen wird.
  • Mehrere Bild-Blöcke werden auf Mobilgeräten vertikal gestapelt.
  • Wenn die Anpassung Dynamic Font Sizing (Dynamische Schriftart-Größe) aktiviert ist, wird Text die Mindestgröße von 14 Pixeln nie unterschritten.

Häufig gestellte Fragen

Das Bild wird seitwärts angezeigt.

Das kann passieren, wenn das eigentliche Bild in einem schiefen Winkel aufgenommen und direkt hochgeladen wurde, ohne es zuerst in einem Bildbearbeitungsprogramm zu drehen.

Sie können den Adobe Creative Cloud Image Editor verwenden, um das Bild zu drehen. Alternativ kann das Bild auch in einem externen Programm bearbeitet und erneut hochgeladen werden.

Meine Bilder werden in unterschiedlichen Farben dargestellt.

Das passiert, wenn das Bild im CMYK- und nicht im RGB-Modus gespeichert wurde.

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 hier: Bilder zur Darstellung im Internet formatieren.

Welche Dateigröße wird empfohlen?

Obwohl man Dateien einer Größe bis 20 MB zum Bild-Block hinzufügen kann, empfehlen wir, ausschließlich Bilder zu verwenden, die nicht größer als 500 KB sind. Näheres erfahren Sie hier: Bilder zur Darstellung im Internet formatieren.

 

War dieser Beitrag hilfreich?
21 von 67 fanden dies hilfreich
Bild-Blöcke im Überblick