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 Hey Kenneth: 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. Hey Kenneth aims to provide top of the line design and integration services to HubSpot customers in all industries.

Hey Kenneth 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.