Creating a Dual-Column Blog Layout in HubSpot

Other Questions HubSpot
1

I’m trying to figure out how to make a two-column layout for my blog in HubSpot. Right now, they only give us a one-column format. I’ve tweaked the Blog Content module and changed the Listing Template code to look better. I set the blog to show 10 posts per page, but I want it to split into two columns after 5 posts.

I added some styling to make the first column take up half the page width:

max-width: 50%; height: auto;

But I can’t figure out how to make posts 6-10 go into a second column. I’ve been looking everywhere for help, but nothing seems to match what I need.

I can edit the template code and add CSS, but that’s about all I know how to do. If there’s any JavaScript needed, I can only copy-paste it into a file for the site.

Does anyone know how to make this work? I really want to have a nice two-column layout for my blog posts. Any tips or tricks would be super helpful!

2

I’ve tackled a similar challenge with HubSpot’s blog layout before. Here’s what worked for me:

Instead of trying to split the existing Blog Content module, I created two separate Blog Content modules side by side. In the template, I set up a flexbox container with two child divs, each holding one Blog Content module.

For the left column, I configured the Blog Content module to show posts 1-5. For the right column, I used a separate Blog Content module set to show posts 6-10.

In the CSS, I used:

.blog-container {
  display: flex;
  justify-content: space-between;
}

.blog-column {
  width: 48%;
}

This approach doesn’t require JavaScript and keeps things manageable within HubSpot’s limitations. It might take some tweaking to get the pagination right, but it gives you the two-column layout you’re after without overly complex code.

3

hey surfingwave, i’ve had similar issues. have u tried using flexbox? it’s pretty neat for this kinda stuff. just wrap ur blog posts in a container and use something like:

.blog-container {
  display: flex;
  flex-wrap: wrap;
}
.post-item {
  flex: 0 0 50%;
}

this shoud make ur posts line up in 2 columns automatically. no need for seperate modules or js. hope this helps!

4

I’ve been in your shoes, SurfingWave. One solution that worked wonders for me was leveraging CSS Grid. It’s a bit more modern than flexbox and gives you precise control over your layout.

Here’s what I did:

.blog-listing-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.post-item {
  width: 100%;
}

This creates a clean two-column layout without needing to modify your HubSpot modules or mess with JavaScript. The best part? It’s responsive out of the box. On mobile, you can easily switch to a single column with a media query.

Just make sure your template allows for custom CSS. If you’re stuck, HubSpot’s support team can usually point you in the right direction for where to add this code. Good luck with your blog redesign!

5

Having worked extensively with HubSpot, I can suggest an alternative approach that might solve your problem. Instead of modifying the existing Blog Content module, consider using HubSpot’s grid system. It’s a powerful tool built into their CMS that can help achieve the layout you’re after.

In your template, you can create a two-column structure using the grid classes. Then, place a single Blog Content module inside this structure. The key is to use CSS to force the posts into two columns within this grid.

Here’s a basic CSS snippet to get you started:

.blog-listing-wrapper .post-item {
    width: 48%;
    float: left;
    margin-right: 2%;
}
.blog-listing-wrapper .post-item:nth-child(2n) {
    margin-right: 0;
}

This approach maintains the simplicity of using a single Blog Content module while achieving the desired two-column layout. It’s also more flexible for responsive design.