Inhaltsverzeichnis
Müssen Sie Text auf elegante Weise um das Bild herum platzieren? Erfahren Sie, wie Sie dies ganz einfach und ohne Programmier- und Designerfahrung tun können. Der Gutenberg-Editor bietet mehr Optionen zum Umbrechen von Text um Text in WordPress.
Sie können gleichzeitig eine gut aussehende Website und eine einfache Bearbeitungsroutine für Inhalte erstellen. Wenn Sie sich für den Gutenberg-Editor für Ihre WordPress-Website entscheiden, erhalten Sie auf lange Sicht das beste Tool. Sie haben mehr Möglichkeiten, Text anders um Bilder zu wickeln. Gutenberg bietet viele Vorteile wie einen klareren Quellcode der Website, Geschwindigkeit, Sicherheit und Benutzerfreundlichkeit.
Wie kann man in WordPress Text um das Bild wickeln?
Gutenberg-Editor und -Blöcke machen den Inhalt der Website leichter, moderner und mühelos lesbar. Wir zeigen Ihnen weitere Möglichkeiten, wie Sie in WordPress-Seiten, Beiträgen und benutzerdefinierten Beitragstypen Text um das Bild fließen lassen. Es gibt verschiedene Blöcke, die Sie auch in Kombination als Satz von Teilen und Funktionen verwenden können, die Ihnen zusätzliche Optionen für die Hülle bieten.
Sie können den Block für den um das Bild umlaufenden Text entsprechend der Unterseite und ihrem Inhaltstyp auswählen. Sie können einen Stil für die Präsentationsseite und einen anderen für einen Blogbeitrag wählen. Berücksichtigen Sie auch die Art des Inhalts, der das Bild darstellt. Handelt es sich um ein Beschreibungsbild oder eher um ein repräsentatives oder verkaufsförderndes Bild?
Text um das Bild wickeln – Blockiert die Auswahl
Es gibt 4 Blöcke, mit denen Sie einen Textblock um ein Bild wickeln können. Wir beschreiben sie alle:
- Weitere Informationen zum Bildblock und Absatzblock finden Sie weiter unten
- Weitere Informationen zum Medien- und Textblock finden Sie weiter unten
- Spaltenblock im Einzelpost
- Clusterblock im Einzelbeitrag (Funktion nur verfügbar mit Citadela Pro-Plugin)
Umbrechen Sie Text und Bild für ein besseres Leseerlebnis
Es gibt mehrere Gründe, warum Sie diesen Block verwenden sollten. Sie werden es am meisten zu schätzen wissen, wenn Sie Blogbeiträge schreiben. Bilder sind integraler Bestandteil der Geschichte. Es spielt keine Rolle, ob Sie einen Reiseblog oder ein Magazin über IT-Neuigkeiten schreiben. Wenn Sie also Fotos in Ihren Inhalt einfügen, denken Sie an die Bildausrichtung. Die Leser können besser verstehen, worüber Sie schreiben.
In vielen Fällen ist es notwendig, Bild und Text nebeneinander einzufügen. Was ist wichtig?
- Es muss einen Sinn ergeben. Das Bild muss neben dem richtigen Text stehen.
- Es muss gut ausgerichtet sein.
- Es muss zum gesamten Website-Layout passen.
Bild- und Absatzblöcke
Während in der Klassischer Herausgeber Sie könnten auch Text neben dem Bild platzieren, von einer schönen Ausrichtung könnte man nicht sprechen. Vor allem, wenn das Bild klein war und Sie mehr Text daneben einfügen. Der Text überlagerte das Bild und sah nicht schön aus.
Gutenberg-Herausgeber und sein Bildblock bieten eine großartige Funktion – die Größenänderung von Bildern. Ziehen Sie Punkte um das Bild, um dessen Größe und Textausrichtung automatisch zu ändern.
Medien- und Textblock – WordPress richtet den Text neben dem Bild aus
- Umbrechen Sie Text und Bilder mit dem Medien- und Textblock
- So fügen Sie einen Medien- und Textblock im Editor hinzu
- Wie dieser Block funktioniert
- Einstellungen für Medien- und Textblöcke
- Was macht "Auf Mobilgeräten stapeln“ bedeuten
- Bonus: So richten Sie Text in WordPress aus
Wie richtet man Text neben dem Bild aus?
Jetzt loslegen
Beginnen Sie jetzt mit einer risikofreien Testversion. Keine Kreditkarte benötigt.
Der Medien- und Textblock ist eine fantastische Funktion. Der Medien- und Textblock löst dieses Problem und sorgt für eine perfekte Ausrichtung des Textes am Bild, ohne dass Komposition und Layout beeinträchtigt werden. Aus diesem Grund sollten Sie diesen Block verwenden.
Es verbessert auch das Website-Design auf Mobilgeräten. Dieser Wrapping-Block hilft dem WordPress-Theme, verschiedene mobile Layouts abzudecken. Auf dem Smartphone muss jeder Teil der Website deutlich sichtbar und lesbar sein. Wie der Medien- und Textblock auf Mobiltelefonen aussehen wird und wie die Funktion „Auf Mobilgeräten stapeln“ funktioniert, sehen wir uns weiter unten an.
In Kürze können Sie den Medien- und Textblock in unserem neuen WordPress-Theme namens Citadela verwenden. Erfahren Sie mehr über das Citadela-Theme in einem separaten Artikel.
Wie füge ich einen Medien- und Textblock im Blockeditor hinzu?
Das Hinzufügen eines Medien- und Textblocks ist genauso einfach wie das Hinzufügen jedes anderen Blocks. Es handelt sich um einen Kernblock, was bedeutet, dass Sie nichts herunterladen oder installieren müssen.
Verwenden Sie das „+“-Symbol im oberen Bereich oder irgendwo im Editor und wählen Sie den Medien- und Textblock aus.
Die letzte Möglichkeit besteht darin, „/“ einzugeben und anschließend „Medien“ einzugeben. WordPress zeigt Ihnen automatisch ausgewählte Blöcke an, die Ihrer Suche entsprechen.
Wie funktioniert der Medien- und Textblock?
Der Medien- und Textblock fasst grundsätzlich zwei verschiedene Arten von Inhalten zusammen. Das erste ist ein Medium, z. B. ein Bild oder Video, das Sie hinzufügen können über:
- Hochladen
- Medienbibliothek
- Ziehen und loslassen
Zweitens ist Platz für Textinhalte. Sie können dort Textabschnitte, Aufzählungslisten oder Titel schreiben. Sie können dort auch hinzufügen Tastenblock worüber wir vorhin gesprochen haben.
Der Medien- und Textblock richtet Bild und Text immer nebeneinander aus, egal wie viel Text Sie schreiben. Wie funktioniert es? Das Bild passt sich automatisch an die Inhaltshöhe in der Textspalte an.
Einstellungen für Medien- und Textblock
Allgemeine Blockeinstellungen
1. Obere Symbolleiste
Die Symbolleiste über dem Block bietet mehrere Optionen. Wenn Ihr aktives Design dies unterstützt, können Sie den Medien- und Textblock auf „Breite“ oder „Volle Breite“ einstellen. Sie können auch auswählen, wo Sie das Bild oder Video platzieren möchten, indem Sie auf klicken:
- Medien links anzeigen
- Medien rechts anzeigen
In der oberen Symbolleiste gibt es außerdem ein Symbol zum Bearbeiten des Mediums, in dem Sie Alternativtext, Titel, Beschriftung oder Beschreibung festlegen können. Erfahren Sie mehr über das Bearbeiten von Bildern in unserem Artikel Arbeiten mit dem WordPress-Bildblock.
2. Rechte Seitenleiste
Die rechte Seitenleiste bietet zusätzliche Einstellungen für den Medien- und Textblock. Hier können Sie Alternativtext hinzufügen, eine Hintergrundfarbe festlegen oder eine zusätzliche CSS-Klasse hinzufügen. Sie können dort auch die Funktion „Auf Mobilgeräten stapeln“ aktivieren.
Was ist Stack auf Mobilgeräten?
Dank dieser Funktion werden Bild und Text auf mobilen Geräten gut angezeigt. Wenn Sie „Auf Mobilgeräten stapeln“ deaktivieren, bleiben Bild und Text nebeneinander und sind in der responsiven Version kaum lesbar.
Wenn Sie diese Funktion aktivieren, werden auf Mobiltelefonen Inhalte auf der linken Seite über Inhalten auf der rechten Seite angezeigt.
Textausrichtung
Ein Teil des Medien- und Textblocks ist neben Bildern oder Videos auch Textinhalt. Es kann sich um einen der folgenden Inhaltstypen handeln:
1. Absatz
In der oberen Symbolleiste können Sie die Textausrichtung festlegen, den Text fett oder kursiv formatieren oder einen URL-Link hinzufügen.
In der Seitenleiste auf der rechten Seite können Sie Schriftgröße, Schriftfarbe oder Absatzfarbe auswählen. Eine interessante Funktion ist „Drop Cap“, das das erste Zeichen des Textes hervorhebt. Es ist eine nette Funktion in Blockbeiträgen, um den Text interessanter zu gestalten.
2. Überschrift
Die Überschrift ist dem Absatz sehr ähnlich. Sie können auch das Aussehen konfigurieren, es fett oder kursiv formatieren und einen URL-Link einfügen. Der Unterschied besteht darin, dass Sie den Überschriftentyp wählen können – H2, H3, H4.
Weitere Überschriftengrößen und Ausrichtungseinstellungen sind in der Seitenleiste auf der rechten Seite verfügbar.
3. Liste
Wenn Sie Ihrem Inhalt einen Listenblock hinzufügen, kann es sich um Aufzählungspunkte, eine nummerierte Liste oder eine mehrstufige Liste handeln. Sie können Text auch fett und kursiv formatieren und einen URL-Link hinzufügen.
4. Tastenblock
Dieser Block, der dem Inhalt eine Schaltfläche hinzufügt, kann an das Website-Design angepasst werden. Farbe und Stil der Schaltfläche oder Hintergrundfarbe können in der Seitenleiste auf der rechten Seite konfiguriert werden.
Vergessen Sie nicht, den Artikel darüber zu lesen Tastenblock.
Zwischen Blocktypen wechseln
Im Medien- und Textblock ist es möglich, einen Inhaltsblocktyp in einen anderen zu konvertieren. Sie können den Medien- und Textblock auch in einen Bildblock ändern und der Textteil wird gelöscht.
Im Textinhalt ist es möglich, den Absatzblock in einen Überschriften- oder Listenblock zu ändern.
Bonus: So richten Sie Text in WordPress aus
Die Verwendung von Blocksatz hat Vor- und Nachteile. Bündiger Text ist normalerweise in Büchern oder Zeitungen zu finden, wird jedoch nicht mehr auf Websites verwendet. Warum?
Vor einigen Jahren wurde die Justify-Funktion direkt in den WordPress Classic-Editor integriert. Blockierter Text, der in verschiedenen Browsern oder Mobilgeräten zu Sichtbarkeitsproblemen führen kann. Dies hängt auch mit der schwierigen Lesbarkeit von gerechtfertigtem Text zusammen. Diese Funktion wurde daher veraltet und entfernt.
Diese besondere Funktionalität ist auch im neuen Blockeditor (Gutenberg) nicht vorhanden.
Wie rechtfertigen Sie also Text, wenn Sie es wirklich wollen?
Die Lösung besteht darin, in wenigen Schritten einfachen CSS-Code hinzuzufügen:
- In der Seitenleiste auf der rechten Seite gibt es eine Einstellung für den Block „Zusätzliche CSS-Klasse des Absatzes“.
- Schreiben Sie dort den Klassennamen „rechtfertigen„
- Seite oder Artikel veröffentlichen
- Wenn Sie eine Vorschau anzeigen, klicken Sie in der oberen Hauptleiste auf „Anpassen“.
- Auf der linken Seite gibt es eine neue Seitenleiste mit Einstellungen
- Klicken Sie auf Zusätzliches CSS
- Fügen Sie folgenden CCS-Code ein:
p.justify { text-align: justify; }
Erledigt. Von nun an ist der Text in Ihrem Medien- und Textblock ausgerichtet.
Dank des Gutenberg-Editors ist WordPress ohne Seitenersteller von Drittanbietern benutzerfreundlicher geworden. Langfristig gesehen und bei der Erstellung oder Neugestaltung einer Website bietet es einen hervorragenden Wert für Ihre Website. Gutenberg-Blöcke bieten eine große Auswahl an Stilen, ganz gleich, welche Hand Sie bevorzugen WordPress-Code zum Umschließen von Text um Bilder.
Was ist Ihre Meinung zum Medien- und Textblock? Haben Sie es bereits verwendet? Wie gefällt Ihnen die Arbeit damit? Lass es uns unten in den Kommentaren wissen.
Im Allgemeinen gefällt mir das Blocksystem, aber es sei denn, ich übersehe etwas, ist das ein Rückschritt. Ich versuche derzeit, ein Bild einfach nach links oder rechts zu verschieben und den Text umzubrechen, was eigentlich so einfach sein sollte, aber WordPress scheint das einfach nicht zu wollen. Warum nicht? Die Verwendung des Medien- und Bildblocks funktioniert nur, wenn der Text die richtige Länge hat. Eine Seite wie diese möchte beispielsweise nicht mit einem ungeraden Abstand zwischen den Absätzen neu erstellt werden, wenn der Text nicht genau die richtige Länge für die Bildgröße hat.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hallo,
vielen Dank für Ihr Feedback. Das hört sich nach einer sehr guten Idee an, deshalb möchte ich Sie bitten, uns eine Minute Ihrer Zeit zu geben, um vier einfache Fragen zu beantworten: https://aitthemes.typeform.com/to/vc7arn, die unserem Team dabei helfen können, bessere Produkte herzustellen Einzigartige Funktionen schneller.
Vielen Dank für Ihre Zeit und Ihr Verständnis.
Herzliche Grüße!
Zlatko
AIT-Team
Ja, ich kann den Text nicht umbrechen. Diese Textblockkombinationen scheinen nutzlos zu sein.
Diese Idee ist scheiße, da sie die einzige Möglichkeit ist, Bilder in einen Blog einzufügen – ich bekomme den Text nicht schön umbrochen und er hat nicht die gleiche Größe, egal was ich mache. Gute Idee für BESTIMMTE Situationen, aber nicht für alles. Manchmal möchten Sie einfach nur ein Bild mit umlaufenden Absätzen, anstatt etwas über das Bild zu sagen.
Wie man einen Wrapper hinzufügt und Inhalte in voller Breite verwendet, ist im Ernst, wie man ihn vollständig abdeckt und dann einen Container hineinnimmt. Der Builder ist sehr verwirrend, wie man einen Container-Wrap hinzufügt, ein sehr schlechter Editor
Hallo,
danke für deine Komplimente. Schauen Sie sich gerne unsere Blog-Seite https://www.ait-themes.club/blog/ an, wo Sie viele nützliche Tipps zum Schreiben attraktiver und nützlicher Beiträge finden.
Herzliche Grüße!
Zlatko
AIT-Team
Hallo Abdur,
Vielen Dank für Ihr Feedback, unser Team freut sich sehr darüber!
Mit freundlichen Grüßen.
Zlatko
AIT-Team
Ich habe die gleichen Schwierigkeiten wie mehrere andere Leute in diesem Thread. Früher konnte ich ein Bild ganz einfach mit Text umschließen, wie auf unserer „Über uns“-Seite, wo wir Bilder und Biografien haben. Vielleicht habe ich den alten Editor verwendet. Ich erinnere mich nicht. Aber ich versuche jetzt, unsere Website mit neuen Bildern und Biografien zu aktualisieren, und konnte keine Möglichkeit finden, den Text so einfach umzubrechen wie bei unseren vorherigen Bio/Bild-Kombinationen. Ich habe versucht, zum klassischen Editor zu wechseln, aber die Website hat mich gewarnt, dass es „neue Blockeditor“-Abschnitte gibt und ich beim neueren Bearbeitungsmodus bleiben muss. Können Sie mir sagen, wie ich unsere neuen Biografien und Bilder so gestalten kann, dass sie unseren früheren Beiträgen ähneln? Danke.
Sie da,
Wenn Sie Gutenberg deaktivieren und mit dem klassischen WordPress-Editor fortfahren möchten, ziehen Sie bitte ein Plugin des WordPress-Kernteams in Betracht, das Ihnen dies mit dem „Classic Editor Plugin“ ermöglicht.
Mit freundlichen Grüßen!
Zlatko
AIT-Team
Für diejenigen, die nur einen einfachen Text um das Bild herum wünschen, können Sie dies tun, indem Sie den klassischen Textblock (basierend auf dem ersten Teil der Blöcke) einfügen, wenn Sie auf „Durchsuchen“ klicken. Sie können den klassischen Editor in einem einzelnen Block verwenden, und ja , mit der Sie ein Bild einfügen und dann die Umhüllungsoption auswählen können. Problem gelöst 🙂
DANKE London SEO Guy!!! Eine einfache Lösung, aber ich hatte sie übersehen!
Und dann… verwenden Sie einfach die Option „In Blöcke konvertieren“.
Da dies funktioniert, verfügt der Blockeditor über die entsprechenden Funktionen, weiß aber nicht, wie er sie richtig einrichten kann. In der Zwischenzeit funktioniert dieser Fudge.
Das gleiche Problem hier. Diese neue Version ist schrecklich – es gibt keine Möglichkeit, Text richtig umzubrechen oder das Foto sogar zu verkleinern, es sei denn, Sie möchten es nur zuschneiden.
Ich kann meinen Text im WordPress-Blockeditor um ein Bild wickeln. In der „Vorschau“ sieht es genau so aus, wie ich es haben möchte. Wenn ich jedoch meinen Blog veröffentliche und WordPress ihn per E-Mail an meine Follower sendet, erhalten sie ihn mit dem Bild oben und dem Text darunter. Dies geschieht auch auf Desktop-Computern, nicht nur auf kleinen Mobiltelefonen. Ich möchte, dass es verpackt und nicht gestapelt wird.
Hallo,
Vielen Dank fürs Schreiben. Der Block umschließt das Bild in WordPress nicht wie erwartet. Bitte schauen Sie sich die folgenden Anweisungen an, da sie für Sie hilfreich sein könnten: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Mit freundlichen Grüßen!
Zlatko
AIT-Team
Ich mache das alles und mein Blog wird in der Vorschau perfekt verpackt. Wenn ich es veröffentliche, sieht es auf meiner Blog-Seite großartig aus. Aber wenn WordPress es per E-Mail an meine Follower sendet und sie diese E-Mail öffnen, sehen sie es nicht verpackt. Die Fotos liegen über dem Text. Es sieht sehr unprofessionell aus. Mit dem alten Classic Editor hatte ich dieses Problem nie. Da ich jetzt den Blockeditor verwende, kann ich nicht zum klassischen Editor zurückkehren, obwohl es eine klassische Option gibt, auf die ich klicken kann.
Hallo,
Vielen Dank fürs Schreiben.
Wir möchten Sie bitten, unsere Wissensdatenbank und/oder Dokumentation mit Video-Tutorials zu prüfen:
https://www.ait-themes.club/ait-themes-documentation/
Oder stellen Sie technische Fragen direkt in unserem speziellen Support-Ticket-System. Bitte melden Sie sich unter https://system.ait-themes.club/support/add-question in Ihrem Konto an.
Der Kundensupport wird an Werktagen von 8.00 bis 17.00 Uhr mitteleuropäischer Zeit bereitgestellt.
Darüber hinaus gibt es ein Plugin, mit dem Sie den vorherigen Editor verwenden können. Sie sollten den „Klassischen Editor“ installieren und aktivieren.
Aufrichtig!
Zlatko
AIT-Team
Ich bin nicht der Meinung, dass dies der klassischen Bearbeitung überlegen ist, da die Optionen eingeschränkter sind. Ich finde, dass dieser Block optisch störend wirkt, weil er andere Schriftarten verwendet und breiter als ein Textblock ist. Die Möglichkeit, Text reibungslos um ein Bild zu fließen und dabei die gleichen Schriftarten, Größen und Randeinstellungen beizubehalten, bringt die Professionalität einer Zeitschriftenseite mit sich. Dies ist nur ein Beispiel dafür, warum ich von dieser WordPress-Version zutiefst enttäuscht bin.
Hallo Terence
Danke für deine Meinung. Haben Sie unsere Citadela-Testversion ausprobiert? Wir haben einige einzigartige Blöcke, die Ihnen beim Anpassen von Text und Bildern helfen können. Auf jeden Fall können Sie die Vollversion mit allen Funktionen kostenlos testen.
Einen schönen Tag noch.