Documentation

Please ensure that you have a HubSpot account to use this theme. If not, you can visit this link to create a HubSpot account.

You can either install your theme from HubSpot Asset Marketplace or a .zip file.

From HubSpot Asset Marketplace

If you're installing the theme from HubSpot Asset Marketplace, just click the Install for free button on theme page and then follow the instructions.

From .zip file

If you have a .zip file of your HubSpot CMS theme, please follow the steps below to install it onto your account:

1. Login to your HubSpot account.
2. On the top right, click the Settings icon (looks like a gear).
3. Click Tools > Website > Themes from the left sidebar menu.
4. You'll see the Upload Theme button at the top right corner of the screen. Click it and then choose the zip file you've got.
5. Login to your HubSpot account.

If you completed the steps successfully, you should see the alpha theme and its templates when you're creating a new page.

To learn more about theme installation, please visit HubSpot Reference Docs.

Select your Theme Folder then click right click then show some option

Select option = Copy to different account

To edit your header, you'll first need to create a page with a theme template. When a page is created then edit you page in the left side click Tab Contents. Then click Page header.

To edit your Footer, you'll first need to create a page with a theme template. When a page is created then edit you page in the left side click Tab Contents. Then click Page footer.

Manage customer blog template and settings

• In the customer HubSpot account, click the settings icon settings in the main navigation bar.
• In the left sidebar menu, navigate to Website > Blog.
• On the Templates tab, you can view or change the templates applied to your blog posts and blog listing page
• In the Blog post and Blog listing sections, click the Actions dropdown menu to manage your template
• Select Change template to choose a different template. On the template selection screen, select your new template, then click Done. In the bottom left of your template settings, click Save. 

This template has been designed to be used on the homepage of your website. It contains the following sections and modules in order:

• Content Form Video
• Content Image With Counter
• Rich Text
• Logo Repeater Slider
• Content Image With Accordion
• Cards With Popup
• Rich Text
• Custom Button
• Content With Image

File location: /templates/home-page.html

This template has been designed to be used on the about us page of your website. It contains the following sections and modules in order:

• Background Image With Rich Text
• Two Layout Rcih text with Custom button
• Content With Slider
• Counter With Text
• Background Image With Testimonial
• Team Cards

File location: /templates/about-us.html

This template has been designed to be used on the Services page of your website. It contains the following sections and modules in order:

• Background Image With Rich Text
• Cards List With Slider Option
• Recent Blog Listing Card
• Content With Image

File location: /templates/services.html

This template has been designed to be used on the Contact us page of your website. It contains the following sections and modules in order:

• Background Image With Rich Text
• Two Column Rich text With cntact form
• Content With Map
• Recent Blog Listing Card
• Content With Image

File location: /templates/contact.html

You can use this template to create your Pricing page. It contains the following sections in order:

• Background Image With Rich Text
• Cards With Popup
• Content Image With Accordion
• Recent Blog Listing Card
• Content With Image

File location: /templates/pricing.html

This is the template for your blog. It contains the following module:

• Blog Listing Banner
• Blog Listing Cards

File location: /templates/blog-index.html

For now, HubSpot does not allow to use drag & drop features in blog post templates. So, sections and modules are embedded into the template and you can't access them via the page editor.

File location: /templates/blog-post.html

You can use this template to create your Privacy Policy page. It contains the following sections in order:

• Image Banner / Text
• Rich Text

File location: /templates/privacy-policy.html

You can use this template to create your Terms Of Use page. It contains the following sections in order:

• Image Banner / Text
• Rich Text

File location: /templates/terms-of-use.html

• Primary Color
• Secondary Color

• Primary Font
• Secondary Font

Body

• Font Choice: Custom Font ('Gotham') , Google Font
• Gotham font Weight
• Body font color opacity

Headings Choice: Custom Font ('Gotham') , Google Font (H1 > H6)

• Font style

Typography On Mobile(Headings (H1 > H6)

• Font Size

Links

• Link color
• Link hover color

Buttons Size

• Small
  • Font size
  • Vertical Spacing
  • Horizontal Spacing

• Regular
  • Font size
  • Vertical Spacing
  • Horizontal Spacing

• Large
  • Font size
  • Vertical Spacing
  • Horizontal Spacing

Primary Button

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transform
• Background Color
• Border
  • Style
  • Width
  • Color
• Corner Radius

• Hover
  • color
  • Background Color
  • Border
    • Width
    • Color

Secondary

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transform
• Background Color
• Border
  • Style
  • Width
  • Color
• Corner Radius

• Hover
  • color
  • Background Color
  • Border
    • Width
    • Color

Tertiary

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transform
• Background Color
• Border
  • Style
  • Width
  • Color
• Corner Radius

• Hover
  • color
  • Background Color
  • Border
    • Width
    • Color

Quaternary

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transform
• Background Color
• Border
  • Style
  • Width
  • Color
• Corner Radius

• Hover
  • color
  • Background Color
  • Border
    • Width
    • Color

Simple

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transform
• Underline

• Hover
  • Font Color
  • Underline

Header Background

• Background Color

Menu

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Menu Link Color
• Menu Hover background Color
• Menu Hover Link Color
• Child Menu Color
• Child Menu Hover Color
• Child Menu Border Color

Reveal header on scroll up

• Header style
  • Normal
  • Fixed
  • Transparent

• Menu Visibility
  • Show
  • Hide

• Search Icon Visibility
  • Show
  • Hide

Main Cta button

• Button Choice
  • Primary button style
  • Secondary button style
  • simple link
  • Hidden

Header Spacing

• Top and bottom padding

Social color

• Background color
• Icon color

Social Hover color

• Background color
• Icon color

Menu

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text transform

Hover

• Font Color
• Background Color

Active

• Font Color
• Background Color

Footer background color

• Background color

Border top

• Border style
• Border Size
• Border color

copyright

• Font color
• Background color

Title

• Background Color
• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Text Transfrom

• padding

  • Top/Bottom
  • Left/Right

• Border

  • Border style
  • Corner radius

Labels

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Background color

• padding

  • Top/Bottom
  • Left/Right

Field

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')
• Background color
• Placeholder color

• padding

  • Top/Bottom
  • Left/Right

• Border

  • Border style
  • Border Choice (both side, top border , bottom border)
  • Border Width
  • Border Color
  • Corner radius

• Error massage

  • Font style
  • Background color

• Error massage border style

  • Border Width
  • border color

Help text

• Font Choice: Custom Font ('Gotham') , Google Font
• Custom Font Weight ('Gotham')

Background Color

• Form Background Color

Border Choice

• Duble
• Groove
• Ridge
• Inset
• Outset

Form Padding

• Top/Bottom
• Left/Right

Submit Button

• Button Style
• Button Size

• Header Background Color
• Header Text Color
• Body Background Color
• Body Text Color
• Footer Background Color
• Footer Text Color
• Border Color

• Vertical Spacing
• Maximum Content Width