HubSpot

02 June 2023

HubSpot is customer relationship management (CRM) software that centralizes all the data an organization needs to offer efficient customer care.

A template is a pre-made plan that we may edit to design our website exactly how we want it. The HubSpot CLI or design tools can be used to develop it. Modules and global contents are included in it.

The following is a list of the different templates that are available in HubSpot:

• Blog Template
• Email Template
• Page Template
• System Template

Here, we’ll talk about page templates, or website templates.

Page Template:

• The HTML files that define the structure of web pages are known as templates. It includes changeable elements in the template, such as photos, the option to add advertisements, dynamic user forms, etc.
• The quantity of templates required depends on the project’s scope. For the home page, we just utilize one template, and identical pages are needed for the other sites as well.

We can create the template using three types:

Starter Template:

HubSpot provides predefined templates under the heading Starter Template. The drag and drop feature is available. The font, color, and button styles are all customizable

How to create a template?

• Select the Create button in the area to the right of the section
• Navigate to the screen as necessary:
  Landing page: Click on the ‘Marketing button’. Then select the ‘Landing pages’ option
  Website page: Click on the ‘Marketing’ button. ‘Website’ should be chosen. Then select the ‘Website pages’ button.
• In accordance with the requirement, click the “Create” button and choose the landing page or website page. Several templates will be displayed
• If your template is not there, click the Other template area at the bottom, and the list of all custom templates will appear
• At the base of that template, there will be buttons for previewing and choosing a template
• If the end-user chooses to view the data by clicking the preview button, a big screen will appear. After you click the Use template button in the upper right corner, the template will be accessible for customization
• After choosing a template and clicking the button, that template is chosen for use
• You can now customize the template to meet your needs

Theme Template:

Websites are built using theme templates, which are collections of modules, layouts, and styles. Several theme templates are present by default in Hubspot. Theme templates allow for the customization of theme styling and the inclusion of theme modules

How to create a template?

• Select the Create button in the area to the right of the section
• Navigate to the screen as necessary:
  Landing page: Click on the ‘Marketing button’. Then select the ‘Landing pages’ option
  Website page: Click on the ‘Marketing’ button. ‘Website’ should be chosen. Then select the ‘Website pages’ button
• In accordance with the requirement, click the “Create” button and choose the landing page or website page
• Several templates will be displayed
• If your template is not there, click the Other template area at the bottom, and the list of all custom templates will appear
• There will be a Theme option at the top. You can select it to alter the theme templates on your own by clicking
• At the base of that template, there will be buttons for previewing and choosing a template
• If the end-user chooses to view the data by clicking the preview button, a big screen will appear. After you click the Use template button in the upper right corner, the template will be accessible for customization
• After choosing a template and clicking the button, that template is chosen for use
• You can now customize the template to meet your needs

Custom Template:

1. Tools for design managers like custom templates may be used to create it. The template has to be created from nothing. The drag and drop method or the HTML + HubL language are just two of the methods available for creating templates.

How to create a template?

• Press the ‘Marketing’ button
• Pick ‘Files and Templates’ from the menu
• Select the ‘Design Tools’ option to access the custom templates
• Select File from the menu on the left-hand side
• To create a template, files, or components, select New File
• Choose the appropriate alternatives based on the criteria
  -We must choose the HTML + HubL language or the drag and drop choices in order to construct a new template
  -To create new component we have to select the module
  -We can choose the files options to add the files
• Then, when you click the next button and enter the filename on the following page, a new file will be created

Different parameters in a custom tool

HTML + HubL language:

• It is made with Hubspot Markup Language. On Jinja, this template is based
• We need to examine some of the delimiters in order to determine the distinction between the HubL start and finish code logic:
  Statement delimiters: These are the template’s generic code logic. The conditional statement, the loop structure, and many other things were included. It needs to be caught between {% syntax %}. Nothing is printed in the template
  Expression delimiters: The syntax is {{ print }}. This displays the variables’ values. The variable in the template must be declared as a statement in order to print the data
  Comment delimiters: The comment tag is defined in HubL as {# commented code #}. If we insert a statement in between, it will be marked as commented

Drag and Drop:

• It has the standard header, body and footer content
• To add the categories or files to it, click the ‘Add’ button
• Drag the tags to the template after that
• ‘Linked stylesheet’ button: Bind the CSS file
• Different module files may be used in various sections
• Add the template to the website pages after publishing the changes, or make a new page

Modules:

• Modules are a particular form of HTML, CSS, and JS combination
• Within all templates, it is reusable
• Create and use of module:
  -In the html portion, add the html code. Add the styles to the appropriate CSS file for it
  -By selecting the ‘Preview’ button, you may see the changes before applying them
  -Click the “Publish” button to make the changes public
  -In the template file, add the corresponding module

Publishing the templates:

• Publishing is similar to deploying template designs. Every time you submit modifications, the most recent changes in the tools are immediately included
• The modifications are published using the “Publish” button
• Do a preview before publishing the modifications because it will show the changes that end users will see
• Deficiencies after the revisions were published:
  -Changes may occasionally not be reflected to the end users after publishing
  -The new adjustments do not appear exactly as they did in the preview
• The following are some solutions:
  -Solution1: Delete the system’s cache. Open the published updates in an incognito mode
  -Solution2: Clear the cache of the system. Delete the template page that is located at the website pages. Once more, make a template by joining the new one with the customized one. Make sure to include the old name in the new template when generating the new one