Infinity is a modern and creative free HubSpot theme for your marketing services, web design, web development, SEO services, and other digital marketing services. With over 28 custom modules, 19 templates, engaging layouts, font, and color customization options, here are a few top features:

  1. 100% drag and drop DIY theme
  2. Multiple theme settings with easy customization
  3. Perfect to get you started with HubSpot
  4. Mobile-first approach
  5. Fully responsive
  6. High page speed

Note: You can get 2hr free live interactions with our experts.  Ask your doubts or get help in installing the theme which is completely optional and free once you download our theme.  

Book Free Session

2.Theme Components

A HubSpot theme has the following components that you can use to create a page according to your design requirements:

  • Modules: Modules are objects that you can interchange on website pages. Simply select any module from the library on the left panel, and drop it where you want. These modules add different functionality to your page defining the look and feel of your website. The infinity theme has 28 modules. 
  • Templates: Templates are sample layouts of different pages that you might use directly for your website. They are significant assets that help you save time. You can simply replace the demo text with your content and you are ready to publish your website pages.
  • Global Settings: The global settings on your website pages affect all of your assets. For example, if you make modifications to a global setting, those changes will appear on every page.

If you have any questions before or after reading the documentation, please contact us.

2.1.How To Create a Page?

You can create a website page, landing page, or blog page using the Infinity theme. For creating a page using:

  • Log in to your HubSpot portal > Navigate to Marketing > Select Website/Landing Pages > Website Pages/Blog
Create a Page 1
  • Locate the ‘create’ option on the right side of the screen > Select an option from Website pages/Landing Pages/Blog post.
create a page 2
  • Name the page(required) > Select Infinity theme (change if other theme selected by going to edit option) > Select any template from the dropdown (for example, about us, career page, etc) and proceed
  • Add/remove modules according to your requirements > Edit content > Publish the page. You will need to add a page title before publishing a page on your HubSpot CMS website.  

2.2.How To Edit Global Style?

As mentioned above, global modules change all the properties you edit on every page used. After creating a page, you can edit the global style uniformly.  To edit global style on website pages,

  • From your HubSpot portal go to Create page/Edit page option
  • From the left panel, go to the edit page panel. There are 3 options available, Add, Content, and Theme.
  • Click on the theme option > Select edit theme settings. From this option, you can easily make changes to the global colors, global fonts, typography, buttons, spacing, website header, footer, forms, tables, blog settings, and system page settings
Edit page

2.3.How To Edit Theme Settings?

The edit theme settings option enables you to make changes in the theme settings. Just follow these steps and continue:

  • Create page/Edit page > Navigate to Edit page panel > Theme > Edit theme settings

The edit theme settings have the following options:

  1. Global colors– Change primary color, secondary color, body background, and heading. 
  2. Global fonts- Change the heading font and body font, and both of its colors respectively.
  3. Typography– Change the font line height of H1, H2, H3, etc. body, and links on the desktop and mobile view.
  4. Buttons–  Change button text, spacing, corner, style of dark or light outlined buttons, etc.
  5. Spacing– Change vertical spacing, maximum content width,  
  6. Website header- Change box-shadow, background, and menu
  7. Footer– Change style of text, menu, heading 
  8. Forms– Change styles of title, label, help text, fields, forms, and error messages.
  9. Tables- Change table header, body, footer, and text styles.
  10. Blog settings– Enable a sidebar, enable topics, display popular posts, and enable a subscription form on the sidebar. Moreover, for the blog post, you can show/hide the author’s name, timestamp, tags, related posts, change the border radius of images, etc. 
  11. System page settings– Change error page settings, password prompt, email unsubscribe, etc.

Press Apply changes after changing these settings.

2.4.How To Edit Global Modules?

There are 2 global modules in the Infinity theme, Website header, and Website footer. To edit website footer/header:

  • Create a page or edit a page > Navigate to Edit page panel > Select Theme > Click edit theme settings 
  • Scroll to the website header or website footer option > edit settings 

For both header and footer, you can enable/disable box-shadow, set the first & second shadow color, and decide on the background color. Additionally, you can change the mobile & desktop text font of the menu on the header, the hover color, and edit drop-downs.     

Please Note: Publishing the changes on these modules will take effect on all your pages so be sure while doing any modifications.

2.5.How To Change Blog Templates?

Blog templates are for your blogs. You can create a template for blog listings and blog detailed pages. For changing the blog page template follow these steps:

  • Log in to your HubSpot account > Go to settings > on the left side panel, scroll down to marketing > under marketing select blog
change blog template 1
  • Go to the template option from the top > Select infinity from the current view option > Now edit the template if you want to make changes to the blog template.
Change blog template 2


2.6.How To Change System Templates?

To change the system template,

