---
title: Previewing design changes
related:
  - https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/editing-page-layouts.md
  - https://docs.kentico.com/k12sp/developing-websites/loading-and-displaying-data-on-websites.md
  - https://docs.kentico.com/k12sp/developing-websites/designing-websites-using-css.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The administration interface provides a convenient way to edit the code of web design components side-by-side with a view of the results on the actual website. This allows you to quickly check how changes affect pages without having to leave the editing interface or switch between browser tabs.

This preview functionality is available for all objects in Kentico that influence the design or appearance of the site's pages, including:

- [Transformations](https://docs.kentico.com/k12sp/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md)
- [CSS stylesheets](https://docs.kentico.com/k12sp/developing-websites/designing-websites-using-css.md)
- [Page layouts](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/editing-page-layouts.md)
- [Web part containers](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-web-part-containers.md)
- [Web part layouts](https://docs.kentico.com/k12sp/developing-websites/developing-web-parts/using-custom-web-part-layouts.md)

To access the preview mode, click **Preview** in the header above the code editor.

The preview interface is divided into two parts:

- An editing area where you can modify the code or other fields of the given object
- A section displaying a live site view of a selected page

You can select the following options on the preview toolbar:

- **Close preview** - returns to the standard editing form without a preview section.
- **Horizontal layout** - splits the area horizontally. The top section contains the editing area (i.e. the code), and the preview of the page is displayed in the bottom half.
- **Vertical layout** - splits the area vertically, with the editing area on the left and the page preview on the right.

This allows you to choose the layout that best fits the dimensions of the previewed page and the edited code.

![Previewing the appearance of a news page transformation](https://docs.kentico.com/docsassets/k12sp/previewing-design-changes/Design_Preview.png "Previewing the appearance of a news page transformation")

By default, the code editor automatically expands to completely cover the first section. You can access the other fields on the form by minimizing the editor via the **Toggle fit-to-window mode** (![](https://docs.kentico.com/docsassets/k12sp/previewing-design-changes/FitToWindow.png)) button on the toolbar below the code. Saving the editing form automatically refreshes the page preview.

> **Note:** **Note**
>
> The section displaying the page works like the **Preview** mode of the **Pages** application, which means that the specified page does not actually need to be published on the live site. You can also preview pages that are scheduled to be published in the future or are currently in an unapproved [Workflow](https://docs.kentico.com/k12sp/managing-website-content/working-with-pages/using-workflows.md) step.

## Selecting the preview page

You need to view an appropriate page to see the effects of the changes made in the code. For example, when editing a transformation, select a page containing a web part that uses the given transformation to display data.

To configure the page in the preview section:

1. Select a page via the path selector on the toolbar. You have two options:

   - Click **Select** to choose a page from the content tree.
   - Specify a page by manually entering its alias path into the textbox. You need to click **Refresh** () to reload the page in the preview section.

> **Info:** When editing a design component in the **Pages** application, the preview section automatically loads the currently selected page.

2. On [multilingual websites](https://docs.kentico.com/k12sp/multilingual-websites.md), switch between culture versions of the selected page using the language selector on the toolbar.
3. If the page is configured to display different content for specific [device profiles](https://docs.kentico.com/k12sp/developing-websites/developing-websites-for-mobile-devices/creating-device-profiles.md), choose the preferred profile for the preview.

   - When previewing content for a specific device profile, you can switch between **Landscape** and **Portrait** orientation.