Redesign Blog Layout - 3 Columns

[VirginiaHughes]

Hello everyone!

I'm new to Hubspot and am trying to change the default hubspot blog layout from 1 column, to 3 columns. I've come to realize that this must be done using HubL and a lot of CSS but I have no idea where to start. I've included an image of what I'd like to build, and here's a link to an idealistic blog layout - easy, simple and clean. 

I have some frontend coding knowledge, but not enough to take a stab in the dark. Any tips or help would be greatly appreciated. Thank you all in advance!

Virginia

[Ty]

Hi @VirginiaHughes,

So it took a look at your blog and the example you gave and this should get you pretty close to the main structure. As far as how to rearrange the titles/description into the same form as Transit, you will have to move around those values within your HubL template as well.

/* Make your container wrapper 100% */
.blog-content{
	width:100%;
	display:block;
	padding:0 !important;
}

/* Set each post item as 1/3 of 100% */
.blog-listing-wrapper .post-listing .post-item {
    padding-bottom: 60px;
    width: 33.33333333%!important;
    Float: left;
    padding: 0 12px;
}

/* Move blog pagination to the bottom of page */
.blog-pagination{
	clear:both;
}

/* When below 676px, make post items 100% of 100% */
@media (max-width: 676px){
	.blog-listing-wrapper .post-listing .post-item{
		width:100% !important;
		padding:0 12px;
	}
}

This should get you most of the way there, but you will have to rethink your sidebar, as it takes up 30-40% of the side itself. You could either remove it completely, or move the components above or below the listing module. This is what your sidebar module looks like, for reference:

A thing to remember about HubSpot's blog is that we use a function called a "For Loop" to repeat the same HTML structure of each post. That structure being:

<div class="post-item">
  <div class="post-header">
    <h2><a href="">Title</a></h2>
    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
      Posted by
      <a class="author-link" href="">Author</a>
    </div>
  </div>
  <div class="post-body clearfix">
    <!--post summary-->
    <div class="hs-featured-image-wrapper">
      <a href="" title="" class="hs-featured-image-link">
        <img src="" class="hs-featured-image">
      </a>
    </div>
    <p>Author</p>
    <p><span style="font-size: 18px;">Preview Text</span></p>
  </div>
  <a class="more-link" href="#">Read More</a>
</div>

And each instance will be inserted into your "post-listing" div. So naturally, the only things you should need to style on the listing page are the divs within this code block ^.

Hope this helps you out! Let me know if you need anything else 🙂

-- Ty

[Susanne1]

Hey I've been trying to figure out the exact same thing. I have no coding skills whatsoever so can't figure out if I've to replace all the code or just a bit of it. Any help would be much appreciated!

[VirginiaHughes]

Hi @Ty,

Thank you so much for the help!

I implented your recommendation and got the exact look and design I was looking for. I am incredibly grateful for your help and am excited about my new blog! 🙂

A million thanks,

Virginia

[Susanne1]

Hi I'm trying to figure out the exact same thing! Do you replace all the code or just part of it?

[fmckeon1]

Hi @Ty and @VirginiaHughes and anyone else who may be able to help,

I would also like to create a blog listing page like this link (the same one @VirginiaHughes shared above). But, I have no idea where to begin (HubL, CSS, HTML). Would someone be able to walk me through this step by step?

Thanks so much.

FM