Is this really the version you are looking for? Kentico Xperience 9 Documentation is no longer updated. Use the switcher in the header to choose your product version.
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:
To access the preview mode, click Preview in the header above the code editor.
The preview interface is divided into two parts:
You can select the following options on the preview toolbar:
This allows you to choose the layout that best fits the dimensions of the previewed page and the edited code.
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 (
) button on the toolbar below the code. Saving the editing form automatically refreshes the page preview.
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 step.
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:
Select a page via the path selector on the toolbar. You have two options:
When editing a design component in the Pages application, the preview section automatically loads the currently selected page.
On multilingual websites, switch between culture versions of the selected page using the language selector on the toolbar.
If the page is configured to display different content for specific device profiles, choose the preferred profile for the preview.