A Basic Guide to Designing on the HubSpot CMS

A fundamental part of this process is understanding the relationship between HTML and CSS. If you’re not familiar with css or just want to brush up your skills, I recommend the following sites:

1. http://htmldog.com
2. http://css-tricks.com
3. http://www.alistapart.com

There are two basic areas used to create a HubSpot template:

1. Settings > Template Configuration
2. Settings > File Manager

Template Configuration is best used as the base for your font families and color palette. File Manager is where the magic happens so to speak and thus will be where the majority of your customizations take place.

To go beyond the level of customization provided in Template Configuration, we’ll need to create a file called ‘custom.css’ in HubSpot’s File Manager. This file will get loaded into every page of the website automatically.

If there isn't an existing custom.css file you can create one by clicking on Site Home > New File in File Manager.

HubSpot’s basic CMS does not allow access to any underlying html markup and there is no way to FTP templates into the system. All themeing is driven through CSS. HubSpot supports three types of navigation, which are inherently referred to as ‘Templates.’ Each template provides several different page layout options:

• One column
• Two column
• Two column right
• Three column

The templates and navigation styles are:

• Foxboro – horizontal nav bar with drop downs for child pages
• Brighton – horizontal nav bar with side menus for child pages
• Duxbury – vertical side menu only

HubSpot’s Foxboro template is the most flexible of the templates and also comes with two additional page layouts:

• Three equal width columns
• Two equal width columns

It also has a Bottom Pane container, which allows for modules to be placed just below the main content area and above the site footer.

Viewing the source on any CMS page and looking for skin.css is the best way to see what CSS selectors are available for styling. All three templates use a similar naming convention of template_tag. For example, to style the menu background color on Foxboro, Brighton, and Duxbury respectively you could use:

• div#foxboro_menu {background:#333;}
• div#brighton_menu {background:#333;}
• div#duxbury_menu {background:#333;}

Due to the order that the stylesheets are loaded, you may need to use !important when trying to style different tags. Prefacing each ID or Class with its appropriate selector will greatly reduce the need for !important.

For example, #foxboro_menu .rootGroup li a span {font-size:14px;} would be better written as div#foxboro_menu ul.rootGroup li a span {font-size:14px;}

Building sites on HubSpot's CMS is a skill that takes time to develop, but will get easier with practice. If you're looking for additional resources, some great information can be found here: help.hubspot.com.

12 Critical Elements Every Homepage Must Have [Infographic]

If you're considering a website redesign or are wondering how to generate more leads from your website, there are several critical elements you should always consider. I'll admit my homepage could benefit from a couple of these tips as well...

In order for a homepage to work, it needs to meet its purpose and contain key elements that attract traffic, educate your visitors, and convert browsers into buyers. Check out the infographic below to see some great ideas on how to do just that.

12 Critical Elements Every Homepage Must Have via @HubSpot

How Bad Do You Want Succeed?

If you’re going to be successful you’ve got to be willing to give up sleep.

Using HubSpot Exported Form Code on Wordpress

This article will outline the proper way to install exported form code from HubSpot on Wordpress to avoid getting any spam submission errors. It's easiest to have both your HubSpot portal and your Wordpress site open in separate tabs.

First, create your form in HubSpot by going to Settings > Form Manager > Create New Form. If you're using an existing form you can just hit 'Edit' on the same screen.

Next, hit "Get Form HTML." In the input box you can either put the url of your homepage, such as http://heykenneth.com or a url to a separate thank you page you've already created.

Hit "Next" and you will be presented with the form code to use on your non-HubSpot website. From here the easiest thing to do is copy and paste all of the code into Notepad or TextEdit if you're on a Mac.

Make note of the following lines of code located between the open and close <script> tags:

This script, highlighted above, is what HubSpot uses to check for spam when a form is filled out on your website. Next we will cover moving this chunk of code from the exported form html to the header.php file in your Wordpress site.

Once logged into Wordpress:

1. Click on the "Appearance" tab in the left hand side menu
2. Select "Editor"
3. On the right side of the page there will be a long list of core Wordpress files
4. Look for Header.php

If you followed the steps above you should now be looking at your website’s HTML

1. Scroll to the bottom of Header.php and look for the close </head> tag
2. Paste the chunk HubSpot code right above it
3. Make sure to include both the open and close script tags <script> … </script>
4. Hit "Update File"

The final steps involving taking the remaing code and placing it into a content area on your Wordpress site.

You can either paste the code into a sidebar text widget or directly inline on a content page. If pasting it inline on a content page make sure to be in "HTML" mode.

If you've completed the steps above, from this point going forward all you will need to do is delete the HubSpot spam check script from your HubSpot exported form code and paste in the html on your Wordpress site as usual.

* Note: Make sure you do not include the script we removed earlier when adding in the form code.

Two CSS Tips to Help Improve Your HubSpot Landing Page Conversions