Log in to your HubSpot account > Go to settings > on the left side panel, scroll down to website > under marketing select pages

change system templates 1
  • Select the System Pages section > Set a template for the system pages after clicking it. Choose the infinity theme system template and then save settings.
change system template 2

You can set the templates by following the similar steps:

  1. 404 Error Page
  2. 500 Error Page
  3. Password Prompt Page
  4. Search Result Page 

2.7.How To Change Email Templates?

For changing the email template:

  • Log in to your HubSpot account > Go to settings > on the left side panel, scroll down to marketing > under marketing select email
change email template 1
  • Select the Subscriptions section > Set a template for the subscription preference page from the dropdown. Choose infinity theme subscription template and then save settings.
Change Email Template 2

2.8.How To Work With Reusable Sections?

Reusable sections, as the name suggests, are section templates that you can directly use in place of modules. To use them:

After creating/editing a page hover over any of the modules > Locate and press the plus icon> Choose from the list of reusable sections > Publish changes.

The following reusable sections are available for your use:

  1. Two Column Video Text
  2. Two Column Image Text
  3. Two Column Video And Content Section
  4. Services Section
  5. Two Column Content And Team Section
  6. Two Col0umn Counter And Content Section
  7. Two Column Content And Form Section
  8. Two Column Content And Image
  9. Call To Action

3.Modules Library In Infinity Theme

Now we shall take an overview of the modules present in the infinity HubSpot theme. Here are a few things you should know before working with HubSpot theme modules:

  • To change or use a module, you need to create/edit a page.
  • Choose any module, drag it to wherever you want on the page, and drop it.  
  • Hover over any module on the page and a pencil icon appears on the right corner of the module. Select this icon to edit the content, links, or image on the modules.
  • For deleting any module on the page, hover over the module and hit the delete icon

The following are the modules present in the theme:


As the name suggests, the partner module is great for displaying your partners on the landing pages and website pages. You must have worked with different brands. Here is a perfect module to help you out. 

partner 1

You add as many partners as you like and edit links for the same. Moreover, you can put up your partners’ logos, and their URLs, alt text, and image loading. The style tab will allow you to edit the desktop and mobile spacing, and padding.   

partner 2

3.3.Title Content

The title content module allows you to add a title on any page. There is an option to add a mini title, edit content, and add primary & secondary buttons.   

title content 1

From its style tab, you can edit the container, i.e background color, corner, enable maximum width, and content (desktop and mobile spacing & padding).

title content 2


The card module is for displaying cards on your website page along with some content and a featured image. Adjust the settings and add multiple cards on your landing pages.

card 1

You can change the column layout to upto three columns, enable an icon box, add multiple cards, add images, headlines, image loading, set links, add icon box, and content. Under the style tab you can edit cards, image corner radius, set content alignment, and overwrite style.

card 2


The testimonial module can be used to display various testimonials on your landing page.

testimonial 1

You can choose layout ( slider & card), set section title, add multiple testimonial cards, change slider arrow images, and add alt text.

testimonial 2

From its style tab you can edit box spacing ( for desktop & mobile), overwrite styles, and content alignment.

testimonial 3

3.8.Header Toggler

Drag and drop the header above the menu component for best results. You can select an icon or image for the toggle open and close option.

header Toggler 1

From the style tab of the header module, you can adjust spacing and padding.

header Toggler 2

3.10.Header Controls

The header control module allows the user to enable a search option, select the display mode of the language switcher (localized, PageLang, hybrid), and button type, link, and text on the website header.

header controls 1

From the style tab, you can edit the search background color and icon color.

header controls 2


3.11.Customizable Button

The button module can be added anywhere for directing the user to another page. You can easily edit your text, add links, enable icons, etc. 

customizable button 1

customizable button 2

3.12.Icon Box

The icon box adds boxes with icons on your website pages.

icon box 1

You can add multiple icon/image boxes, set layout ( compact or card), select upto three columns, and enable box-shadow.  

icon box 2

3.13.Video Popup

Using the video module, you can add a video to your website or landing pages. These are very easy to work with and increase the engagement rate of your page.

video popup 2

You can edit a video poster ( replace/remove a poster, alt text, poster size, maximum size), icon/content ( set icon over image or content over image), change the play icon, and add the desired video link.

video popup 1

From the style tab you may enable overlay or overwrite icon color, and also set the corner radius of the video as seen by the visitors.

video popup 3


If your team needs a highlight on your website page, you can use this module. You can set layout choices from a card, slider, or image, set column count, change the size of the image, add alt text, image loading and profile links, and designation of the team member.

Team 1

From its style tab, you can set image alignment, image corners, card background color, border radius, and spacing.

3.15.Custom Image

You can add any image to your website page using the custom image module. Other related settings for this module are desktop and mobile alignment, corner radius, alt text, size, image loading, and maximum image size.

