• Blog

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. If you would like to apply this to your blog but don’t have the knowledge to implement it yourself, feel free to reach out to me and I will help you.

 

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:

{% if loop.index == 5 %}
     <div class="blog-listing-cta">
 
     </div>
  {% endif %}

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

{% if loop.index == 5 %} 

displays a CTA once after the 5th post. As you probably have figured out, the 5 is how many posts there are before the CTA.
If you want to display the CTA e.g. after every third post, use

{% if loop.index % 3 == 0 %}

instead.
Instead of displaying the same CTA every X post, you might want to display different CTAs. You can do this by using pretty much the same code for both – just change the number after how many posts the CTA will be displayed, the div class (if you’re going to have different styling, otherwise you can use the same class) and the CTA code.

 

{% if loop.index == 3 %}

     <div class="blog-listing-cta">

Add code for the first CTA here

     </div>

  {% endif %}

 

{% if loop.index == 6 %}

     <div class="blog-listing-cta">

Add code for the second CTA here

     </div>

  {% endif %}

 

If you have any questions about this or if you have problems getting it to work, feel free to contact me.

 

Share on Facebook Share
Share on TwitterTweet
Share on Google Plus Share
Share on LinkedIn Share
Send email Mail
  • Posted by Andreas Westerlund
  • On April 29, 2016

0 Comments

Leave Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • The Demo HubSpot Landing Page Template
  • The Simplory HubSpot Landing Page Template
  • The Beta HubSpot Landing Page Template
  • The Easyrio HubSpot Landing Page Template
  • The 20/80 HubSpot Landing Page Template
Categories
  • Employment
  • HubSpot
  • Inbound Marketing
  • Project Management
  • Uncategorized
  • Web Development

How much should I pay a freelancer?

Previous thumb

7 things to think about when you’re purchasing HubSpot templates from the HubSpot Marketplace

Next thumb
Scroll

Adepto Digital logo

© Adepto Digital – Privacy Policy

Contact:

Email: contact@adeptodigital.com
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkRead more