Call us now on 0161 7110 110

11 Nov 2016

Does HubSpot CMS limit creative design

Untitled design.png

In our experience companies have a cornucopia of setups when it comes to how they’ve evolved during the lifetime of their online marketing. We know lot of teams have a wealth of experience when it comes to creating leads online, whilst others have never considered the potential of using the web for sales and marketing.

The web has been around now for over 20 years. You may have long term relationships with a web agency that you’re keen to retain. They might not even be a true web agency, it’s just part of the portfolio of work they do, and they do all the design and branding very well. You may even have an in house resource that’s always looked after the web site. When moving forward with your site to include inbound marketing across the entire landscape you need to be confident you’re not lumbering yourself with a proprietary system that will do nothing but annoy and frustrate all your efforts and your teams efforts to make your online presence as strong as it should be.

And you’d be right to worry. There’s so many marketing platforms out the that are guilty of this, and it’s not the little ones either... A lot of the time the larger solutions have a horrible habit of tying you down to their processes and templates that yeah, are functional, but just don’t inspire. We know they’re trying to help, provide a one solution fits all for the various different resource level companies that will use them, but I know personally the number of times I’ve had to bang my head against the desk in frustration as I’ve attempted but failed to realise the designers ambitions for the page as a result of an interface that just does not want to play ball.

Way back when we started out with creating custom content management solutions, we had the freedom to create whatever was required. Our systems were all PHP and mySQL based and so we had carte blanche on what we designed and the code we wrote. This was great for really nailing down templates to be exactly what you want, but it lacked speed of development and there was no flexibility for the end user unless we programmed another template. It’s often said you should give people what they need rather than what they want so it’s never a good idea to go completely crazy and give people the option to do everything and anything with a template, but you definitely need some sort of middle ground.

Off the shelf CMSs, we’ve worked with WordPress for over 6 years now, are still a great option. Well established framework, easy to modify and update, a catalogue of plugins and it’s free. I’ve lost count of the number of custom templates we’ve created for clients over the years. We’ve done some crazy sites with parallax coming out of the wazzoo and they’re all really great to look at and very engaging. We’ve also done more subtle image and video hero headers to welcome visitors to the site and get them moving on through to the bottom of the funnel as smoothly as possible. 

However with all of this, the actual editor hasn’t really changed all that much. Yes there’s a handful of editor plugins out there, some really straightforward and simple row and widget systems that allow the user to break the content area down into responsive columns of text and images, to full on visual composers, with a dizzying library of choice when it comes to how the page can look. We’ve found the former a bit too simple for end users, and the latter just too complicated and daunting to edit for the average end user. What you really need is a system that allows those who know what they’re doing to create the whizz bang of the site, while the editing is still really straightforward.

There’s not much point in asking about the underlying technology with HubSpot (its Java btw…), because that’s not really the point. HubSpot wants you to focus on your marketing game. It wants you to ignore the technical side of things and just get on with creating great content. Often people ask thing like why HubSpot doesn’t have a greater array of slider system available, only to be told they’re worrying about the wrong thing worrying about sliders. For me though, I think this actually does HubSpot and its developers a massive disservice talking about it like that.

When you get the ‘Sites’ option for HubSpot, you tend to get the ‘Vast’ template installed. It’s a very nice template and shows you just some of the possibilities of the various templates you could use as part of your site. You don't have to stop there though. There is a plentiful library of off the shelf templates available to you so you could select an alternative one of those. Don’t think however this is where the opportunities end.

The HubSpot system is incredibly open so long as you know what you're doing with it. We’ve been developing in HubSpot CMS since its inception, and like the Apple Developer program, have seen it slowly open up more and more giving greater and greater control to those who program in it. It really is a very open and flexible system, and as long as you’re working with a company experienced with its setup, they’ll be able to mould and manipulate any of the templates into the pages they need.

The basic setup of each template is a maximum of 12 column layout, but that’s pretty much the only limitation that HubSpot place on the design, and you can even get round that with the use of a flexible column combined with custom modules.

Can I do sliders? Yes. What even ones with text in front of the background image? Yes. There’s no default setup for this but it’s easy to integrate a third party system and actually you can populate the wider with built in elements from HubSpot. How about parallax? You still want parallax? I think it's cool... Yes you can do parallax scrolling. The freedom of the sites system means you can do a custom template for something like that. Theoretically it can be planned and used in the standard module format, or for something super complicated, it can be broken out into a coded file so really custom data can be included as well.

There’s a lot of discipline required when it comes to working in HubSpot, not because it’s not easy to do otherwise, but to get the best out of the system. And not just from an visitors point of view. We’ve created so many custom modules for our clients just to make input easier. There isn’t anywhere near the library of plugins available on the HubSpot resources compared to that of WordPress, but the case at which we can create custom modules and not only that transfer them between modules, it results in a really customisable and really helpful interface.

In conclusion, we’re yet to have to turn down a site based on its requirements not being compatible with the HubSpot Sites system. It really is a very well thought out and advanced cloud CMS that if anything encourages and supports creative design rather than limiting it.

Request a free B2B inbound website consultation

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.

We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="Does HubSpot CMS limit creative design - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>

Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="Does HubSpot CMS limit creative design">Answer One</a></li>
<li><a href="#" id="Does HubSpot CMS limit creative design">Answer Two</a></li>
<li><a href="#" id="Does HubSpot CMS limit creative design">Answer Three</a></li>
<li><a href="#" id="Does HubSpot CMS limit creative design">Answer Four</a></li>
<li><a href="#" id="Does HubSpot CMS limit creative design">Answer Five</a></li>
<li><a href="#" id="Does HubSpot CMS limit creative design">Other</a></li>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>

We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g.
<script charset="utf-8" type="text/javascript" src="//"></script>
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('Does HubSpot CMS limit creative design');

CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - Does HubSpot CMS limit creative design"><img alt="Title of the CTA" src="" title="Title of the CTA"></a>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//"></script>
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('Does HubSpot CMS limit creative design');

This is the rest of the blog

When the page loads, or when it is being edited, this content will appear. When the page is loaded on the blog, the content will be hidden by the script until such times the trigger button is clicked or the trigger form is completed.

If you're not using this section then you should delete the text in here.

Topics: Hubspot

Blog Comments