HubSpot Dev Day 2018 Custom Module Challenge: Team Member Module

Posted by Stephanie O'Gay Garcia on 25 Sep, 2018

As part of Dev Day 2018, HubSpot added a nice little challenge on the HubSpot Community asking us to build our own take on an existing custom module on the HubSpot Marketplace

For my module, I chose to build a more clean and modern version of the Team Member module. 

HubSpot Team Member Module

You can preview a demo of the module here

 

Responsive Grid

The module allows you to quickly add as many team members as you like and uses a responsive grid to organise them on the page. Regardless of how many you've added, they will always distribute nicely depending on the size of your box, the number of team members and the screen size.

 

Customisations

There are several elements you can easily customise from the editor.

 

General Customisations

You can update the size of the boxes, the default colours over the person and the colours that will appear on hover.

By the default colour, I'm referring to the black overlay you can see over each photo (this allows you to easily read their name). The hover colours appear when you hover over the team member (in the case below, yellow and pink to match my site). Each allows for two colours to create a gradient effect - adding the same colour to both the 1 and 2 fields will let you apply a single colour.

HubSpot Team Member Module Editor

 

Team Member Customisations

When you add a new team member, you can add the following information for them: 

  • Full Name
  • Description
  • Photo
  • Facebook URL
  • LinkedIn URL
  • Twitter URL 

 

HubSpot Team Member Module Editor

 

At this time, the module isn't available anywhere although it will most likely be available on the HubSpot Marketplace soon (check out my Blog RSS Feed Module I added to the Marketplace also).

However, if you're interested in learning more about the module or adding one to your site, let me know!

Tags: custom-module, marketplace


Comments

Do you have a question, feedback or comments? Join the conversation!