{"id":15201243,"date":"2022-01-05T22:48:23","date_gmt":"2022-01-05T22:48:23","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=15201243"},"modified":"2026-04-29T03:16:45","modified_gmt":"2026-04-29T03:16:45","slug":"site-editor","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/site-editor\/","title":{"rendered":"Site Editor"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Site editor allows you to design the entire site including the header, footer, and everything in between, with <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\" data-type=\"helphub_article\" data-id=\"11284652\">blocks<\/a>. It gives you greater control over how your site looks.&nbsp; <\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">The Site Editor is <strong>only<\/strong> available when you install and activate a <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\">Block theme<\/a> on your site.<\/p>\n\n\n\n<h2 id=\"how-to-access-this-feature\" class=\"wp-block-heading\">How to access the Site editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To work with the Site editor, you need to use a<strong> <\/strong><a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\">block theme<\/a> on your site. A block theme is a theme that uses <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\" data-type=\"helphub_article\" data-id=\"11284652\">blocks<\/a> for all parts of a site, including navigation menus, header, content, and site footer.&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">blocks<\/a> that are available in the <a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-editor\/\">WordPress Block editor<\/a> can be used in the Site editor. A set of blocks called <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/#theme-blocks\">Theme blocks<\/a> are specifically built for the Site editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To find block themes, from the WordPress dashboard, go to <strong>Appearance<\/strong> &gt;  <strong>Themes<\/strong> and click <strong>Add New<\/strong>. In the <strong>Add Themes<\/strong> page, select <strong>Block Themes<\/strong> to find the growing list of <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\" data-type=\"helphub_article\" data-id=\"15113575\">Block themes<\/a> in the <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\">WordPress theme directory<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-1024x517.png\" alt=\"Appearance &gt; Themes showing block theme options\" class=\"wp-image-16356158\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-1024x517.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-300x151.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-768x387.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-1536x775.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Appearance-Themes-showing-block-themes-2048x1033.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">How to find a block theme<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you install and activate a Block theme on your site, go to <strong>Appearance<\/strong> &gt; <strong>Editor <\/strong>to open the Site Editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"324\" height=\"218\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Screen-Shot-2023-03-27-at-6.23.05-PM.png\" alt=\"Appearance section of the admin interface showing the Themes and Editor entry points after activating a block theme. \" class=\"wp-image-16356140\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Screen-Shot-2023-03-27-at-6.23.05-PM.png 324w, https:\/\/wordpress.org\/documentation\/files\/2022\/01\/Screen-Shot-2023-03-27-at-6.23.05-PM-300x202.png 300w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><figcaption class=\"wp-element-caption\">Appearance menu after activating a block theme<\/figcaption><\/figure>\n\n\n\n<h2 id=\"how-to-access-this-feature\" class=\"wp-block-heading\">Things to do in the Site Editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once you enter the Site Editor, you will see five menu items.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"910\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-sections-6-3.png\" alt=\"Main menu screen in the Site Editor.\" class=\"wp-image-16358427\" style=\"width:308px;height:410px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-sections-6-3.png 684w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-sections-6-3-225x300.png 225w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-navigation\">Navigation<\/a>: Allows you to browse your menus and make basic changes.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/styles-overview\/\" data-type=\"helphub_article\" data-id=\"15127782\">Styles<\/a>: Provides a direct access to edit your site&#8217;s style variations.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-pages\">Pages<\/a>: You can now edit the content of your pages inside the Site Editor itself.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\" data-type=\"helphub_article\" data-id=\"14632189\">Templates<\/a>: Review the different default layouts for the different sections on your site, as well as custom pages (search results, 404, etc).<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-patterns\">Patterns<\/a>: Your Synced patterns and template parts can be managed here.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You will also see an icon of a magnifying glass. Click on it to access the <a href=\"https:\/\/wordpress.org\/support\/article\/site-editor-command-palette\">Command Palette.<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below is an overview of the different sections in the Site Editor.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"808\" style=\"aspect-ratio: 1200 \/ 808;\" width=\"1200\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-overview.mp4\"><\/video><\/figure>\n\n\n\n<h2 id=\"how-to-use-the-site-editor\" class=\"wp-block-heading\">The Site Editor workspace<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Site editor loads the home page of your site (based on what you have set in the <a href=\"https:\/\/wordpress.org\/documentation\/article\/settings-reading-screen\/#reading-settings\">Reading Settings<\/a>) to start editing. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The top menu in the Site editor includes the following options:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2242\" height=\"270\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar.png\" alt=\"Site editor toolbar with numbers indicating various options to explore. \" class=\"wp-image-16358425\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar.png 2242w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar-300x36.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar-1024x123.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar-768x92.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar-1536x185.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-Toolbar-2048x247.png 2048w\" sizes=\"auto, (max-width: 2242px) 100vw, 2242px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The site icon (or the W icon, if no site icon is set for the site): Return to the dashboard or switch to the other section of the Site Editor: <a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-navigation\">Navigation<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/styles-overview\/\" data-type=\"helphub_article\" data-id=\"15127782\">Styles<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/https:\/\/wordpress.org\/documentation\/article\/site-editor-pages\">Pages<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\">Templates<\/a>, or <a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-patterns\">Patterns<\/a>. If you choose to return to the dashboard, it will prompt you to save the changes or leave the Site editor without saving the changes.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>The&nbsp;<strong>+<\/strong>&nbsp;Block inserter button: Add a new <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">block<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-pattern\/\">block pattern<\/a>, Media, or synced pattern (if the site has synched patterns) to the Site editor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/6-3-inserter-662x1024.png\" alt=\"Block Inserter Panel\" class=\"wp-image-16358422\" style=\"object-fit:cover;width:314px;height:486px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/6-3-inserter-662x1024.png 662w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/6-3-inserter-194x300.png 194w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/6-3-inserter.png 706w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><figcaption class=\"wp-element-caption\">Block inserter panel<\/figcaption><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Tools: Switch between editing a block and selecting a block. Choose the <strong>Select<\/strong> tool (or press the <code>Escape<\/code> key on your keyboard) to select individual blocks. Once a block is selected, press the <code>Enter<\/code> key on your keyboard to return to editing.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"488\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-2.52.04-PM.png\" alt=\"Edit\/select buttons in the WordPress block editor workspace\" class=\"wp-image-15641001\" style=\"width:284px;height:244px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-2.52.04-PM.png 568w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-2.52.04-PM-300x258.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><figcaption class=\"wp-element-caption\">Edit\/Select buttons<\/figcaption><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Undo<strong>:&nbsp;<\/strong>Undo the most recent action taken.<\/li>\n\n\n\n<li>Redo<strong>:&nbsp;<\/strong>Redo an action you reversed using the <strong>Undo<\/strong> button.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/list-view\/\" data-type=\"helphub_article\" data-id=\"14641368\">List View<\/a>: See a list of all of the blocks that are on the page and easily navigate between the blocks on your page. This is useful for seeing the page\u2019s structure and editing, moving, and removing blocks. <\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/support\/article\/site-editor-command-palette\">Command Palette<\/a>: Click here to access all your site&#8217;s content, templates, and patterns quickly, as well as invoking other actions (settings, new page, etc).<br><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"530\" style=\"aspect-ratio: 900 \/ 530;\" width=\"900\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/command-palette-1.mp4\"><\/video><\/figure>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li>Save<strong>:&nbsp;<\/strong>Save the changes you made in the Site editor.\n<ul class=\"wp-block-list\">\n<li>When you click the&nbsp;<strong>Save&nbsp;<\/strong>button, you will get a list of all the <a href=\"https:\/\/wordpress.org\/documentation\/article\/reusable-blocks\/\" data-type=\"helphub_article\" data-id=\"13363440\">synced patterns<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-navigation\">navigation menus<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\" data-type=\"helphub_article\" data-id=\"14632189\">templates<\/a> and <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-part-block\/\" data-type=\"helphub_article\" data-id=\"15124095\">template parts<\/a> where you have made changes. <\/li>\n\n\n\n<li>You can choose to save all or just some of them. <\/li>\n\n\n\n<li>Note that some changes (like changes to the Header and Footer templates) will apply to all pages of your site that use those templates, and not just the page you were working on.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1450\" style=\"aspect-ratio: 2296 \/ 1450;\" width=\"2296\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-save-changes.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li>Settings: Show or hide the Template and Block Settings sidebar menu.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1450\" style=\"aspect-ratio: 2296 \/ 1450;\" width=\"2296\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-reset-customizations.mp4\"><\/video><\/figure>\n\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/styles-overview\/\">Styles<\/a><strong>:&nbsp;<\/strong>Browse style variations available for the theme you have, set the typography, color palettes, and layout for the entire site, or customize the appearance of specific blocks for the whole site.<\/li>\n\n\n\n<li><span style=\"color: initial;, sans-serif\">More Options<\/span><strong style=\"color: initial;, sans-serif\">:<\/strong><span style=\"color: initial;, sans-serif\">&nbsp;Click the three vertical dots icon to open additional settings and tools.<\/span><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-More-options-432x1024.png\" alt=\"Site editor with an arrow pointing to the three dot menu where extra settings can be found. \" class=\"wp-image-16358426\" style=\"width:301px;height:714px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-More-options-432x1024.png 432w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-More-options-127x300.png 127w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Site-Editor-More-options.png 630w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>View top toolbar<\/strong>: Display or hide the top toolbar in the editor. When you enable this option, block toolbars are pinned to the top of the WordPress block editor (right under the top toolbar) instead of appearing directly above the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"219\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-9.58.33-PM-1024x219.png\" alt=\"Top toolbar enabled\" class=\"wp-image-15641492\" style=\"width:446px;height:95px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-9.58.33-PM-1024x219.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-9.58.33-PM-300x64.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-9.58.33-PM-768x164.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-9.58.33-PM.png 1066w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Top toolbar enabled<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Spotlight mode<\/strong>: All blocks are greyed out except for the one you\u2019re working on so that you can focus on a single block at a time.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Screen-Shot-2022-05-12-at-10.01.48-PM-1-1024x722.png\" alt=\"Spotlight mode\" class=\"wp-image-15641498\" style=\"width:443px;height:312px\" \/><figcaption class=\"wp-element-caption\">Spotlight mode<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Distraction Free<\/strong>: When this options is activated, all non-essential parts of the UI will be hidden to provide a more immersive editing experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Editor<\/strong>: By default, you will be in the <strong>Visual editor<\/strong>. Switch to the <strong>Code editor<\/strong> to view the entire page in HTML code editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plugins<\/strong>: Here, you can switch between <strong>Settings<\/strong> and <strong>Styles<\/strong> in the Site editor Sidebar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tools<\/strong>: Here, you can download your theme with the updated templates and styles (<strong>Export<\/strong>), learn&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/block-editor-keyboard-shortcuts\/\">keyboard shortcuts<\/a>, visit the Site Editor welcome guide, copy all blocks, or view additional support articles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Preferences<\/strong>: Use the <a href=\"https:\/\/wordpress.org\/documentation\/article\/preferences-overview\/\">Preferences<\/a> menu to customize the editing experience and change how you interact with blocks.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the Site Editor<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">To edit the site&#8217;s styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can use the Site Editor to customize the styles for the entire website and for the blocks. Styles settings are available regardless of what template or template part you are editing.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong>. <\/li>\n\n\n\n<li>Click the Styles menu item or on the icon next to the block settings sidebar. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"1024\" data-id=\"16358449\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-menu-689x1024.png\" alt=\"\" class=\"wp-image-16358449\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-menu-689x1024.png 689w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-menu-202x300.png 202w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-menu-768x1141.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-menu.png 844w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"1024\" data-id=\"16358448\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-icon-693x1024.png\" alt=\"\" class=\"wp-image-16358448\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-icon-693x1024.png 693w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-icon-203x300.png 203w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-icon-768x1136.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-icon.png 844w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Styles<\/strong> section, you can browse the style variations available for the theme you have, change the color palettes and typography, and layout across the entire site and also change the appearance of blocks which are also applicable across the whole site. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To review your <strong>style revisions or reset the changes<\/strong> you made completely, click the three-dot menu icon in the right corner and select either option.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"772\" style=\"aspect-ratio: 1222 \/ 772;\" width=\"1222\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-styles-overview-revisions-reset-1.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about Styles in this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/styles-overview\/\">Styles overview<\/a>.<\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">To customize the site&#8217;s layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can use the Site Editor to build the structure and layout of your entire site, using blocks. Eg: areas like headers, footers, and the&nbsp;structural appearance&nbsp;of your site&#8217;s posts and pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\" data-type=\"helphub_article\" data-id=\"11284652\">blocks<\/a> that are available in the <a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-editor\/\" data-type=\"helphub_article\" data-id=\"11284616\">WordPress Block Editor<\/a> can be used in the Site Editor. A set of blocks called <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/#theme-blocks\">Theme blocks<\/a> are specifically built for the Site Editor. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples: the <a href=\"https:\/\/wordpress.org\/documentation\/article\/query-loop-block\/\" data-type=\"helphub_article\" data-id=\"14633622\">Query Loop Block<\/a> allows you to customize the look and feel of your post layout, the <a href=\"https:\/\/wordpress.org\/documentation\/article\/navigation-block\/\" data-type=\"helphub_article\" data-id=\"15191692\">Navigation Block<\/a> lets you customize the site&#8217;s navigation menu, the <a href=\"https:\/\/wordpress.org\/documentation\/article\/site-title-block\/\" data-type=\"helphub_article\" data-id=\"15525633\">Site Title Block<\/a> helps to customize the Site Title and more. <\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Check out the full list of <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/#theme-blocks\">Theme blocks<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example &#8211; How to Customize Twenty Twenty-Three using the Site Editor<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/twenty-twenty-three\/\">Twenty Twenty-Three<\/a>\u00a0supports the Site Editor and can be customized using it. As an example, let&#8217;s remove the gap at the top of the home page in Twenty Twenty-Three. To do this, remove the padding at the bottom of the header template part and the padding at the top of the content area.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-medium has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"190\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023-300x190.jpg\" alt=\"Before\" class=\"wp-image-16358656\" style=\"border-width:1px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023-300x190.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023-1024x649.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023-768x487.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023-1536x974.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/before-editing-2023.jpg 1732w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-medium has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"191\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023-300x191.jpg\" alt=\"After\" class=\"wp-image-16358657\" style=\"border-width:1px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023-300x191.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023-1024x651.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023-768x488.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023-1536x977.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/after-editing-2023.jpg 1736w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, remove bottom padding of Header Template Parts.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From Administration Screen, Select <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong><\/li>\n\n\n\n<li>Select <strong>Patterns<\/strong> &gt; <strong>Template Parts<\/strong> &gt; <strong>Header<\/strong> &gt; <strong>Header<\/strong>, and click Pencil icon to edit it.<\/li>\n\n\n\n<li>Select the <strong>Group<\/strong> &gt; <strong>Row<\/strong> block. Use the bottom block navigation.<\/li>\n\n\n\n<li>From Block Settings, Click Styles.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023-1024x653.jpg\" alt=\"Styles of Header Template Parts\" class=\"wp-image-16358658\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023-1024x653.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023-300x191.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023-768x490.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023-1536x980.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/header-styles-2023.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Styles of Header Template Parts<\/figcaption><\/figure>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Scroll down to the Padding &gt; Bottom. Current value is 2.<\/li>\n\n\n\n<li>Set it to 0.<\/li>\n\n\n\n<li>Save the template parts.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Next, remove top padding of content area.<\/p>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li>Back to the Site Editor.<\/li>\n\n\n\n<li>Select Templates &gt; Home, and click Pencil icon to edit it.<\/li>\n\n\n\n<li>Select the top Group block. Use the bottom block navigation.<\/li>\n\n\n\n<li>From Block Settings, Click Styles.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"734\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023-1024x734.jpg\" alt=\"Home Template Styles\" class=\"wp-image-16358659\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023-1024x734.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023-300x215.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023-768x550.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023-1536x1101.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/home-templates-styles-2023.jpg 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Home Template Styles<\/figcaption><\/figure>\n\n\n\n<ol start=\"12\" class=\"wp-block-list\">\n<li>Scroll down to the Padding &gt; Top. Current value is 3.<\/li>\n\n\n\n<li>Set it to 0.<\/li>\n\n\n\n<li>Save the template.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"access-the-template-editor-via-the-site-editor\" class=\"wp-block-heading\">To browse the templates and template parts <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From the Site editor, you can easily browse the <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\" data-type=\"helphub_article\" data-id=\"14632189\">templates<\/a> and <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-part-block\/\" data-type=\"helphub_article\" data-id=\"15124095\">templates parts<\/a> available for your site.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong> to open the Site editor. This will bring you to a view where you can choose to browse your templates or template parts. <\/li>\n\n\n\n<li>Click on  <strong>Templates<\/strong> to preview the list of templates available for your site.<\/li>\n\n\n\n<li>Click on <strong>Patterns<\/strong> to preview the list of template parts.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"540\" style=\"aspect-ratio: 960 \/ 540;\" width=\"960\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/site-editor-template-overview-6.6.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">To manage the site&#8217;s templates<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress uses <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\">templates<\/a> to create the layout and structure for specific page types on your site. The Site Editor displays the template choices that you can add to your site and lets you create custom templates using the <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\" data-type=\"helphub_article\" data-id=\"14632189\">Template Editor<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong>, you will be shown a view that includes a sidebar with your list of Templates and Patterns that includes the list of template parts.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"540\" style=\"aspect-ratio: 960 \/ 540;\" width=\"960\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/site-editor-templates-6.6.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about Templates in this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-editor\/\">Template Editor<\/a>.<\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">To manage the template parts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A Template part is a block for managing the repeating global areas of the site such as a Header, Footer, Sidebar, etc. They are primarily meant to define the site structure and can be reused. You can also create custom Template Parts that can be reused through the templates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong>, click the <strong>Patterns<\/strong> option. From All templates parts, you can access to them.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"540\" style=\"aspect-ratio: 960 \/ 540;\" width=\"960\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/site-editor-template-parts-6.6.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about Template Parts in this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/template-part-block\/\">Template Part<\/a>.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">To manage pages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Since version 6.3, it is possible to manage, edit and create pages via the Site Editor, under the &#8220;Pages&#8221; section.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"540\" style=\"aspect-ratio: 960 \/ 540;\" width=\"960\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/01\/site-editor-pages-6.6.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about managing pages via the Site Editor in this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor-pages\">Site Editor Pages<\/a><\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to return to the Dashboard<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To go back to your dashboard, click the WordPress icon (or Site icon if you have set one)  to open the Site Editor left navigation.  Select <strong>&lt; <\/strong>to take you back to your WordPress dashboard. You will be prompted to save the changes you have made in the Site Editor before leaving.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"728\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073608-1024x728.png\" alt=\"How to exit the Site Editor by clicking on the WordPress or Site Icon on the top left part of the screen.\" class=\"wp-image-16358437\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073608-1024x728.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073608-300x213.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073608-768x546.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073608.png 1268w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to export templates and styles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can export your theme with the changes you made in the Site Editor including the templates, template parts, and style settings, similar to the&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/tools-export-screen\/\">Tools &gt; Export option<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the Site Editor by going to <strong>Appearance<\/strong> &gt; <strong>Editor<\/strong>.<\/li>\n\n\n\n<li>Select the three vertical dots icon next to your <strong>Styles<\/strong> settings option.<\/li>\n\n\n\n<li>Under <strong>Tools<\/strong>, select <strong>Export<\/strong>. This will begin the export process and you will receive a downloaded zip file of your theme with the templates and template parts included.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"752\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719-1024x752.png\" alt=\"How to find the &quot;Export&quot; option under the three-dot &quot;More Options&quot; menu on the top right part of the screen.\" class=\"wp-image-16358438\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719-1024x752.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719-300x220.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719-768x564.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719-1536x1128.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screen-Shot-on-2023-08-05-at-073719.png 1740w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Useful tools when using the Site Editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following tools are helpful when using the Site Editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Command Palette<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Command Palette offers you a quick way to navigate the <strong>content<\/strong> of your site and to invoke different <strong>actions<\/strong> such as creating new posts\/pages, toggling preferences, and accessing your styles and custom CSS settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can open the Command Palette in the Site View in the sidebar by clicking on the <strong>search icon<\/strong> and. In Edit View, the Command Palette is in the <strong>top Title Bar<\/strong>. You can also use the <strong>keyboard shortcut<\/strong> <code>Cmd+k<\/code> on Mac or <code>Ctrl+k<\/code> on Windows<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"530\" style=\"aspect-ratio: 900 \/ 530;\" width=\"900\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/command-palette-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about the Command Palette in this support article: <a href=\"https:\/\/wordpress.org\/support\/article\/site-editor-command-palette\">Site Editor Command Palette<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">List View<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">List View helps you navigate complex block layouts and nested block structures. You can select exactly which block you need, and get a quick overview of the block layout on the page you are working on. You can easily select multiple blocks and edit, move or group them.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"688\" style=\"aspect-ratio: 1200 \/ 688;\" width=\"1200\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-list-view.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about List View in this support article: &nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/list-view\/\">List View<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Block Patterns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Block Patterns are a collection of predefined blocks that you can insert into posts and pages. You can then customize them further. WordPress comes with a set of standard Block Patterns. You can also find Block Patterns bundled with the <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\" data-type=\"helphub_article\" data-id=\"15113575\">block themes<\/a>.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">Learn more about Block Patterns in this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-pattern\/\">Block Pattern<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Copy and paste styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With WordPress 6.2, a new option was added to allow you to copy and paste block styles, making it easy to reuse designs you\u2019ve created. You can find this from the three dot menu in any block and it&#8217;s meant to be used to copy and paste between the same type of block:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"688\" style=\"aspect-ratio: 1200 \/ 688;\" width=\"1200\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-copy-paste-styles.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Apply style changes globally<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re more comfortable with more advanced options when creating a design or customizing individual blocks, as of WordPress 6.2, you can take changes made to an individual block and apply it to <strong>all blocks of the same type<\/strong>. For example, you could apply a single design for an individual block to all blocks in your site with a new option under the <strong>Advanced<\/strong> section of block settings. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"593\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-1024x593.png\" alt=\"How to apply the current&apos;s block style to all styles of that same type across your site by clicking on Block Settings &gt; Advanced &gt; Apply Globally\" class=\"wp-image-16358441\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-1024x593.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-300x174.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-768x445.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-1536x889.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-apply-styles-globally-2048x1186.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Resize the preview of the Site Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When you&#8217;re in the Site Editor, you might want to change the preview of the template or template part you&#8217;re viewing. You can do this by selecting the handles of the dark gray sidebar and moving it to your liking. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1478\" style=\"aspect-ratio: 2328 \/ 1478;\" width=\"2328\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/site-editor-resize-pattern-preview.mov\"><\/video><\/figure>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"resource-links\" class=\"wp-block-heading\">Resource Links<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/documentation\/article\/additional-guide-to-using-the-site-editor\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/documentation\/article\/additional-guide-to-using-the-site-editor\">Additional guide to using Site Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learn.wordpress.org\/course\/simple-site-design-with-full-site-editing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Simple Site Design and Site Editing<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-the-site-editor-and-template-editor\/\" target=\"_blank\">Intro into the Site Editor and Template Editor<\/a> <\/li>\n<\/ul>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-medium-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2024-09-14\n<ul class=\"wp-block-list\">\n<li>Updated template and template parts management section with Grid View <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-08-13\n<ul class=\"wp-block-list\">\n<li>Added example of Site Editor usage.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-08-08\n<ul class=\"wp-block-list\">\n<li>Replaced &#8220;Reusable Blocks&#8221; with &#8220;Patterns&#8221;<\/li>\n\n\n\n<li>Updated wording &amp; screenshots to match the new interface.<\/li>\n\n\n\n<li>Added a reference to the Command Palette &amp; Site Editor Pages.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-03-27\n<ul class=\"wp-block-list\">\n<li>Updated content and screenshots for 6.2 <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-10-17\n<ul class=\"wp-block-list\">\n<li>Updated content and screenshots\/video for 6.1<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-05-17\n<ul class=\"wp-block-list\">\n<li>Reworking the content &amp; updating videos\/screenshots for 6.0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2022-01-05<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Site editor allows you to design the entire site including the header, footer, and everything in between, with blocks. It gives you greater control over how your site looks.&nbsp; The Site Editor is only available when you install and activate a Block theme on your site. How to access the Site editor To work [&hellip;]<\/p>\n","protected":false},"author":13782018,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[81,80],"class_list":["post-15201243","helphub_article","type-helphub_article","status-publish","hentry","category-appearance","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15201243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/13782018"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=15201243"}],"version-history":[{"count":19,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15201243\/revisions"}],"predecessor-version":[{"id":16367587,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15201243\/revisions\/16367587"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=15201243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=15201243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}