WordPress: Text um ein Bild fließen lassen

Ein Bild links im Text, daneben mehrere Zeilen Fließtext und anschließend Text auch unterhalb des Bildes – also ein klassischer Zeitungssatz – ist in WordPress weiterhin möglich. Dafür brauchst du keine Zwei-Spalten-Struktur. Im Gegenteil: Zwei Spalten verhindern gerade den gewünschten Effekt, weil der Text dann dauerhaft in seiner eigenen Spalte bleibt.

Der ursprüngliche Verlauf drehte sich genau um diese Unterscheidung: Das Bild sollte links stehen und der Text sollte rechts daneben beginnen und nach dem Ende des Bildes wieder über die komplette Inhaltsbreite weiterlaufen. Der passende Mechanismus ist ein Float beziehungsweise die WordPress-Ausrichtung „Links“ oder „Rechts“ beim Image-Block.

1. Die einfachste Lösung direkt im WordPress-Image-Block

WordPress dokumentiert aktuell ausdrücklich, dass Text um ein Bild fließen kann, wenn der Image-Block links oder rechts ausgerichtet wird.

  1. Füge den Bild-Block direkt vor dem Absatz ein, der um das Bild fließen soll.
  2. Wähle das Bild.
  3. Verkleinere es auf eine sinnvolle Breite.
  4. Wähle in der Block-Werkzeugleiste Links ausrichten oder Rechts ausrichten.
  5. Der nachfolgende Absatz läuft nun neben dem Bild und anschließend darunter weiter.

Das ist die sauberste Lösung, wenn du mit normalen WordPress-Blöcken arbeitest.

2. Warum das anders ist als ein Zwei-Spalten-Layout

Bei einem Columns- oder Grid-Layout existieren zwei getrennte Spalten. Der Text in der rechten Spalte kann nicht automatisch unter das linke Bild wandern. Selbst wenn das Bild nur 250 Pixel hoch ist, bleibt der restliche Raum darunter in der linken Spalte leer.

Beim Float dagegen nimmt das Bild nur für seine eigene Höhe Platz ein. Der Text fließt daneben. Sobald der Text unterhalb des Bildes angekommen ist, nutzt er wieder die volle Breite.

3. Das klassische WordPress-Prinzip mit alignleft

WordPress verwendet seit vielen Jahren Klassen wie alignleft und alignright. Moderne Block-Themes und der Block-Editor erzeugen das nötige Markup automatisch, wenn du die Bildausrichtung über die Werkzeugleiste setzt.

Im HTML kann eine solche Struktur sinngemäß so aussehen:

<figure class="wp-block-image alignleft">
    <img src="bild.jpg" alt="Beschreibung">
</figure>

<p>Dieser Text fließt rechts am Bild vorbei und läuft darunter weiter.</p>

4. Abstände zwischen Bild und Text einstellen

Wenn der Text zu dicht am Bild sitzt, kannst du eine kleine CSS-Regel ergänzen:

.wp-block-image.alignleft {
    margin-right: 24px;
    margin-bottom: 14px;
}

.wp-block-image.alignright {
    margin-left: 24px;
    margin-bottom: 14px;
}

Der seitliche Margin schafft Luft zwischen Bild und Text. Der untere Margin verhindert, dass die erste volle Textzeile unterhalb des Bildes direkt an dessen Unterkante klebt.

5. Bildbreite begrenzen

Damit neben dem Bild überhaupt genügend Platz für Text bleibt, sollte das Bild nicht zu breit sein. Ein sinnvolles Beispiel:

.wp-block-image.alignleft,
.wp-block-image.alignright {
    max-width: 40%;
}

40 Prozent sind kein universeller Pflichtwert. Bei einer breiten Inhaltsfläche können 35 bis 45 Prozent gut funktionieren. Bei schmalen Artikeln reicht oft weniger.

6. Warum große Bilder schlecht zum Umfließen geeignet sind

