Change the preview page in SharePoint Design Manager
Important
This extensibility option is only available for classic SharePoint experiences. You cannot use this option with modern experiences in SharePoint Online, like with communication sites. We do not recommend using classic experience or these branding techniques anymore.
Learn how to set, create, and change the preview page in Design Manager in SharePoint. The preview page is the page of your site that you use to see how your design looks. You can set the preview page to be either a specific page within your site or a generic preview. If you choose the generic preview, you'll see your master page with only a placeholder for content. You'll also see a message in the banner that you're currently previewing the master page without any content. If you choose a specific page, you'll see the page content rendered with the master page and the appropriate page layout.
As you interact with the page, you might do something that causes SharePoint to move away from the preview. For example, if you select Save on the ribbon, SharePoint saves the page and then displays the live version of the page. (The live version of the page uses the live master page, not the master page that you are designing.) You can return to the preview page by choosing Reset the preview.
Set the preview page in Design Manager
Use this procedure to set the preview page.
To set the preview page
In the banner at the top of the web browser, choose Change Preview Page.
Choose Select Existing.
To use a generic preview page, select Generic Preview.
To use a specific page as the preview page, select URL and enter the URL of the page.
Choose OK.
Create a new preview page in Design Manager
Use this procedure to create a page and set it as the preview page.
To create a new preview page
In the banner at the top of the web browser, choose Change Preview Page.
Choose Create New.
Type a name for the page and then choose Create.
The page is created, and you are taken to a view from which you can add content to the new page.
Return to the preview page in Design Manager
Use this procedure to return to the preview page.
To return to the preview page
- In the information message at the top of the web browser, select Reset the preview.