Step 1: Planning the creation of our HubSpot module

[Dimaeiya323]

Although it has been previously emphasized that this guide is not a typical tutorial with a series of well-defined steps, we cannot begin without first mentioning the first stage: planning is essential before starting to create any module.

Before we start, we need to think about its structure, what options will be needed, which ones will be mandatory and which ones will not . Try to make it versatile, so that it can not only fulfill the function we require at the moment, but also adapt to possible variants.

Throughout this guide we are going to use as an example the creation of a very common module that is often used on service websites: the Testimonials module. A block like this can be anything from very simple to something complex, as it is also possible to add advanced functionality. In order to stay within the scope of this guide, we will make it simple and functional.

testimony example

In the screenshot we can see the final result of a testimonial created with the module that we will be replicating from scratch. To incorporate a testimonials section on a site, the first thing we will need is a title for said section. In addition, in our case, we will set a minimum of one testimonial and a maximum of six . We will also use:

An image of the author of the testimony.
The description of your experience.
The full name of the author.
The position the author holds within his or her company.
Keep in mind that you'll have more than one testimonial to display on your site, so the cio and cto email lists you create from the user interface . Luckily, HubSpot offers a very simple solution to allow this, as we'll see later.

How to Create a HubSpot Module from the Design Tool
The first step is to create the module in the HubSpot design tool. To do this, we have to access Marketing > Files and templates > Design tools from the navigation menu. Now we are in the HS “Design Tools” and we can proceed to create the module from the top left of the sidebar by clicking on File > Create file . A dialog box will open in which we must choose the “Module” option and click on “next”.

Now we will see a series of initial configuration options for our new module, and in the option “ Where would you like to use this module? ” we will check the first three, and in “ Module content scope ” we will choose “ Local module ”. The difference between a local and a global module is that the latter, if edited, will be updated on all the pages where we are using it.

initial module configuration

Now HubSpot will take us directly to the module editing screen where a sidebar will appear on the right side that will serve to create all the options that we want to be available and previously listed.

right sidebar