It’s a frequent request: a client wants to add its resources to a library-esque module within its HubSpot site. And because they want to make sharing content as easy as possible, we want the sharing social media icons readily available. So rather than making a content page with a lot of hand coding required for each download, why not use a blog module? By creating a separate page and adding a “blog” module from the HubSpot module choices, you can customize and condense your resource library into an easy-to-share, one-stop-shop for your current or future prospects.
Once you’ve created a new content page and selected the blog module from the HubSpot module list – you’re already half-way done. All that’s left is to create a custom stylesheet that fits your needs and to populate your blog with content.
If you want users to download or watch most of the items listed, then you want to make the number of clicks to get to your content as few as possible. Include everything you need to say about your download or video in a few sentences, and then provide a link where they can view more. You can customize this paragraph by adding in an image of the download or video thumbnail and you can adjust your layout as needed since the blog takes HTML code.
Now that your content is set within the blog module, you can adjust the options available to the user. Under Options, you are able to turn off things like “allow comments” and “emailing subscribers.” If there are options that you can’t turn off in the admin area, consider updating your stylesheet. One suggestion: make a separate stylesheet for your resources blog (consider resources.css)
Each piece of the HubSpot blog area has a tag surrounding it that allows you to isolate the unique elements. This allows you to “hide” or display:none the elements like the tags, submission icons, comments section and byline.
The trickiest part is what to do with the H3 blog title. Because the blog module automatically includes an h3.title, you can use this as your main article heading. But there are cons, the h3.title links directly to the detail page of each blog post, allowing the user to potentially click an additional link before they’d get to the content. It also might affect the layout of your blog posts.
If you choose to forgo the h3.title and instead use an h2 within the blog post HTML, you’ll need to add the latest version of code to your resources.css:
#bb-container div.listing div.post h3.title a {display: none;}When you look at the non-detailed view of the blog, the h3.title actually contains the “Edit Post” hyperlink that allows you to edit your blog post. If you aren’t frustrated by hiding that ability (or you have a savvy developer who can use Firebug to get to it) then just hide the h3.title altogether. But if you love to see the orange blocks in edit mode – then add the above code. Additionally, when you look at a detailed blog post – you’ll see the h3.title is no longer surrounding the “Edit Post,” so that’s where the second set of parameters is needed.
If you are showing the social media share icons, then you also want to make sure that your actual h3.title makes sense when viewed with your h2. There’s currently no way to hide the h3.title on both the non-detailed AND detailed view of the blog without also hiding the “edit post” function.
Remember, this blog module should be completely separate from your main blog or any news/press release focused blogs you already have. This blog, or any blog other than your main one, will not show in your Analytics Reach Reports or other subscriber data, but there are some work around options, like Feedburner, to make sure you can track data regardless.
We’re continuously finding new ways to utilize all of HubSpot’s tools and modules; what are some of the ways you’ve found?
| Follow @maddieweber |
| Follow @Kuno |
