With the Site Editor, you can design everything on your site — from the header right down to the footer — using blocks.
Before the Site Editor, many fundamental elements of your site’s design (like the header, sidebars, page content, and more) were all determined by your theme. With the Site Editor, you can access a whole new level of control over your site’s appearance!
In this guide
Not sure when to edit something using the Site Editor versus an individual page? Follow these guidelines:
- When you want to edit your site’s overall structure (i.e. areas like headers, footers, and the structural appearance of your pages and posts), use the Site Editor.
- When you want to edit the content of your pages (i.e. text, images, embeds, and more), edit those pages individually by going to your dashboard and selecting Pages.
- When you want to edit the content of your blog posts (i.e. text, images, embeds, and more), edit those posts individually by going to your dashboard and selecting Posts.
💡
If you have inadvertently added page or post content into the Site Editor, you can transfer the content from the Site Editor into an individual post or page.
You can use the Site Editor on our large collection of new themes. When you activate a theme that supports the Site Editor, visit Appearance → Editor to access it:
The Site Editor will then load your site’s front page for you to start editing.
Next, we’ll describe the various elements of the Site Editor.
When you click Appearance → Editor, you are taken to the template the homepage uses. On the left-hand side, you’ll see the template name along with two buttons. The pencil button on the right-hand side allows you to edit the selected template.
Clicking the arrow button to the left of the template name takes you to other available templates. Choose from the list of templates to edit or click + button to add a new template.
Again, the left arrow button here will take you to the Design options. From here, you can select Navigation, Templates, and Templates Parts.
The top menu includes several important options, each explained below:
- The site icon: Return to your dashboard or switch to editing templates or template parts.
- The + block inserter button: Add a new block.
- Tools: Choose between editing a block and selecting a block. Choose the Select tool to select individual blocks. Once a block is selected, press the Enter key on your keyboard to return to editing.
- Undo: Reverse the most recent action taken.
- Redo: Un-reverse an action you reversed using the Undo button.
- List View: See a list of all of the blocks that are on the page. This is useful for seeing your page’s structure and editing, moving, and removing blocks. Learn more about List View.
- Template: The name of the template you are editing. Click this and then click Browse all templates to view all of your site’s templates. Learn more about template editing.
- Preview: See what your site looks like with the changes applied.
- Save: Save your changes. Learn more about saving.
- Settings: Display or hide the Template and Block Settings sidebar menu.
- Styles: Customize the appearance of specific blocks for the whole site. Learn more about working with Styles.
- More Options: Opens additional settings and tools.
When you click the Save button to save changes you’ve made in the Site Editor, it will note the places you’ve made changes to. You can choose to save all or just some of them. 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.
If you have saved changes and want to reset those back to the default style, use the Clear Customizations option below.
If you haven’t saved the changes yet, you can exit out of the editor, and the changes you made will not be saved.
If you have already saved the changes, you can revert those changes. Click the name of the template you’re editing, click the three dots next to the template part you want to reset, and click the Clear customizations option:
Then, make sure to click Save to save your action of clearing the customizations.
The same blocks that work within the page/post editor are compatible with the Site Editor. You’ll find a list of all those blocks here.
A few notable blocks are optimized for the Site Editor, such as the Site Logo block, the Navigation block, and the Query Loop block. View all the Theme Blocks here.
Use Styles in the Site Editor when you want to choose color palettes, fonts, layouts, and more design aspects that affect your site as a whole. Learn how to use Styles.
Here are more helpful resources and tutorials to learn more about all aspects of site editing:
