Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Übersicht zu Bild-Blöcken

Mithilfe von Bild-Blöcken werden einzelne Bilder zu Seiten oder Blogeinträgen hinzugefügt. Sie können eigene Bilder hochladen oder Agenturfotos über unsere Integrationen mit Unsplash oder 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.

Ein Video anschauen

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?

Hinweis: Beschriftungen werden nicht angezeigt, wenn der Bild-Block leer ist. 
  • 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
  • Bildbeschriftung wird automatisch in Alt-Text umgewandelt
  • Zwei Textfelder: Titel und Untertitel
  • Gestalten Sie den Text im Menü Website-Stile
  • 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_Blocks.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 Bild bearbeiten in den Bild-Uploader. Sie können auch auf Bild hochladen klicken, um eine Datei von Ihrem Computer auszuwählen. Klicken Sie auf Anwenden.

add_your_own_image.jpg

Option 2 – Ein Agenturbild verwenden

Mit unseren Agenturbild-Integrationen können Sie kostenlose und Premium-Agenturbilder direkt von Ihrer Website aus hinzufügen. Dies ist eine großartige Möglichkeit, wenn Sie noch nicht über eigene Bilder verfügen, die Sie benutzen können.

Klicken Sie auf Nach Bild suchen, um ein Agenturbild für Ihre Miniaturansicht zu suchen, es sich als Vorschau anzusehen und hinzuzufügen. Mehr dazu erfahren Sie unter Agenturbilder suchen und hinzufügen

search_for_an_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 Plakat, Karte, Überlappung, Collage und Stapel gibt es im Menü Website-Stile eigene Stil-Einstellungen. Die Vorschau des Bildes auf Ihrer Seite verändert sich, sodass Sie die Ä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:

Animation hinzufügen

Wir testen neue Animationsoptionen auf einer geringen Anzahl von zufällig ausgewählten Websites. Wenn Sie sich in dieser Gruppe befinden, können Sie visuelle Effekte zu Bild-Blöcken hinzufügen. Besucher sehen die Animationen, wenn sie die Seite laden oder aktualisieren.

So fügen Sie eine Animation hinzu:

  1. Klicken Sie in einem beliebigen Bild-Block-Editor auf den Tab Animationen. (Wenn Sie den Tab „Animationen“ nicht sehen, ist Ihre Website nicht in der Testgruppe.)
  2. Wählen Sie einen Effekt aus dem Drop-Down-Menü Bild-Block animieren aus, um ihn auf das Bild und Texte anzuwenden. Wenn Sie eine Option auswählen, sehen Sie eine Vorschau, wie sie auf der Seite geladen wird.

Folgende Optionen stehen zur Auswahl:

  • Einblenden – Block wird eingeblendet
  • Fokussieren – Block erscheint zunächst verschwommen und rückt dann in den Fokus
  • Hochgleiten – Block gleitet nach oben
  • Kollidieren – Bild und Text gleiten von den Seiten nach innen
  • Enthüllen – Bild und Text gleiten von der Mitte nach außen
  • Benutzerdefiniert – Wählen Sie separate Bild- und Textanimationen
  1. 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.

Folgende Optionen stehen zur Auswahl:

  • Einblenden – Bild oder Text wird eingeblendet
  • Hochgleiten – Bild oder Text gleitet nach oben
  • Herabgleiten – Bild oder Text gleitet nach unten
  • Von links gleiten – Bild oder Text gleitet von links auf den Bildschirm
  • Von rechts gleiten – Bild oder Text gleitet von rechts auf den Bildschirm

Animationen sind nur bei einer geringen Anzahl von Websites verfügbar, die nach dem Zufallsprinzip ausgewählt wurden. Da wir diese Funktion derzeit testen, können wir sie nicht zu Websites hinzufügen, die diese Funktionalität nicht haben. Wir hoffen, dass wir diese Funktion in naher Zukunft auf allen Websites hinzufügen können.

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 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 Block-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. 

Bearbeiten Sie das Bild 

Klicken Sie auf Bearbeiten, um das Bild mit dem integrierten Bild-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 das Menü Website-Stile, um die Schaltfläche nach Ihren Vorstellungen anzupassen. Scrollen Sie nach unten zum Abschnitt des gewählten Layouts, um die folgenden Anpassungen vorzunehmen:

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

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

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 Bild-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?
43 von 137 fanden dies hilfreich
Übersicht zu Bild-Blöcken