Create a page with a starter template

You can use a starter template to build a simple website or landing page. You can create a new page, customize your page design, and publish your page using a starter template. Learn more about creating all kinds of pages in HubSpot. 

Please note: starter templates do not support smart content, custom modules, personalization, access to source code in rich text modules, password protected pages, or advanced options like template swapping and access to header HTML.

Create a page with a starter template

To create a new landing page with a starter template:

• 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.

• In the upper right, click the Create dropdown menu and select Website page or Landing page. 

• On the template selection screen,  templates from your active theme will appear at the top of the page, while all other templates will be in the Other templates section at the bottom. Click a template. If you haven’t selected an active theme, you’ll be prompted to select one or click Skip to templates to pick an existing template.
• To create the page with the selected template, click Select this template in the top right. To preview the page on mobile or desktop, click Preview. 

Edit your page content

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

You can group rows and columns 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 editing page content in a drag and drop area.

To customize your page's appearance on mobile devices, click the mobile ediEdit for mobile icon in the sidebar editor.

Customize fonts, colors, and buttons

To customize the default styles for your starter template, click the Theme tab in the sidebar editor. 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 and select a font.

• • Click the arrow keys to adjust the font size.
  • Click the color picker and select a color for your font. To set a custom color, click the Advanced tab and enter a hexadecimal value. 
• Headings: customize the font and color for text in modules with a heading tag.
  • Click the Headings dropdown menu and select a font.
  • Click the color picker and select a font color.  To set a custom color, click the Advanced tab and enter a hexadecimal value. 
• Link text: customize the fonts and colors applied to links on your page.
  • Click the Link text dropdown menu and select a font.
  • Click the color picker and select a link color.  To set a custom color, click the Advanced tab and enter a hexadecimal value. 
  • Click the dropdown menu and select a style to apply to your link text.

• • Customize the color and transparency of your links when they are hovered over, being clicked, and have already been visited: 
    
    • Link hover color: click the color picker and select a link color for when a visitor hovers over the link. To change the color's transparency, enter a percentage value in the text field. 

• • • Active link color: click the color picker and select a link color for when the link is being clicked. To change the color's transparency, enter a percentage value in the text field. 

• • • Visited link color: click the color picker and select a link color for when the link has already been clicked by a visitor. To change the color's transparency, enter a percentage value in the text field. 

Forms and buttons

• Button background color: customize the color applied to the background of your buttons.
  • Enter a hexadecimal value or click the color picker and select a color. 
  • To set the transparency of your button background color, enter a percentage value in the field. 
• Button text color: customize the color applied to the text of buttons on your page.
  • Enter a hexadecimal value or click the color picker to select the color for the text.
  • To set the transparency of your button background color, enter a percentage value in the field. 
• Button corner radius: customize how round or square the buttons on your page appear. 
  • Enter a value in the field, or click and drag the slider to a new position. 
  • 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.

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.