search search

How to Add a Custom Footer to your HubSpot Website Design

By Maddie WeberFeb 2 /2011

Straight from the web developer corner (aka my cubicle) – comes this week's hot website tip. How-to include a large, graphically designed footer on the bottom of your site using any of the HubSpot templates.

Our graphic design guys are always pushing the latest design trends, which currently includes large footers, complete with menu links, social media icons and other graphics that span the entire container of your site. The HubSpot platform has several website templates from which to choose, each with its own special characteristics and capabilities. The Foxboro template, for example, has a specific area called the "bottom pane" where you could easily insert any HTML module that you wish. But what if you don't want drop down menus, that also come with Foxboro? What if you want left-hand dynamic menus like Brighton – how do you get the massive footer on the bottom of your page without having a one-column template on all of your pages?

The answer is in the Settings tab. From there, go to Website Settings and insert in to the Body Footer HTML panel your custom footer code. You can style this with new classes in your css, and use a background-image to display graphics behind your text.

Body Footer HTML

Also, remember that you'll have to add a display: none; to the real #brighton_footer in your css and that your Google Analytics, or other tracking code should still go after any customized HTML you include in your website footer area.

For examples of these footers in action on the Brighton template, check out &

Custom Website Design

Learn How to Make Twitter an Important Part of Your Inbound Marketing Mix

Learn How to Make Twitter an Important Part of Your Inbound Marketing Mix