Find answers to common questions about page design, page publishing and page analytics. The best way to make a change to your HubSpot template or stylesheet is with the original template designer.
Please note: if you're using a template purchased from the Asset Marketplace, contact the template's designer for questions about the design of your page.
- How do I get help with design questions?
- Why isn't my page responsive on mobile?
- How can I create a hero background image?
- How do I control the colors and fonts for my navigation menu?
- How do I center a CTA?
- How do I edit my page template?
- Can I make edits in the source code of my page?
- How do I embed a video or audio file on my page?
- How can I change the background color for one page?
- How do I float images for a text wrap effect?
How do I get help with design questions?
Please note: the best way to get help with design questions about your website is with the original designer of your page template.
If you're familiar with reading and writing HTML and CSS:
- Refer to the CMS reference documentation for tutorials, guides, and an overview of the CMS framework.
- Search and post on the CMS Development Forum on the Community to get tips, advice, or troubleshooting your code.
- Connect with HubSpot's product team and other developers working in HubSpot on the CMS Developer Community Slack.
If you're not comfortable with reading and writing HTML and CSS:
- Connect with a certified HubSpot Partner with website design expertise to help you customize your templates.
- Use a starter template or a theme template to edit page styles without touching any code.
- If you're using a template purchased from the Asset Marketplace, contact the template's designer for questions about the design of your page.
Why isn't my page responsive on mobile?
Responsive content won't look identical on every device type. While all HubSpot drag and drop templates are responsive by default, there are a few reasons your content may not appear responsive. Learn how to preview your content on a mobile device.
- Image is cut off: a responsive image will resize to fit the screen size it's being viewed on. This means it may be cropped differently to fit on a smaller device type. This prevents stretching or distortion of the image.
- Text isn't resizing: if you've added text to an image in a photo editing tool, like Photoshop, that text won't resize separately from the image. To ensure that overlaid text is responsive, add your background image as a section, row, or column background image and include a rich text module or a header module for your text.
- Table isn't responsive: tables set rules about the exact size these elements should be on the page. For best results, use drag-and-drop columns to define the structure of your page instead of a table.
How can I create a hero background image?
The best way to create a hero image depends on the type of page template you're using.
- The easiest way to create a page with a hero image is to use a starter template and select a background image for an entire section of your page. Keep in mind that starter templates don't include a navigation menu or access to source code.
- If you want to create a website page with a hero background image, CMS Hub Professional and Enterprise accounts can use a theme template that includes a hero image in the design. Theme templates also support drag and drop editing, where you can select a background image for an entire section of your page.
- To add a hero image to a layout template created in the design manager, you'll need to edit some custom code on your template. Learn more about how to set a hero image on a layout template on the CMS Development Community Forum.
Please note: if you're not comfortable editing code, you can get in touch with a designer with expertise in CMS development on the Partner Directory.
How do I control the colors and fonts for my navigation menu?
Menu items and links for your navigation menu are controlled in your navigation settings in your account settings. But your menu design is based on your page template. The colors, fonts, spacing, and general appearance of the menus are controlled by the styles applied to your page template.
- If you're using a layout template created in the design manager tool, the CSS on the stylesheets attached to your template.
- If you're using a theme template, your navigation menu's design is controlled by your theme settings.
How do I center a CTA?
The steps to center a CTA (Call-to-action) depend on the type of page template you're using.
- Within the page editor, click your CTA to select it.
- In the left panel, click the Styles tab.
- Click Alignment and spacing to expand those options.
- In the Alignment section, click the blockAlignmentCenter center-aligned icon.
To center a CTA in a layout template created in the design manager, you'll get best results adding the CTA to a rich text module and centering it within the module.
- Within the page editor, click any rich text module to select it.
- In the top navigation, click Insert > Call-to-action.
- Click the CTA to select it, then click Insert.
- Within your rich text module, click the CTA to activate the CTA Options dialog box.
- In the Layout section, click the blockAlignmentCenter center-aligned icon. This will center your CTA within the rich text module on your page.
If you're comfortable editing CSS, you can customize your layout template to always center the content in this module.
How do I edit my page template?
To edit your page's template, you can access the template within the Settings tab in the page editor.
Please note: if you're changing the template applied to an existing page, you'll only be able to select templates of the same type as the current template. If the page is using the drag and drop editor, you can only switch to a template that is enabled for drag and drop editing.
- In your HubSpot account, navigate to landing pages, website pages, blog, or email.
- In the dashboard, hover over the page, post, or email you'd like to edit the template for, then click Edit.
- Click the Settings tab at the top of the content editor, then scroll down and click Advanced Options.
- To edit the template, in the Template section, click Edit this template.
If you'd prefer to change the template being used for this page, click Use different template.
Can I make edits in the source code of my page?
Rich text modules support access to the source code in most types of templates. To access the source code, click any rich text module to activate the editor toolbar. In the upper right, click Advanced > Source code. Make any edits, then click Save changes in the lower left.
Please note: it's not possible to access the source code in starter templates.
How do I float images for a text wrap effect?
You can float an image in any rich text module with the alignment options for any image. First insert the image you want to be positioned on the page. Then click on the image in the content editor to open its formatting options.
How do I embed a video or audio file on my page?
- You can embed a video URL from a supported provider in all types of page templates.
- With HubSpot video, powered by Vidyard, Marketing Hub Professional and Enterprise and CMS Hub Professional and Enterprise accounts can add video content in a rich text module and track video analytics in HubSpot. This feature is not available in starter templates.
- There's also a Vidyard integration available for HubSpot.
How can I change the background color for one page?
Starter templates, theme templates, and coded templates with a drag and drop area include page sections with background style options. Learn how to edit the style applied to the background of a section.
For layout templates, the background color of an individual page can be changed by adding simple CSS to the head HTML of a website page or landing page.
- In your HubSpot account, navigate to your landing pages or website pages. Hover over the page you'd like to customize and click Edit.
- Click the Settings tab, then scroll down and click Advanced options.
- Add the following code in the Head HTML section. Replace the color red with the color of your choice, either using the name or the HTML hex value.
Please note: if you aren't familiar with editing CSS, reach out to your template's original designer or get advice on the CMS Development Forum.
- Can I restore previous versions of my landing page or website page?
- Can I use personalization on my page?
- How do I link to a PDF after a visitor submits a form on my landing page?
- How do I set an expiration date and time for a page?
- Why won't my page publish?
- Can I associate a page with more than one campaign?
- Can I recover a deleted page?
Can I restore previous versions of my page?
You can review saved versions of your page using the page revisions tool. As you're working on the draft of a page, your changes will be saved every time you click the Save button in the upper right. After your page is published, any new published versions will also be saved in the revision history.
Can I use personalization on my page?
You can personalize your pages with any contact property or custom property. When you add a personalization token, be sure to also include a default value for any new visitors. In order for personalization tokens to show a value for a contact, the contact must have a contact record in your HubSpot account and have a known value for the property used as the token.
How do I link to a PDF after a visitor submits a form on my landing page?
You can redirect visitors to gated content (e.g., a PDF file or video) after they submit your HubSpot form in two ways:
- Redirect the visitor directly to the content or file URL
- Redirect the visitor to a thank you page with the contentHow do I set an expiration date and time for a page?
You can expire a page and redirect visitors to a new URL after your promotion is over or event date has passed. In the Settings tab of the page editor, click the When a page expires, redirect visitors to dropdown menu to select where this page should redirect after it expires. Select one of your published HubSpot pages, or click + Enter an external URL to redirect your HubSpot page to an external page.
Why will my page not publish?
HubSpot's pages and blog posts require a value in the Internal page name, Page title, and Page url fields before the Publish option will appear in the editing interface. Any content you publish must also have a unique URL.
If your page is missing any required fields, you'll see an alert with a list of required fields when you hover over the Publish button in the upper right.
Can I associate a landing page with more than one campaign?
Each individual landing page and website page can only be associated with one campaign in HubSpot. Adding assets or content that are already associated with another campaign to a new campaign will remove them from their current campaigns.
Can I recover a deleted page?
At this time there is no way to recover deleted HubSpot pages in the app. If you have accidentally deleted a HubSpot page that you need restored, contact Support.
- How often does data on the landing page dashboard update?
- If I change the URL of my page, will the analytics be deleted?
- How do I see the analytics for a specific timeframe?
- What is the difference between submissions and a new contact?
- If a contact submits multiple forms and becomes a customer, will they count as a customer for both of those landing pages?
- If I view and test a form on my own landing page, will my test be counted?
- Why are recent form submissions not appearing in my landing page's analytics?
- How are duplicate form submissions handled?
How often does the data on the landing page dashboard update?
Analytics and metrics on the page dashboard and your website analytics tools will update every 20-30 minutes.
If I change the URL of my page, will the analytics be deleted?
The data will not disappear from the page dashboard if you change a page's URL. HubSpot uses a unique identification number for each of your pages to track their performance. This allows a page's URL to be changed without any disruption to your data.
Please note: unlike the landing page dashboard, the pages report considers pages unique based on URL. If you change a landing page's URL, pages will track views of the page at the new URL instead of the old URL.
How do I see analytics for a specific time frame?
To view a page's analytics for a specific time frame, navigate to your landing pages or website pages. Hover over your page, click the More dropdown menu, and select Details.
On the Performance tab, click the Date range dropdown menu to segment analytics for a custom date range.
What is the difference between submissions and new contacts?
- The number of submissions indicates the number of times a form on the page was submitted.
- The number of new contacts indicates the number of visitors who became a contact by submitting the form on the page. For example, if one of your existing contacts submits a form on your landing page, they would not be considered a new contact.
If a contact submits multiple forms and becomes a customer, will they count as a customer for all of those landing pages?
The contact will only be reflected as a customer in the analytics for the first landing page they submitted. They will count towards the submissions on all five landing pages, but will only appear under New Contacts and Customers on the first landing page they completed.
If I view and submit a form on my own landing page, will my test be counted?
If your IP address is filtered from analytics in your reports settings, your test views and submissions will not count towards the page's submission data.
Why are recent form submissions not immediately appearing on my page's analytics?
There can be up to a 20-30 minute delay between when a contact submits on a form and when that submission appears on that page's analytics. To see the most up-to-date submissions on a form, navigate to your forms dashboard. In your HubSpot account, navigate to Marketing > Lead Capture > Forms. Hover over the form on your landing page and click the Actions dropdown menu, then select View submissions.
How are duplicate form submissions handled?
Every form submission will count towards the submissions total in your page performance. If the same contact submits the form on your landing page more than once, each of these submissions will be counted.