For designers and developers who are used to building and customizing Hubspot Templates, the blog has been a particularly challenging hurdle to overcome when it comes to customization. There are a lot of differences between the Blog and other types of templates on Hubspot, but one particular hurdle to overcome is the loop.

Understanding The Loop

While all Hubspot Blog Templates start with the the standard drag-and-drop template builder found under Design Manager, the real code is actually in raw code, hidden inside the Blog Content Module’s two buttons: “Edit Post Template” and “Edit Listing Template.”

blog-template-buttons

Once you dive in, you’ll notice things are very different. This is the code that controls the heart of your blog: the style and layout of each individual post or item. And it’s all one big loop:

{% for content in contents %}
    <div class="post-item">
        <!-- All your posts are generated inside of this, repeating over and over. -->
    </div>
{% endfor %}

This is why each post in your Hubspot blog looks identical from post to post:

blog-post-repeating

The problem is that clients and designers want more custom blogs like this:

blog-custom-look

So when everything is stuck in a repeating loop, how do we customize it? Well, it’s difficult, but not impossible.

Fighting The Loop

There are lots of creative ways to use jQuery and other code libraries to alter or manipulate the Hubspot blog loop, however I’m going to share one one of the most useful, basic and common solutions that I’ve both seen, and used myself.

The problem with a loop is that each entry isn’t unique. All the classes are the same and the content is the same, so if you change something in CSS or HTML, it affects every post. The only way to single out posts individually is by adding custom classes to each post. So if your main blog listing page is going to have 9 total posts displayed on it, then we need to add 9 custom classes. Just add this code to your blog template header below.

<script>
    $(function() {
	$('.post-item')
    	.eq(0).addClass('firstpost').end()
    	.eq(1).addClass('secondpost').end()
    	.eq(2).addClass('thirdpost').end()
    	.eq(3).addClass('fourthpost').end()
    	.eq(4).addClass('fifthpost').end()
    	.eq(5).addClass('sixthpost').end()
    	.eq(6).addClass('seventhpost').end()
    	.eq(7).addClass('eighthpost').end()
    	.eq(8).addClass('ninethpost').end();
    });
</script>

We targeted the “post-item” class because it’s on each blog post on the main page. The jQuery simply counts each post 1-9 and adds the custom class to each. Now you have something to target in CSS as a developer if you want one post to look different from another. Here’s a couple examples:

Blog Example: IndieWhip Blog

So the first post is styled to have the featured image at full 100% width inside the container, and then the next ones have the featured image left and text to the right. All we had to do was target the initial first post and change that, then code the base styles for all the next posts to be right aligned. But that’s not all you can do…

Case Studies “Blog” Example: Sapphire Captial Partners

In this case we use the above method to radically redesign each post and it’s spacing to make a different looking page altogether. We’re still using a blog template in Hubspot, but it doesn’t look like a blog at all. There are other things on this page, but the core of making it look different is from the code example about.

There are a lot of other clever things that can be done to customize a Hubspot Blog Template, but we hope this article will help get you started with trying to make more custom designs.

advanced hubspot blog design - FlexHUB

Are you looking for a pre-built Custom Hubspot Template? Check out FlexBLOG.

 

Subscribe For Updates

If you want to stay up-to-date with all our content on Hubspot Design and Development, please subscribe. We value your email address and will not SPAM you with frequent updates.

You have Successfully Subscribed!

Pin It on Pinterest

Share This