Text um Bild fließen lassen im WordPress Block Editor: So geht’s richtig!

Erinnerst du dich noch an den alten Classic Editor in WordPress (*)? Ein Bild im Fließtext platzieren, auf „linksbündig“ klicken – und schon ist der Text sauber um das Bild geflossen. Wenn du im Block Editor (Gutenberg) versuchst, genau das Gleiche zu tun, stehst du vielleicht kurz vor dem Verzweifeln.

Die gute Nachricht: Der Effekt funktioniert im modernen Editor genauso einfach! Du musst nur wissen, wie du die einzelnen Blöcke richtig kombiniert und worauf du bei der mobilen Darstellung achten solltest.

1. Die Grundanleitung: Bild und Text richtig kombinieren

Im Block Editor erstellst du Text und Bild nicht mehr in einem gemeinsamen Feld, sondern nutzt zwei getrennte Blöcke:

1. Absatz-Block erstellen: Schreibe deinen Text ganz normal in einen Absatz-Block.
2. Bild-Block darüber einfügen: Platziere einen Bild-Block direkt über dem Absatz, der das Bild umfließen soll.
3. Ausrichtung festlegen: Klicke auf den Bild-Block, öffne die Werkzeugleiste direkt über dem Bild und wähle „Links ausrichten“ oder „Rechts ausrichten“.

Was dann passiert: WordPress (*) rückt den darunter liegenden Absatz-Block automatisch seitlich an das Bild heran.

2. Häufige Fehlerquellen vermeiden

Damit das Layout sauber aussieht, solltest du auf drei Dinge achten:

• Die Bildgröße: Ist das Bild zu breit gewählt (z. B. auf voller Inhaltsbreite), bleibt daneben kein Platz für Text. Verringere die Bildgröße in der rechten Seitenleiste oder ziehe das Bild direkt im Editor mit den Anfassern kleiner.
• Die Reihenfolge der Blöcke: Es fließen nur Blöcke um das Bild, die direkt darauf folgen. Sobald eine Überschrift, eine Liste oder eine Trennlinie im Weg steht, bricht das Umfließen an dieser Stelle ab.
• Kein „Medien & Text“-Block: Dieser Block erzeugt ein festes Zwei-Spalten-Layout. Das ist zwar ordentlich, aber der Text umfließt das Bild nicht, sondern bleibt starr in seiner eigenen Spalte.

3. Die Hürde auf Smartphones meistern

Auf kleinen Smartphone-Bildschirmen entsteht bei umfließenden Bildern oft ein Problem: Wenn das Bild links oder rechts ausgerichtet bleibt, quetscht sich der Text in einen winzigen Streifen daneben. Das führt zu unschönen Wortumbrüchen mit nur 2 bis 3 Buchstaben pro Zeile.

Lösung A: Sichtbarkeit nach Gerät steuern (Mobile Ansicht anpassen)

WordPress (*) bietet in den Block-Einstellungen Optionen zur Sichtbarkeit. So löst du das Problem ideal:

1. Du fügst zwei Bild-Blöcke ein.
2. Bild 1 (für Desktop & Tablet): Du richtest es links oder rechts aus und stellst in den Block-Einstellungen ein, dass es auf mobilen Geräten ausgeblendet wird.
3. Bild 2 (für Smartphones): Du wählst die Standard-Ausrichtung (kein Links/Rechts-Bündig) und stellst ein, dass es nur auf mobilen Geräten sichtbar ist.

Auf dem Smartphone steht das Bild dann sauber über dem Text, während es am PC stilvoll vom Text umflossen wird.

Lösung B: Automatische Silbentrennung aktivieren

Wenn du lange Wörter im Fließtext hast, hilft die automatische Silbentrennung per CSS. Füge dafür einfach diesen kurzen Schnipsel in deine Theme-Einstellungen unter Zusätzliches CSS (oder im Website-Editor) ein:

CSS

/* Aktiviert die Silbentrennung für den Beitragsinhalt */
.entry-content, .wp-block-post-content {
  hyphens: auto;
}

Hinweis: Damit die Browser-Silbentrennung richtig funktioniert, muss die Sprache deiner Website in den WordPress-Einstellungen korrekt hinterlegt sein.

Fazit

Du brauchst weder veraltete Plugins noch den alten „Classic Block“, um ansprechende Text-Bild-Kombinationen zu bauen. Die Kombination aus ausgerichteten Bild-Blöcken und gerätespezifischer Sichtbarkeit gibt dir die volle Kontrolle – auf dem PC genauso wie auf dem Smartphone!

---

---

(*) Hinweis: Hinter einigen Links stehen Affiliate-Programme. Für Sie bleibt der Preis exakt derselbe, wir erhalten jedoch eine kleine Provision, die wir direkt in unsere kommenden Recherchen investieren. Vielen Dank, dass Sie unsere Arbeit auf diese Weise unterstützen!

Views: 53