Edit styles for a starter template

With a starter template, you can quickly and easily build a landing page to present a content offer to your website visitors. Learn how to customize the fonts and colors in a starter template so your landing page matches your company branding. 

To learn how to create a landing page with a starter template in a video tutorial, check out this lesson from HubSpot Academy.

Create a page with a starter template

If you haven't created your page yet, follow these instructions to select 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 any template labeled with a Starter tag, and click Preview in the upper right.

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

Edit content in a drag and drop area

Starter templates contain modules, which are blocks of website content. These modules may be arranged in 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 landing page layout. Learn more about how to edit page content in a drag and drop area. 

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 the 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 a 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 font color for any text in your modules with a heading tag.
  • Click the Headings dropdown menu to select a font.
  • Click the color bubble to set 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 modify your link color.
  • Click the styling buttons or dropdown menu to select the styles applied to your link text, including whether you want your links to be underlined on the page.
  • 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 links on your page.

• • • Active link color: customize the color and transparency of link text by default, 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. A value of zero means your buttons will be rectangular.