CitadelaWP WordPress Theme & Plugins herunterladen<\/strong><\/p> <\/div>\r\n \n\n\n One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n Gutenberg-Editor und -Bl\u00f6cke machen den Inhalt der Website leichter, moderner und m\u00fchelos lesbar. Wir zeigen Ihnen weitere M\u00f6glichkeiten, wie Sie in WordPress-Seiten, Beitr\u00e4gen und benutzerdefinierten Beitragstypen Text um das Bild flie\u00dfen lassen. Es gibt verschiedene Bl\u00f6cke, die Sie auch in Kombination als Satz von Teilen und Funktionen verwenden k\u00f6nnen, die Ihnen zus\u00e4tzliche Optionen f\u00fcr die H\u00fclle bieten.<\/p>\n\n\n\n Sie k\u00f6nnen den Block f\u00fcr den um das Bild umlaufenden Text entsprechend der Unterseite und ihrem Inhaltstyp ausw\u00e4hlen. Sie k\u00f6nnen einen Stil f\u00fcr die Pr\u00e4sentationsseite und einen anderen f\u00fcr einen Blogbeitrag w\u00e4hlen. Ber\u00fccksichtigen Sie auch die Art des Inhalts, der das Bild darstellt. Handelt es sich um ein Beschreibungsbild oder eher um ein repr\u00e4sentatives oder verkaufsf\u00f6rderndes Bild?<\/p>\n\n\n\n Es gibt 4 Bl\u00f6cke, mit denen Sie einen Textblock um ein Bild wickeln k\u00f6nnen. Wir beschreiben sie alle:<\/p>\n\n\n\n Es gibt mehrere Gr\u00fcnde, warum Sie diesen Block verwenden sollten. Sie werden es am meisten zu sch\u00e4tzen wissen, wenn Sie Blogbeitr\u00e4ge schreiben. Bilder sind integraler Bestandteil der Geschichte. Es spielt keine Rolle, ob Sie einen Reiseblog oder ein Magazin \u00fcber IT-Neuigkeiten schreiben. Wenn Sie also Fotos in Ihren Inhalt einf\u00fcgen, denken Sie an die Bildausrichtung. Die Leser k\u00f6nnen besser verstehen, wor\u00fcber Sie schreiben.<\/p>\n\n\n\n In vielen F\u00e4llen ist es notwendig, Bild und Text nebeneinander einzuf\u00fcgen. Was ist wichtig?<\/p>\n\n\n\n W\u00e4hrend in der Klassischer Herausgeber<\/strong> Sie k\u00f6nnten auch Text neben dem Bild platzieren, von einer sch\u00f6nen Ausrichtung k\u00f6nnte man nicht sprechen. Vor allem, wenn das Bild klein war und Sie mehr Text daneben einf\u00fcgen. Der Text \u00fcberlagerte das Bild und sah nicht sch\u00f6n aus.<\/p>\n\n\n\n Gutenberg-Herausgeber<\/strong> und sein Bildblock bieten eine gro\u00dfartige Funktion \u2013 die Gr\u00f6\u00dfen\u00e4nderung von Bildern. Ziehen Sie Punkte um das Bild, um dessen Gr\u00f6\u00dfe und Textausrichtung automatisch zu \u00e4ndern.<\/p>\n\n\n\n Jetzt loslegen<\/p> <\/div>\r\n \n\n\n One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n Der Medien- und Textblock ist eine fantastische Funktion. Der Medien- und Textblock l\u00f6st dieses Problem und sorgt f\u00fcr eine perfekte Ausrichtung des Textes am Bild, ohne dass Komposition und Layout beeintr\u00e4chtigt werden. Aus diesem Grund sollten Sie diesen Block verwenden.<\/p>\n\n\n\n Es verbessert auch das Website-Design auf Mobilger\u00e4ten. 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 \u201eAuf Mobilger\u00e4ten stapeln\u201c funktioniert, sehen wir uns weiter unten an.<\/p>\n\n\n\n In K\u00fcrze k\u00f6nnen Sie den Medien- und Textblock in unserem neuen WordPress-Theme namens Citadela verwenden. Erfahren Sie mehr \u00fcber das Citadela-Theme in einem separaten Artikel.<\/p>\n\n\n\n Das Hinzuf\u00fcgen eines Medien- und Textblocks ist genauso einfach wie das Hinzuf\u00fcgen jedes anderen Blocks. Es handelt sich um einen Kernblock, was bedeutet, dass Sie nichts herunterladen oder installieren m\u00fcssen.<\/p>\n\n\n\n Verwenden Sie das \u201e+\u201c-Symbol im oberen Bereich oder irgendwo im Editor und w\u00e4hlen Sie den Medien- und Textblock aus.<\/p>\n\n\n\n Die letzte M\u00f6glichkeit besteht darin, \u201e\/\u201c einzugeben und anschlie\u00dfend \u201eMedien\u201c einzugeben. WordPress zeigt Ihnen automatisch ausgew\u00e4hlte Bl\u00f6cke an, die Ihrer Suche entsprechen.<\/p>\n\n\n\n Der Medien- und Textblock fasst grunds\u00e4tzlich zwei verschiedene Arten von Inhalten zusammen. Das erste ist ein Medium, z. B. ein Bild oder Video, das Sie hinzuf\u00fcgen k\u00f6nnen \u00fcber:<\/p>\n\n\n\n Zweitens ist Platz f\u00fcr Textinhalte. Sie k\u00f6nnen dort Textabschnitte, Aufz\u00e4hlungslisten oder Titel schreiben. Sie k\u00f6nnen dort auch hinzuf\u00fcgen Tastenblock<\/a> wor\u00fcber wir vorhin gesprochen haben.<\/p>\n\n\n\n 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\u00f6he in der Textspalte an.<\/p>\n\n\n\n 1. Obere Symbolleiste<\/b><\/p>\n\n\n\n Die Symbolleiste \u00fcber dem Block bietet mehrere Optionen. Wenn Ihr aktives Design dies unterst\u00fctzt, k\u00f6nnen Sie den Medien- und Textblock auf \u201eBreite\u201c oder \u201eVolle Breite\u201c einstellen. Sie k\u00f6nnen auch ausw\u00e4hlen, wo Sie das Bild oder Video platzieren m\u00f6chten, indem Sie auf klicken:<\/p>\n\n\n\n In der oberen Symbolleiste gibt es au\u00dferdem ein Symbol zum Bearbeiten des Mediums, in dem Sie Alternativtext, Titel, Beschriftung oder Beschreibung festlegen k\u00f6nnen. Erfahren Sie mehr \u00fcber das Bearbeiten von Bildern in unserem Artikel Arbeiten mit dem WordPress-Bildblock<\/a>.<\/p>\n\n\n\n 2. Rechte Seitenleiste<\/b><\/p>\n\n\n\n Die rechte Seitenleiste bietet zus\u00e4tzliche Einstellungen f\u00fcr den Medien- und Textblock. Hier k\u00f6nnen Sie Alternativtext hinzuf\u00fcgen, eine Hintergrundfarbe festlegen oder eine zus\u00e4tzliche CSS-Klasse hinzuf\u00fcgen. Sie k\u00f6nnen dort auch die Funktion \u201eAuf Mobilger\u00e4ten stapeln\u201c aktivieren.<\/p>\n\n\n\n <\/a>Was ist Stack auf Mobilger\u00e4ten?<\/b><\/p>\n\n\n\n Dank dieser Funktion werden Bild und Text auf mobilen Ger\u00e4ten gut angezeigt. Wenn Sie \u201eAuf Mobilger\u00e4ten stapeln\u201c deaktivieren, bleiben Bild und Text nebeneinander und sind in der responsiven Version kaum lesbar.<\/p>\n\n\n\n Wenn Sie diese Funktion aktivieren, werden auf Mobiltelefonen Inhalte auf der linken Seite \u00fcber Inhalten auf der rechten Seite angezeigt.<\/p>\n\n\n\n Ein Teil des Medien- und Textblocks ist neben Bildern oder Videos auch Textinhalt. Es kann sich um einen der folgenden Inhaltstypen handeln:<\/p>\n\n\n\n 1. Absatz<\/b><\/p>\n\n\n\n In der oberen Symbolleiste k\u00f6nnen Sie die Textausrichtung festlegen, den Text fett oder kursiv formatieren oder einen URL-Link hinzuf\u00fcgen.<\/p>\n\n\n\n In der Seitenleiste auf der rechten Seite k\u00f6nnen Sie Schriftgr\u00f6\u00dfe, Schriftfarbe oder Absatzfarbe ausw\u00e4hlen. Eine interessante Funktion ist \u201eDrop Cap\u201c, das das erste Zeichen des Textes hervorhebt. Es ist eine nette Funktion in Blockbeitr\u00e4gen, um den Text interessanter zu gestalten.<\/p>\n\n\n\n 2. \u00dcberschrift<\/b><\/p>\n\n\n\n Die \u00dcberschrift ist dem Absatz sehr \u00e4hnlich. Sie k\u00f6nnen auch das Aussehen konfigurieren, es fett oder kursiv formatieren und einen URL-Link einf\u00fcgen. Der Unterschied besteht darin, dass Sie den \u00dcberschriftentyp w\u00e4hlen k\u00f6nnen \u2013 H2, H3, H4.<\/p>\n\n\n\n Weitere \u00dcberschriftengr\u00f6\u00dfen und Ausrichtungseinstellungen sind in der Seitenleiste auf der rechten Seite verf\u00fcgbar.<\/p>\n\n\n\n 3. Liste<\/b><\/p>\n\n\n\n Wenn Sie Ihrem Inhalt einen Listenblock hinzuf\u00fcgen, kann es sich um Aufz\u00e4hlungspunkte, eine nummerierte Liste oder eine mehrstufige Liste handeln. Sie k\u00f6nnen Text auch fett und kursiv formatieren und einen URL-Link hinzuf\u00fcgen.<\/p>\n\n\n\n 4. Tastenblock<\/b><\/p>\n\n\n\n Dieser Block, der dem Inhalt eine Schaltfl\u00e4che hinzuf\u00fcgt, kann an das Website-Design angepasst werden. Farbe und Stil der Schaltfl\u00e4che oder Hintergrundfarbe k\u00f6nnen in der Seitenleiste auf der rechten Seite konfiguriert werden.<\/p>\n\n\n\n Vergessen Sie nicht, den Artikel dar\u00fcber zu lesen Tastenblock<\/a>. <\/a><\/p>\n\n\n\n Im Medien- und Textblock ist es m\u00f6glich, einen Inhaltsblocktyp in einen anderen zu konvertieren. Sie k\u00f6nnen den Medien- und Textblock auch in einen Bildblock \u00e4ndern und der Textteil wird gel\u00f6scht.<\/p>\n\n\n\n Im Textinhalt ist es m\u00f6glich, den Absatzblock in einen \u00dcberschriften- oder Listenblock zu \u00e4ndern.<\/p>\n\n\n\n Die Verwendung von Blocksatz hat Vor- und Nachteile. B\u00fcndiger Text ist normalerweise in B\u00fcchern oder Zeitungen zu finden, wird jedoch nicht mehr auf Websites verwendet. Warum?<\/p>\n\n\n\n Vor einigen Jahren wurde die Justify-Funktion direkt in den WordPress Classic-Editor integriert. Blockierter Text, der in verschiedenen Browsern oder Mobilger\u00e4ten zu Sichtbarkeitsproblemen f\u00fchren kann. Dies h\u00e4ngt auch mit der schwierigen Lesbarkeit von gerechtfertigtem Text zusammen. Diese Funktion wurde daher veraltet und entfernt.<\/p>\n\n\n\n Diese besondere Funktionalit\u00e4t ist auch im neuen Blockeditor (Gutenberg) nicht vorhanden.<\/p>\n\n\n\n Wie rechtfertigen Sie also Text, wenn Sie es wirklich wollen?<\/p>\n\n\n\n Die L\u00f6sung besteht darin, in wenigen Schritten einfachen CSS-Code hinzuzuf\u00fcgen:<\/p>\n\n\n\n Erledigt. Von nun an ist der Text in Ihrem Medien- und Textblock ausgerichtet.<\/p>\n\n\n\n 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\u00fcr Ihre Website. Gutenberg-Bl\u00f6cke bieten eine gro\u00dfe Auswahl an Stilen, ganz gleich, welche Hand Sie bevorzugen WordPress-Code zum Umschlie\u00dfen von Text um Bilder<\/a>.<\/p>\n\n\n\n<\/span>Wie kann man in WordPress Text um das Bild wickeln?<\/span><\/h2>\n\n\n\n
<\/span>Text um das Bild wickeln \u2013 Blockiert die Auswahl<\/span><\/h3>\n\n\n\n
![\"Erweiterte](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-1024x538.png\")
![\"\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-1024x557.png\")
<\/span><\/a>Umbrechen Sie Text und Bild f\u00fcr ein besseres Leseerlebnis<\/span><\/h3>\n\n\n\n
<\/span>Bild- und Absatzbl\u00f6cke<\/span><\/h2>\n\n\n\n
![\"Text,](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow.png\")
<\/a>![\"Wickeln](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-1024x783.png\")
<\/span>Medien- und Textblock \u2013 WordPress richtet den Text neben dem Bild aus<\/span><\/h2>\n\n\n\n
<\/span>Wie richtet man Text neben dem Bild aus?<\/span><\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min.png\"){kind=logo}
<\/figure>\n<\/div>\n\n\n\n<\/span><\/a>Wie f\u00fcge ich einen Medien- und Textblock im Blockeditor hinzu?<\/span><\/h3>\n\n\n\n
![\"F\u00fcgen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add.png\")
<\/a>![\"F\u00fcgen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-shortcut.gif\")
<\/a><\/span><\/a>Wie funktioniert der Medien- und Textblock?<\/span><\/h3>\n\n\n\n
![\"Optionen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-upload.gif\")
<\/a>![\"Textbereich](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.gif\")
<\/a>![\"Bildausrichtung](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text.png\")
<\/a><\/span><\/a>Einstellungen f\u00fcr Medien- und Textblock<\/span><\/h3>\n\n\n\n
<\/span>Allgemeine Blockeinstellungen<\/span><\/h3>\n\n\n\n
![\"\u00c4nderung](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-align.gif\")
<\/a>![\"Einstellungen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-color.gif\")
<\/a>![\"Stapeln](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive.png\")
<\/a><\/span>Textausrichtung<\/span><\/h3>\n\n\n\n
![\"Absatz](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph.png\")
<\/a>![\"\u201eDrop](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-cap.gif\")
<\/a>![\"\u00dcberschriftenoptionen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading.png\")
<\/a>![\"Listenoptionen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list.png\")
<\/a>![\"Schaltfl\u00e4chenoptionen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.png\")
<\/a><\/span>Zwischen Blocktypen wechseln<\/span><\/h3>\n\n\n\n
![\"Zwischen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-switch.gif\")
<\/a>![\"Absatzblock](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-switch.gif\")
<\/a><\/span><\/a>Bonus: So richten Sie Text in WordPress aus<\/span><\/h2>\n\n\n\n
p.justify { text-align: justify; }\n<\/pre>\n\n\n\n![\"Richten](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-justify.gif\")
<\/a>