Icons and Illustrations sponsored by wow.design

CSS and JS Assets

  1. In your HubSpot account, navigate to Marketing ">" Files and Templates ">" Design Tools
  2. In the finder, click the Marketplace to edit.
  3. All CSS files, including the main style sheet and js files, are in the Marketplace ">" Growth Version 2 2020 ">" Css And Js File folder .
CSS Files:
  1. From Top Menu, Go to Marketplace ">" Growth Version 2 2020 ">" Css And Js File folder.
  2. And open Growth_Version_2_Theme.css to edit.
JS Files:
  1. From Top Menu, Go to Marketplace/Growth Version 2 2020/ Css And Js File folder.
  2. And open Growth V2.js to edit.
css_js_file

On the right side in the section "Linked files", there are CSS and JS files directly uploaded to the Design Manager.

Deleting any of these files will cause Growth Version 2 2020 templates to malfunction.

cs1

Font

By default, Growth Version 2 uses Roboto and Raleway font from Google Font.

  1. From Top Menu, Go to Marketplace ">" Growth Version 2 2020 ">" Css And Js File folder.
  2. Click On Growth_Version_2_Theme.css.
  3. Changes the @import for the Google Fonts on line 2 and line 3 to the font of your choice.

    @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900&display=swap');

  4. And then edit the baseFontFamily variable on line 32 and line 33 with the font name of your choice.

    % set baseFontFamily = "'Roboto',sans-serif And 'Raleway',sans-serif" %

Design Manager HubSpot

Embedded Font

For full list of font and more information visit the site: Google Fonts

font-weights

Website Color Skin

