{"id":98444,"date":"2022-05-16T09:15:00","date_gmt":"2022-05-16T07:15:00","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=98444"},"modified":"2022-05-10T12:48:19","modified_gmt":"2022-05-10T10:48:19","slug":"wordpress-websites-mit-dem-gutenberg-editor-designen","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/","title":{"rendered":"WordPress-Websites mit dem Gutenberg-Editor designen"},"content":{"rendered":"\n<p>Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Seit WordPress 5 ist der Block-Editor Gutenberg der Standard f\u00fcr die Bearbeitung von Blog-Posts und anderen Inhalten einer WordPress-Seite. Seit dem Update auf WordPress 5.9 beherrscht Gutenberg auf das sogenannte Full-Site-Editing \u2013 und ist damit zu einem echten WordPress-Page-Builder herangewachsen.<\/p>\n\n\n\n<p>Die Erstellung attraktiver WordPress-Designvorlagen, sogenannten Themes, ist ein aufw\u00e4ndiger Prozess und nichts f\u00fcr technische Laien. Daher gibt es einen florierenden Handel mit fertigen Themes, etwa unter <a href=\"http:\/\/themeforest.net\">themeforest.net<\/a> oder \u2013 f\u00fcr Gratis-Themes \u2013 direkt in WordPress. Das Problem dabei: Einfache (Gratis-) Themes lassen sich nur schlecht anpassen. Wer Schriftbild und Layout anpassen will, muss im Zweifel den Quellcode hacken. Komplexere und meist kostenpflichtige Themes sind hier flexibler, ben\u00f6tigen aber auch eine komplexe Zusatzsoftware in Form eines sogenannten Page-Builders. <\/p>\n\n\n\n<p>Beliebt sind hier etwa <a href=\"https:\/\/elementor.com\/\">Elementor<\/a>, <a href=\"https:\/\/themify.me\/\">Themify<\/a> oder <a href=\"https:\/\/wpbakery.com\/\">WP-Bakery<\/a>. Diese erlauben eine Bearbeitung von WordPress-Seiten auf \u00e4hnlich einfache Weise wie der <a href=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/blog-homepage-baukasten-flatpress-widget\/\">STRATO Homepage-Baukasten<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59-1024x513.png\" alt=\"Screenshot: Willkommen bei WordPress 5.9\" class=\"wp-image-98445\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59-1024x513.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59-160x80.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59-768x385.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59-1536x769.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Wordpress-59.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Gutenberg ist ab WordPress 5.9 ein Full-Site-Editor<\/em>.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Gutenberg: Eine kluge Entscheidung<\/strong><\/h2>\n\n\n\n<p>Leider sind Pagebuilder als zus\u00e4tzliche Elemente nicht nur teuer, sondern auch technisch aufw\u00e4ndig \u2013 und daher l\u00e4ngst nicht f\u00fcr jedes Webprojekt geeignet. Daher haben sich die WordPress-Macher dazu entschieden, den eigentlich f\u00fcr das Design von Beitr\u00e4gen gedachten Block-Editor Gutenberg-Editor zu einem Pagebuilder mit sogenanntem <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/full-site-editing\/\">Full-Site-Editing<\/a> auszubauen und den alten WordPress-Customizer zu ersetzen. Ein kluger Schritt, ist Gutenberg doch ohnehin bei jedem WordPress <a href=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-bloecke-gutenberg\/\">an Bord<\/a> und tr\u00e4gt nicht auf. Au\u00dferdem sind User in aller Regel <a href=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/gutenberg-tweaks\/\">mit der Bedienung vertraut<\/a>, wodurch die Einstiegsh\u00fcrde sinkt. Und der Editor ist nat\u00fcrlich kostenlos. Viele gute Argumente also, ihn einzusetzen \u2013 und selbst ein Design f\u00fcr WordPress zu erstellen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes-1024x622.png\" alt=\"\" class=\"wp-image-98446\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes-1024x622.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes-160x97.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes-768x466.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes-1536x932.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Full-Site-Themes.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>F\u00fcr den Full-Site-Editor braucht es angepasste Themes.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Eigenes Design mit dem Gutenberg Full-Site-Editor erstellen<\/strong><\/h2>\n\n\n\n<p>Wir nehmen im folgenden Workshop das Twenty Twenty-Two-Theme als Grundlage: Es ist als Standard-Theme durch seine enge Bindung an WordPress bestens geeignet, um erste Schritte im Gutenberg Page-Builder durchzuf\u00fchren. Zun\u00e4chst musst Du das Theme in Deinem WordPress-Blog aktivieren, dann kann es auch schon losgehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Full-Site-Editor starten<\/strong><\/h2>\n\n\n\n<p>Klicke unter \u201eDesign\u201c auf \u201eEditor (Beta)\u201c. Daraufhin \u00f6ffnet sich der WordPress Full-Site-Editor, in dem Du jetzt jedes Element bearbeiten und verschieben kannst. Inhalte sind allerdings nach wie vor vom Design getrennt: Wenn Du einen Blog-Post schreiben willst, musst Du daf\u00fcr \u00fcber die normale WordPress-Oberfl\u00e4che gehen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Editor-1-1024x612.png\" alt=\"WordPress und Gutenberg\" class=\"wp-image-98451\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Editor-1-1024x612.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Editor-1-160x96.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Editor-1-768x459.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Editor-1.png 1088w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Der neue Editor ist den Design-Einstellungen zugeordnet.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Men\u00fc bearbeiten<\/strong><\/h2>\n\n\n\n<p>Wie beim regul\u00e4ren Gutenberg-Editor kannst du Elemente nun bearbeiten, indem du sie anklickst. F\u00fcr einen ersten Schritt kannst du etwa das Men\u00fc oben rechts anpassen. Klicke das Element an: Der Editor blendet dir jetzt M\u00f6glichkeiten zum Anpassen ein. Klicke zum Beispiel auf den kleinen Pfeil nach links, um das Men\u00fc linksb\u00fcndig erscheinen zu lassen. Mit Klick auf die drei Punkte rechts kannst du \u201eWeitere Einstellungen anzeigen\u201c: Hier kannst du etwa die Textgr\u00f6\u00dfe oder die Ausrichtung \u00e4ndern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen-1024x491.png\" alt=\"Gutenberg in Aktion beim Layouten\" class=\"wp-image-98450\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen-1024x491.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen-160x77.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen-768x368.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen-1536x737.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Menue-anpassen.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Men\u00fc-Ausrichtung und Aussehen k\u00f6nnen leicht angepasst werden<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Header-Bild \u00e4ndern<\/strong><\/h2>\n\n\n\n<p>In einem n\u00e4chsten Schritt kannst Du zum Beispiel das Header-Bild austauschen. Klicke hierf\u00fcr auf \u201eErsetzen\u201c und w\u00e4hle ein anderes Bild aus. Das Bild kann zu einem sp\u00e4teren Zeitpunkt auch bearbeiten oder einfach komplett entfernen. Du kannst Bilder auch \u2013 genau wie bei Gutenberg \u2013 nach der Block-Logik auch an anderen Orten Deines Themes einf\u00fcgen, \u00e4ndern oder l\u00f6schen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen-1024x364.png\" alt=\"Gutenberg in Aktion beim Layouten\" class=\"wp-image-98449\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen-1024x364.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen-160x57.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen-768x273.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen-1536x546.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Headerbild-ersetzen.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Das Headerbild ist mit wenigen Klicks ersetzt.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Inhaltsbereich anpassen<\/strong><\/h2>\n\n\n\n<p>Nach dem gleichen Schema kannst du auch den Bereich unterhalb des Headers anpassen: Du siehst in der Auswahl typische Elemente, etwa die \u00dcberschrift, den Beitrags-Auszug oder das Beitrags-Datum. Klicke das Element an, um weitere Optionen zu erhalten. Auf diese Weise kannst du unter anderem Elemente verschieben: Willst du das Datum \u00fcber dem Auszug, kannst du es einfach mit dem kleinen Pfeil nach oben hieven. Oder du entfernst das Vorschaubild, weil du es nicht ben\u00f6tigst.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"566\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen-1024x566.png\" alt=\"Inhaltsbereich anpassen\" class=\"wp-image-98448\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen-1024x566.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen-160x88.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen-768x425.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen-1536x849.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-einstellen.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Inhaltselemente besitzen jeweils eigene Einstellungen<\/em>.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Elemente l\u00f6schen oder hinzuf\u00fcgen<\/strong><\/h2>\n\n\n\n<p>Du kannst nat\u00fcrlich auch Elemente l\u00f6schen und hinzuf\u00fcgen. Das L\u00f6schen ist denkbar einfach: W\u00e4hle das Element aus, klicke auf die drei Punkte und w\u00e4hle \u201e(Inhaltselement-Name) l\u00f6schen\u201c. Um ein Element neu zu erstellen, musst du nur an der gew\u00fcnschten Stelle klicken und anschlie\u00dfend mit dem blauen Plus-Symbol einen \u201eBlock hinzuf\u00fcgen\u201c. Wenn du in diesem Men\u00fc auf \u201eAlle durchsuchen\u201c klickst, findest du unter \u201eTheme\u201c die n\u00f6tigen Inhaltselemente, etwa Beitragstitel, -auszug, -autor oder Zusatzfunktionen wie Kommentare. Auf diese Weise kannst du ganz bequem und einfach deine WordPress-Seite nach deinen W\u00fcnschen gestalten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu-1024x535.png\" alt=\"Elemente hinzuf\u00fcgen\" class=\"wp-image-98447\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu-1024x535.png 1024w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu-160x84.png 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu-768x401.png 768w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu-1536x802.png 1536w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/Element-hinzu.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Mit dem Hinzuf\u00fcgen-Schalter greifst Du auf alle Inhaltselemente zu.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Noch nicht ganz rund, aber mit Perspektive<\/strong><\/h2>\n\n\n\n<p>Grunds\u00e4tzlich arbeitet der Full-Site-Editor von Gutenberg schon recht rund, ist aber in der Bedienung gew\u00f6hnungsbed\u00fcrftig und als Beta-Version an manchen Stellen noch hakelig. Wer Gutenberg kennt, wird sich schnell zurechtfinden, f\u00fcr Anwender ohne Erfahrung ist der neue Editor allerdings ein wenig komplex \u2013 hier hilft nur ausprobieren, am besten mit einer Test-Website. <\/p>\n\n\n\n<p>Dennoch: Dank des Full-Site-Editors kann das Layout einer WordPress-Seite \u2013 sofern das Theme die Funktion unterst\u00fctzt \u2013 schnell und einfach ohne Code-Gebastel an die pers\u00f6nlichen Bed\u00fcrfnisse angepasst werden, weshalb sich der Einsatz sowohl f\u00fcr Neueinsteiger, als auch f\u00fcr alte WordPress-Hasen lohnen d\u00fcrfte.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.<\/p>\n","protected":false},"author":138,"featured_media":98528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[440,490],"tags":[765,261],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress-Websites mit dem Gutenberg-Editor designen<\/title>\n<meta name=\"description\" content=\"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress-Websites mit dem Gutenberg-Editor designen\" \/>\n<meta property=\"og:description\" content=\"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-16T07:15:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-10T10:48:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/gutenberg-editor-wordpress-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"xxxxxxxx\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"WordPress-Websites mit dem Gutenberg-Editor designen\" \/>\n<meta name=\"twitter:description\" content=\"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/gutenberg-editor-wordpress-design.png\" \/>\n<meta name=\"twitter:creator\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"xxxxxxxx\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/\",\"name\":\"WordPress-Websites mit dem Gutenberg-Editor designen\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2022-05-16T07:15:00+00:00\",\"dateModified\":\"2022-05-10T10:48:19+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/2097976b2a69a30e3e95a3d21b3634dc\"},\"description\":\"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Websites mit dem Gutenberg-Editor designen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/2097976b2a69a30e3e95a3d21b3634dc\",\"name\":\"xxxxxxxx\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6496f96264c0be76da54812489e3878f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6496f96264c0be76da54812489e3878f?s=96&d=mm&r=g\",\"caption\":\"xxxxxxxx\"},\"description\":\"Hallo, ich bin Christian Rentrop. Ich bin freier IT-Journalist und schreibe f\u00fcr einige bekannte deutsche Computer- und Foto-Magazine. Zudem blogge ich IT-Workshops. Hier im STRATO Blog k\u00fcmmere ich mich um Software-Themen.\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress-Websites mit dem Gutenberg-Editor designen","description":"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"WordPress-Websites mit dem Gutenberg-Editor designen","og_description":"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2022-05-16T07:15:00+00:00","article_modified_time":"2022-05-10T10:48:19+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/gutenberg-editor-wordpress-design.png","type":"image\/png"}],"author":"xxxxxxxx","twitter_card":"summary_large_image","twitter_title":"WordPress-Websites mit dem Gutenberg-Editor designen","twitter_description":"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.","twitter_image":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/05\/gutenberg-editor-wordpress-design.png","twitter_creator":"@STRATO_AG","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"xxxxxxxx","Gesch\u00e4tzte Lesezeit":"5 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/","name":"WordPress-Websites mit dem Gutenberg-Editor designen","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2022-05-16T07:15:00+00:00","dateModified":"2022-05-10T10:48:19+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/2097976b2a69a30e3e95a3d21b3634dc"},"description":"Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wordpress-websites-mit-dem-gutenberg-editor-designen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress-Websites mit dem Gutenberg-Editor designen"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/2097976b2a69a30e3e95a3d21b3634dc","name":"xxxxxxxx","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6496f96264c0be76da54812489e3878f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6496f96264c0be76da54812489e3878f?s=96&d=mm&r=g","caption":"xxxxxxxx"},"description":"Hallo, ich bin Christian Rentrop. Ich bin freier IT-Journalist und schreibe f\u00fcr einige bekannte deutsche Computer- und Foto-Magazine. Zudem blogge ich IT-Workshops. Hier im STRATO Blog k\u00fcmmere ich mich um Software-Themen.","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98444"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=98444"}],"version-history":[{"count":17,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98444\/revisions"}],"predecessor-version":[{"id":98557,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98444\/revisions\/98557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/98528"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=98444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=98444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=98444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}