WordPress weist in seiner aktuellen Dokumentation selbst darauf hin, dass der Effekt vor allem mit kleineren Bildern gut funktioniert. Ein Bild mit 70 oder 80 Prozent Inhaltsbreite lässt dem Text daneben nur eine schmale Spalte mit wenigen Wörtern pro Zeile. Das wirkt unruhig und ist auf Tablets schnell unlesbar.

7. GenerateBlocks: nicht automatisch einen Container mit zwei Spalten bauen

Wenn du GenerateBlocks verwendest, liegt die Versuchung nahe, einen Grid-Container anzulegen: Bild links, Text rechts. Für einen echten Zeitungseffekt ist das aber die falsche Struktur.

Stattdessen sollte das Bild im selben normalen Textfluss wie der nachfolgende Absatz liegen. Du kannst dafür problemlos den normalen WordPress-Image-Block innerhalb eines GenerateBlocks-Containers verwenden.

8. Beispiel innerhalb eines GenerateBlocks-Containers

Der äußere GenerateBlocks-Container übernimmt zum Beispiel:

  • maximale Inhaltsbreite,
  • Hintergrundfarbe,
  • Padding,
  • Abstände zum nächsten Abschnitt.

Innerhalb dieses Containers liegen dann:

  1. Image-Block mit „Links ausrichten“,
  2. mehrere normale Absatzblöcke,
  3. eventuell eine Überschrift oder Liste danach.

Solange die nachfolgenden Blöcke nicht selbst einen neuen Layout-Kontext erzwingen, kann der Text am Bild vorbeifließen.

9. Wenn GenerateBlocks den Float scheinbar verhindert

Manche Container- oder Layout-Einstellungen können einen neuen Block Formatting Context erzeugen oder die Elemente so strukturieren, dass der Float nicht wie erwartet wirkt. Prüfe deshalb zuerst im Browser-Inspektor:

  • Hat das Bild tatsächlich die Klasse alignleft?
  • Ist float: left in den berechneten Styles aktiv?
  • Liegt der Absatz wirklich nach dem Bild im selben übergeordneten Container?
  • Ist dazwischen ein Grid-, Flex- oder anderer Container?

Wenn Bild und Text in zwei verschiedenen inneren GenerateBlocks-Containern liegen, können sie nicht wie Zeitungstext umeinander fließen.

10. Eigene Klasse statt WordPress-Ausrichtung

Wenn du die Gestaltung vollständig selbst kontrollieren möchtest, kannst du dem Bildblock eine eigene Klasse geben, zum Beispiel textbild-links.

.textbild-links {
    float: left;
    width: min(40%, 360px);
    margin: 0 24px 14px 0;
}

Die Funktion min() sorgt hier dafür, dass das Bild maximal 360 Pixel beziehungsweise höchstens 40 Prozent des verfügbaren Bereichs breit wird.

11. Rechts ausgerichtete Variante

.textbild-rechts {
    float: right;
    width: min(40%, 360px);
    margin: 0 0 14px 24px;
}

Der Text fließt dann links am Bild vorbei.

12. Float nach einem Abschnitt bewusst beenden

Manchmal soll ein späterer Abschnitt nicht mehr neben dem Bild beginnen, obwohl das Bild noch höher ist. Dann kannst du den Float vor diesem Element beenden:

.clear-float {
    clear: both;
}

Diese Klasse kann beispielsweise auf eine nachfolgende Überschrift oder einen kleinen Hilfscontainer gesetzt werden.

13. Warum clear: both nützlich ist

Ohne clear versucht jeder nachfolgende Inhalt weiter, den vorhandenen Platz neben dem Bild zu nutzen. Das ist bei Fließtext erwünscht, bei einer neuen großen Sektion oder einem Button-Bereich möglicherweise nicht.

clear: both sagt dem Browser: Ab hier bitte unter allen links oder rechts schwebenden Elementen weitermachen.