custom image 1



You can add a multi-column section to your page using the counter module. 

counter 1

Add up to three columns, edit links, and add images, content, the maximum width of the container, card width, desktop and mobile alignment, spacing, and background color ( from the style tab).

counter 2

The style tab will help you in setting the alignment and image corners.

counter 3

3.17.Social Follow

The social follow module allows you to add your social platforms like Twitter, Instagram, Facebook, and LinkedIn on your website pages, header, or footer.

social follow

You can replace/remove social icons, change icon size and icon color, and add your social links, and icons. From the style tab, you can enable background color, change border radius, and set desktop and mobile alignment.

social follow 1

3.18.Pricing Card

The pricing card module can be used to display your service pricing details on your landing pages. 

pricing card 1

You can add multiple tabs, add descriptions, mini title, button, list, and price,  and enable box-shadow from the content settings. From the style tab, you can edit the tab font, background color, overwrite style, alignment, active card background color, and border color.

pricing card 2


The accordion module can help you create a section to add FAQs or a large piece of content users can toggle to show or hide.

accordion 1

You can choose the position of the icon from the right or left, add multiple questions, add content, title, and opening, and closing icon. From the style tab, you can edit the accordion background color, spacing, border-radius, and box-shadow.

accordion 2

3.20.Blog Grid

The blog grid module helps you to add blogs to your website in a grid format.

blog grid 1

You can select all the blogs you want to display and set the button text. Other settings along with style tab include box-shadow, background color, corner radius, 

blog grid 2

3.21.Blog Listing

For changing blog listings, you have to go to the settings option on your HubSpot portal. Navigate to website > click blog > go to templates. From the current view, select the infinity theme. Now select the blog listing page and click on the edit page to continue editing the existing blog template.

blog listing 1

You can set the number of posts per listing page, show summaries on the listing page, and use featured images in listing summaries.

blog listing 2


The map module will add a virtual map to your website. You can

map 1

Map module settings include map API, Map JSON, Map zoom level, center latitude, and longitude. From its style tab, you can edit the corners and height of the map.

map 2

3.23.Custom Form

Add a contact form on your website page using this module. Customize and use any existing form on your HubSpot CMS. You have form layout choices from single field form ( button at bottom or side button) or multiple field forms, enable form box-shadow, set form field title, overwrite button, and enable input field box-shadow. You can select any form or create a new form too.

custom form 1

From its style tab, you can edit form title ( color, border-bottom, alignment), enable/disable form background color, enable/disable form max-width, desktop/mobile form spacing, input field background color and border, overwrite radius ( form corers), and enable/disable bottom full width.

custom form 2

3.24.Why Us

The why us module allows you to add the reason for visitors to choose you. You can add multiple icons/image boxes, and enable/disable the arrow.

why us 1

From its style tab, you can edit spacing, set alignment for mobile & desktop, and text color. 

why us 2

3.25.Listing Layouts

The listing layout module enables the display of assorted items in the listing form. By default, all items are listed. But, the initial filter setting will allow users to set the initial filter only for a single category at a time. You have a column count option, layout choice, edit tab content like adding title and button, enable box-shadow, select box shade, etc. 

listing layout 1

From its style tab, you can change the card, content, and content alignment. 

listing layout 2


Add your company logo anywhere on the page with the logo module. You can enable/disable the custom logo, override the default logo, and set the default logo for all domains. You can also control its visibility from the style tab.

logo 1
logo 2


The spacer module adds white space to the website and landing pages. Just search it from the theme module list and drag and drop it to your desired location. 

4.Template Library In Infinity Theme

The infinity theme has a list of ready-made templates for your business. Just while creating a new page select one from the template and edit content according to your business and you’re ready to publish.


There are 3 variants of the homepage in the Infinity theme. 

  1. Homepage 1 – Digital Marketing
homepage digital marketing

   2. Homepage 2 – Social Media Marketing

homepage social

 3. Homepage 3 – Search Engine Optimization

homepage seo

4.2.About Us

  • About – Company
about company


  • About – Author
About Author (1)



4.4.Blog Listing

blog listing template

4.5.Blog Detail

blog details template




testimonial template

4.8.Contact Us



Teams template



4.11.Event Listing

event listing

4.12.Event Detail

event detail





4.15.Product Landing Page

landing page product

4.16.Career Landing Page

landing page career

5.System Pages

5.1.Error 404

Error 404 template

5.2.Error 500

error 500 template

5.3.Email Subscription Confirmation

email subscription template

5.4.Email Subscription Preferences

communication preferences template

5.5.Email Unsubscribe

email unsubscribe

5.6.Password Prompt

password promt template

5.7.Search Results

Search results
Suggest Edit