Create a landing page with a starter template

You can use a starter template to build a simple landing page presenting a content offer to your website visitors. This article covers how to create a new landing page, customize your page design, and publish your page.

Please note: starter templates don't support smart content, custom modules, personalization, access to source code in rich text modules, or advanced options like template swapping and access to header HTML.

Before you get started

• Learn how to create landing pages in Academy's video lessons designed for Marketing Hub Starter and CRM Free accounts.
• Make sure your domain is connected for page publishing. If you're using the free landing page builder, you already have a free HubSpot domain that's ready for publishing.
• Decide what you're providing to visitors who submit the form on your landing page. You could offer a guide, a newsletter subscription, or even a webinar. Learn more about content offers, and see some examples.
• Create a form to collect information from your contacts. If needed, create custom properties to collect information unique to your business.
• Set up a follow-up email to deliver your content offer to contacts who submit your form.

Create a landing page with a starter template

To create a new landing page with a starter template:

• In your HubSpot account, navigate to Marketing > Website > Landing Pages.
• In the upper right, click Create > Landing page.
• In the left sidebar menu, click All of your templates.
• Hover over a template, and click Preview in the upper right.

• To create a page with this template, click Use template in the upper right.

Edit your page content

Starter templates contain blocks of website content called modules. You can arrange these modules into horizontal rows or vertical columns.

Rows and columns may be grouped into sections of elements. By grouping elements together, you can apply background styles to an entire area of your page. You can also drag and drop these elements to rearrange your page layout. Learn more about how to edit page content in a drag and drop area.

To customize the way your page content appears on a mobile device, click the mobile ediEdit for mobile icon in the upper left.

Customize fonts, colors, and buttons

To customize the default styles for your starter template, click the Design tab in the left panel. You can also customize the background color or image for a specific row, column, or section of your page.

Typography

• Body text: customize the font, font size, and font colors for the main body of your page:
  • Click the Body text dropdown menu to select the font.
  • Click the arrow keys to select the font size.
  • Click the color bubble to set a color for your font. To set a custom color, click the Advanced tab and enter a hex value.
• Headings: customize the font and color for text in modules with a heading tag.
  • Click the Headings dropdown menu to select a font.
  • Click the color bubble to select a font color.
• Link text: customize the fonts and colors applied to links on your page.
  • Click the Link text dropdown menu to select a font.
  • Click the color bubble to select a link color.
  • Click the styling buttons or dropdown menu to select the styles applied to your link text.
  • To customize the way links appear when your visitors interact with your page, you can customize the link color and transparency.
    • Link hover color: customize the color and transparency of link text when a visitor hovers over the link.

• • • Active link color: customize the color and transparency of link text before the link is clicked.
    • Visited link color: customize the color and transparency of link text after it's been clicked by a visitor.

Buttons

• Button background color: customize the color applied to the background of your buttons.
  • Enter a hex value or click the color bubble to select a color.
  • Enter a percentage value or click the arrow keys to set the transparency of your button background color.
• Button text color: the color applied to the text of buttons on your page.
  • Enter a hex value or click the color bubble to select the color for the text.
  • Enter a percentage value or click the arrow keys to set the transparency of your button text color.
• Button corner radius: customize the the shape of your form buttons by entering a value or dragging the slider. A higher value means the buttons on your page will have rounder edges, while a value of zero means your buttons will be rectangular.

Please note: HubSpot recommends keeping consistent colors, fonts, and styles based on the settings in the Design tab. You can override default styles for an individual module in the Options tab on the left panel.

Optimize your page for search engines

Click the Optimize tab to open the SEO optimizer tool. Here you can review recommendations to improve your content's performance in search engines.

Edit your page settings

Click the Settings tab to customize your page details.

• Internal page name: the page name that only HubSpot users see. It is not shown to visitors.
• Page title: the title that visitors see in the tab at the top of their browser when the page loads.
• Page URL: the URL for your page. It appears in the URL bar within the browser when visitors navigate to this page. You can edit your page URL even after it's been published.
• Meta description: the content that will appear in search results below the page title.
• Featured image: click to toggle this switch on for a specific image to be featured when your page is shared on social media. Click Upload to select an image from your computer or Browse images to select an image from your files tool.

Preview and publish your page

Before your page goes live, click Preview in the upper right to test how your page will appear on desktop and mobile devices. Once you're satisfied with your page's preview, click Publish in the upper right.