This guest blog post was written by Doug Bernstein. Doug is the founder and managing member of SEM Zen. Formally Vertical Interactive, the company has been delivering custom websites, web-based applications and creative solutions along with SEO and PPC management services to its client since 2000. SEM Zen is currently shifting it's focus to be a full-fledged Inbound Marketing agency utilizing Hubspot for itself and its clients as well. email@example.com is a great way to connect with Doug.
Let me begin by thanking Nick for asking us to be part of his inbound blog. He was generous enough to be our first guest blogger last week and it’s our pleasure to return the favor. No arm twisting was necessary, I assure you. Nick has been absolutely invaluable to us as we’ve begun our journey into both inbound marketing and Hubspot. Thanks Nick!
We’ve been working daily in the Hubspot CMS software for the past three months and have come up with a handful of small “hacks” that allow us to format the pages to look and function the way we want them to. The ultimate goal has been to create a seamless flow between pages we develop ourselves and the ones we create using the Hubspot CMS. Branding is essential for us as we continue to grow as an internet marketing agency.
Being a “techie”, I’ve always enjoyed the challenge of getting under the hood on a new system and changing things up a bit. Hubspot was no different. Here are the changes we’ve made and how we did them:
1. Custom bullet points to match our brand
We use small images of our branding leaf for our bullet points in an effort to reinforce our overall brand throughout our site. We made a simple modification to the “custom.css” file in the “File Manager” - we added a stylized list item <li> class that included the image as the background image. We then simply edit the HTML for any lists being used on any page we create by simply adding that “class” attribute to the list item and... voila!.. Branded bullet points! Here are the bullets being used in our article about content for your blog.
3. Rounded Corner Background to set your modules apart.
We’ve been into rounded corners as of late. We wanted to incorporate those along with a subtle background color for our modules being added to the right column of our blog and landing pages. We had to hunt down the individual tags that surrounded the modules for the column... and finally did!. From there we went back into the “custom.css” file and added the necessary border-radius attributes first. Secondly we changed the background color in the “Template Configuration / Advanced Color and Font Selection / Column 3 Module Background” to our desired color. In order to make sure the rounded corners show up in IE (don’t get us started on that!), we utilized the PIE.htc script with the CSS “behavior” attribute. Now we have nicely rounded corners for our modules!! Check them out in our Internet Marketing Blog.
4. Custom Footer Design
This one was the simplest to get rolling but was very important none the less. We added the styles needed from our site into the “custom.css” file first. Then we copied the footers HTML from our existing pages. On our landing pages we add this code to the “Add Footer Items” module in the “Change Text” area. We did have to make some tweaks but once it was done we simply checked the “Set as default for all pages” checkbox and now it’s there for all pages!
All of these modifications took some time along with trial & error. Be patient and persistent. It will pay off!
These 4 hacks have really made a considerable difference for us. Hopefully you’ll find some helpful hints in there too.
Again, thank you Nick for inviting us in and feel free to let us know if you’d like us back some time.