Last updated: August 24, 2021
While editing a blog post, website page, landing page, or email in HubSpot, you can see a preview of how your content would render on different device types. You can also test personalization or smart content by previewing your content as a specific contact.
Understand responsive design
All HubSpot drag and drop templates are responsive by default; your content is adapted to fit on different screen sizes. For example, an image that's set to fill a background may be cropped differently to fit on a smaller screen. Learn more about frequently asked responsive design questions.
If you're working in a starter template, a theme template, or a template with a drag and drop area, you can customize the way your page appears on a mobile device in the content editor.
Unlike drag and drop templates, custom coded templates aren't responsive by default. Developers can use the CMS Developer Documentation to build responsive templates.
Preview a page or blog post
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
- Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
- Hover over the page or post and click Edit.
- In the upper right of the content editor, click Preview to see how a page or post will appear to visitors.
-
- To see a live preview of your page in a new tab in your browser, click Open in new window.
- To copy the preview's URL to your clipboard, click Copy shareable link . Only HubSpot users signed into your account will be able to access your shareable link.
- To see how your page will appear on mobile, tablet, or desktop views, click the device icons.
- To preview your page's personalization for a specific contact, click the Preview as dropdown menu and select Contact. Then click the Choose a contact to preview dropdown menu and select a contact.
- To preview your page's smart content for specific rules, click the Preview as dropdown menu and select Smart rule. Then click the Select a smart rule dropdown menu and select a smart rule.
Preview a knowledge base article
- In your HubSpot account, navigate to Service > Knowledge Base.
- Hover over your article and click Edit.
- In the upper right, click Preview. You will see a live preview of your page in a new tab in your browser.
Preview an email on different devices
- In your HubSpot account, navigate to Marketing > Email.
- Hover over your email and click Edit.
- In the upper right, click the Actions dropdown menu and select Preview. You will see a preview of your email on a tablet and mobile device.
- On the Devices tab of the preview screen, you can customize your preview on different devices:
-
- To test personalization or smart content, click the Preview as a specific contact dropdown menu and select a contact.
- To share your preview, click Copy shareable link in the upper right. Only HubSpot users signed into your account will be able to access your shareable link.
- To preview the plain text version of your email, click to switch the Plain text view toggle on.
Preview an email in different clients
- In your HubSpot account, navigate to Marketing > Email.
- Hover over your email and click Edit.
- In the upper right, click the Actions dropdown menu and select Preview. You'll see a preview of your email on a tablet and mobile device.
- On the Clients tab of the preview screen, you can see how your email will appear in different email clients:
-
- At the top of the preview screen, click Clients.
- To test personalization or smart content, click the Preview as a specific contact dropdown menu and select a contact.
- To search for a specific email client, enter the client name in the search bar.
- To preview the email for a specific client, select the checkbox next to that client.
- To preview how the email will appear for contacts who have image blocking turned on, click to toggle the Image blocking switch on.
- In the top right, click Test my email now. To access the results of a previous test, in the bottom left, click the View results for your previous email here dropdown menu and select a test date.