14. Containerhöhe und Floats

Bei klassischen Floats kann ein Elterncontainer seine Höhe unter bestimmten Umständen nicht so berechnen, wie man es erwartet. Moderne WordPress-Strukturen kommen damit häufig klar. Wenn ein äußerer Container den Float aber scheinbar nicht umschließt, kann ein sogenannter Clearfix helfen:

.text-flow::after {
    content: "";
    display: table;
    clear: both;
}

Die Klasse text-flow kommt dann auf den äußeren Abschnitt.

15. Mobilgeräte: Float besser aufheben

Auf einem Smartphone wird eine 40-Prozent-Bildbreite schnell zu klein. Der daneben verbleibende Textbereich wäre noch schmaler. Darum würde ich das Bild mobil meist wieder auf volle Breite setzen:

@media (max-width: 767px) {
    .wp-block-image.alignleft,
    .wp-block-image.alignright,
    .textbild-links,
    .textbild-rechts {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}

Damit erscheint zuerst das Bild, darunter der Text – auf kleinen Displays meist die bessere Lesbarkeit.

16. Bildunterschrift mitdenken

Wenn der Image-Block eine Caption besitzt, gehört sie zum figure-Element und wird gemeinsam mit dem Bild umflossen. Das ist genau richtig. Der Float sollte deshalb auf dem gesamten figure beziehungsweise Image-Block liegen, nicht nur auf dem nackten img.

17. Bilder nicht mit negativem Margin in den Text schieben

Ein häufiger Workaround ist, ein Bild mit negativem Margin über einen Textbereich zu legen. Das sieht bei einer Bildschirmbreite vielleicht richtig aus, bricht aber schnell bei Tablet oder Mobil auseinander. Der native Float ist für diese Aufgabe deutlich robuster.

18. shape-outside für spezielle Formen

CSS kann Text sogar um nicht rechteckige Formen fließen lassen. Bei einem runden Portrait wäre zum Beispiel möglich:

.portrait-rund {
    float: left;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    shape-outside: circle(50%);
    margin: 0 28px 18px 0;
}

Das ist ein Spezialeffekt. Für normale rechteckige Blogbilder würde ich bei der einfachen WordPress-Ausrichtung bleiben.

19. Barrierefreiheit und Alternativtext

Der Zeitungseffekt verändert nur das Layout. Das Bild braucht weiterhin einen sinnvollen Alternativtext, wenn es inhaltliche Informationen trägt. Rein dekorative Bilder sollten entsprechend als dekorativ behandelt werden.

20. Meine empfohlene Lösung

Für einen normalen Blogartikel mit GeneratePress/GenerateBlocks würde ich:

  1. einen normalen WordPress-Image-Block verwenden,
  2. ihn direkt vor den betreffenden Absatz setzen,
  3. „Links ausrichten“ wählen,
  4. Bildbreite auf etwa 30–40 Prozent begrenzen,
  5. seitlichen und unteren Abstand per CSS feinjustieren,
  6. den Float auf Mobilgeräten aufheben.

So erhältst du genau den klassischen Zeitungssatz: Text rechts vom Bild und danach wieder unter dem Bild über die volle Breite.

Fazit

Wenn Text in WordPress an einem Bild vorbeifließen soll, brauchst du keine Spalten. Der Image-Block besitzt weiterhin die passende Links-/Rechtsausrichtung, und WordPress dokumentiert dieses Verhalten ausdrücklich. In GenerateBlocks sollte Bild und Fließtext im selben Inhaltsfluss liegen. Zusätzliche CSS-Regeln sind hauptsächlich für Bildbreite, Abstände und das mobile Verhalten nötig.

Aktuell geprüft

Die aktuelle WordPress-Dokumentation zum Image-Block bestätigt weiterhin, dass bei „Align left“ beziehungsweise „Align right“ der nachfolgende Text um kleinere Bilder herumfließen kann.