Skip to content
Landing Pages

Preview your content on different devices

Last updated: April 1, 2021

Applies to:

All products and plans

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

    1. To see a live preview of your page in a new tab in your browser, click Open in new window.
    2. 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.
    3. To see how your page will appear on mobile, tablet, or desktop views, click the mobile device icons.
    4. 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. 
    5. 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.
  1.  

preview-a-page-2

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: 
    1. To test personalization or smart content, click the Preview as a specific contact dropdown menu and select a contact.
    2. 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.
    3. To preview the plain text version of your email, click to switch the Plain text view toggle on. 

preview-your-email

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:  
    1. At the top of the preview screen, click Clients
    2. To test personalization or smart content, click the Preview as a specific contact dropdown menu and select a contact.
    3. To search for a specific email client, enter the client name in the search bar. 
    4. To preview the email for a specific client, select the checkbox next to that client. 
    5. To preview how the email will appear for contacts who have image blocking turned on, click to toggle the Image blocking switch on. 
    6. 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

preview-your-email-in-different-clients-2