{"id":10865,"date":"2026-04-16T14:11:39","date_gmt":"2026-04-16T14:11:39","guid":{"rendered":"\/de\/tutorials\/?p=10865"},"modified":"2026-04-16T14:11:41","modified_gmt":"2026-04-16T14:11:41","slug":"wordpress-gutenberg-editor","status":"publish","type":"post","link":"\/de\/tutorials\/wordpress-gutenberg-editor\/","title":{"rendered":"Was ist WordPress Gutenberg? Den Block-Editor verstehen"},"content":{"rendered":"<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"780\" height=\"454\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image.jpeg\" alt=\"\" class=\"wp-image-10866\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image.jpeg 780w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-300x175.jpeg 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-768x447.jpeg 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/figure><p class=\"wp-block-paragraph\">Wenn Sie WordPress noch nicht kennen, sollten Sie sich zuerst mit Gutenberg, dem Block-Editor, vertraut machen, um die Plattform effektiver zu verwalten. Er wurde als Ersatz f&uuml;r den klassischen Editor eingef&uuml;hrt und ist inzwischen ein zentraler Bestandteil der Website-Erstellung im Content-Management-System.<\/p><p class=\"wp-block-paragraph\">WordPress Gutenberg verwendet ein blockbasiertes Designsystem und ist dadurch f&uuml;r alle Erfahrungsstufen deutlich benutzerfreundlicher. Wenn Sie seine Funktionen und Gestaltungsm&ouml;glichkeiten verstehen, k&ouml;nnen Sie Ihre ideale Website erstellen, ohne programmieren zu m&uuml;ssen.<\/p><p class=\"wp-block-paragraph\">Ganz gleich, ob Sie einen pers&ouml;nlichen Blog oder eine mehrseitige Website erstellen: Diese Anleitung hilft Ihnen dabei, das Beste aus dem Block-Editor herauszuholen.<\/p><p>\n\n\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Was ist WordPress Gutenberg?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Gutenberg ist der Standard-Editor von WordPress, der den klassischen Editor ersetzt hat. Damit k&ouml;nnen Sie Inhalte ganz einfach erstellen und gestalten, indem Sie Bl&ouml;cke f&uuml;r verschiedene Website-Elemente wie Text, Bilder und Videos verwenden. Dank der Drag-and-Drop-Oberfl&auml;che ist Gutenberg einfach zu bedienen und gibt Ihnen mehr Flexibilit&auml;t, Ihre Website genau nach Ihren Vorstellungen zu gestalten.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\"><\/h2><p class=\"wp-block-paragraph\">In der WordPress-Community ist Gutenberg nicht nur ein Inhaltseditor &ndash; es ist Teil eines gr&ouml;&szlig;eren laufenden Projekts, das die gesamte Bearbeitung von Websites ver&auml;ndern soll. Das WordPress-Core-Team hat daf&uuml;r eine <a href=\"https:\/\/wordpress.org\/about\/roadmap\/\" target=\"_blank\" rel=\"noopener\">Roadmap<\/a> definiert:<\/p><ul class=\"wp-block-list\">\n<li><strong>Einfachere Bearbeitung.<\/strong> Der mit WordPress 5.0 eingef&uuml;hrte Gutenberg-Block-Editor bietet einen intuitiveren Ansatz f&uuml;r die Website-Erstellung.<\/li>\n\n\n\n<li><strong>Anpassung.<\/strong> WordPress 5.9 erg&auml;nzte vollst&auml;ndige Website-Bearbeitung, Blockmuster, ein Blockverzeichnis und blockbasierte Themes auf Grundlage der Gutenberg-Oberfl&auml;che.<\/li>\n\n\n\n<li><strong>Zusammenarbeit.<\/strong> Zuk&uuml;nftige Updates sollen die gemeinsame Erstellung von Inhalten vereinfachen und benutzerfreundlicher machen.<\/li>\n\n\n\n<li><strong>Mehrsprachigkeit.<\/strong> Das Team arbeitet daran, mehrsprachige Websites direkt in der Kernsoftware zu unterst&uuml;tzen.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>So funktioniert der Gutenberg-Editor<\/strong><\/h3><p class=\"wp-block-paragraph\">Der Gutenberg-Block-Editor von WordPress erleichtert das Hinzuf&uuml;gen und Bearbeiten verschiedener Elemente in Ihren Beitr&auml;gen und Seiten, indem er einzelne Inhaltsbl&ouml;cke verwendet. Jeder Block funktioniert als eigenst&auml;ndiges Element mit anpassbaren Einstellungen.<\/p><p class=\"wp-block-paragraph\">Der Einstieg in den Block-Editor ist einfach. Gehen Sie zu Ihrem WordPress-Dashboard und dann zu <strong>Seiten<\/strong> oder <strong>Beitr&auml;ge<\/strong> &rarr; <strong>Erstellen<\/strong>, um die Gutenberg-Oberfl&auml;che zu &ouml;ffnen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-14-1024x449.png\" alt=\"\" class=\"wp-image-10882\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-14.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-14-300x132.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-14-768x337.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Um einen Block hinzuzuf&uuml;gen, klicken Sie oben links auf das Symbol <strong>+<\/strong>, um alle verf&uuml;gbaren, nach Typ geordneten Optionen anzuzeigen. Ziehen Sie einen Block per Drag-and-Drop in den Editor und platzieren Sie ihn an der gew&uuml;nschten Stelle.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen jeden Block &uuml;ber die Werkzeugleiste oberhalb des Elements oder &uuml;ber das Einstellungsfeld auf der rechten Seite anpassen.<\/p><p class=\"wp-block-paragraph\">F&uuml;r ein schnelleres Design bietet Gutenberg <a href=\"https:\/\/www.hostinger.com\/tutorials\/wordpress-block-patterns\/\">Blockmuster<\/a> &ndash; vorgefertigte Kombinationen aus Bl&ouml;cken, etwa Spalten mit Bildern und Buttons.<\/p><p class=\"wp-block-paragraph\">Wenn Sie technisch versiert sind, k&ouml;nnen Sie sogar eigene <a href=\"https:\/\/www.hostinger.com\/tutorials\/wordpress-blocks\/\">WordPress-Bl&ouml;cke<\/a> oder Blockmuster erstellen und mit anderen teilen.<\/p><h2 class=\"wp-block-heading\" id=\"h-gutenberg-editor-vs-klassischer-editor\"><strong>Gutenberg-Editor vs. klassischer Editor<\/strong><\/h2><p class=\"wp-block-paragraph\">Um den Block-Editor besser zu verstehen, vergleichen wir ihn mit seinem Vorg&auml;nger und sehen uns an, welche Verbesserungen er mitbringt.<\/p><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"514\" height=\"233\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-24.png\" alt=\"\" class=\"wp-image-10905\" style=\"width:743px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-24.png 514w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-24-300x136.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure><p class=\"wp-block-paragraph\">Der klassische WordPress-Editor, der auf dem TinyMCE-HTML-Editor nach dem Prinzip What You See Is What You Get (WYSIWYG) basiert, bietet eine unkomplizierte, vertraute Oberfl&auml;che zum Erstellen und Bearbeiten von Beitr&auml;gen und Seiten. Er orientiert sich an klassischen Textverarbeitungsprogrammen wie Microsoft Word und bietet Fett, Kursiv und Listen f&uuml;r eine schnelle Formatierung.<\/p><p class=\"wp-block-paragraph\">&Uuml;ber den visuellen Editor k&ouml;nnen Nutzer Medien &uuml;ber den integrierten Bild-Uploader hochladen. Wenn Sie zum Texteditor wechseln, k&ouml;nnen Sie benutzerdefinierten HTML-Code zu Beitr&auml;gen und Seiten hinzuf&uuml;gen.<\/p><p class=\"wp-block-paragraph\">Der klassische Editor ist zwar zuverl&auml;ssig und einfach zu bedienen, bietet aber nur wenig Flexibilit&auml;t beim Design. F&uuml;r komplexe Layouts oder fortgeschrittene Designs sind oft zus&auml;tzliche Plugins oder benutzerdefiniertes HTML erforderlich. Das Hinzuf&uuml;gen von Bildern und Videos wirkte umst&auml;ndlich. Au&szlig;erdem k&ouml;nnen Sie keine Echtzeitvorschau Ihrer Live-Inhalte sehen.<\/p><p class=\"wp-block-paragraph\">Hier kommt der Gutenberg-Block-Editor ins Spiel, um diese Einschr&auml;nkungen zu beheben.<\/p><p class=\"wp-block-paragraph\">Statt auf ein einzelnes Textfeld zu setzen, verwendet Gutenberg einzelne Bl&ouml;cke f&uuml;r verschiedene Elemente, einschlie&szlig;lich Medien. Dieser Ansatz macht das Seitendesign visueller und intuitiver.<\/p><p class=\"wp-block-paragraph\">Die Drag-and-Drop-Funktion macht Shortcodes und zus&auml;tzliche Plugins &uuml;berfl&uuml;ssig, sodass Sie benutzerdefinierte Layouts erstellen und die Ergebnisse in Echtzeit sehen k&ouml;nnen. Sie k&ouml;nnen au&szlig;erdem Blockmuster und deren Layouts an Ihre Anforderungen anpassen.<\/p><p class=\"wp-block-paragraph\">Mit der vollst&auml;ndigen Website-Bearbeitung k&ouml;nnen Sie jetzt Header, Footer und andere Website-Elemente in Beitr&auml;gen und Seiten gestalten. Au&szlig;erdem ist Gutenberg entwicklerfreundlich und erm&ouml;glicht technisch versierten Nutzern, benutzerdefinierte Bl&ouml;cke und wiederverwendbare Vorlagen zu erstellen.<\/p><p class=\"wp-block-paragraph\">Hier ist eine Zusammenfassung der Unterschiede zwischen dem Gutenberg-Editor und dem klassischen Editor:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td><strong>Gutenberg-Editor<\/strong><\/td><td><strong>Klassischer Editor<\/strong><\/td><\/tr><tr><td><strong>Editor-Oberfl&auml;che<\/strong><\/td><td>Reaktionsschnell und intuitiv mit selbsterkl&auml;renden Men&uuml;einstellungen.<\/td><td>Einfache Textoberfl&auml;che, &auml;hnlich wie bei einer Online-Textverarbeitung wie Google Docs.<\/td><\/tr><tr><td><strong>Inhaltserstellung<\/strong><\/td><td>Verwendet Bl&ouml;cke mit integrierten Inhalts- und Anpassungsfunktionen.<\/td><td>Bietet eine leere Fl&auml;che zum Schreiben von Beitr&auml;gen und Seiten.<\/td><\/tr><tr><td><strong>Benutzerfreundlichkeit<\/strong><\/td><td>Verwendet Drag-and-drop-Bl&ouml;cke. Programmierung ist optional.<\/td><td>Funktioniert wie Google Docs, ist aber mit grundlegenden HTML-Kenntnissen einfacher zu nutzen.<\/td><\/tr><tr><td><strong>Funktionen<\/strong><\/td><td>Bietet Drag-and-drop-Bl&ouml;cke, Echtzeitvorschauen und einfache Anpassungen f&uuml;r jedes Kenntnisniveau.<\/td><td>Bietet ein einfaches Textfeld mit grundlegenden Formatierungswerkzeugen.<\/td><\/tr><tr><td><strong>Vorteile<\/strong><\/td><td>Bietet flexibles Design, Drag-and-drop-Bl&ouml;cke, Echtzeitvorschauen und wiederverwendbare Vorlagen.<\/td><td>Einfache, vertraute Oberfl&auml;che mit leichter Formatierung und minimalem Lernaufwand.<\/td><\/tr><tr><td><strong>Nachteile<\/strong><\/td><td>Es braucht etwas &Uuml;bung, um sich daran zu gew&ouml;hnen.<\/td><td>Es fehlen Flexibilit&auml;t beim Design, visuelle Layout-Werkzeuge und moderne Anpassungsfunktionen.<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">Der Gutenberg-Block-Editor ist in WordPress 5.0 und neueren Versionen vorinstalliert. Wenn Sie eine &auml;ltere Version verwenden, k&ouml;nnen Sie weiterhin darauf zugreifen, indem Sie das <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg-Plugin<\/a> installieren. Wir empfehlen jedoch, auf die neueste WordPress-Version zu aktualisieren, um die Sicherheit zu optimieren.<\/p><p class=\"wp-block-paragraph\">Sie vermeiden den Aufwand manueller Updates, indem Sie zu Hostinger wechseln. <a href=\"https:\/\/www.hostinger.com\/wordpress-hosting\">Die Managed-WordPress-Tarife von Hostinger<\/a> enthalten <strong>Smart WordPress Auto Updates<\/strong>, sodass Ihre Website nach der Aktivierung sicher und aktuell bleibt. Da jedes WordPress-Update in der Regel Verbesserungen f&uuml;r Gutenberg enth&auml;lt, sparen Sie mit aktivierten Smart Updates Zeit.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-111781\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-so-verwenden-sie-den-wordpress-gutenberg-block-editor\"><strong>So verwenden Sie den WordPress Gutenberg-Block-Editor<\/strong><\/h2><p class=\"wp-block-paragraph\">Sehen wir uns die wichtigsten <a href=\"https:\/\/www.hostinger.com\/tutorials\/wordpress-hidden-features\/\">WordPress-Funktionen<\/a> und die Schritte an, mit denen Sie Gutenberg f&uuml;r Ihre Website verwenden k&ouml;nnen.<\/p><h3 class=\"wp-block-heading\"><strong>So f&uuml;gen Sie einen neuen Block hinzu<\/strong><\/h3><p class=\"wp-block-paragraph\">Der erste Schritt bei der Verwendung des Block-Editors besteht darin, einen neuen Block hinzuzuf&uuml;gen. Daf&uuml;r gibt es mehrere M&ouml;glichkeiten.<\/p><p class=\"wp-block-paragraph\">Wenn Sie den Gutenberg-Editor &ouml;ffnen, sehen Sie, dass bereits ein Titelblock vorhanden ist. Um einen weiteren Block hinzuzuf&uuml;gen, bewegen Sie den Cursor einfach darunter und klicken auf das schwarze <strong>+<\/strong>-Symbol, um aus den verf&uuml;gbaren Optionen auszuw&auml;hlen. Wenn Sie den ben&ouml;tigten Block nicht sehen, klicken Sie auf <strong>Alle durchsuchen<\/strong>, um weitere anzuzeigen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-1024x422.png\" alt=\"\" class=\"wp-image-10885\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-300x124.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-768x317.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Alternativ k&ouml;nnen Sie oben links den Block-Inserter umschalten, der mit einer blauen <strong>+<\/strong>-Schaltfl&auml;che markiert ist. Dort k&ouml;nnen Sie auf einen Block klicken, um ihn an der Position Ihres Cursors einzuf&uuml;gen, oder ihn zwischen vorhandene Bl&ouml;cke im Editor ziehen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-1024x422.png\" alt=\"\" class=\"wp-image-10884\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-300x124.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-15-768x317.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Eine weitere praktische Methode ist, einen Schr&auml;gstrich (<strong>\/<\/strong>) gefolgt vom Namen des Blocks einzugeben. Sobald er angezeigt wird, dr&uuml;cken Sie die <strong>Eingabetaste<\/strong>, um ihn Ihrer Seite oder Ihrem Beitrag hinzuzuf&uuml;gen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"538\" height=\"556\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-5.png\" alt=\"\" class=\"wp-image-10876\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-5.png 538w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-5-290x300.png 290w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/figure><p class=\"wp-block-paragraph\">Es stehen sechs Arten von Bl&ouml;cken zur Auswahl &ndash; Text, Medien, Design, Widgets, Theme und Einbettungen. Wenn der ben&ouml;tigte Block nicht verf&uuml;gbar ist, schl&auml;gt der Inserter Optionen aus dem <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-directory\/\" target=\"_blank\" rel=\"noopener\">Gutenberg-Block-Verzeichnis<\/a> vor, das Teil des WordPress-Plugin-Verzeichnisses ist.<\/p><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"291\" height=\"636\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-25.png\" alt=\"\" class=\"wp-image-10908\" style=\"width:504px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-25.png 291w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-25-137x300.png 137w\" sizes=\"(max-width: 291px) 100vw, 291px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So passen Sie Bl&ouml;cke an<\/strong><\/h3><p class=\"wp-block-paragraph\">Das Anpassen von Gutenberg-Bl&ouml;cken in WordPress ist einfach. Klicken Sie einfach im Editor auf einen Block, dann erscheint seine Werkzeugleiste oben.<\/p><p class=\"wp-block-paragraph\">Die Werkzeugleiste &auml;ndert sich je nach ausgew&auml;hltem Block. Wenn Sie zum Beispiel mit einem Tabellenblock arbeiten, sehen Sie Optionen zum Anpassen der Textausrichtung oder zum Hinzuf&uuml;gen von Zeilen und Spalten.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"867\" height=\"548\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-4.png\" alt=\"\" class=\"wp-image-10873\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-4.png 867w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-4-300x190.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-4-768x485.png 768w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/figure><p class=\"wp-block-paragraph\">Sie k&ouml;nnen auch auf weitere Einstellungen zugreifen, indem Sie oben rechts im Editor auf das Zahnradsymbol klicken. Dadurch &ouml;ffnet sich ein Bereich in der rechten Seitenleiste, in dem Sie Stile anpassen, Abmessungen &auml;ndern und die Typografie &auml;ndern k&ouml;nnen. Fortgeschrittene Nutzer k&ouml;nnen benutzerdefiniertes HTML oder CSS hinzuf&uuml;gen, um beliebige &Auml;nderungen vorzunehmen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-7-1024x445.png\" alt=\"\" class=\"wp-image-10871\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-7.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-7-300x130.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-7-768x333.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So ordnen Sie Bl&ouml;cke an<\/strong><\/h3><p class=\"wp-block-paragraph\">Einer der gr&ouml;&szlig;ten Vorteile des Wechsels zu Gutenberg ist, wie einfach sich Elemente anordnen lassen. Um einen Block zu verschieben, klicken Sie einfach darauf, w&auml;hlen in der Werkzeugleiste das Symbol mit den sechs Punkten aus und ziehen ihn an die gew&uuml;nschte Stelle.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"516\" height=\"331\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-26.png\" alt=\"\" class=\"wp-image-10909\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-26.png 516w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-26-300x192.png 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/figure><p class=\"wp-block-paragraph\">Sie k&ouml;nnen auch mehrere Bl&ouml;cke gleichzeitig verschieben. Halten Sie die <strong>Umschalttaste<\/strong> gedr&uuml;ckt, klicken Sie auf den ersten Block und w&auml;hlen Sie dann die weiteren aus, die Sie einbeziehen m&ouml;chten. Sobald sie vor&uuml;bergehend gruppiert sind, verwenden Sie das Symbol mit den sechs Punkten, um sie gemeinsam zu ziehen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"700\" height=\"452\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6.png\" alt=\"\" class=\"wp-image-10890\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6.png 700w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6-300x194.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So gruppieren Sie mehrere Bl&ouml;cke<\/strong><\/h3><p class=\"wp-block-paragraph\">Angenommen, Sie erstellen auf einer Homepage einen Abschnitt f&uuml;r Services, in dem jedes Element ein Bild, eine &Uuml;berschrift und eine Beschreibung enth&auml;lt, die alle sauber ausgerichtet sind. Das Gruppieren von Bl&ouml;cken eignet sich daf&uuml;r ideal, weil Sie so den gesamten Abschnitt als eine Einheit verwalten k&ouml;nnen.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen Bl&ouml;cke mit den Bl&ouml;cken <strong>&bdquo;Gruppe&ldquo;<\/strong>, <strong>&bdquo;Spalten&ldquo;<\/strong>, <strong>&bdquo;Zeile&ldquo;<\/strong> oder <strong>&bdquo;Stapel&ldquo;<\/strong> aus dem Bereich <strong>&bdquo;Design&ldquo;<\/strong> im Block-Inserter gruppieren. Diese Designbl&ouml;cke erstellen verschachtelte Bl&ouml;cke &ndash; also Bl&ouml;cke innerhalb eines &uuml;bergeordneten Blocks &ndash; und geben Ihrem Layout eine klare Struktur.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"440\" height=\"684\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-2.png\" alt=\"\" class=\"wp-image-10875\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-2.png 440w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-2-193x300.png 193w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><\/figure><p class=\"wp-block-paragraph\">Zum Beispiel kann ein Spaltenblock als &uuml;bergeordneter Block dienen und untergeordnete Bl&ouml;cke wie Text und Bilder enthalten, die im Editor darunter einger&uuml;ckt angezeigt werden.<\/p><p class=\"wp-block-paragraph\">So verwenden Sie den Block &bdquo;<strong>Spalten<\/strong>&ldquo;:<\/p><ol class=\"wp-block-list\">\n<li>&Ouml;ffnen Sie den Block-Inserter &rarr; <strong>Design<\/strong> &rarr; <strong>Spalten<\/strong>.<\/li>\n\n\n\n<li>W&auml;hlen Sie ein vorgefertigtes Layout aus oder erstellen Sie ein eigenes.<\/li>\n<\/ol><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"522\" height=\"228\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Screenshot-2026-04-16-at-16.03.06.png\" alt=\"\" class=\"wp-image-10919\" style=\"width:747px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Screenshot-2026-04-16-at-16.03.06.png 522w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Screenshot-2026-04-16-at-16.03.06-300x131.png 300w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/figure><p class=\"wp-block-paragraph\">3. F&uuml;gen Sie innerhalb jeder Spalte Bl&ouml;cke hinzu, indem Sie auf das <strong>+<\/strong>-Symbol klicken.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-21-1024x450.png\" alt=\"\" class=\"wp-image-10899\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-21.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-21-300x132.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-21-768x337.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">4. Passen Sie das Layout und die Ausrichtung &uuml;ber die Symbolleiste oder die Einstellungen in der Seitenleiste an.<\/p><p class=\"wp-block-paragraph\">In der Seitenleiste finden Sie Optionen wie <strong>&bdquo;Innere Bl&ouml;cke verwenden die Inhaltsbreite&ldquo;<\/strong>. Aktivieren Sie diese Option, damit die inneren Bl&ouml;cke in die Breite des &uuml;bergeordneten Blocks passen und ein stimmiges Design entsteht.<\/p><h3 class=\"wp-block-heading\"><strong>So f&uuml;gen Sie &Uuml;berschriften und Text hinzu<\/strong><\/h3><p class=\"wp-block-paragraph\">Mit Absatz- und &Uuml;berschriftenbl&ouml;cken k&ouml;nnen Sie Beitr&auml;ge oder Seiten um Text erg&auml;nzen.<\/p><p class=\"wp-block-paragraph\">Um einen Absatz hinzuzuf&uuml;gen, beginnen Sie direkt im Gutenberg-Editor zu tippen. Alternativ k&ouml;nnen Sie den Block-Inserter verwenden und <strong>&bdquo;Absatz&ldquo;<\/strong> ausw&auml;hlen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"421\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-8-1024x421.png\" alt=\"\" class=\"wp-image-10870\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-8.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-8-300x123.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-8-768x316.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Dieser Block verf&uuml;gt &uuml;ber eine Symbolleiste mit grundlegenden Optionen wie Textausrichtung, Fettschrift, Kursivschrift und dem Hinzuf&uuml;gen von Links. Sie k&ouml;nnen sogar zus&auml;tzliche Elemente wie Fu&szlig;noten, Hervorhebungen, Inline-Bilder sowie tief- und hochgestellten Text einf&uuml;gen. &Uuml;ber die Einstellungen in der Seitenleiste k&ouml;nnen Sie Textfarbe, Typografie und Abmessungen f&uuml;r ein professionelles Erscheinungsbild anpassen.<\/p><p class=\"wp-block-paragraph\">&Uuml;berschriftenbl&ouml;cke helfen dabei, Ihre Inhalte zu strukturieren, damit Leser und Suchmaschinen dem Aufbau leichter folgen k&ouml;nnen. Um einen solchen Block hinzuzuf&uuml;gen, verwenden Sie eine der Methoden zum Hinzuf&uuml;gen von Bl&ouml;cken und w&auml;hlen Sie <strong>&bdquo;&Uuml;berschrift&ldquo;<\/strong> aus. W&auml;hlen Sie anschlie&szlig;end in der Symbolleiste die &Uuml;berschriftenebene (H1 bis H6).<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"700\" height=\"452\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6.png\" alt=\"\" class=\"wp-image-10889\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6.png 700w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-6-300x194.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><p class=\"wp-block-paragraph\">Wie beim Absatzblock k&ouml;nnen Sie auch beim &Uuml;berschriftenblock Ausrichtung, Breite und weitere Attribute &uuml;ber die Symbolleiste oder die Einstellungen in der Seitenleiste anpassen.<\/p><h3 class=\"wp-block-heading\"><strong>So f&uuml;gen Sie Bilder und Medien hinzu<\/strong><\/h3><p class=\"wp-block-paragraph\">Mit dem Gutenberg-Editor k&ouml;nnen Sie Ihren Beitr&auml;gen und Seiten ganz einfach verschiedene Medientypen hinzuf&uuml;gen, etwa Bilder, Audio, Videos und Dateien. Au&szlig;erdem stehen einige dynamische Bl&ouml;cke zur Verf&uuml;gung, darunter:<\/p><ul class=\"wp-block-list\">\n<li><strong>Medien &amp; Text.<\/strong> Kombiniert Medien und Text nebeneinander f&uuml;r ein besseres Storytelling.<\/li>\n\n\n\n<li><strong>Bildergalerie.<\/strong> Zeigt mehrere Bilder in einem Bereich an, ideal f&uuml;r Portfolios und Fotografie-Websites.<\/li>\n\n\n\n<li><strong>Titelbild.<\/strong> F&uuml;gt Bildern oder Videos Text&uuml;berlagerungen hinzu, ideal f&uuml;r auff&auml;llige Header oder Hervorhebungen.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"439\" height=\"570\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-1.png\" alt=\"\" class=\"wp-image-10867\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-1.png 439w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-1-231x300.png 231w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/figure><p class=\"wp-block-paragraph\">Um diese Bl&ouml;cke zu verwenden, w&auml;hlen Sie einen aus der Blockbibliothek aus und laden Sie Ihre Medien hoch oder w&auml;hlen Sie Dateien aus der Mediathek aus. Alternativ k&ouml;nnen Sie URLs hinzuf&uuml;gen, um Dateien wie Audio oder Bilder einzuf&uuml;gen. Bei Bild- und Galerie-Bl&ouml;cken k&ouml;nnen Sie mehrere Dateien gleichzeitig per Drag-and-drop hinzuf&uuml;gen, um Zeit zu sparen.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-12-1024x439.png\" alt=\"\" class=\"wp-image-10877\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-12.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-12-300x128.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-12-768x329.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Jeder Block hat eigene Einstellungen. Der <strong>Bild<\/strong>-Block erm&ouml;glicht es Ihnen zum Beispiel, Ecken, Rahmen und Radius anzupassen, w&auml;hrend der <strong>Medien-&amp;-Text<\/strong>-Block Optionen f&uuml;r Ausrichtung, Stapelung auf Mobilger&auml;ten, Farben und Typografie bietet.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-1024x477.png\" alt=\"\" class=\"wp-image-10897\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-300x140.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-768x358.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Sie brauchen mehr visuelle Inhalte? &Ouml;ffnen Sie den Block-Inserter und klicken Sie auf <strong>Medien<\/strong> &rarr; <a href=\"https:\/\/openverse.org\/\" target=\"_blank\" rel=\"noopener\">Openverse<\/a>, um die Sammlung frei lizenzierter Bilder der Plattform zu durchsuchen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"712\" height=\"768\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-16.png\" alt=\"\" class=\"wp-image-10888\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-16.png 712w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-16-278x300.png 278w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So betten Sie Medien ein<\/strong><\/h3><p class=\"wp-block-paragraph\">Standardm&auml;&szlig;ig unterst&uuml;tzt der WordPress-Block-Editor verschiedene Medientypen von unterschiedlichen Diensten.<\/p><p class=\"wp-block-paragraph\">Hier sind einige Beispiele f&uuml;r spezielle Bl&ouml;cke zum Einbetten von Inhalten:<\/p><ul class=\"wp-block-list\">\n<li>Videos von YouTube, TikTok, Vimeo, Dailymotion und TED.<\/li>\n\n\n\n<li>Bilder von Instagram, Flickr, Imgur und Pinterest.<\/li>\n\n\n\n<li>Beitr&auml;ge von Facebook, X, Bluesky und Reddit.<\/li>\n\n\n\n<li>Audiodateien von Spotify, SoundCloud und Mixcloud.<\/li>\n\n\n\n<li>Dokumente von Scribd und Issuu.<\/li>\n\n\n\n<li>Umfragen und Befragungen von Crowdsignal.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">So betten Sie Medien im Gutenberg-Editor ein:<\/p><ul class=\"wp-block-list\">\n<li>1. &Ouml;ffnen Sie den Block-Inserter und scrollen Sie nach unten zum Abschnitt <strong>Einbettungen<\/strong>.<\/li>\n\n\n\n<li>2. W&auml;hlen Sie Ihre Medienquelle aus.<\/li>\n\n\n\n<li>3. F&uuml;gen Sie die Medien-URL ein und w&auml;hlen Sie Einbetten aus.<\/li>\n\n\n\n<li>4. Die Seite oder der Beitrag zeigt nun den eingebetteten Inhalt an.<\/li>\n<\/ul><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"513\" height=\"232\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-27.png\" alt=\"\" class=\"wp-image-10912\" style=\"width:840px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-27.png 513w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-27-300x136.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So erstellen Sie Muster<\/strong><\/h3><p class=\"wp-block-paragraph\">Muster, fr&uuml;her als wiederverwendbare Bl&ouml;cke bezeichnet, sind praktische Inhaltsbausteine, die Sie auf Ihrer gesamten Website einsetzen k&ouml;nnen, um Zeit zu sparen und ein einheitliches Design &uuml;ber Ihre Seiten und Beitr&auml;ge hinweg beizubehalten.<\/p><p class=\"wp-block-paragraph\">Es gibt zwei Arten von Mustern:<\/p><ul class=\"wp-block-list\">\n<li><strong>Synchronisierte Muster.<\/strong> Das sind wiederverwendbare Inhaltsbl&ouml;cke, die auf Ihrer gesamten Website miteinander verkn&uuml;pft sind. Alle &Auml;nderungen, die Sie an einem synchronisierten Muster vornehmen, werden automatisch &uuml;berall aktualisiert, wo das Muster verwendet wird &ndash; ideal f&uuml;r konsistente Elemente wie Banner, Call-to-Action-Bereiche oder Header.<\/li>\n\n\n\n<li><strong>Nicht synchronisierte Muster.<\/strong> Diese Muster funktionieren als eigenst&auml;ndige Kopien. Wenn Sie ein nicht synchronisiertes Muster in einen Beitrag oder eine Seite einf&uuml;gen, hat das keine Auswirkungen auf andere Instanzen. Das ist n&uuml;tzlich, wenn Sie ein Design wiederverwenden, den Inhalt aber f&uuml;r bestimmte Seiten anpassen m&ouml;chten.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">So erstellen Sie eines:<\/p><ol class=\"wp-block-list\">\n<li>Klicken Sie auf <strong>Dokument&uuml;bersicht<\/strong> &rarr; <strong>Listenansicht<\/strong>. Halten Sie die Umschalttaste gedr&uuml;ckt und w&auml;hlen Sie die Abschnitte aus, die Sie als Muster speichern m&ouml;chten.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61b2fcbf92f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61b2fcbf92f\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-blocks-pattern.png\/w=1024,h=1024,fit=scale-down\" alt=\"Selecting blocks for a pattern in Gutenberg\n\" class=\"wp-image-119378\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><br><\/p><p class=\"wp-block-paragraph\">2. Klicken Sie in der Symbolleiste auf die Schaltfl&auml;che <strong>Optionen<\/strong> und w&auml;hlen Sie <strong>Muster erstellen<\/strong> aus.<\/p><ol class=\"wp-block-list\"><\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"863\" height=\"679\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-18.png\" alt=\"\" class=\"wp-image-10887\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-18.png 863w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-18-300x236.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-18-768x604.png 768w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><\/figure><p class=\"wp-block-paragraph\">3. Geben Sie Ihrem Muster einen Namen und entscheiden Sie, ob es synchronisiert oder nicht synchronisiert sein soll. Klicken Sie dann auf <strong>Erstellen<\/strong>.<\/p><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"353\" height=\"368\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-29.png\" alt=\"\" class=\"wp-image-10915\" style=\"width:499px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-29.png 353w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-29-288x300.png 288w\" sizes=\"(max-width: 353px) 100vw, 353px\" \/><\/figure><p class=\"wp-block-paragraph\">Um das Muster zu verwenden, &ouml;ffnen Sie den Block-Inserter und gehen Sie zu <strong>Muster<\/strong> &rarr; <strong>Meine Muster<\/strong>. Sie k&ouml;nnen auch direkt im Editor einen Schr&auml;gstrich (<strong>\/<\/strong>) gefolgt vom Blocknamen eingeben.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"811\" height=\"474\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-13.png\" alt=\"\" class=\"wp-image-10894\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-13.png 811w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-13-300x175.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-13-768x449.png 768w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/figure><p class=\"wp-block-paragraph\">Auch das Bearbeiten eines vorhandenen Musters ist unkompliziert. Klicken Sie einfach auf das Muster und dann auf <strong>Original bearbeiten<\/strong>. Nehmen Sie die &Auml;nderungen vor und klicken Sie auf <strong>Speichern<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-20-1024x434.png\" alt=\"\" class=\"wp-image-10883\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-20.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-20-300x127.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-20-768x326.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Um alle vorhandenen Muster zu verwalten, klicken Sie oben rechts im Editor auf die Schaltfl&auml;che <strong>Optionen<\/strong> und w&auml;hlen Sie <strong>Muster verwalten<\/strong> aus. Dadurch gelangen Sie zum <strong>Website-Editor<\/strong>, in dem Sie Standardmuster und benutzerdefinierte Muster bearbeiten oder gesammelt verwalten k&ouml;nnen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"514\" height=\"210\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-30.png\" alt=\"\" class=\"wp-image-10916\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-30.png 514w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-30-300x123.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure><p class=\"wp-block-paragraph\">M&ouml;chten Sie ein Muster auf einer Seite oder in einem Beitrag verwenden, ohne andere zu beeinflussen? &Ouml;ffnen Sie das Drei-Punkte-Men&uuml; in der Werkzeugleiste des Blocks und w&auml;hlen Sie <strong>Muster l&ouml;sen<\/strong> aus. Dadurch wird der Block unabh&auml;ngig, sodass &Auml;nderungen nicht auf der gesamten Website synchronisiert werden.<\/p><p class=\"wp-block-paragraph\">In unserem Leitfaden zu <a href=\"https:\/\/www.hostinger.com\/tutorials\/wordpress-block-patterns\/\">WordPress-Blockmustern<\/a> finden Sie Tipps zur Verwendung und Anpassung von Blockmustern.<\/p><h3 class=\"wp-block-heading\"><strong>So verwenden Sie Tastaturk&uuml;rzel in Gutenberg<\/strong><\/h3><p class=\"wp-block-paragraph\">Tastaturk&uuml;rzel in Gutenberg sind eine hervorragende M&ouml;glichkeit, Ihren Workflow zu beschleunigen und sich auf die Erstellung von Inhalten zu konzentrieren. Mit diesen praktischen Tastenkombinationen k&ouml;nnen Sie Aufgaben im WordPress-Block-Editor ausf&uuml;hren, ohne sich durch Men&uuml;s oder Schaltfl&auml;chen klicken zu m&uuml;ssen.<\/p><p class=\"wp-block-paragraph\">Hier finden Sie eine Tabelle mit einigen der n&uuml;tzlichsten Tastaturk&uuml;rzel. Die vollst&auml;ndige Liste finden Sie auch, indem Sie auf das Drei-Punkte-Symbol oben rechts im Editor klicken und <strong>Tastaturk&uuml;rzel<\/strong> ausw&auml;hlen.<\/p><p class=\"wp-block-paragraph\">Wenn Sie macOS verwenden, ersetzen Sie <strong>Ctrl<\/strong> durch <strong>Command (&#8984;)<\/strong> und <strong>Alt<\/strong> durch <strong>Option (&#8997;)<\/strong>.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Aktion<\/strong><\/td><td><strong>Tastaturk&uuml;rzel<\/strong><\/td><\/tr><tr><td>Alle Tastaturk&uuml;rzel anzeigen<\/td><td>Shift + Alt + H<\/td><\/tr><tr><td><strong>Globale Tastaturk&uuml;rzel<\/strong><\/td><td><\/td><\/tr><tr><td>Die Befehlspalette &ouml;ffnen<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Zwischen visuellem Editor und Code-Editor wechseln<\/td><td>Ctrl + Shift + Alt + M<\/td><\/tr><tr><td>Ablenkungsfreien Modus aktivieren<\/td><td>Ctrl + Shift + \\<\/td><\/tr><tr><td>Vollbildmodus aktivieren<\/td><td>Ctrl + Shift + Alt + F<\/td><\/tr><tr><td>Die Listenansicht der Bl&ouml;cke &ouml;ffnen<\/td><td>Shift + Alt + O<\/td><\/tr><tr><td>Die Einstellungsseitenleiste anzeigen oder ausblenden<\/td><td>Ctrl + Shift + ,<\/td><\/tr><tr><td>Zum n&auml;chsten Bereich des Editors navigieren<\/td><td>Ctrl + ` oder Shift + Alt + N<\/td><\/tr><tr><td>Zum vorherigen Bereich des Editors navigieren<\/td><td>Ctrl + Shift + ` oder Shift + Alt + P<\/td><\/tr><tr><td>Zur n&auml;chstgelegenen Werkzeugleiste navigieren<\/td><td>Alt + F10<\/td><\/tr><tr><td>&Auml;nderungen speichern<\/td><td>Ctrl + S<\/td><\/tr><tr><td>Letzte &Auml;nderungen r&uuml;ckg&auml;ngig machen<\/td><td>Ctrl + Z<\/td><\/tr><tr><td>Die letzte R&uuml;ckg&auml;ngig-Aktion wiederholen<\/td><td>Ctrl + Shift + Z<\/td><\/tr><tr><td><strong>Tastaturk&uuml;rzel f&uuml;r die Auswahl<\/strong><\/td><td><\/td><\/tr><tr><td>Beim Tippen den gesamten Text ausw&auml;hlen<\/td><td>Ctrl + A<\/td><\/tr><tr><td>Auswahl aufheben<\/td><td>Escape<\/td><\/tr><tr><td><strong>Tastaturk&uuml;rzel f&uuml;r Bl&ouml;cke<\/strong><\/td><td><\/td><\/tr><tr><td>Den ausgew&auml;hlten Block duplizieren<\/td><td>Ctrl + Shift + D<\/td><\/tr><tr><td>Den ausgew&auml;hlten Block l&ouml;schen<\/td><td>Shift + Alt + Z<\/td><\/tr><tr><td>Vor dem ausgew&auml;hlten Block einen neuen Block einf&uuml;gen<\/td><td>Ctrl + Alt + T<\/td><\/tr><tr><td>Nach dem ausgew&auml;hlten Block einen neuen Block einf&uuml;gen<\/td><td>Ctrl + Alt + Y<\/td><\/tr><tr><td>Auswahl l&ouml;schen<\/td><td>Entf oder R&uuml;cktaste<\/td><\/tr><tr><td>Den ausgew&auml;hlten Block nach oben verschieben<\/td><td>Ctrl + Shift + Alt + T<\/td><\/tr><tr><td>Den ausgew&auml;hlten Block nach unten verschieben<\/td><td>Ctrl + Shift + Alt + Y<\/td><\/tr><tr><td>Den Blocktyp nach dem Hinzuf&uuml;gen eines neuen Absatzes &auml;ndern<\/td><td>\/<\/td><\/tr><tr><td><strong>Textformatierung<\/strong><\/td><td><\/td><\/tr><tr><td>Markierten Text fett formatieren<\/td><td>Ctrl + B<\/td><\/tr><tr><td>Markierten Text kursiv formatieren<\/td><td>Ctrl + I<\/td><\/tr><tr><td>Markierten Text in einen Link umwandeln<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Link entfernen<\/td><td>Ctrl + Shift + K<\/td><\/tr><tr><td>Markierten Text unterstreichen<\/td><td>Ctrl + U<\/td><\/tr><tr><td>Markierten Text durchstreichen<\/td><td>Shift + Alt + D<\/td><\/tr><tr><td>Markierten Text in Inline-Code umwandeln<\/td><td>Shift + Alt + X<\/td><\/tr><tr><td>Ausgew&auml;hlte &Uuml;berschrift in einen Absatz umwandeln<\/td><td>Shift + Alt + 0<\/td><\/tr><tr><td>Ausgew&auml;hlten Absatz oder ausgew&auml;hlte &Uuml;berschrift in eine &Uuml;berschrift der Ebene eins bis sechs umwandeln<\/td><td>Shift + Alt + 1-6<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\"><strong>So verwenden Sie die Blocklistenansicht<\/strong><\/h3><p class=\"wp-block-paragraph\">Die Blocklistenansicht im Gutenberg-Editor bietet Ihnen eine baumartige &Uuml;bersicht &uuml;ber alle Bl&ouml;cke in Ihrem Beitrag oder auf Ihrer Seite. Sie ist besonders n&uuml;tzlich, um in langen Dokumenten mit vielen verschachtelten Bl&ouml;cken zu navigieren.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen die <strong>Blocklistenansicht<\/strong> &ouml;ffnen, indem Sie oben links im Editor auf das Symbol <strong>&bdquo;Dokument&uuml;bersicht&ldquo;<\/strong> (drei &uuml;bereinanderliegende Linien) klicken oder die Tastenkombination <strong>Shift + Alt + O<\/strong> verwenden. Klicken Sie dort einfach auf einen beliebigen Block in der Liste, um direkt zu seiner Position im Bearbeitungsbereich zu springen &ndash; unabh&auml;ngig davon, wie tief er verschachtelt ist.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-1024x477.png\" alt=\"\" class=\"wp-image-10896\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-300x140.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-17-768x358.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Neben der Blocklistenansicht befindet sich die <strong>Gliederung<\/strong>, die Ihnen einen schnellen &Uuml;berblick &uuml;ber die Struktur Ihres Dokuments gibt, einschlie&szlig;lich der &Uuml;berschriften und ihrer Hierarchie. Sie ist ein hervorragendes Werkzeug, um sicherzustellen, dass Ihre Inhalte logisch aufgebaut sind und &Uuml;berschriften korrekt verwendet werden &ndash; ideal f&uuml;r Autorinnen, Autoren und Content-Ersteller.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-23-1024x571.png\" alt=\"\" class=\"wp-image-10893\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-23.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-23-300x167.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-23-768x428.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>So passen Sie Bl&ouml;cke mit Full-Site Editing an<\/strong><\/h3><p class=\"wp-block-paragraph\">Wir haben bereits behandelt, wie Sie den Block-Editor f&uuml;r einzelne Seiten und Beitr&auml;ge verwenden. Gutenberg verf&uuml;gt au&szlig;erdem &uuml;ber den Website-Editor, mit dem Sie Bl&ouml;cke auf Ihrer gesamten Website ganz einfach anpassen k&ouml;nnen, um ein einheitliches Erscheinungsbild zu erzielen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"513\" height=\"210\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-31.png\" alt=\"\" class=\"wp-image-10917\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-31.png 513w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-31-300x123.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure><p class=\"wp-block-paragraph\">Um auf den Gutenberg-Website-Editor zuzugreifen, gehen Sie in Ihrem WordPress-Dashboard zu <strong>Design &rarr; Editor<\/strong>. Darin k&ouml;nnen Sie verschiedene Bereiche Ihrer Website anpassen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Navigation.<\/strong> Aktualisieren Sie Men&uuml;s mit Elementen wie benutzerdefinierten Links und Website-Logos.<\/li>\n\n\n\n<li><strong>Stile.<\/strong> W&auml;hlen Sie eine Stilkombination aus Ihrem Theme und passen Sie Farben, Typografie und Layouts f&uuml;r Ihre gesamte Website an.<\/li>\n\n\n\n<li><strong>Seiten.<\/strong> Bearbeiten Sie Seiteninhalte direkt im Website-Editor &ndash; ohne die Oberfl&auml;che wechseln zu m&uuml;ssen.<\/li>\n\n\n\n<li><strong>Templates.<\/strong> Erstellen Sie Layouts f&uuml;r bestimmte Seiten, etwa f&uuml;r die Startseite Ihres Blogs oder einzelne Beitr&auml;ge. Einige Themes bieten m&ouml;glicherweise zus&auml;tzliche Layout-Optionen.<\/li>\n\n\n\n<li><strong>Patterns.<\/strong> Verwalten Sie synchronisierte Patterns f&uuml;r konsistente Designelemente auf Ihrer gesamten Website.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">F&uuml;r ein vollst&auml;ndiges Bearbeitungserlebnis k&ouml;nnen Sie das Template im Editor in der Vorschau anzeigen, w&auml;hrend Sie am Inhalt Ihrer Seite oder Ihres Beitrags arbeiten. &Ouml;ffnen Sie den Tab <strong>&bdquo;Beitrag&ldquo;<\/strong> in der rechten Seitenleiste und w&auml;hlen Sie <strong>Template<\/strong> &rarr; <strong>Template anzeigen<\/strong>. So k&ouml;nnen Sie sehen, wie sich Ihr Inhalt in das gesamte Seitenlayout einf&uuml;gt.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-19-1024x452.png\" alt=\"\" class=\"wp-image-10898\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-19.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-19-300x132.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-19-768x339.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Beachten Sie, dass nur Benutzerinnen und Benutzer mit einem WordPress-Block-Theme Bl&ouml;cke im Full-Site-Editor anpassen k&ouml;nnen. Wenn Sie diese Funktion nutzen m&ouml;chten, sollten Sie zu einem Block-Theme wechseln, zum Beispiel:<\/p><ul class=\"wp-block-list\">\n<li>Twenty Twenty-Four. Ein Standard-WordPress-Theme mit einem klaren und modernen Layout.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/ona\/\" target=\"_blank\" rel=\"noopener\">Ona<\/a>. Wird mit <a href=\"https:\/\/www.hostinger.com\/tutorials\/how-to-create-wordpress-child-theme\/\">Child-Themes<\/a> f&uuml;r verschiedene Website-Nischen geliefert.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/neve-fse\/\" target=\"_blank\" rel=\"noopener\">Neve FSE<\/a>. Die Full-Site-Editing-Version eines beliebten WordPress-Themes, geeignet f&uuml;r alle Arten von Websites.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/tove\/\" target=\"_blank\" rel=\"noopener\">Tove<\/a>. Enth&auml;lt mehr als 40 Block-Patterns f&uuml;r eine schnellere Anpassung.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/bricksy\/\" target=\"_blank\" rel=\"noopener\">Bricksy<\/a>. Wird ebenfalls mit vorgefertigten Block-Patterns sowie WooCommerce-Unterst&uuml;tzung geliefert.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>So verwenden Sie die Befehlspalette<\/strong><\/h3><p class=\"wp-block-paragraph\">Die <a href=\"https:\/\/www.hostinger.com\/tutorials\/wordpress-command-palette\/\">Befehlspalette<\/a> ist ein Schnellzugriffswerkzeug, mit dem Sie Aktionen ausf&uuml;hren oder innerhalb des Editors navigieren k&ouml;nnen &ndash; &uuml;ber eine einfache Suchleiste, ohne sich m&uuml;hsam durch Men&uuml;s klicken zu m&uuml;ssen.<\/p><p class=\"wp-block-paragraph\">Diese Funktion ist im Gutenberg-Block-Editor &uuml;ber die Tastenkombination <strong>Strg + K<\/strong> (oder <strong>Cmd + K<\/strong> auf dem Mac) oder durch Klicken auf die Leiste oben in der Benutzeroberfl&auml;che verf&uuml;gbar.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"235\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-3-1024x235.png\" alt=\"\" class=\"wp-image-10869\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-3.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-3-300x69.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-3-768x176.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Wenn Sie darauf klicken, sehen Sie eine Suchleiste und eine kurze Liste h&auml;ufiger Aufgaben wie <strong>Duplicate<\/strong>, <strong>Delete<\/strong> und <strong>Add after<\/strong>. Geben Sie einfach einen Buchstaben oder ein Schl&uuml;sselwort ein, das zur gesuchten Aufgabe passt, um relevante Optionen anzuzeigen.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"658\" height=\"722\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-9.png\" alt=\"\" class=\"wp-image-10879\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-9.png 658w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-9-273x300.png 273w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure><p class=\"wp-block-paragraph\">Hier sind einige Anwendungsf&auml;lle, die Ihren Workflow beschleunigen k&ouml;nnen:<\/p><ul class=\"wp-block-list\">\n<li>Zu einem bestimmten Beitrag oder einer bestimmten Seite springen, indem Sie einfach den Titel eingeben.<\/li>\n\n\n\n<li>Eine neue Seite oder einen neuen Beitrag hinzuf&uuml;gen.<\/li>\n\n\n\n<li>Den Vollbildmodus beenden, um die WordPress-Admin-Seitenleiste anzuzeigen.<\/li>\n\n\n\n<li>In den ablenkungsfreien Modus wechseln.<\/li>\n\n\n\n<li>Ihre Arbeit in einem neuen Tab in der Vorschau anzeigen.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>So deaktivieren Sie den WordPress-Block-Editor<\/strong><\/h3><p class=\"wp-block-paragraph\">Wenn Ihnen die Umstellung auf den Gutenberg-Editor schwerf&auml;llt, k&ouml;nnen Sie ihn in WordPress mit einem Plugin oder durch Bearbeiten der Datei <a href=\"https:\/\/www.hostinger.com\/tutorials\/functions-php-wordpress\/\">functions.php<\/a> deaktivieren.<\/p><p class=\"wp-block-paragraph\">Installieren Sie das Plugin <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener\">Classic Editor<\/a>, um Gutenberg nach der Aktivierung vollst&auml;ndig zu deaktivieren. Wenn Sie mehr Kontrolle m&ouml;chten, verwenden Sie das Plugin <a href=\"https:\/\/wordpress.org\/plugins\/disable-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Disable Gutenberg<\/a>. Das Plugin deaktiviert Gutenberg auf der gesamten Website. Sie k&ouml;nnen die Plugin-Einstellungen jedoch so anpassen, dass es nur f&uuml;r bestimmte Rollen, Beitragstypen oder Vorlagen gilt.<\/p><p class=\"wp-block-paragraph\">Alternativ f&uuml;gen Sie Ihrer Datei <strong>functions.php<\/strong> einen Code-Snippet hinzu &ndash; mit dem WordPress Theme File Editor, einem File Manager oder per File Transfer Protocol (FTP).<\/p><p class=\"wp-block-paragraph\">So geht es mit dem File Manager von Hostinger im hPanel-Dashboard:<\/p><ol class=\"wp-block-list\">\n<li>&Ouml;ffnen Sie den <strong>File Manager<\/strong> in hPanel und navigieren Sie zu <strong>public_html &rarr; wp-content &rarr; themes<\/strong>.<\/li>\n\n\n\n<li>&Ouml;ffnen Sie den Ordner Ihres aktiven Themes und doppelklicken Sie auf die Datei <strong>functions.php<\/strong>, um sie zu &ouml;ffnen.<\/li>\n\n\n\n<li>F&uuml;gen Sie den folgenden Code vor der letzten Zeile ein:<\/li>\n<\/ol><p class=\"wp-block-paragraph\">add_filter(&lsquo;use_block_editor_for_post&rsquo;, &lsquo;__return_false&rsquo;);<\/p><p class=\"wp-block-paragraph\">4. Speichern und schlie&szlig;en Sie die Datei und laden Sie dann Ihre WordPress-Website neu.<\/p><p class=\"wp-block-paragraph\">Wenn Ihnen das Bearbeiten von Code zu heikel erscheint, probieren Sie stattdessen das Plugin <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a> aus:<\/p><ol class=\"wp-block-list\">\n<li>Gehen Sie nach der Installation und Aktivierung des Plugins im Dashboard zu <strong>Snippets<\/strong> &rarr; <strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Benennen Sie den Snippet und f&uuml;gen Sie den obigen Code dann in den Tab <strong>Functions PHP<\/strong> ein. W&auml;hlen Sie die Option <strong>Only run in administration area<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"420\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-10-1024x420.png\" alt=\"\" class=\"wp-image-10880\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-10.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-10-300x123.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/image-10-768x315.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">3. Klicken Sie auf <strong>Save Changes<\/strong> and <strong>Activate<\/strong>.<\/p><p class=\"wp-block-paragraph\">Beachten Sie, dass das Deaktivieren von Gutenberg nur eine vor&uuml;bergehende L&ouml;sung ist, da es der Standardeditor von WordPress ist. Da Gutenberg kontinuierlich um neue Funktionen erweitert wird, hilft Ihnen der Abschied vom klassischen Editor dabei, die M&ouml;glichkeiten von WordPress voll auszusch&ouml;pfen.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    M&ouml;chten Sie Ihr WordPress-Erlebnis auf das n&auml;chste Level bringen?                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Entdecken Sie die besten mit Gutenberg kompatiblen WordPress-Plugins, um Ihre Website zu erweitern.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h4 class=\"wp-block-heading\"><strong>Fazit<\/strong><\/h4><p class=\"wp-block-paragraph\">Der Gutenberg-Block-Editor hat die Art und Weise verbessert, wie Sie Websites mit WordPress erstellen und gestalten k&ouml;nnen. Mit seinen flexiblen Bl&ouml;cken f&uuml;r verschiedene Website-Elemente erhalten Sie eine einfache und zugleich flexible M&ouml;glichkeit, Beitr&auml;ge und Seiten nach Ihren Vorstellungen zu erstellen.<\/p><p class=\"wp-block-paragraph\">Indem Gutenberg die Einschr&auml;nkungen des klassischen Editors beseitigt, macht die Drag-and-drop-Oberfl&auml;che die Anpassung f&uuml;r Nutzer aller Erfahrungsstufen einfach. Funktionen wie synchronisierte Muster sorgen f&uuml;r ein einheitliches Design, w&auml;hrend Sie mit dem erweiterten Website-Editor Themes direkt anpassen k&ouml;nnen, ohne zus&auml;tzliche Plugins zu ben&ouml;tigen.<\/p><p class=\"wp-block-paragraph\">Wir hoffen, dass Ihnen dieser Leitfaden geholfen hat zu verstehen, wie Gutenberg funktioniert und wie Gutenberg Ihr WordPress-Erlebnis verbessern kann. Weitere Tipps und Tricks zu Gutenberg finden Sie in unserem Leitfaden zum <a href=\"https:\/\/www.hostinger.com\/tutorials\/how-to-create-a-website-with-gutenberg\/\">Erstellen einer Website mit Gutenberg<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-gutenberg-faq\"><strong>WordPress Gutenberg (FAQ)<\/strong><\/h2><h3 class=\"wp-block-heading\"><strong>Ist Gutenberg kostenlos?<\/strong><\/h3><p class=\"wp-block-paragraph\">Ja. Gutenberg ist im WordPress-Core integriert, daher ist es kostenlos und mit WordPress 5.0 und neuer bereits vorinstalliert.<\/p><h3 class=\"wp-block-heading\"><strong>Ist Gutenberg besser als Elementor?<\/strong><\/h3><p class=\"wp-block-paragraph\">Das h&auml;ngt von Ihren Anforderungen und Vorlieben ab. Gutenberg bietet mit einem kostenlosen, schlanken Block-Editor Einfachheit und Performance f&uuml;r einfache bis mittlere Anpassungen. Elementor ist eine kostenpflichtige L&ouml;sung, die sich besonders f&uuml;r anspruchsvolles Design eignet und eine Drag-and-drop-Oberfl&auml;che mit Widgets und Vorlagen f&uuml;r pr&auml;zise Layouts bietet. Kurz gesagt: W&auml;hlen Sie Gutenberg f&uuml;r Geschwindigkeit und einfache Bedienung oder Elementor f&uuml;r kreative Flexibilit&auml;t und detaillierte Kontrolle &uuml;ber das Design &ndash; behalten Sie dabei jedoch die Abonnementkosten im Blick.<\/p><h3 class=\"wp-block-heading\"><strong>Ist Gutenberg gut f&uuml;r SEO?<\/strong><\/h3><p class=\"wp-block-paragraph\">Ja, Gutenberg ist hervorragend f&uuml;r SEO geeignet. Es erzeugt sauberes, strukturiertes HTML, das Suchmaschinen dabei hilft, Ihre Inhalte zu verstehen. Der Block-Editor erleichtert au&szlig;erdem die Optimierung von Bildern und &Uuml;berschriften, was f&uuml;r gutes SEO entscheidend ist. Au&szlig;erdem funktioniert Gutenberg perfekt mit <a href=\"https:\/\/www.hostinger.com\/tutorials\/best-seo-plugins-wordpress\/\">beliebten SEO-Plugins<\/a> wie <strong>Yoast SEO<\/strong>.<\/p><h3 class=\"wp-block-heading\"><strong>Was ist der Unterschied zwischen Bl&ouml;cken und Widgets?<\/strong><\/h3><p class=\"wp-block-paragraph\">In WordPress werden Bl&ouml;cke verwendet, um Beitr&auml;ge und Seiten im Editor zu gestalten, w&auml;hrend Widgets Funktionen zu Bereichen wie Seitenleisten und Footern hinzuf&uuml;gen. Mit WordPress 5.8 f&uuml;hrte die Plattform den blockbasierten Widget-Editor ein, sodass Nutzer Widgets mit Bl&ouml;cken verwalten k&ouml;nnen &ndash; &auml;hnlich wie der Gutenberg-Editor bei Beitr&auml;gen und<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn Sie WordPress noch nicht kennen, sollten Sie sich zuerst mit Gutenberg, dem Block-Editor, vertraut machen, um die Plattform effektiver zu verwalten. Er wurde als Ersatz f&uuml;r den klassischen Editor eingef&uuml;hrt und ist inzwischen ein zentraler Bestandteil der Website-Erstellung im Content-Management-System. WordPress Gutenberg verwendet ein blockbasiertes Designsystem und ist dadurch f&uuml;r alle Erfahrungsstufen deutlich benutzerfreundlicher. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/wordpress-gutenberg-editor\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":634,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Gutenberg Editor einfach erkl\u00e4rt und nutzen","rank_math_description":"Den WordPress Gutenberg Editor effektiv nutzen. Lernen Sie Bl\u00f6cke verschieben, Muster erstellen und die Command Palette einsetzen.","rank_math_focus_keyword":"","footnotes":""},"categories":[20],"tags":[],"class_list":["post-10865","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/gutenberg-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/gutenberg-pros-e-contras\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/gutenberg-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-menggunakan-gutenberg-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-gutenberg-editor\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/wordpress-gutenberg\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/gutenberg-pros-e-contras\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/10865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/634"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=10865"}],"version-history":[{"count":15,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/10865\/revisions"}],"predecessor-version":[{"id":10924,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/10865\/revisions\/10924"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=10865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=10865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=10865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}