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. doug@semzen.net 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.
2. Elegant Pop-up Privacy Policy for forms
We use jQuery very often for a variety of functions throughout our site. We wanted to provide a nice pop-up for our privacy policy on landing page forms so that visitors could easily view the policy without having to leave the page. We reference the scripts in the “page properties” under the (show advanced options) in the “HTML Head Tag Text” area for starters. Next we went into the “Edit Form” area and in the “Field Label” for the email address we added the necessary HTML which includes the < a href> call to initiate the pop up for the text “(privacy policy)”. We now have a great, reusable pop up privacy policy! Here it is on our landing page for our blog ideas eDoc.
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.
