Getting started with Modules

We appreciate you downloading our modules from the newly launched HubSpot modules marketplace.

Here is a quick getting started guide. 

1. Module's location

Once you have installed the module from the marketplace, HubSpot should have automatically installed it in your portal.

Your module(s) can be found under @marketplace > GiantFocal in Design Tools. 

2. How to add the module to a page

Our modules are standalone and can be added to any page based on any theme (including those developed by other theme providers). 

If you use a theme, you can open the page editor immediately. Then click the + icon on the left sidebar.

Using the search bar, which is located under the ‘Add to page’ option, type in the module name. For example, if you download our Timeline module, type in "Testimonials Slider."

Once you find the module, drag and drop it into any section on the page.

3. Module fields structure

There are two major tabs for module fields. The Content tab and the Styles tab.

• Content Tab - The Content Tab is where you find the module contents and layouts that you can use, such as headings, text, images, and number of columns, etc.
  
  
  
• Styles Tab - The Styles Tab is where you find the module design and typography such as, background colors, borders, font sizing, box shadow, alignments, and etc.
  

4. How to update the module

1. After dragging the module to the content editor, on the upper right side, you will see a pencil icon. Click the pencil icon to edit the module.
   
2. Once you click the pencil icon, you will find two tabs for the module fields. The Contents and the  Styles tabs.
   
   
   
   • Contents
     • To update the contents, open the Content section and it will show a group of fields.
       
     • In this section you can update the module contents, images and icon. For example updating writer name, company and testimonial contents.
       
       • These are the available fields inside the Testimonials Repeater section.
         
         
         
   • Styles
     • To access the module styles editor, click the Styles tab.
       
     • Using this tab, you can find the available styling option for you to enhance the design of the module and align it to your brand.
       
     • When you click the styles tab, you can see the option to change the aesthetic based on your preference such as the Background Color option.
       
3. To see the overall changes, click the Preview button.
   
4. If you’re done editing, click the Publish/Update button to reflect the changes on your live page.

5. Where to download more modules

You can visit HubSpot module marketplace and search 'GiantFocal' to see more of our amazing modules.