# Website layout editor

> Try layout changes on a live website in your browser. Move or remove elements, then undo, with the Sitepeel Chrome extension before you build the redesign.

Canonical page: https://sitepeel.dev/website-layout-editor/

Move or remove elements on the page to explore a layout idea. Undo changes as you compare different directions.

Updated: 2026-09-18

This is a tool in the Sitepeel Chrome extension (free to install: https://chromewebstore.google.com/detail/sitepeel/khcjkaobanoeohahnlffnnppinoeljme). All extension tools: https://sitepeel.dev/features/index.md

## Highlights

- Move elements
- Remove visual clutter
- Undo experiments

## How to use it

1. **Choose Move & delete** Open the layout tool on a page you want to explore.
2. **Make one change** Move or remove an element and review how the hierarchy changes.
3. **Compare and undo** Capture the idea if useful, then undo changes before trying another direction.

## Test a hierarchy before rebuilding it

Moving an action closer to its explanation or removing a distracting section can make a page’s purpose clearer. A local experiment helps you decide whether that direction is worth implementing.

Change one relationship at a time. Compare the content order, grouping and whitespace after each edit.

## Work with the layout you are given

A page may rely on grid, flexbox, positioned elements or application state. Moving an element can reveal those dependencies, and some arrangements may need new CSS in the source project.

Treat the experiment as a visual proposal. Check it at another viewport before assuming the rearrangement will work across the whole site.

## Take the decision back to the project

Local layout changes do not publish to the website. Save a screenshot and a short explanation of the intended behavior, then implement it in your own code or CMS.

Use the text editor to refine copy after the layout is settled. Inspect measurements when you need to reproduce the spacing accurately.

## Related pages

- [Website text editor](https://sitepeel.dev/website-text-editor/index.md): Try new headings and website copy directly in the layout. Edit text locally with Sitepeel to check wrapping and fit before updating your site.
- [CSS inspector & ruler](https://sitepeel.dev/css-inspector/index.md): An element inspector and page ruler for Chrome: hover any element for its size, padding and margins, and measure the space between elements on any website.
- [Preview copy in a layout](https://sitepeel.dev/guides/preview-website-copy/index.md): Try new headlines, button labels and section orders in place with Sitepeel’s Edit text and Move & delete tools, before you change your site.