By default, Growth Version 2 2020 uses:

  1. (#fbf5ef) as a Gray Background Color
  2. (#335C67) as a Base Color
  3. (#06032f) as a Secondary Color
  4. (#fff) as a Navigation Background Color
  5. (#222525) as a Navigation Text Color
  6. (#fc9f5b) as a Theme Color
  7. (#191714) as a Base Font Color and
  8. (#fbf5ef) as a Footer Background Color

To change the template color:

  1. From Top Menu, Go to Marketplace ">" Growth Version 2 2020 ">" Css And Js File folder.
  2. Click On Growth_Version_2_Theme.css.
  3. Changes the Color, your choice.
    • greyBackground variable on Line 29
    • baseColor variable on line 30
    • secondaryColor variable on line 31
    • navigationBackground variable on Line 34
    • navigationTextColor variable on Line 35
    • themeColor variable on Line 36
    • baseFontColor variable on Line 37 and
    • footerBackgroundColor variable on Line 38
  4. Only use light color for greyBackground variable on Line 29

% set greyBackground = " #fbf5ef " %
% set baseColor = '#335C67' %
% set secondaryColor = '#06032f' %
% set navigationBackground = '#fff' %
% set navigationTextColor = '#222525' %
% set themeColor = '#fc9f5b' %
% set baseFontColor = '#191714' %
% set footerBackgroundColor = '#fbf5ef ' %

body skin color-1

Global Modules

Global modules, like global groups, are used to share the same resources between multiple templates.

There are Ten global modules in Growth Version 2.

  1. Growth Version 2 Get Started Preveiw Link
  2. Growth Version 2 Contact Us Section Preveiw Link
  3. Growth Version 2 Email Subscribe Preveiw Link
  4. Growth Version 2 Footer Preveiw Link
  5. Growth Version 2 Header Preveiw Link
  6. Growth Version 2 Logo Section Without Greybg Preveiw Link
  7. Growth Version 2 Logo Section With Hover Effects Preveiw Link
  8. Growth Version 2 Milestone Preveiw Link
  9. Growth Version 2 Rss Feed Preveiw Link
  10. Local Section (Growth Pack) Preveiw Link

All global modules are in the folder: Marketplace/Growth Version 2 2020/ Global Groups.

Gobal Groups

Use global content across multiple templates

When designing a site, there may be sections of the page that you want to keep reusing across your entire site. With the design manager, you can create global content to reuse across any template.

Global content can be composed of either a group of content modules or a single content module that makes up an essential element of your website pages. This is content that you want to create once and then add across various locations on your site. 

Please note: changes to a global module or group will apply across every website page that uses the global content in its template. Flexible columns and coded Modules can't be used in global groups. 

Add your global content

  1. In your HubSpot account, navigate to Marketing ">" Files and Templates ">" Design Tools
  2. In the finder, click the Marketplace/Growth Version 2 2020/ Global Groups to edit.
  3. Click a rich text module to customize it.
  4. In the module inspector, hover over and click the content preview in the Default Content section.
  5. You can then edit the content in the text field.
gobal1
  1. When setting up global groups, you can edit the options of multiple modules and group them.
  2. Select one module, press the  Ctrl/Cmd  key   and click the   group   groupModule  icon.

Make global modules and groups

To make a module or module group global:

  1. click the module or module group in the layout editor.
  2. In the module inspector, click the   More   dropdown menu and
  3. select   Convert to global module/group

Please note: global modules/groups can be used in email templates, but cannot be created from within an email template. Global modules or global groups that contain modules with smart rules based on country, device type, referral source or preferred language are not supported in email templates.

gobal2

Add a Global Module or Group To a Template

To add a global module or a global group to a template:

  1. click Add in layout inspector.
  2. Click and drag your Global Groups into the template.
global3

Remove a Module from a Global Group

To remove a module from a global group:

global4
  1. click the global group in your template.  
  2. A second tab will open in the design manager
  3. which will display all the modules in your global module group. To remove a module
  4. click the module and click the trash can delete icon in the module inspector.
  5. In the upper right, click Publish changes to take your changes live.

Manage Global Content

Remember:

  1. In a global group,
  2. click the dropdown menu in the module inspector below the group's name to view a list of your global content.
  3. Global modules can be converted back to a local module on any template
  4. . Global groups can be cloned and added to a different template, but not converted to a local group
global5

Custom Modules

The custom module allows HubSpot users to create sections within a web page template that are extremely customizable and organized through the use of HTML, CSS, JS, and most importantly Hubl.

There are So Many Custom Modules in Growth Version 2.

In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.

custom1

Add And Delete Custom Module

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. Go to Page Link Open Page
  3. In the Top pane, Hubspot Edit Icon locate and click on that.
  4. Select the Edit Page option from the dropdown.
  5. In The Left Pane Edit Modules Icon Locate Click On that.
  6. If You Want to Edit Any content or You Can Edit
custom-module
custom2

Edit Custom Module

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. Go to Page Link Open Page
  3. In the Top pane, Hubspot Edit Icon locate and click on that.
  4. Select the Edit Page option from the dropdown.
  5. In The Left Pane Edit Modules Icon Locate Click On that.
  6. If You Want to Add New Module or You Can Delete
  7. Save and Update
custom4
custom3

Customize CTA Button

  1. By default, Growth Version 2 2020 uses (#335C67) as a CTA Button Color.
  2. To change CTA on custom Module, on text editor select the current CTA and delete it.
  3. Then click on Replace Select a CTA to insert Create New Or Insert
cta button

4. Click Next. 

cta1

5. On the next screen, enter a CTA name

6. Click the URL redirect type dropdown menu and select a URL type.

7. Depending on which redirect type you select, enter the external website URL,

8. upload a file, or select the HubSpot page or meeting link from the dropdown menu. 

cta2
  • Click Save.
  • Review your completed smart CTAs. Click Add another smart version to add a new smart CTA. Click Reorder rules to reorder your rules. When you're done, click Finish.

Overlay

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. Go to Page Link Open Page
  3. In the Top pane, Hubspot Edit Icon locate and click on that.
  4. Select the Edit Page option from the dropdown.
  5. Click On the overlay Section. In the left inspector pane
  6. Find Check To overlay Button, Switch The Button to add Overlay. 
  7. Save and Update
Overlay

Add And Delete Form

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. Go to Page Link Open Page
  3. In the Top pane, Hubspot Edit Icon locate and click on that.
  4. Select the Edit Page option from the dropdown.
  5. In The Left Pane Edit Modules Icon Locate Click On that.
  6. If You Want to Delete, Create New Form or You Can Edit
  7. Click On Edit tab
  8. select Feilds Or Remove
  9. When you're done, click Save and Update
form

Redirect Form To Other Pages

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. select form section.
  3. In the Right sidebar, „Edit” tab find and click "Expand" for more convenient editing.
  4. In the „Edit” Move Down, Find the Right col Form
  5. Find Redirect to Another Page, Radio Button Select and
  6. Below This button You find Page Link
  7. Select Desirable Page Link From Dropdown Or If you Add You Required Link
  8. When you're done, click Publish Changes
form1

Edit Filters Section

Remember:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools. or
  2. Go to Page Link Open Page
  3. In the Top pane, Hubspot Edit Icon locate and click on that.
  4. Select the Edit Page option from the dropdown.
  5. Select Filters Sections Click On that.
  6. If You Want to Edit Any content or You Can Edit
  7. If You Want to Delete or Clone or You Can.
  8. Save and Update
filters

Google Map Embed Code

Check this link for instruction https://support.google.com/maps/answer/144361

Make Blog Live

To learn more about Blogs in HubSpot, see the official documentation.

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  2. In your HubSpot account, click the settings icon settings in the main navigation bar.
  3. In the left sidebar menu, navigate to Website > Blog.
  4. In Blog > Select Blog To Modify
  5. Select Template For Blog To Posts
  6. Find Select Listing Pages
  7. Select Number Of Posts Per Pages
  8. Go To Date Format tab, Select Date Format
  9. Veiw Blog
blog-3

Make Error Page Live

After customizing your system templates, apply them to your site in your HubSpot settings.
  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  2. In your HubSpot account, click the settings icon settings in the main navigation bar.
  3. In the left sidebar menu, navigate to Website > Pages.
  4. Click the System Pages tab. 
  5. Click the corresponding dropdown menus to select your 404 error page, 500 error page, Password prompt page, and Search results page templates.
  6. When you're done, click Save in the bottom left. 
error-pages

We help companies and marketers save time and generate more leads via drag and drop HubSpot COS conversion focussed templates.
Features
About Us
Company

© Copyright 2020-21