While you're working on 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.
How responsive design works
All HubSpot drag and drop templates contain media queries that adjust your content so it fits on different screen sizes. Responsive content won't look identical on every device type. For example, an image that's set to fill a background may be cropped differently to fit on different screen sizes. Learn more about common questions about responsive design.
Please note: custom coded templates aren't responsive by default. Website developers can use the CMS Developer Documentation to make sure the templates they build are responsive.
Preview your page or blog post
In the upper right, click Preview to see how your page will appear to visitors to your page.
- Device preview: click Open in new window to see a live preview of your page in a new tab in your browser. This preview link will work before your page is actually published. Click Copy shareable link to copy the link to your clipboard to share it with your team.
- Smart preview: click the Preview as dropdown menu to preview how your page will appear for different contacts in your database.
- Select a contact to preview how personalization will appear based on that particular contact's property values. Click the second dropdown menu to select a specific contact from your database.
- Select a smart rule to preview how smart content on your page will appear to contacts who meet its criteria. Click the second dropdown menu to select a specific smart rule to preview.
- Device type: click Mobile + Tablet to see a live preview of your page on a phone or tablet device. Click Desktop to see a preview of how your page will appear on a web browser.
Preview an email in the drag and drop editor
- In your HubSpot account, navigate to Marketing > Email.
- Click the name of your email draft.
- 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.
- To test personalization or smart content, click the Preview as a specific contact dropdown menu to select a contact from your database.
- To share your preview, click Copy shareable link in the upper right.
- After you've finished reviewing your content, click Back in the upper left to return to the email editor.
Learn more about how to preview and test your email in the drag and drop editor.
Preview content on an email created with the classic editor
- In your HubSpot account, navigate to your blog, email, landing pages, or website pages.
- Click the name of your blog post, email, or page.
- On the left sidebar menu, click the eye icon.
- Click a device type to see a preview of how your content would render on a desktop, tablet, or mobile device. There are options to preview devices in landscape and portrait mode.
- Click Open in new window to see a shareable version of your email in a browser window, or click Copy to share the preview link.
- To test personalization or smart content, use the Preview as a specific contact dropdown menu to select a contact from your database.
- After you've finished reviewing your content, click Exit preview mode to return to the content editor.
