Create a Testimonial Slider on HubSpot

18 Jul, 2018

This article will walk you through how you can create a testimonial slider using custom modules on HubSpot. By the end of this tutorial, you should have a custom module that looks like this: 

TestimonialSliderDemo

You can also preview a demo of the module here

One glance at the below might look like a lot of effort, but you should have your module up and running in no time! Follow the instructions below to set it up.

 

New call-to-action

 

1/ Create a custom module

On the new HubSpot navigation, go to Marketing > Files and Templates > Design Tools. Your Design Manager is where you can find all of the templates on your HubSpot account.

The folder/file structure on the left hand side will look different for everybody, so navigate to the folder where you would like to place your custom module (there is typically a "Custom Modules" folder already).

You can right-click on the folder and choose the option to create a New file

newfileinmodules

You will be asked what type of file you would like to create, in this case choose the Module option under Components.

componentsmodule 

In the setup screen, select Page Templates under "Where would you like to use this module?" and Local Module under the "Module content scope". In the "File name" textbox, you can call your module Testimonial Slider. Click on Create.

modulesetup

This will load an area like this where you can add in the code for your module: 

testimonialsliderarea

If you're not a coder, don't worry! I'll walk you through exactly what you need to paste into each area below.

 

2/ Create the fields for your custom module

The fields in your custom module are the content you will be able to add to your module when you use it in a page. In this case, we are going to add in the ability to create one or more testimonials which include: 

  • The testimonial content
  • The name of the person giving the testimonial
  • The position of the person giving the testimonial
  • The company of the person giving the testimonial
  • The photo of the person giving the testimonial

This part can be slightly tedious as we need to create a field for each of the above and then group them, but it'll be worth it!

 

Testimonial Content

Click on Add field and type in "rich text" in the search bar, then click on the Rich Text module that appears below.

richtext

Where it says "Rich text field" at the top, type in "Testimonial Content". The HubL variable name below should change to "testimonial_content".

testimonialcontent

To add in placeholder testimonial content, click on the Default rich text box below. 

defaultrichtext

In the rich text editor, you can enter any placeholder text that you like, then click on Back to editor when you are done.

defaultrichtexteditor

Click on the tools icon in the upper left-hand corner of the sidebar to return back to the main screen.

tools

 

Testimonial Name, Position and Company

Similar to the above, click on Add field and type in "text" in the search bar, then click on the Text module that appears below.

text

Where it says "Text field" at the top, type in "Testimonial Name". The HubL variable name below should change to "testimonial_name".

testimonialname

In the Default text section below, add in a placeholder name. For example, "Han Solo".

placeholdername

Click on the tools icon in the upper left-hand corner of the sidebar (toolsiconsmall) to return back to the main screen.

By now you are hopefully getting the gist of creating fields and can repeat the exact same instructions above for the Testimonial Position and then for the Testimonial Company: 

  1. Click on Add Field and choose a Text field
  2. Rename the field to "Testimonial Position" (HubL variable name "testimonial_position") for the Testimonial Position and Testimonial Company HubL variable name "testimonial_company") for the Testimonial Company.
  3. In the Default text area, enter any default position and company names respectively (e.g. position "Pilot" and company "Solo").
  4. Click on the tools icon in the upper left-hand corner of the sidebar to return back to the main screen.

 

Testimonial Photo

The photo is a little more of the same, but this time when we click on Add Field we are going to search for "image" and choose the Image module.

image

Where it says "Image field" at the top, type in "Testimonial Image". The HubL variable name below should change to "testimonial_image". Click on Select image below the Default image section to choose a placeholder image of your choosing.

testimonialimage

You can optionally enable Hide size controls below as there will be a default image size.

Click on the tools icon in the upper left-hand corner of the sidebar (toolsiconsmall) to return back to the main screen.

 

Group all fields

In order to be able to add multiple testimonials, we need to group all of the fields above. To do so, on the main screen of the sidebar click on the Group option.

group 

Select all of the fields (they should all be highlighted in blue) and click on Create Group.

creategroup

Where it says "Field group" at the top, type in "Testimonial". The HubL variable name below should change to "testimonial".

testimonialgroup

On the sidebar, scroll down to where it says Repeater options and enable the toggle button to the right. This will allow us to create multiple testimonials.

repeateroptions

Click on the tools icon in the upper left-hand corner of the sidebar (toolsiconsmall) to return back to the main screen and we're done!

 

3/ Adding in the code

Now comes the easy part as you just need to add in the code provided below. The slider code is from JQuery lightSlider which allows you to create a slider with any content, in this case a testimonial.

HTML + HUBL

In the HTML + HUBL section at the top of your module editor, paste in the HTML code on this link.

CSS

In the CSS section in the middle of your module editor, paste in the CSS code on this link.

JAVASCRIPT

In the JS section at the bottom of your module editor, paste in the JavaScript code on this link.

 

4/ Using your Testimonial Slider module

Your custom module screen should now look something like this: 

testimonialslider

If you click on the Preview option in the upper right-hand corner it will allow you to test out the module. On the left hand side, each time you click on Add, it will add a new testimonial. Clicking into it will allow you to update the testimonial content, name, position, company and image. 

testimonialsliderpreview

You will have similar options when you use the module within a page. Clicking on the module should allow you to add testimonials and edit each one on the left-hand side.

 

Conclusion

And that's how you create a testimonial slider on the HubSpot CMS!

I hope this tutorial has been helpful but if you have any questions or issues with the above, please contact me and I would be glad to help.

 

Topics: custom-module, tutorial

Join the Conversation!

Do you have a question, feedback or comments on this post?