Skip to content
Landing Pages

Create a page with a starter template

Last updated: August 24, 2021

Applies to:

All products and plans

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

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
  • In the left sidebar menu of the template selection screen, click All of your templates.
  • To view your available starter templates, click the Filter by source dropdown menu and select Starter. 

select-a-starter-template

  • Hover over a template, then click Preview in the upper right.
  • To create a page with this template, click Use template in the upper right.
  • In the dialog box, click Continue
  • Enter an internal name for your page, then click Create page

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.

edit-page-for-mobile

Customize fonts, colors, and buttons

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

edit-starter-theme-on-page

Typography

In the Typography section, edit the fonts and font styles applied to your page body and headings. All Google fonts are supported.
  • 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. 

edit-link-text

Forms and buttons

In the Forms and buttons section, customize the way simple buttons and form submit buttons are styled on the page.
  • 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 devicesOnce you're satisfied with your page's preview, click Publish in the upper right.