{"id":367035,"date":"2023-02-04T12:27:00","date_gmt":"2023-02-04T09:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367035"},"modified":"2023-03-31T19:28:19","modified_gmt":"2023-03-31T16:28:19","slug":"eine-anleitung-zum-wordpress-gutenberg-bildblock","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/eine-anleitung-zum-wordpress-gutenberg-bildblock\/","title":{"rendered":"Eine Anleitung zum WordPress Gutenberg-Bildblock"},"content":{"rendered":"\n<p>Gutenberg, einer der beliebtesten Seitenersteller f\u00fcr WordPress, enth\u00e4lt eine Bibliothek mit vorgefertigten Elementen, <a href=\"https:\/\/themewp.inform.click\/de\/die-neuen-wordpress-gutenberg-bloecke-erklaert\/\" title=\"die auch als Gutenberg-Bl\u00f6cke bekannt sind\">die auch als Gutenberg-Bl\u00f6cke bekannt sind<\/a>. Die Bl\u00f6cke erm\u00f6glichen eine reibungslose, optimierte und einfache Seitenerstellung, da sie unglaublich intuitiv und praktisch sind. In diesem Leitfaden geben wir einen \u00dcberblick \u00fcber den Gutenberg-Bildblock und alles, was Sie damit tun k\u00f6nnen.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Der Standardbildblock und wie man ihn hinzuf\u00fcgt<\/h2>\n<p>Kurz gesagt, mit Gutenberg Image Block k\u00f6nnen Sie <strong>ein Bild an beliebiger Stelle auf Ihrer Seite oder Ihrem Beitrag einf\u00fcgen<\/strong>. Wenn Sie in Ihrem Editor auf einen Plus-Button klicken, \u00f6ffnet sich ein neues Feld. Hier k\u00f6nnen Sie auf die Bildoption zugreifen. Wie Sie unten sehen k\u00f6nnen, haben Sie in diesem Editor auch separate Optionen zum Hinzuf\u00fcgen des Gutenberg-Bild-Blocks und des <a href=\"https:\/\/themewp.inform.click\/de\/einfuehrung-in-die-blockfunktionen-der-gutenberg-galerie\/\" title=\"Gutenberg-Galerie-Blocks\">Gutenberg-Galerie-Blocks<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"Eine Anleitung zum WordPress Gutenberg-Bildblock\"><\/a><\/p>\n<p>In Gutenberg gibt es drei verschiedene M\u00f6glichkeiten, Bilder hinzuzuf\u00fcgen. Sie k\u00f6nnen <strong>ein Bild von Ihrem Computer hochladen, ein bereits vorhandenes Bild aus Ihrer Medienbibliothek ausw\u00e4hlen oder es von der URL einf\u00fcgen<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"Eine Anleitung zum WordPress Gutenberg-Bildblock\"><\/a><\/p>\n<p>Auf den ersten Blick enth\u00e4lt der Bildblock die gleichen Optionen wie die Schaltfl\u00e4che \u201eMedien hinzuf\u00fcgen&#8220; des klassischen Editors. Bei n\u00e4herer Betrachtung zeigt sich jedoch, dass dies nur teilweise stimmt. Es gibt einige neue n\u00fctzliche Optionen, die mit Gutenberg geliefert werden, die Ihre Bildbearbeitungserfahrung weiter vereinfachen werden.<\/p>\n<p>Das erste ist eine Hinzuf\u00fcgung kleiner, blauer Punkte auf Ihrem Bild. Dank dieser Punkte k\u00f6nnen Sie <strong>das Bild dehnen und seine Gr\u00f6\u00dfe beliebig vergr\u00f6\u00dfern oder verkleinern<\/strong>. Eine weitere neue Option ist die M\u00f6glichkeit, eine Bildunterschrift am unteren Rand des Bildes zu schreiben.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"Eine Anleitung zum WordPress Gutenberg-Bildblock\"><\/a><\/p>\n<p>Alle Grundeinstellungen findest du direkt \u00fcber dem Bildblock. Auf der anderen Seite befinden sich erweiterte Bildeinstellungen auf der Registerkarte Blockieren. Dazu geh\u00f6ren Alternativtext, Bildgr\u00f6\u00dfe, Linkeinstellungen und Erweitert.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"Eine Anleitung zum WordPress Gutenberg-Bildblock\"><\/a><\/p>\n<ul>\n<li><strong>Alternativtext<\/strong> \u2013 hier k\u00f6nnen Sie eine kurze Beschreibung Ihres Bildes hinzuf\u00fcgen. Sie k\u00f6nnen dieses Feld jedoch leer lassen, wenn Ihr Bild kein Kernelement Ihres Inhalts ist.<\/li>\n<li><strong>Bildgr\u00f6\u00dfe<\/strong> \u2013 Es gibt M\u00f6glichkeiten, Ihre Bildgr\u00f6\u00dfe auf Standardgr\u00f6\u00dfen wie Miniaturbild, Mittel, Gro\u00df und Vollbild zu \u00e4ndern. Eine weitere Alternative besteht darin, die genauen Bildabmessungen in Pixel hinzuzuf\u00fcgen oder die gew\u00fcnschte Gr\u00f6\u00dfe in Prozent bezogen auf die Originalgr\u00f6\u00dfe zu bestimmen. Wenn Sie Fehler machen, k\u00f6nnen Sie jederzeit auf die Schaltfl\u00e4che Zur\u00fccksetzen klicken.<\/li>\n<li><strong>Linkeinstellungen<\/strong> \u2013 hier haben Sie vier verschiedene Optionen: Keine, Anhangsseite, Mediendatei und benutzerdefinierte URL. Mit der Option Keine k\u00f6nnen Sie das Bild ohne Link anzeigen, w\u00e4hrend die Anhangsseite auf eine bestimmte Seite auf Ihrer Website verweist, die den Zweck hat, Informationen \u00fcber das betreffende Bild bereitzustellen. Die Mediendatei \u00f6ffnet das Bild von selbst. Mit der letzten Option k\u00f6nnen Sie eine benutzerdefinierte URL f\u00fcr Ihr Bild hinzuf\u00fcgen.<\/li>\n<li><strong>Erweitert<\/strong> \u2013 in diesem Feld k\u00f6nnen Sie eine zus\u00e4tzliche CSS-Klasse hinzuf\u00fcgen und Ihre eigenen benutzerdefinierten Stile schreiben.<\/li>\n<\/ul>\n<p>Zus\u00e4tzliche Bildleistenoptionen umfassen Bildausrichtung (links, rechts oder zentriert ausrichten) und Blocktyp \u00e4ndern. Wenn Sie diese Option w\u00e4hlen, k\u00f6nnen Sie <strong>Ihren Block mit einem einzigen Mausklick in einen anderen kompatiblen Block umwandeln<\/strong>. Sie k\u00f6nnen beispielsweise Ihren Blocktyp in Galerie, Medien &amp; Text, Cover und Datei \u00e4ndern.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"Eine Anleitung zum WordPress Gutenberg-Bildblock\"><\/a><\/p>\n<p>Wenn Sie Ihr Bild auf die gleiche Weise bearbeiten m\u00f6chten wie im klassischen WordPress-Editor, k\u00f6nnen Sie dies ganz einfach tun, indem Sie auf das Stiftsymbol klicken, um das Bild in der WordPress-Medienbibliothek zu \u00f6ffnen.<\/p>\n<p>Das ist alles, was es mit dem standardm\u00e4\u00dfigen Bildblock zu tun hat, aber Sie sollten wissen, dass es auch einige erweiterte Optionen gibt.<\/p>\n<h2>Hinzuf\u00fcgen von Bildern mit Qi-Bl\u00f6cken f\u00fcr Gutenberg<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> ist eine reichhaltige Sammlung benutzerdefinierter Gutenberg-Bl\u00f6cke, mit denen Sie so viel mehr tun k\u00f6nnen (und bessere \u00e4sthetische Ergebnisse erzielen), als Sie es normalerweise mit Standardbl\u00f6cken tun w\u00fcrden. Die <strong>Sammlung kann kostenlos aus dem offiziellen WordPress-Repository heruntergeladen werden und bietet Ihnen einen wunderbaren Satz von 48 Bl\u00f6cken f\u00fcr alles, von kreativen und Showcase-Elementen bis hin zu Business und SEO<\/strong>. F\u00fcr diejenigen, die noch bessere Optionen und erweiterte Funktionen w\u00fcnschen, gibt es auch das <strong>Qi Blocks Premium-Paket mit 33 zus\u00e4tzlichen Bl\u00f6cken<\/strong>.<\/p>\n<p>Diesmal ist der Block, der uns hier interessiert, der <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Einzelbildblock<\/a>. Man k\u00f6nnte meinen, dass das Hinzuf\u00fcgen von Bildern zu Seiten und Beitr\u00e4gen das Einfachste ist, aber der Einzelbildblock f\u00fcr Gutenberg erm\u00f6glicht es Ihnen nicht nur, dies \u00fcberall auf Ihrer Website mit gr\u00f6\u00dfter Leichtigkeit zu tun, sondern bietet auch <strong>eine Reihe exklusiver Funktionen Optionen<\/strong>. Sie k\u00f6nnen beispielsweise verschiedene Bildaktionen ausw\u00e4hlen, Breite, H\u00f6he, R\u00e4nder und Ausrichtung anpassen, das Hover-Verhalten festlegen, die Lightbox aktivieren und vieles mehr.<\/p>\n<p>Ein weiterer erstaunlicher Block, der hier unsere Aufmerksamkeit verdient, ist <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, mit dem Sie zwei Bildabschnitte mit Bildern erstellen k\u00f6nnen, die sich beim Scrollen mit unterschiedlichen Geschwindigkeiten bewegen und eine aufregende Illusion von Tiefe erzeugen.<\/p>\n<p>Dann gibt es den <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bild-Hotspots-Block<\/a> mit Symbolen oder anderen Symbolen, die auf Bildern platziert sind und Informationen enth\u00fcllen, wenn der Benutzer dar\u00fcber f\u00e4hrt.<\/p>\n<p>Schlie\u00dflich kann Ihnen der <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image Slider-Block<\/a> dabei helfen, beeindruckende, ansprechende Slider mit Ihren ausgew\u00e4hlten Bildern zu erstellen und Ihren Seiten einen Hauch von Dynamik zu verleihen. Mit diesem Block ben\u00f6tigen Sie keine komplizierten, schwer anzupassenden Slider-Plugins mehr. Sie erhalten alles, was Sie brauchen, in einem einzigen, intuitiven und vollst\u00e4ndig anpassbaren Block.<\/p>\n<p>Wie wir gesehen haben, k\u00f6nnen Sie mit dem Bild-Block viel tun, egal ob Sie den Standard verwenden, der mit Gutenberg geliefert wird, oder ob Sie sich f\u00fcr eine Drittanbieterl\u00f6sung entscheiden, wie im Fall von Qi Blocks f\u00fcr Gutenberg. Bilder sind f\u00fcr jede Website sehr wichtig, da sie oft so viel mehr sagen und tun k\u00f6nnen als Worte. Dank Gutenberg war es nie einfacher, sie zu Ihren Posts und Seiten hinzuzuf\u00fcgen.<\/p>\n<p>Wir hoffen, dass Sie diesen Artikel hilfreich fanden. Wenn es Ihnen gefallen hat, k\u00f6nnen Sie sich gerne auch einige dieser Artikel ansehen!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In dieser kurzen Anleitung geben wir einen \u00dcberblick \u00fcber den Gutenberg Image Block und zeigen Ihnen alles, was Sie mit dieser n\u00fctzlichen Option tun k\u00f6nnen.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-367035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=367035"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367035\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=367035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=367035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=367035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}