The difference between an average website and a high-end website often depends on the amount of customization. The Hubspot COS is an outstanding marketing-centric website platform (it’s actually the only such platform) and comes with a great many out-of-the-box features, but if you want something outstanding, you'll have to do custom work.

Each COS package includes templates for blog posts and blog listings pages. Both templates default to a single column, the same as most typical blog designs in other platforms like WordPress, for example.

But what if you want to display your blog listings in two (or three) columns? 

The Concept

Here's a screen shot showing two columns in the popular "card" format:

blog-listing-columns_concept.png

And here's exactly the same template but without special formatting:

blog-listing-columns_2b-default.jpg

Step 1) Start

Go to Content >  Content settings > Blog.

blog-listing-columns_1a_settings.jpg

Step 2) Select Your Blog

If you have more than one blog, select the one you want to customize.

blog-listings-select-blog.png

Step 3) Select Blog Template Structure

Here, you can chose to use one template for both posts and listings or you can split them. Default will be to use the same template for both posts and listings. This tutorial will work for a combined posts and listings template as well as with separate posts and listings templates. 

If you're going to use the same template for both posts and listings, make sure the check box shown in the image below is populated.

blog-listing-columns_template-options.png

Step 4) Find Your Stylesheet

Tip: Skip this step if you already know how to edit your stylesheet.

You'll need to find and load the stylesheet in Design Manager before you can add or modify its code. Here are a couple of ways to do that:

  1. Make note of the name of your blog listings template from step 3 above.
  2. Go to Design Manager: Content > Design Manager.
  3. Using the menu system, first locate, then click to load your template into Design Manager.
  4. From the template, click the dropdown: Edit > Edit head.
  5. Click on the stylesheet located under Attach Stylesheets. It's a clickable link.
  1. IF YOU SEE NO STYLESHEET there, go to Content > Content Settings and follow the next steps.
  2. Scroll to the text: "Attached Stylesheets, These stylesheets will be included on all pages."
  3. Find your domain level stylesheet there. Open it in Domain Manager.

Alternately, you could create another stylesheet if you know how, and attach to your template.

Step 5) Add CSS

If you're not used to working with CSS, be careful with this step. Here are somethings you might consider:

  • Backup your stylesheet by selecting and copying the entire code into a .txt document.
  • Either search for the class stings and modify the elements.
  • OR add the following code to the bottom of the stylesheet.

All set?

Paste in the following code into your stylesheet. Paste in everything between the ==== lines.

============================

/*** 2 column blog listings layout ***/
.blog-listing-wrapper .post-listing .post-item {
box-sizing: border-box;
float: left;
height: auto;
overflow: hidden;
width: 545px;  /* Single column width */
margin-bottom: 50px;
}

.blog-listing-wrapper .post-listing .post-item:nth-child(odd) {
margin-right: 25px;
}

.blog-listing-wrapper .post-listing .post-item:nth-child(even) {
margin-left: 25px;
}

============================

Step 6) Tweak Some Math

You'll need to do some simple math to get your columns to align correctly:

Wrapper width - total margin widths / 2 = column width

Thus, if your wrapper (web page content) width is 1,000px, and each margin is 25px (X2=50px), the math would be: 1,000px - 50px, / 2. Or 475px for the "width" element above.

Step 7) Save Your Stylesheet

Save (publish) your stylesheet to make it live.

Done:

If all went as planned, your listings now should display in two columns. Most likely, you'll want to do some additional styling to finish your project. Also be sure to test responsive layouts as well. 

Note: This coding project uses CSS pseudo-elements to structure the spacing between columns. The old-school way to do this, and I still see a lot of developers still doing it, is to simply set some arbitrary column width and stick in a little padding, e.g. “padding: 25px.” This practice simply won't work if you want the elements to align perfectly as shown in the following screen shot.

blog-listing-columns_1_alignment.jpg

Solution for 3 Columns

You can create three columns, but you'll need to redo your math, and redo your CSS pseudo selectors. This JSFiddle I did should help get you started. Again, just mod the "nth-child" pseudo-elements as shown in the JSFiddle.

Conclusion:

Template modifications, module creation, and CSS coding make up the more difficult design tasks in the Hubspot COS platform.

How did this go for you? Please comment on your project or leave comments about this tutorial in the “comments” box below. I’m always interested to see if these tutorials help!

Topics: Learn Hubspot COS

Skill Level
Moderate to advanced
CSS Pseudo-elements

Subscribe To Email Updates