> For the complete documentation index, see [llms.txt](https://layouthub.gitbook.io/layouthub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://layouthub.gitbook.io/layouthub/user-guides/layout-editor.md).

# Layout Management

A live preview of your design, including all our pre-made designs library. This is where you’ll actually build your layout and it looks exactly like it will look to your visitors.

When you open the App from the Dashboard you can see recent pages. Click **Customize** to go the **Editor.**

![](https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-M4b2QPiOrjtJ-eQwVOR%2F-M4b2q1gRIRNDYc3n_7u%2Flayout-edit.png?alt=media\&token=982ba074-9775-4810-af46-7c9e6955b91c)

## Sidebar widget & Real-time preview

Editor is Customizer, you can adjust all the settings on the left sidebar. It shows a list of sections you can use.

You will see a real-time preview of how that abstract design will render on the right-side. You don’t need to save and click preview to see your new design. 

![](https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-LtxaRw7Cr1GuwrSvnkf%2F-LtxdGc_hkCEk3Nqf7cD%2FScreenshot_21.png?alt=media\&token=e26c269f-c187-4216-81a1-f4a6cd04ec4a)

{% hint style="info" %}
With the **Live Edit** functionality, the **changes** you make on the sidebar are immediately shown on the Layout without reloading the page.
{% endhint %}

## Responsive Mode

{% hint style="info" %}
Our Layout are built and tested for automatically device-responsive, but if you want to make sure how they look on each device.
{% endhint %}

For more control over how your design looks, > Click the toggle icons <img src="https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-LplQdULq2kPGkKT0FG7%2F-LplQt3ePGrdXpNWn62H%2FScreenshot_136.png?alt=media&amp;token=941e7aa8-704c-4fe4-8900-149d9cc00e13" alt="" data-size="line">  as the device you need to check, to edit its settings. Switch between **Full screen, Desktop, Mobile or Tablet** views by clicking on the corresponding icons on the top of the view port.

* **Mobile screen size**

![](https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-Lu1Se5hZUjNgxSTbJ7V%2F-Lu1UjjJDv2PULuyVRUj%2FScreenshot_18.png?alt=media\&token=dca91b2b-aa51-40ca-92fb-e6e0995f19e7)

* **Tablet screen size**

![](https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-Lu1Se5hZUjNgxSTbJ7V%2F-Lu1UockMK_4cT5v-Iop%2FScreenshot_16.png?alt=media\&token=062b402b-09d7-45aa-b127-3c69f8f3a099)

* **Desktop screen size**

![](https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-Lu1Se5hZUjNgxSTbJ7V%2F-Lu1UsudfCcmIRqnbiwx%2FScreenshot_17.png?alt=media\&token=52bf2484-2f8f-47a3-80a5-0b99f52e363e)

## Auto Save

All the changes you make are automatically saved in Editor regardless to loading the page.

*If you love LayoutHub, could you consider posting an review? That would be awesome and* *really help us to grow our business, here is the* [*link*](https://apps.shopify.com/layout-hub/reviews)