TwoColumnsStructure.jpg

The Hubspot COS website platform is the most powerful marketing and website platform on the planet. In fact, it’s the only website and marketing platform on the planet.

While you can buy any one of about 500 marketing SaaS packages (I’ve lost count), most will do only just that: help with things like a CRM, email marketing, landing pages, etc. If you want all that and more plus a high-end website, Hubspot is the way to go.

While you can do a great many things with a mouse click or two, a few things require a bit more effort. Such is the nature of web design—that is unless you’re okay with your website looking just like everyone else’s.

Unhappy with just One Column? Let’s Make Two.

This is a relatively easy task for Hubspot COS site pages, but not so with blog posts. With all the automation that goes into a blog, some fancy things call for work-a-rounds if you want to get fancy.

The easiest way to create multiple columns and rows in an HTML website has forever been to create an HTML table. You can do just that within the Hubspot website platform by clicking the MCE editing bar and selecting, “table.”

hubspots-mce_2.png

But before you do that, don’t. HTML tables are not responsive. There’s nothing worse than sticking some non-responsive, non-mobile-friendly element inside a nice responsive website.

In fact, there are two old HTML elements that keep hanging around that will kill your responsive design:

  • HTML tables.
  • iframes. iframes are used to embed things like videos, other websites, catalogs, etc. into a primary website. I’ll show you how to fix the iframe issue in another article, (like how to embed a YouTube video the right way.)

HTML Div Columns

One solution to non-responsive HTML tables is use “div columns.” Here’s what two div columns look like. The following two columns of "junk" text are live; this is not a screenshot:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis mollis risus, sed pharetra ipsum tempus sed. Praesent dapibus vehicula risus, sed accumsan erat maximus id. Mauris cursus lorem dui, semper ornare metus malesuada interdum. Duis molestie magna vehicula, fringilla metus viverra, rutrum magna. Nunc eget lacus fringilla, molestie nunc sed, viverra sapien. Sed aliquam dignissim metus, id egestas odio vehicula sed. Nunc quis nibh id sem condimentum scelerisque nec rutrum ipsum.
Ut aliquam vel lacus vitae eleifend. Duis consectetur a neque ac mattis. Curabitur nec metus tincidunt, commodo lacus quis, hendrerit leo. Nunc mauris erat, bibendum eget arcu in, mollis porttitor urna. Mauris porttitor est viverra justo vulputate tempor. Nullam et ex blandit, convallis nibh quis, mattis est. Etiam augue leo, aliquet eu rutrum at, mollis nec tellus. Nulla erat libero, facilisis id luctus non, venenatis at massa. Donec auctor massa a massa dictum dapibus. Etiam aliquam volutpat nulla, pulvinar feugiat quam sollicitudin in. Suspendisse sodales sapien quis purus condimentum maximus. Sed accumsan tellus id mattis ultricies. Mauris accumsan accumsan mauris sit amet iaculis. Nunc condimentum urna quis sagittis faucibus. Etiam nunc est, faucibus vitae tincidunt sit amet, vehicula ut ipsum.

Back to one column... You may notice that the formatting of <div> "paragraphs" looks a little different than paragraphs structured using the <p> tag. I think that's cool but, if you don't, you'll need to mod some CSS.

Steps to Creating Div Columns

DivTable.com makes doing this easy. You can head over there or copy the code below. In the code I supplied, I stripped out some of the unnecessary classes in the CSS but keeping them won’t hurt anything. I also created a responsive style to kill the columns for tablets and smaller devices.

Step 1) Grab the code

Either get the code from DivTable.com of get it below. Be careful to paste it in the right places in your Hubspot website blog post. 

Step 2) Paste the CSS code in your stylesheet

You first need to know which template and associated CSS stylesheet(s) you’re using for your blog posts.

How to find out:

  1. Create a new blog post.
  2. Click “Settings” at the top.
  3. Scroll down to “advanced options > Template settings.
  4. Click the “Edit” template button.
  5. Open the template in Design Manager.
  6. Click the “Edit” button at the top left.
  7. Click “Edit head.”
  8. Click the appropriate stylesheet under, “Attach Stylesheets.” Once you click on the stylesheet link, that stylesheet will open in Design Manager where you can add or edit the CSS code.

Alternately, you can use a browser development tool like FireBug to locate a stylesheet name but you’ll still have to open it in Design Manager to edit it.

Here's the CSS to copy and paste. Grab what's between the ==== lines.

====

/* DivTable.com */

/* Desktop monitors */
.two.divTable {
display: table;
width: 100%;
}
.two.divTableRow {
display: table-row;
}
.two.divTableCell, .two.divTableHead {
border: none;
display: table-cell;
padding: 3px 10px;
width: 50%;
text-align: left;
}
.two.divTableBody {
display: table-row-group;
}

/*** I-pad portrait and smaller responsive ***/
@media all and (max-width: 768px) {
.two.divTableCell, .two.divTableHead {
display: block;
width: 100%;
}
}
/*END RESPONSIVE */

====

Step 3) Copy and Paste the HTML code in your blog post

Open up the HTML editor by clicking on the <> in the MCE menu. Copy the code between the ==== lines. Paste in the code where you want the columns to display.

====

<div class="two divTable">
<div class="two divTableBody">
<div class="two divTableRow">
<div class="two divTableCell">This is column one.</div>
<div class="two divTableCell">This is column two</div>
</div>
</div>
</div>

====

Lastly, just replace the "This is coumn one..." with your own text. Done!

What Did you Think?

If you found value in this Hubspot COS tutorial, please share a comment using the form below. We value your comments and input!

Download The Ultimate WorkSheet for Redesigning Your Website

Topics: Learn Hubspot COS

Skill Level Required
Familiar with Hubspot HTML editor
Basic HTML copy and paste

Subscribe To Email Updates