{"id":3989,"date":"2022-01-26T18:10:31","date_gmt":"2022-01-26T17:10:31","guid":{"rendered":"https:\/\/www.ewerkzeug.info\/?p=3989"},"modified":"2025-11-10T12:56:27","modified_gmt":"2025-11-10T11:56:27","slug":"wordpress-5-9-and-twentytwo","status":"publish","type":"post","link":"https:\/\/www.ewerkzeug.info\/en\/wordpress-5-9-und-twenty-twentytwo\/","title":{"rendered":"WordPress and the Twenty Twenty-Two theme (tutorial)"},"content":{"rendered":"<p class=\"has-drop-cap\">January 25, 2022 has it all. WordPress is released in version 5.9, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/news\/2022\/01\/josephine\/\" target=\"_blank\">Code name Josephine<\/a> (according to <a rel=\"noreferrer noopener\" href=\"https:\/\/de.wikipedia.org\/wiki\/Josephine_Baker\" target=\"_blank\">Josephine Baker<\/a>), and brings the long-awaited <strong>Full Site Editing<\/strong> with. You can implement this new way of editing and designing header and footer areas, as well as pages, posts and archives exclusively on the basis of Gutenberg blocks with Full Site Editing (FSE) themes, such as <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/twentytwentytwo\/\" target=\"_blank\">Twenty Twenty-Two<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\" target=\"_blank\">Twenty Twenty-Three<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/bricksy\/\" target=\"_blank\">Bricksy<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/blockify\/\" target=\"_blank\">Blockify<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/catch-fse\/\" target=\"_blank\">Catch-FSE<\/a> and others.  <\/p>\n\n\n\n<p>The following article is aimed at people who already have experience with WordPress and possibly also with the Gutenberg Block Editor.<\/p>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#full-site-editing\">Full Site Editing<\/a>\n\n\n<ul><li>\n<a href=\"#wo-ist-der-customizer\">Where is the Customizer?<\/a>\n\n<\/li>\n<li><a href=\"#der-site-editor\">The site editor<\/a>\n\n<\/li>\n<li><a href=\"#stile\">Styles<\/a>\n\n\n<ul><li>\n<a href=\"#farben\">Colors<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#templates-und-template-teile\">Templates and template parts<\/a>\n\n\n<ul><li>\n<a href=\"#templates\">Templates<\/a>\n\n<\/li>\n<li><a href=\"#templateteile\">Template parts<\/a>\n\n<\/li>\n<li><a href=\"#templateteile-neu-erstellen\">Create new template parts<\/a>\n\n<\/li>\n<li><a href=\"#inhaltsbereiche\">Content areas<\/a>\n\n<\/li>\n<li><a href=\"#wo-andert-man-das-logo\">Where do I change the logo at Twenty Twenty-Two?<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#neu-bei-gutenberg-blocken\">New with Gutenberg blocks<\/a>\n\n\n<ul><li>\n<a href=\"#gruppen\">Groups<\/a>\n\n<\/li>\n<li><a href=\"#theme-blocke-in-wordpress-5-9\">Theme blocks in WordPress 5.9<\/a>\n\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<li><a href=\"#header-mit-full-site-editing\">Header with full site editing<\/a>\n\n\n<ul><li>\n<a href=\"#die-gestaltung\">The design<\/a>\n\n<\/li>\n<li><a href=\"#navigation\">Menu \/ Navigation<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#pattern-block-vorlagen\">Pattern (\u201eblock templates\u201c)<\/a>\n\n<\/li>\n<li><a href=\"#work-in-progress\">Conclusion<\/a>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"full-site-editing\">Full Site Editing<\/h2>\n\n\n<p>Under <strong>Full Site Editing<\/strong> (FSE) is to understand that you can not only design the content of pages and posts with Gutenberg blocks, but also the <strong>Header<\/strong> and the <strong>Footer<\/strong> area, the <strong>Structure or the structure<\/strong> from <strong>Pages<\/strong> and <strong>Contributions<\/strong>which <strong>404 error page<\/strong>which <strong>Start page<\/strong>, <strong>Categories <\/strong>and more. Design refers to the structure, design and layout. <\/p>\n\n\n\n<p>These are the new features of a WordPress website from version 5.9, if a block theme is used:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Styles<\/strong>You define the general design of the website (colors, fonts, spacing) and the basic design of the blocks.<\/li>\n\n\n\n<li><strong>Template Editing:<\/strong>&nbsp;You edit the layout of pages and posts, archives (post lists), the 404 page, header and footer.<span style=\"background-color: transparent; color: var(--theme-text-color); font-family: var(--fontFamily); font-size: var(--fontSize); font-style: var(--fontStyle, inherit); font-weight: var(--fontWeight); letter-spacing: var(--letterSpacing); text-transform: var(--textTransform);\"><\/span><\/li>\n<\/ul>\n\n\n\n<p>This now allows a website to be designed with blocks in all points and areas. If you are already used to working with Gutenberg blocks, you do not have to retrain for the design, the look &amp; feel is retained when editing. Ready-made designs are available for pages, headers, footers and content. <\/p>\n\n\n\n<p>First of all: the following also applies to <strong>Twenty Twenty-Three<\/strong> and other FSE themes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>The WordPress developers have really tidied up the menu design. If you are using a block theme like <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/twentytwentytwo\/\" target=\"_blank\">Twenty Twenty-Two<\/a> from WordPress 5.9 under \u201eDesign\u201c, you can (currently) only expect two slim points:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Themes <\/strong>(here everything remains as usual)<\/li>\n\n\n\n<li><strong>Editor <\/strong>(this is new)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/admin-design.png\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"209\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/admin-design.png\" alt=\"Design \/ Editor\" class=\"wp-image-3993\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/admin-design.png 491w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/admin-design-300x128.png 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/a><\/figure>\n\n\n\n<p>Three editing options are offered in the \u201eEditor\u201c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website (English: Site)<\/li>\n\n\n\n<li>Templates<\/li>\n\n\n\n<li>Template parts<\/li>\n<\/ul>\n\n\n\n<p>You can access the editor by clicking on the WordPress logo in the top left-hand corner if you are already in template or template part editing mode. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"605\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png\" alt=\"The new editor\" class=\"wp-image-3997\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png 722w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard-300x251.png 300w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/figure>\n\n\n\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-2233617471649092\"\n     data-ad-slot=\"3695473590\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n<h3 class=\"wp-block-heading\" id=\"wo-ist-der-customizer\">Where is the Customizer?<\/h3>\n\n\n<p>In a block theme, the customizer is replaced by the new <strong>Site Editor<\/strong>. The previous Customizer is becoming less important for block themes, so it no longer exists here. All design and layout adjustments are made in the (site) editor.<\/p>\n\n\n\n<p>The Customizer is still available for other themes.<\/p>\n\n\n\n<p class=\"has-palette-color-7-color has-palette-color-3-background-color has-text-color has-background\">Note: even if you are using a full site editing theme such as Twenty Twenty-Two, you can still access the Customizer by directly calling \/wp-admin\/customize.php<br>You can then continue to enter your own CSS instructions without an additional plugin, for example.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"der-site-editor\">The site editor<\/h3>\n\n\n<p>The site editor enables the editing of <strong>Templates<\/strong> and&nbsp;<strong>Template sharing<\/strong>.<\/p>\n\n\n\n<p>If you use the site editor (<em>Design \/ Editor<\/em>), you will immediately be taken to the design of the page<strong>Templates<\/strong> (more on this below). You can recognize this by the dropdown at the top in the middle. The design includes the selection and composition of the header, footer and content area. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"858\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite-1024x858.png\" alt=\"The page template\" class=\"wp-image-3995\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite-1024x858.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite-300x251.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite-768x643.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/editor-seite.png 1411w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">The page template<\/figcaption><\/figure>\n\n\n\n<p>In the editor you work on <strong>Appearance <\/strong>of the website. The <strong>Contents <\/strong>You can still create your pages under the admin menu item \u201ePages\u201c. To do this, you must first leave the theme editor area again.<\/p>\n\n\n\n<p>How do you return to the usual admin area? Click on the WordPress logo in the top left-hand corner and then on the blue \u201eGo to dashboard\u201c link.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"605\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png\" alt=\"The new editor\" class=\"wp-image-3997\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard.png 722w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/zum-dashboard-300x251.png 300w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><figcaption class=\"wp-element-caption\">Back to the dashboard<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"stile\">Styles<\/h3>\n\n\n<p>You can edit colors and fonts in the style editor. Here you can quickly customize the corresponding elements. You can also change the basic appearance of Gutenberg blocks. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile.png\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"645\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile.png\" alt=\"Edit styles\" class=\"wp-image-4372\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile.png 312w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-145x300.png 145w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/a><figcaption class=\"wp-element-caption\">Styles<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"farben\">Colors<\/h4>\n\n\n<p>Clicking on Colors takes you to the color palettes and standard colors for various global elements on the website.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben.png\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"466\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben.png\" alt=\"Styles Colors\" class=\"wp-image-4637\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben.png 276w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben-178x300.png 178w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/a><figcaption class=\"wp-element-caption\">Styles \/ Colors<\/figcaption><\/figure>\n\n\n\n<p>Click on the link (<em>x<\/em> Colors, here in the screenshot \u201e17 colors\u201c) in the box <strong>Pallet <\/strong>and you will see the individual colors.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben-palette.png\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"603\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben-palette.png\" alt=\"Styles Colors Palette\" class=\"wp-image-4643\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben-palette.png 275w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/stile-farben-palette-137x300.png 137w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><\/a><figcaption class=\"wp-element-caption\">Handles \/ Colors \/ Palette<\/figcaption><\/figure>\n\n\n\n<p>Here you can change the theme colors, but also add your own colors and give your own colors their own names.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/individuelle-farben.png\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"585\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/individuelle-farben.png\" alt=\"Individual colors\" class=\"wp-image-4644\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/individuelle-farben.png 530w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/individuelle-farben-272x300.png 272w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><figcaption class=\"wp-element-caption\">Individual colors<\/figcaption><\/figure>\n\n\n\n<p>From now on, this individual color is available for your editorial work.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<p>For <strong>Developer<\/strong>The style information for block themes is stored in the file <kbd>theme.json<\/kbd> filed (<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\" target=\"_blank\">Description in the WordPress developer manual<\/a>), this file is located in the respective theme directory. <\/p>\n\n\n\n<p>So should you ever need a <a rel=\"noreferrer noopener\" href=\"https:\/\/www.internetkurse-koeln.de\/wie-sie-ein-twenty-twenty-two-child-theme-erstellen\/\" target=\"_blank\">Child Theme for Twenty Twenty-Two<\/a> or want to create another block theme, then next to the files <kbd>style.css<\/kbd> and <kbd>functions.php<\/kbd> also the file <kbd>theme.json<\/kbd> in the directory of the child theme. This file can of course also be <a rel=\"noreferrer noopener\" href=\"https:\/\/fullsiteediting.com\/lessons\/creating-theme-json\/\" target=\"_blank\">be created manually<\/a>.<\/p>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2233617471649092\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-2233617471649092\"\n     data-ad-slot=\"3695473590\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n<h3 class=\"wp-block-heading\" id=\"templates-und-template-teile\">Templates and template parts<\/h3>\n\n\n<p>What you see on the screen as a website visitor with block themes is based on the use of <strong>Templates <\/strong>(templates). There are usually one or more templates for pages, posts, archives (list of posts), 404 error page, etc. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"templates\">Templates<\/h4>\n\n\n<p>Templates can be used as<strong> predefined layouts<\/strong> understand. These already contain blocks and block patterns (ready-made combinations of blocks) and placeholder content.&nbsp;<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"templateteile\">Template parts<\/h4>\n\n\n<p>The templates themselves are created from <strong>Template sharing<\/strong> compiled. So the <strong>Template of a page<\/strong> the following <strong>Template parts<\/strong> include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header<\/li>\n\n\n\n<li><span style=\"background-color: transparent; color: var(--theme-text-color); font-family: var(--fontFamily); font-size: var(--fontSize); font-style: var(--fontStyle, inherit); font-weight: var(--fontWeight); letter-spacing: var(--letterSpacing); text-transform: var(--textTransform);\">Footer<\/span><\/li>\n<\/ul>\n\n\n\n<p>Which template parts there are and what they are called depends entirely on the block theme used. So there will probably always be a <em>Header<\/em>-template part, but it could also be called something completely different. At Theme Twenty Twenty-One you will find these template parts (status 2022-04):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header (dark, large)<\/li>\n\n\n\n<li>Header (dark, small)<\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>Header<\/li>\n<\/ul>\n\n\n\n<p><strong>Template parts<\/strong> You can of course edit these templates or create new ones yourself. You can also delete template parts that you have created yourself. Changes to existing template parts can be completely reset.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten-1024x499.png\" alt=\"Resetting existing template parts\" class=\"wp-image-4649\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten-1024x499.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten-300x146.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten-768x374.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teile-resetten.png 1513w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Reset\u201e existing template parts\u201c<\/figcaption><\/figure>\n\n\n\n<p><strong>Template parts<\/strong> So it's best to think of it as a kind of <em>Large container<\/em> which must be filled with the corresponding Gutenberg blocks and designed naturally. The Gutenberg blocks are placed in <strong>Groups <\/strong>summarized, these are then <em>Small container<\/em>which can be used for the respective design. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-struktur.png\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"535\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-struktur.png\" alt=\"Template structure in block themes\" class=\"wp-image-4253\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-struktur.png 501w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-struktur-281x300.png 281w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><figcaption class=\"wp-element-caption\">Template structure in block themes<\/figcaption><\/figure>\n\n\n\n<p>To make a comparison with the previous widgets: Template parts correspond to the previous <em>Widget Areas<\/em>, and the blocks in it the <em>Widgets<\/em>. In block themes, however, widget areas and widgets have been replaced by template parts and blocks.<\/p>\n\n\n\n<p>Header template parts thus replace the previous design of header areas, as offered by the themes in very different ways - mostly in the Customizer.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"templateteile-neu-erstellen\">Create new template parts<\/h4>\n\n\n<p>In the site editor, you can click on the blue \u201eAdd\u201c button\u201c <strong>new template parts<\/strong> create. However, as of March 2022, you can only create a new site in the site editor. <strong>Home page template<\/strong> no other templates (please don't ask why, we would like to know why). <\/p>\n\n\n\n<p>However, you can still create additional new templates (e.g. for a page with a very specific individual header or footer) directly when editing a page. To do this, open the settings of the page and then the section <strong>Template: <em>current template<\/em><\/strong>. Then click on the link <strong>New<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-erstellen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"360\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-erstellen.png\" alt=\"Template New\" class=\"wp-image-4566\" style=\"width:343px;height:360px\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-erstellen.png 343w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-erstellen-286x300.png 286w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/a><figcaption class=\"wp-element-caption\">Template New<\/figcaption><\/figure>\n\n\n\n<p>You will now see this on the screen:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"338\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen.png\" alt=\"Create a customized template\" class=\"wp-image-4570\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen.png 477w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-300x213.png 300w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/a><figcaption class=\"wp-element-caption\">Create a customized template<\/figcaption><\/figure>\n\n\n\n<p>Give the template a name and click on <em>Create<\/em> you can work on the new template. You will already see a few defaults in it, which you can remove and then compile the structure of the page from existing template parts. The best way to do this is to use the helpful list view. <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-1024x285.png\" alt=\"Create new template for pages\" class=\"wp-image-4585\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-1024x285.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-300x84.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-768x214.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-1536x428.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/ein-individuelles-template-erstellen-2-2048x571.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Create new template for pages<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<p>For <strong>Developer<\/strong>all information on the available templates and template parts can be found in the file <kbd>theme.json<\/kbd>. This file can also be used to create a new template. More about the anatomy of the file regarding <em>customTemplates<\/em> can be found at WordPress in the <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#customtemplates\" target=\"_blank\">Developer manual<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"inhaltsbereiche\">Content areas<\/h4>\n\n\n<p>The <strong>Content areas <\/strong>with post title, post image, post content and post comments are not separate template parts, they are used in the corresponding templates such as <strong>Page <\/strong>or <strong>Individual contribution <\/strong>processed directly.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"wo-andert-man-das-logo\">Where do I change the logo at Twenty Twenty-Two?<\/h4>\n\n\n<p>If you want to change the logo in the Theme block, go to the <strong>Editor <\/strong>the processing of the corresponding<strong> Template parts<\/strong> - in the case of the Twenty Twenty-Two theme, this is the template part <em>Header<\/em>and open the list view there. <\/p>\n\n\n\n<p>Then search for the \u201eWebsite logo\u201c block and replace the image (click on \u201eReplace\u201c).  <\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-logo-ersetzen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"294\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-logo-ersetzen.png\" alt=\"Replace website logo in template part header of Twenty Twenty-Two\" class=\"wp-image-4345\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-logo-ersetzen.png 937w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-logo-ersetzen-300x94.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-logo-ersetzen-768x241.png 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/a><figcaption class=\"wp-element-caption\">Replace website logo in header of Twenty Twenty-Two<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"neu-bei-gutenberg-blocken\">New with Gutenberg blocks<\/h3>\n\n<h4 class=\"wp-block-heading\" id=\"gruppen\">Groups<\/h4>\n\n\n<p>Until now, it was not easy to create sections that extend over the entire width, show a background color or a background image, and then place the content in these sections without additional Gutenberg plugins or page builders. If you want to use an additional Gutenberg plugin such as <em>Stackable<\/em>, <em>Cadence Blocks<\/em> or <em>GenerateBlocks <\/em>only the cover block remained.<\/p>\n\n\n\n<p>Block grouping can now be used to create such sections. Blocks can be grouped into <strong>Groups <\/strong>(select several blocks and click on \u201eGroup\u201c in the three-dot context menu). The groups can now also be designed to some extent: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content width (for narrow and wide columns)<\/li>\n\n\n\n<li>Background colors and gradients (but no images or videos yet)<\/li>\n\n\n\n<li>Text color<\/li>\n\n\n\n<li>Link color<\/li>\n\n\n\n<li>Frame (line type, color)<\/li>\n\n\n\n<li>Internal clearances<\/li>\n<\/ul>\n\n\n\n<p>This means that the groups in a block theme like Twenty Twenty-Two now roughly correspond to the <strong>Container from GenerateBlocks<\/strong>or the <strong>Section<\/strong> with a page builder like <strong>Elementor<\/strong>. However, with far fewer design options at present (status 2022).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenschaften-gruppen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"583\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenschaften-gruppen.png\" alt=\"Group properties\" class=\"wp-image-4146\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenschaften-gruppen.png 281w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenschaften-gruppen-145x300.png 145w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/a><figcaption class=\"wp-element-caption\">Group properties<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"theme-blocke-in-wordpress-5-9\">Theme blocks in WordPress 5.9<\/h4>\n\n\n<p>A collection of new blocks can be used website-wide, i.e. not directly related to the design of the content of pages or posts. These blocks are rather to be understood as building blocks with which the templates are created: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website title<\/li>\n\n\n\n<li>Website logo<\/li>\n\n\n\n<li>Navigation<\/li>\n\n\n\n<li>Contribution content<\/li>\n\n\n\n<li>Query loop<\/li>\n\n\n\n<li>Header<\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>etc.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/theme-bloecke.png\"><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"925\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/theme-bloecke.png\" alt=\"Theme blocks\" class=\"wp-image-4147\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/theme-bloecke.png 334w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/theme-bloecke-108x300.png 108w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><figcaption class=\"wp-element-caption\">Theme blocks<\/figcaption><\/figure>\n\n\n\n<p>The theme block <strong>Contribution content<\/strong> is used to display the content of a page or a post. The block is therefore used in templates such as <strong>Page <\/strong>or <strong>Individual contribution <\/strong>used. <\/p>\n\n\n\n<p>The theme block <strong>Query loop<\/strong> is used to display a list of posts. You can choose between different display variants: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Carousel view<\/li>\n\n\n\n<li>Grid view<\/li>\n<\/ul>\n\n\n\n<p>This block can therefore be used in templates such as <strong>Archive <\/strong>(category, keyword and other archives of contributions) or <strong>Search <\/strong>can be used.<\/p>\n\n\n\n<p>Let's take a look at the design of a header as an example of how theme blocks are handled.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"header-mit-full-site-editing\">Header with full site editing<\/h2>\n\n\n<p>We will edit the header in the Theme block. <\/p>\n\n\n\n<p>Let us assume that a <strong>new, simple header<\/strong> be created. The new header - let's call it <strong>My header<\/strong> - should contain a centrally aligned logo with a navigation menu below it. We want to place a short horizontal line (\u201eseparator\u201c) under this menu.<\/p>\n\n\n\n<p>The new header template part is first created in the site editor in the template parts by clicking on \u201eAdd\u201c at the top right.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen-1024x405.png\" alt=\"Add template part\" class=\"wp-image-4000\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen-1024x405.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen-300x119.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen-768x304.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen-1536x608.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-hinzufuegen.png 1610w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Add template part<\/figcaption><\/figure>\n\n\n\n<p>Give the template part a name (in our case \u201eMy header\u201c) and select \u201eHeader\u201c as the area.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"780\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header-1024x780.png\" alt=\"Create template part\" class=\"wp-image-4003\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header-1024x780.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header-300x229.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header-768x585.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/template-teil-mein-header.png 1033w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">The screenshot still shows a slightly incorrect display (unnecessarily large rectangle), which the WordPress team has since fixed.<\/figcaption><\/figure>\n\n\n\n<p>Scroll down further in the pop-up and click on \u201eCreate\u201c. You will now immediately be taken to the editing mode of the new header. Now add the Gutenberg blocks that a header requires. You will find these comparatively new blocks in the \u201eTheme\u201c section. The quickest way to do this is to use an existing header template as the basis for your header and customize this template.<\/p>\n\n\n\n<p>I have opted for the template <em>Header with logo and navigation<\/em>and will change them a little.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-vorlagen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"614\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-vorlagen.png\" alt=\"Header templates\" class=\"wp-image-4004\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-vorlagen.png 330w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-vorlagen-161x300.png 161w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><figcaption class=\"wp-element-caption\">Header templates<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"die-gestaltung\">The design<\/h3>\n\n\n<p>The template for our new header contains the theme blocks website logo, website title and navigation. There are also spacers and a grouping of blocks into groups.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten-1024x371.png\" alt=\"Edit the header template part\" class=\"wp-image-4009\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten-1024x371.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten-300x109.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten-768x278.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten-1536x556.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-bearbeiten.png 1596w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>You can see it in the picture above: the <strong>List view <\/strong>provides an overview of the blocks used and allows them to be accessed (and moved) quickly. You can use the two sliders on the right and left of the workspace in the middle to see how your header looks at different screen widths. <\/p>\n\n\n\n<p>If you already have a Gutenberg Editor plugin like <strong>Stackable <\/strong>you cannot yet use the flexible blocks of this plugin for template parts. However, the developers of Stackable are likely to follow suit quickly.<\/p>\n\n\n\n<p>Let's add a short \u201eseparator\u201c under the navigation. To do this, click on the plus in the blue square at the top left, search for \u201eDivider\u201c and drag the block into the header area under the navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"381\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner-1024x381.png\" alt=\"Add separator to header\" class=\"wp-image-4010\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner-1024x381.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner-300x111.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner-768x285.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner-1536x571.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/mein-header-trenner.png 1609w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Add separator to header<\/figcaption><\/figure>\n\n\n\n<p>Would you like to change the general appearance of the website, such as the background color or fonts? Click on the new <strong>Styles Icon<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"22\" height=\"18\" class=\"wp-image-4008\" style=\"width: 22px;\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/icon-stile.png\" alt=\"Icon styles\">. The adjustments you make under Styles, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/support\/article\/styles-overview\/\" target=\"_blank\">affect the entire website<\/a> (global elements). <\/p>\n\n\n\n<p>If, on the other hand, you only want to change the background color of the header, then adjust the group that contains all header elements. In the following example, I have given the outer group a black background color and used a more suitable logo variant (transparent background instead of white background).<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe-1024x456.png\" alt=\"Background color of the group\" class=\"wp-image-4140\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe-1024x456.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe-300x133.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe-768x342.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe-1536x683.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gruppe-hintergrundfarbe.png 1949w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Background color of the group<\/figcaption><\/figure>\n\n\n\n<p>Proceed accordingly when designing the footer template part or other template parts.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation\">Menu \/ Navigation<\/h3>\n\n\n<p>All menu items (links to pages or blog categories in menus) are now individual blocks that can be added, expanded, moved or removed (<a rel=\"noreferrer noopener\" href=\"https:\/\/learn.wordpress.org\/workshop\/how-to-create-a-menu-with-the-navigation-block\/\" target=\"_blank\">Explanatory video in English<\/a>).<\/p>\n\n\n\n<p>Make a decision at this point and choose one of the following three alternative procedures. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can either work on the existing <strong>Page list <\/strong>(this is certainly an advantage for existing pages), then this page list is first converted into an editable list of links. Now you can move and customize the individual menu items in the form of small Gutenberg blocks.<\/li>\n\n\n\n<li>Or you can select an existing <strong>classic menu<\/strong>which is then also converted into a block-based menu. Only then can you treat the individual menu items as small movable blocks. <\/li>\n\n\n\n<li>Or you can now create a <strong>New menu<\/strong> and fill it with the desired menu items one after the other. <\/li>\n<\/ul>\n\n\n\n<p>I do this now and first remove the existing page list. The quickest way to do this is in the list view on the left (you can also add the page list again at any time). Then I select \u201eCreate new menu\u201c in the context menu of the navigation block and in the second step \u201eStart empty\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen-1024x654.png\" alt=\"Create new menu\" class=\"wp-image-4011\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen-1024x654.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen-300x192.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen-768x490.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/neues-menue-erstellen.png 1330w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Create new menu<\/figcaption><\/figure>\n\n\n\n<p>Click on the plus on the black background on the right to add a new menu item. You should know the page title or blog category and now enter the first three letters of the title. Suggestions of found pages or categories will follow.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/link-hinzufuegen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"567\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/link-hinzufuegen.png\" alt=\"Add pages\/links\" class=\"wp-image-4012\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/link-hinzufuegen.png 509w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/link-hinzufuegen-269x300.png 269w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><figcaption class=\"wp-element-caption\">Add link<\/figcaption><\/figure>\n\n\n\n<p>Menu items that have already been set can be moved right\/left and thus repositioned.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/menuepunkte-verschieben.png\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"104\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/menuepunkte-verschieben.png\" alt=\"Rearrange menu items\" class=\"wp-image-4013\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/menuepunkte-verschieben.png 737w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/menuepunkte-verschieben-300x42.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/a><\/figure>\n\n\n\n<p>You need <strong>Subitems<\/strong>? Then click on the corresponding symbol next to the actively selected menu item and add the sub-items there. The color scheme of the sub-items is exactly the same as the color scheme of the menu under Styles (<img loading=\"lazy\" decoding=\"async\" width=\"22\" height=\"18\" class=\"wp-image-4008\" style=\"width: 22px;\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/icon-stile.png\" alt=\"Icon styles\">).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/unterpunkte-im-menue.png\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"560\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/unterpunkte-im-menue.png\" alt=\"Add subitems\" class=\"wp-image-4015\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/unterpunkte-im-menue.png 660w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/unterpunkte-im-menue-300x255.png 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/a><figcaption class=\"wp-element-caption\">Add subitems<\/figcaption><\/figure>\n\n\n\n<p>Finished? Then click on Save in the top right-hand corner so that you can use your new template part.<\/p>\n\n\n\n<p>Now click on the WordPress logo in the top left-hand corner to return to the editor. <\/p>\n\n\n\n<p>The new header template part should now be used in your page template. Select under <strong>Templates<\/strong> \u201ePage\u201c button. You use this to edit the ready-made page design from Twenty Twenty-Two. However, you can of course create your own page template in the same way as your own header and save it under your own template part name (e.g. \u201eMy page\u201c). We will spare you that in these instructions.<\/p>\n\n\n\n<p>Select the \u201eHeader\u201c block and click on \u201eReplace\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"365\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen-1024x365.png\" alt=\"Replace header\" class=\"wp-image-4016\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen-1024x365.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen-300x107.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen-768x274.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-ersetzen.png 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Replace header<\/figcaption><\/figure>\n\n\n\n<p>Select your own header \u201eMy header\u201c. You will see it in the preview of the available header template parts.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-auswaehlen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"504\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-auswaehlen.png\" alt=\"Select header\" class=\"wp-image-4017\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-auswaehlen.png 497w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/header-auswaehlen-296x300.png 296w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/a><figcaption class=\"wp-element-caption\">Select header<\/figcaption><\/figure>\n\n\n\n<p>Now save the page design (blue \u201eSave\u201c button at the top right) and view a page of the website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/seite-mit-neuem-header.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"658\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/seite-mit-neuem-header-768x658.png\" alt=\"The page with a new header\" class=\"wp-image-4018\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/seite-mit-neuem-header-768x658.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/seite-mit-neuem-header-300x257.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/seite-mit-neuem-header.png 946w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><figcaption class=\"wp-element-caption\">The page with a new header<\/figcaption><\/figure>\n\n\n\n<p>Would you like to edit or delete your \u201eMy header\u201c template part later? Then go to the list of template parts in the Theme Editor. To edit, click on the name, to delete click on the three vertical dots.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen-1024x428.png\" alt=\"Own template part\" class=\"wp-image-4023\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen-1024x428.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen-300x125.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen-768x321.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen-1536x642.png 1536w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/eigenes-template-teil-bearbeiten-oder-loeschen.png 1604w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Own template part<\/figcaption><\/figure>\n\n\n\n<p>If you have changed one of the standard template parts (footer, header), you can restore its basic settings. To do this, also use the three vertical dots in the corresponding line.<\/p>\n\n\n\n<p>With other block themes, you will also find other template parts here, which are supplied by the theme developers. <\/p>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2233617471649092\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-2233617471649092\"\n     data-ad-slot=\"3695473590\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n<h2 class=\"wp-block-heading\" id=\"pattern-block-vorlagen\">Pattern (\u201eblock templates\u201c)<\/h2>\n\n\n<p>You may already be wondering why there are still different FSE themes if the way they work is always the same. The difference lies mainly in: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the prepared design of the header and footer, <\/li>\n\n\n\n<li>the offer of templates,<\/li>\n\n\n\n<li>the range of styles (combinations of colors and fonts),<\/li>\n\n\n\n<li>the different templates and standard template parts.<\/li>\n<\/ul>\n\n\n\n<p>Since August 2021 (with WordPress 5.8), a <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\">Directory at wordpress.org<\/a> can be used via so-called patterns (\u201eblock templates\u201c). These are ready-made <strong>Combinations of blocks<\/strong> for entire pages or parts of pages and posts that can be copied and pasted. It could hardly be simpler. <\/p>\n\n\n\n<p>FSE themes now also provide their own block templates for content use, matching the design of the theme and its intended use. You can add these templates when editing a page or a post in the following way:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the + icon in the top left-hand corner of the page editor to add a block.<\/li>\n\n\n\n<li>Click on the Templates tab.<\/li>\n\n\n\n<li>Find the desired template (use the \u201eExplore\u201c button) and either click on it to insert it at the cursor position or drag the template to the desired position.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"626\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen-1024x626.png\" alt=\"Gutenberg Block Templates (Pattern)\" class=\"wp-image-4280\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen-1024x626.png 1024w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen-300x183.png 300w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen-768x469.png 768w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/gutenberg-vorlagen.png 1451w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Gutenberg Block Templates (Pattern)<\/figcaption><\/figure>\n\n\n\n<p>This means that WordPress finally offers what has long been available with page builders such as Elementor or website systems such as Square Space. However, the WordPress user community can contribute with self-made templates. <\/p>\n\n\n\n<p>Here are some examples of templates that use the FSE theme <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/alara\/\" target=\"_blank\">Alara<\/a> offers.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/vorlagen-von-anderen-themes.png\"><img loading=\"lazy\" decoding=\"async\" width=\"327\" height=\"840\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/vorlagen-von-anderen-themes.png\" alt=\"Some block templates of the Alara theme\" class=\"wp-image-4330\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/vorlagen-von-anderen-themes.png 327w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/vorlagen-von-anderen-themes-117x300.png 117w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><figcaption class=\"wp-element-caption\">Some block templates of the \u201eAlara\u201c theme\u201c<\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"work-in-progress\">Conclusion<\/h2>\n\n\n<p>If exact specifications have to be achieved, then this is still a job for web designers and creators. This probably also includes the creation of template parts for block themes. The new approach still seems very unfamiliar.<\/p>\n\n\n\n<p>But for people who have already been working with Gutenberg blocks, working on the basic design will be easier if it is mainly just about colors, fonts and rough placements. There are templates for the various template parts to help you put together the structure and appearance of your own website. This makes the Twenty Twenty-Two theme the most flexible and customizable standard WordPress theme to date.<\/p>\n\n\n\n<p>If we compare the options for designing the header and footer area in Twenty Twenty-Two with those of \u201econventional\u201c themes such as <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/blocksy\/\" target=\"_blank\">Blocksy<\/a> we realize that there is still no way around Blocksy. This could change sooner or later. On the one hand, the advanced blocks of plugins such as <em>Stackable <\/em>or <em>Cadence Blocks <\/em>on the other hand, the <em>Groups<\/em>-blocks can soon be designed even more flexibly.<\/p>\n\n\n\n<p>On the other hand, it is very easy to use the many templates (patterns) that are already available to quickly achieve attractive results in the content area. <\/p>\n\n\n\n<p>Those who understand English can <a rel=\"noreferrer noopener\" href=\"https:\/\/learn.wordpress.org\/course\/simple-site-design-with-full-site-editing\/\" target=\"_blank\">Online course<\/a> provided by the WordPress team. The course goes into detail on full site editing, block themes, website design and block templates.<\/p>\n\n\n\n<p>The website <a rel=\"noreferrer noopener\" href=\"https:\/\/fullsiteediting.com\/\" target=\"_blank\">https:\/\/fullsiteediting.com\/<\/a> shows one possibility of implementation, here of course you use a block theme with WordPress 5.9 yourself.<\/p>\n\n\n\n<p>Stay tuned, this article will be continuously expanded and improved (is that even possible, honestly now?). Write us your suggestions as a comment.<\/p>","protected":false},"excerpt":{"rendered":"<p>How to design a WordPress website with the Twenty Twenty-Two block theme and Full Site Editing (FSE): header, footer, menu, logo, colors and more.<\/p>","protected":false},"author":2,"featured_media":4019,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"48","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","iawp_total_views":514,"footnotes":""},"categories":[48],"tags":[],"class_list":["post-3989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/comments?post=3989"}],"version-history":[{"count":6,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3989\/revisions"}],"predecessor-version":[{"id":5744,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/3989\/revisions\/5744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/media\/4019"}],"wp:attachment":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/media?parent=3989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/categories?post=3989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/tags?post=3989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}