HubSpot Custom Module: Blog Feed

17 Aug, 2018

Displaying your blog posts on your Homepage or About Us page is a crucial way of getting your content to your readers. 

HubSpot offers a Blog Feed module but, in order to style it, you need access to a developer. The Blog Feed module is a highly customisable custom module for HubSpot that can be dropped into any template. You can update the number of posts, elements you would like to display and styling in minutes with absolutely no code. 

You can preview the module on a live page here and view the module on the marketplace here

Marketplace - Blog Feed Module

 

The module uses CSS Flexbox, which means that the containers will always be the same height, regardless of the content that appears in each one.

It pulls the most recent posts from your default blog based on the number of posts you have specified in the customisation options. 

 

Customisations

Below is a list of what you can customise on the module. 

  • Blog
  • Blog Topic/Tag
  • Number of Posts
  • Background Colour
  • Highlight Colour
  • Hover Colour
  • Toggle the Image
    • If Image is displayed, change the image height
  • Toggle the Topics
  • Toggle the Title
    • If title is displayed, change the title colour
  • Toggle the Separator
  • Toggle the Author and Date
    • Update the colour for the date and author
    • Update the text that appears next to each one
  • Toggle the Summary
    • If the summary is displayed, choose to limit the number of characters
    • If the summary is displayed, change the summary colour

 

When you add the module to a template, you will be able to modify each option using the fields that appears on the sidebar.

Check out some examples of customisations to the module using different numbers of posts, elements and colours: 

blogFeedCustomisation1

 

blogFeedCustomisation2

blogFeedCustomisation3

 

Frequently Asked Questions

Where does the text styling come from?

In order to keep the styling consistent with the rest of your site. I haven't added the option to update the font. It should pull the fonts already specified for your h3 headers for the title and your body for the content. 

However, you can add the following snippet to the CSS section in the module if you would like to update the text styling.

 .rss-item-content {
font-family: helvetica; /* Font for the entire block */
}

.rss-item-content .rss-title {
font-family: helvetica; /* Font for the header */
}

 

Can I make additional customisations to the module?

While the above customisations should cover the vast majority of use cases, additional customisations can be made to the module code. If you don't have access to a developer who can make these customisations for you, send me a note and I should be able to help! 

 

If you have any other questions at all about the module, please feel free to contact me

 

New call-to-action

Topics: custom-module, marketplace

Join the Conversation!

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