Skip to content

How to Add CTA’s between posts on your blog listing page in HubSpot

I have had a lot of clients that have wanted to display CTA’s between the posts on the blog listing page. In this post I will show you a quick and easy way to do it. The code might look a bit different on your page, therefore these steps requires some understanding of HTML/HubL – otherwise your page might break. 

Start by navigating to your blog listing template and click edit listing template. Click on the images for enlarged versions.

Edit Listing Template

All the code for the blog listing will appear.  Find the code where the blog posts are declared (and find where the declaration ends). In my case it starts with 

<div class="post-item list-post-item">

so I will look for the

</div>

for that class.

Find the blog post code

On the next row you want to add the following code:

This means that there will appear a CTA after the 5th blog post. I will go through different options later in this post. I also added a div class, that way you can style the CTA (margins, paddings, borders etc.)

 

Next, you want to navigate to the CTA button you want to add (Content -> Calls-to-Action). Once you find the right CTA, click the arrow to the right and choose Embed. A popup with code will show up – copy all of the code.

CTA embed code

Then simply just add the code you just copied between the div declaration you added to the blog listing code . The code should look something similar to this:

All the code added

Done! Save and check if it works.

The result

 
As I mentioned, the code