The Site Editor is where you change how your whole site looks — the layout of your pages, your header and footer, and the colors and fonts used everywhere. It all happens inside WordPress, so there's no code to write.

## Before you start

- A WordPress account that's allowed to change your site's design.
- A theme that works with the Site Editor. If yours does, you'll see the **Editor** item under **Appearance** — the Twenty Twenty-Five theme that comes with WordPress is one of them.
- JavaScript turned on in your browser, since the Site Editor runs in it.

## Steps

### Step 1: Open the Site Editor

In your WordPress dashboard, open the **Appearance** menu in the left-hand sidebar, then click **Editor**. The Site Editor opens in full screen with a preview of your site.

![Open the Site Editor](https://wordpress.supportpages.io/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6OTc2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--d2852b63d2fd04667f61932da583ad5d2b741fbd/block_open-the-site-editor.png)

### Step 2: See what you can change

The **Design** screen is your starting point. Choose **Templates** to change how your pages and posts are laid out, **Patterns** to work on your header, footer and other template parts, or **Styles** to set the colors, fonts and spacing for your whole site.

![See what you can change](https://wordpress.supportpages.io/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6OTc2MSwicHVyIjoiYmxvYl9pZCJ9fQ==--6993b52e61e39f048671b0ceb6a81ef9c92f2d5d/block_see-what-you-can-change.png)

### Step 3: Edit a template

Choose **Templates** and pick the one you want to change — **Blog Home** holds the page your visitors land on. Click the words on the page and start typing to replace them with your own.

Your templates use the same blocks you already know from writing posts, so you can add an image, a button or a whole new section the same way.

![Edit a template](https://wordpress.supportpages.io/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6OTc3MCwicHVyIjoiYmxvYl9pZCJ9fQ==--58524e2f75863f2cdd83523d67dadace34f14ab8/block_edit-a-template.png)

### Step 4: Edit a template part

Template parts are the pieces that repeat on every page — your header, your footer, your sidebar. Choose **Patterns**, then select **Header** in the sidebar to see the ones your theme provides.

Open a part and change it the same way you edited the template.

![Edit a template part](https://wordpress.supportpages.io/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6OTc2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--f3874077b381a7fab13e0114492ef70423b1b8cf/block_edit-a-template-part.png)

### Step 5: Change your site's colors and fonts

Choose **Styles** to shape how the whole site looks at once. Open **Colors** to pick a fresh palette, **Typography** to set your fonts, or **Layout** to adjust the width and spacing of your content.

![Change your site's colors and fonts](https://wordpress.supportpages.io/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6OTc1NywicHVyIjoiYmxvYl9pZCJ9fQ==--8f1553500297f5f85c8884fb498922da8972d711/block_change-your-site-styles.png)

### Step 6: Save your changes

Click **Save** at the bottom of the left sidebar. Your changes go live on your site straight away, and the button reads **Saved** once everything is in.

## Tips

- Not sure where a piece of your page lives? If it repeats on more than one page, it's probably a template part — look under **Patterns**.
- Open **Browse styles** in the Styles panel to try a ready-made variation of your theme's design before you pick your own colors.
- Changed your mind before saving? Undo with `Ctrl` + `Z`, or `Cmd` + `Z` on a Mac.

## Summary

**Templates** for layouts, **Patterns** for the pieces that repeat, and **Styles** for colors and fonts — the Site Editor keeps all of it in one place. Make your changes, click **Save**, and your site updates everywhere at once.