HubSpot uses a templating system which is great for creating landing page content on the fly. However, sometimes we need a little more fine-grained control over what is and isn't displayed on the page when trying to increase our conversion rates. Two easy ways we can do this are by hiding the courtesy and footer links.

Since there is no interface to hide these items by default, we'll use a little css placed in the HTML Head Tag Text area under Page Properties to achieve what we want.

Make sure to wrap your css in style (<style> </style>) tags otherwise these propeties will not work.

Hide the courtesy links on Foxboro:

 div#foxboro_courtesy_links {display:none;}

Hide the footer links on Foxboro:

 div#foxboro_footer div span#dnn_dnnLINKS_lblLinks {visibility:hidden;}

Hide the footer links on Brighton:

 div#brighton_footer div.radmenu {visibility:hidden;}

* Note: Foxboro uses a drop down for child pages. Brighton uses a sidemenu for child pages.
** Note: Courtesy links are the links in the top right hand corner of the page.

An Excerpt From Co.Design's Interview with Deiter Rams

Here, Rams bemoans that more companies don't privilege design, and he argues that for design to have a truly great impact, designers have to be insulated at a company but report to high-level management. That was the case with Braun, and it's true of Apple now.

For the rest of this article, check out the following link: "The Greatest Designer Alive" via Co.Design.

Customizing HubSpot's Photo Gallery Module

This post will focus on customizing HubSpot's new photo gallery module to utilize a white background, rather than the default black background. Generally, the white background will blend better with lighter colored websites, where as the default black background is better suited for darker websites or when a more dramatic effect is desired.

To start, first download the following image file updated for use on a white background (classic-map.png).

Next, click on Settings in the top right hand corner of the HubSpot menu bar and then click on File Manager. Upload the image file from above into your images folder or another of your choosing. I've uploaded mine into a folder called 'template.'

Once in File Manager open up the custom.css file. If there isn't a custom.css file in your File Manager you can create one by clicking on Site Home and then choosing the 'New File' menu option, making sure to name the file exactly custom.css.

In your css file, insert the following code:

div.galleria-container {background-color:#fff!important;}

div.galleria-loader {background:#fff url(/Portals/xxxxx/template/classic-loader.gif) no-repeat;}

div.galleria-thumb-nav-left,
div.galleria-thumb-nav-right,
div.galleria-info-link,
div.galleria-info-close,
div.galleria-image-nav-left,
div.galleria-image-nav-right {
background-image:url(/Portals/xxxxx/template/classic-map.png);
background-repeat:no-repeat;
}

div.galleria-counter {color:#000;}

div.galleria-info-text {}
div..galleria-info-title {}

div.galleria-stage img {padding:0!important; border:0 none!important;}
div.galleria-thumbnails div.galleria-image img {padding:0!important; border:0 none!important;}

div.galleria-thumb-nav-left:hover,
div.galleria-thumb-nav-right:hover {
background-color:#fff;
}

div.galleria-info-link {background-color:#fff;}

Make sure to replace 'xxxxx' with your unique Portal ID number and double check that the path to your image is correct. Your Portal ID number can be found in the footer of your HubSpot dashboard.

The final product should look like the following example:

How To Add HubSpot Tracking Code to Wordpress

How to install HubSpot tracking code on Wordpress

1. Login to your website: http://yoursite.com/wp-admin
2. Click on the "Appearance" tab in the left hand side menu
3. Select "Editor"
4. On the right side of the page there will be a long list of core Wordpress files
5. Look for Footer.php

1. Scroll to the bottom of Footer.php and look for the close </body> tag
2. Paste the HubSpot tracking code right above it
3. Hit "Update File" and you are done

How To Add HubSpot Tracking Code to Joomla

How to install HubSpot tracking code on Joomla:

1. Login to your website: http://yoursite.com/administrator
2. In the top menu select: Site > Template Manager > Site Templates
3. Then select the template which is marked as default () and click "Edit HTML"

1. Login to your website: http://yoursite.com/administrator
2. In the top menu select: Extensions > Template Manager
3. Now select the template which is marked as default () and click "Edit"
4. In the template edit page click "Edit HTML"

1. Scroll to the bottom of the code and look for the close </body> tag
2. Paste the HubSpot tracking code right above it
3. Hit "Save" and you are done

Introducing HeyKenneth: HubSpot Design and Integration Company

HubSpot is trying to change the way people do marketing, and we're here to make it easier for your to do so. HeyKenneth aims to provide top of the line design and integration services to HubSpot customers in all industries.

HeyKenneth knows inbound marketing and how the HubSpot software works. We're here to make sure that you have the easiest and most efficient inbound marketing system possible. We're huge fans of HubSpot, and think you will be too. We're here to help you discover the potential that your sales and marketing team can achieve with inbound marketing and HubSpot.

Please get in touch and let us know how we can help. We're also listed in the HubSpot Services Marketplace, so please check us out there.