Documentation

Requirements

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

Create a HubSpot account

Installation

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 One Page theme and its templates when you're creating a new page.

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

Visit HubSpot Reference Docs

Up and Running One Page Theme

theme-secreenshot

Copy to different account

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

Select option = Copy to different account

Screenshot_2-1

Global Header

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.

Screenshot_3-1

Global Footer

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.

footer-2

Pre-built Template

template-1

Internal Delivery

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. 
blog-listing

Create Header Menu

Access the HubSpot settings, then navigate to Content and select Navigation. From there, you can create a new menu.

Screenshot

Add Menu Links

To create a header menu link in which the page URL includes the ID #dummy at the end, and to ensure that clicking the menu item matches this ID to scroll to the corresponding section on the page:

  • Edit the URL of the menu item to include the page URL with #dummy appended (e.g., https://www.example.com/page#dummy).
  • Save your changes in HubSpot after adding the menu item

Following these steps will make your header menu link navigate to the specified page URL with the #dummy ID appended and smoothly scroll to the corresponding section when clicked."

menu_links_two

Global Color

  • Primary Color
  • Secondary Color
  • Tertiary Color
colors

Global Fonts

  • Primary Font
  • Secondary Font
fonts

Header

Background Color

Bottom Border Width

Bottom Border Color

Fonts Style

Menu Link Color

Menu Link Hover Color

Child Menu Color

Child Menu Border Color

Reveal Header On Scroll up

Header Style
  • Normal
  • Fixed
  • Transpaerent
Menu Visibility
  • Show
  • Hide
Mobile_header
  • Submenu Background Color
  • Submenu Icon Color
  • Submenu Text Color
header-1
header-two

Typography

Body
  • Font Style
Headings (H1 > H6)
  • Font style
Typography On Mobile(Headings (H1 > H6)
  • Font Size
Links
  • Link color
  • Link hover color
typography
typograph-two
links

Buttons

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 Style
  • Text Transform
  • Background Color
  • Border
    • Style
    • Width
    • Color
  • Corner Radius
  • Hover
    • color
    • Background Color
    • Border
      • Width
      • Color
Secondary
  • Font Style
  • Text Transform
  • Background Color
  • Border
    • Style
    • Width
    • Color
  • Corner Radius
  • Hover
    • color
    • Background Color
    • Border
      • Width
      • Color
Simple
  • Font Style
  • Text Transform
  • Underline
  • Hover
    • Font Color
    • Underline
buttons

Form

Title
  • Background Color
  • Font Style
  • Text Transfrom
  • padding
    • Top/Bottom
    • Left/Right
  • Border
    • Border style
    • Corner radius
Labels
  • Font Style
  • Background color
  • padding
    • Top/Bottom
    • Left/Right
Field
  • Background color
  • Font Style
  • Placeholder color
  • Box Shadow color
  • Fields hover
    • Placeholder Color
    • Box Shadow Color
  • Active hover
    • Placeholder Color
    • Box Shadow Color
  • Fields Focus
    • Placeholder Color
    • Box Shadow 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
  • GDPR text
    • Font style(Fonts,color,Size)
  • Rich text
    • Font style(Fonts,color)
Checkbox / Radio
  • Font style
  • Border
    • Border style
    • Border Choice (both side, top border , bottom border)
    • Border Width
    • Border Color
    • Corner radius
  • Border Hover
    • Color
Error Message Style
  • Font Style
  • Background Color
  • Error Message border Style
    • Width
    • Color
Help text
    • Font Style(fonts , color , size)
Form Background Color
Border
  • Border Choice
    • Duble
    • Groove
    • Ridge
    • Inset
    • Outset
  • Corner Radius
Form Padding
  • Top/Bottom
  • Left/Right
Submit Button
  • Button Style
  • Button Size
form

Table

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

Spacing (Container Width)

  • Vertical Spacing
  • Maximum Content Width
Screenshot_2-1

Footer

Menu Heading Style
  • Font Style
Menu
  • Font Style
  • Text transform
  • Hover
    • color
  • Active
    • Color
Footer background Color
  • Left Box Color
Copyright Text Color
  • Font style
footer-3