Digital Sales & Marketing
Digital Sales & Marketing
Close

Free digital sales and marketing courses

Immediately start seeing better digital sales and marketing results with dozens (and counting) of free online courses inside IMPACT+.

View all free coursesView all free courses

Digital Sales & Marketing World 2021

The premier, hybrid event for growth-focused business leaders, digital marketers, and sales pros. Virtual passes are free for IMPACT+ Pro members. In-person passes on sale soon.

Learn moreLearn more Watch past events on demandWatch past events on demand

Digital sales and marketing services

Discover the full array of IMPACT services, including inbound marketing training, web design, paid media management, and more.

Learn moreLearn more
They Ask, You Answer
They Ask, You Answer
Close

Free They Ask, You Answer course

Learn the principles of the They Ask, You Answer by taking our most popular course, taught by Marcus Sheridan himself.

Take the course nowTake the course now

Hire a coach

Turn your company into a high-performing digital organization with our flagship coaching program, Digital Sales and Marketing Mastery.

Learn moreLearn more

Case studies

See dozens of examples of companies succeeding with Digital Sales and Marketing Mastery and They Ask, You Answer.

View case studiesView case studies

They Ask, You Answer, the book

“One of the 11 Marketing Books every CMO should read.” — Forbes

Learn moreLearn more Buy the bookBuy the book
Virtual Selling
Virtual Selling
Close

Virtual Selling Mastery

Equip your sales team with proven methods to connect with today’s buyer, shorten the sales cycle, and close more deals, faster.

Learn moreLearn more

Virtual Selling Summit 2021

Your one-day virtual selling crash course! Today, sales reps are struggling to sell remotely. Learn how to close more deals in a virtual world.

Register NowRegister Now
Video
Video
Close

Free video sales and marketing strategy course

Zach Basner teaches you the fundamentals of making video for sales and marketing work inside your organization.

Take the course nowTake the course now

Video Sales and Marketing World 2021

Video Sales & Marketing World 2021 is in the works. In the meantime, enjoy the 2020 event on-demand - free for IMPACT+ Pro Members.

Watch past events on demandWatch past events on demand

The Visual Sale, the book

Learn how to use video to ignite sales, accelerate marketing, and grow your business in a virtual world in this book from Marcus Sheridan and Vidyard’s Tyler Lessard.

Learn moreLearn more Buy the bookBuy the book

Master video inside your organization

Video is a critical component of any high-performing digital sales and marketing program, and is a key part of Digital Sales and Marketing Mastery.

Learn moreLearn more
HubSpot
HubSpot
Close

Free HubSpot sales and marketing courses

Taught by Carina Duffy, IMPACT’s lead HubSpot trainer.

Marketing automation mastery (with HubSpot workflows)Marketing automation mastery (with HubSpot workflows) Inbound lead generation and conversion optimizationInbound lead generation and conversion optimization Getting started with sales technologyGetting started with sales technology

HubSpot Training Day

Following INBOUND 2020, IMPACT and HubSpot co-hosted a full-day of deep dive sessions to help HubSpot users get the most out of the new features fast! On-demand access is free for IMPACT+ Pro Members.

Watch on-demandWatch on-demand

HubSpot training and implementation

Maximize your investment in HubSpot's marketing, sales, or service platforms with guided training and implementation services.

Learn moreLearn more
Web Design
Web Design
Close

Website Optimization Summit

Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it! Watch the opening keynote for free on-demand inside IMPACT+.

Watch on-demandWatch on-demand

Website design and strategy services

Get a beautiful, user-friendly HubSpot or Wordpress website that is easy to update, consistently generates leads and revenue, and grows with you.

Learn moreLearn more

HubSpot CMS 101: HubSpot Visual Builder vs. Coded Templates

HubSpot CMS 101: HubSpot Visual Builder vs. Coded Templates Blog Feature

Tim Ostheimer

Sr. Front-end Developer, 8+ Years of Web Development on HubSpot and Various CMSs

January 24th, 2019 min read

HubSpot is one of the most powerful marketing platforms available right now and I’m always happy to admit it’s also my favorite CMS (Content Management System).

The CMS is only part of HubSpot’s many available features and add-ons, but it’s arguably one of the most important.

This is because it acts as a catalyst for HubSpot’s other features, providing you with the interface you need to easily manage your website. If you’re reading this, hopefully you already know how important your website is for your brand identity.

Your website is like a digital salesperson who works 24/7 to nurture your leads and customers and can produce an unlimited amount of ROI.

However, this means that no website will ever be complete because there will always be an opportunity for improvement whether it’s in the form of a marketing campaign, search engine optimization, or content updates.

This makes it equally as important that your website looks and performs well as it is that it can be updated easily without the need of a developer.

This concept isn’t specific to HubSpot but it’s the reason why HubSpot is my favorite.

Easy Editing is a Priority.

As a Web Developer, I primarily have two responsibilities: build a site that performs well for its visitors, and build a site that can be updated easily by my clients.

Both of these requirements are determined by how I build the template.

What is a Template?

HubSpot’s CMS is composed of many parts but it primarily includes Website Pages, Landing Pages, Blogs, Emails, and any related tools associated with these features such as the Design Manager.

Each of these types of content uses a medium called a Template to determine the HTML markup (“design”) and the modules which are available when editing it (“inputs” or “modules”).

hubspot-visual-builder-vs-coded-A0

Almost every CMS uses templates for determining the structure of pages in this way because most websites often have at least a few groups of pages which follow a similar design or layout but have their own unique text content and imagery.

By setting these layouts up as templates, the same design can be used an unlimited amount of times without having to build the layout from scratch.

No single layout will work well for every page, so it’s important to consider the way in which you expect to use the template and what the content might look like on the pages using it.

For this reason, you’ll want to start all template designs with a wireframe before you begin building them in HubSpot.

Come Up With a Plan First

You may be familiar with the term “Wireframe” which is a simplified visual example of what someone has in mind for the finalized template.

A wireframe allows the designer and the content creator to determine the general layout of a template and agree on what types of content and elements might be used before finalizing all of the finer details.

For example, placeholder text or a visual cue may be used to show a part of the template that is intended for only one or two sentences and adding any more text than that could cause issues with the design.

hubspot-visual-builder-vs-coded-B0

A good developer understands that sometimes the finalized content ends up being a little bit different from what was initially expected.

Our job is to do whatever we can to set up each template in a way that gives the editor additional control to adjust the layout as needed without overwhelming them with options or allowing them to accidentally mess up the design.

Developers should provide content editors with any controls that may end up being useful when building a page, or any controls that the editor has mentioned that they’ll need to make a template as useful as possible. This is where HubSpot becomes my favorite CMS.

Visual Builder & Coded Templates

Warning: this may get technical.

HubSpot has two different ways to create a template: Visual Builder and Coded.

Both of these template types share many similarities and work seamlessly with most of the other features in HubSpot’s platform such as forms and CTAs, but there are a few key differences between them that are worth knowing.

Visual Builder

HubSpot’s default template type is Visual Builder, and it’s the only type HubSpot will allow in the Template Marketplace (with email templates being the only exception and allowing coded templates as well).

These templates use a friendly drag-and-drop interface which allows template creators to easily rearrange modules and adjust important settings without needing to understand much code (but it helps if you do).

hubspot-visual-builder-vs-coded-C0

HubSpot’s Visual Builder Templates use a 12-column grid structure based on Bootstrap 2.

All basic HTML and CSS markup for the grid is handled automatically based on the column arrangement in your template.

This is perfect for users who are comfortable building basic templates in this way but don’t have the technical knowledge to write the code themselves, but it ends up being problematic for developers who need more intricate control over the code structure.

For example, HubSpot’s grid structure also has responsiveness built-in, but it can’t be easily overridden which means every column in your template is going to become full-width if the device’s screen size is 767px wide or less -- regardless of whether or not that’s appropriate for your template design.

hubspot-visual-builder-vs-coded-C1

Another noteworthy aspect of HubSpot’s grid is that the HTML markup can end up being somewhat bloated due to all of the extra CSS classes that HubSpot wraps each row, column, and module in.

This often won’t cause a noticeable issue with site performance but it definitely won’t help you to improve it and you won’t be able to change it, even if you want to.

HubSpot allows you to add custom CSS classes and IDs in some parts of your template markup, but this intended for specific custom formatting where needed and not for overriding the grid.

If you’re interested in what the grid’s CSS and supporting HTML markup looks like, you can learn more about that here.

These restrictions can make it difficult for developers to build specific designs and complex templates, and this includes templates with lots of flexibility.

Whether you’re an expert or not, the Visual Builder can be tricky to work with if you’re trying to do anything more than a basic design and are typically better for simpler websites.

However, if you’re unfamiliar with building templates on HubSpot and want to experiment with the CMS then Visual Builder Templates are the perfect way to start.

Coded Templates

HubSpot’s other kind of templates are named Coded Templates, which are HTML files written entirely with code.

Unlike Visual Builder Templates, this means you have access to the full HTML markup of your page, including the , , and elements.

hubspot-visual-builder-vs-coded-D0

This kind of template is intended for experienced developers who are fluent in HTML and CSS.

Although HubSpot will give you a warning or error message if it finds a syntax issue with some parts of your code, it won’t stop you from writing malformed or improperly formatted HTML -- So,  you’ll need to know what you’re doing.

In addition to HTML and CSS, Coded Templates also use the power of HubL, which is a unique markup language used in HubSpot’s CMS and based on an existing templating language used for Python programming named Jinja 2.

One of HubSpot’s major flaws is that it does not give developers the ability to use PHP or other server-side scripting languages which are necessary for complex operations. Instead, they provide us with the ability to use HubL which gives us access to various variables, filters, and functions.

HubL is what makes HubSpot a wonderful way to build templates.

Although developers don’t have as much flexibility with their custom functions as they would on a PHP-based CMS like WordPress, HubL can be used to add most of the controls and conditional arguments that are needed to make a HubSpot template endlessly useful.

This allows developers to create templates with flexibility in mind by adjusting layout or design when needed.

hubspot-visual-builder-vs-coded-E0

HubL can also be used in Visual Builder Templates, but due to the limitations of the Visual Builder’s interface,HubL can’t be used as creatively as it can in Coded Templates.

You can learn more about HubL here.

Coded Templates are great for a developers for another reason: process optimization.

HubSpot is a continuously growing platform. The company releases new updates and improvements often, but there are still some basic features missing which developers would love to have.

The most prominent of the items on this wishlist is preprocessing, such as SCSS.

Preprocessing is the concept of writing shorthand code which is compiled by an application in order to produce the full code.

hubspot-visual-builder-vs-coded-F0

SCSS, for example, is a commonly used syntax which makes writing CSS more efficient.

Similar to SCSS, there are many other ways to use preprocessing languages but all of them require a compiler.

Coded Templates in HubSpot allow developers to harness this efficiency by building their templates outside of HubSpot and then uploading the compiled versions via FTP or an API.

This means that developers can use a custom development process that work best for them without being restricted by HubSpot’s lack of preprocessing.

hubspot-visual-builder-vs-coded-F1

This does, however, come with a major drawback.

With this type of workflow, all template development is done outside of HubSpot and

as a result, the templates cannot be edited within HubSpot since the process of compiling the code is a one-way action.

This means the compiled code cannot be decompiled into its original form.

If a user were to make an edit to the template directly on HubSpot system, then the template will now be out of sync with the precompiled version and it will be overwritten the next time the developer makes an update via their custom setup.

Custom workflows like this must be planned out and implemented carefully, especially if the development is being done by another party such as a HubSpot Partner Agency.

Although this method enables developers to be as efficient as possible, it can cause confusion with the template owners since they won’t be able to edit their templates without risking losing their changes in the future.

This makes it necessary to ensure that all parties involved in template buildout and use are aligned and understand who will be responsible for editing templates.

When to Use Visual Builder Templates vs. Coded Templates

On HubSpot’s CMS, both Visual Builder Templates and Coded Templates are viable options, but there is usually a better option depending on the way the site needs to be built and the level of complexity.

Visual Builder is Better For Simple Designs

Generally, Visual Builder Templates are a better option for basic pages that don't require lots of complicated functionality or options.

These are often the better options for individuals with little to no web development experience, those who do not have consistent access to a developer, or those who plan to purchase templates from the Template Marketplace.

Coded Templates Are Better for Developers

Coded Templates are best for teams or agencies with access to a full-time developer or development team that will handle the buildout of all templates. This allows the developers to be creative in how they build their templates and experiment with offline preprocessing tools or their own custom setup.

With the right knowledge and an unlimited amount of time, a developer can make just about anything work on either a Visual Builder Template or Coded Template but it’s best to plan out and discuss all of the expectations for your website prior to beginning the buildout of any templates.

Regardless of Your Choice, Consider Using Custom Modules

While Coded Templates and Visual Builder Templates both have their pros and cons, the product of either should be a website that gives content editors the intuitive flexibility they need to adjust and experiment with their pages without ever needing to modify the template itself.

In February 2018, HubSpot released its the new version of the Design Manager.

This update drastically improved the interface and added many new options for template developers, but we’ve found that this change has been most beneficial for Custom Modules and Page Editors.

Custom Modules are essentially self-contained blocks of code with their own associated modules which can be used in either Coded Templates or Visual Builder Templates.

This allows developers with knowledge of HTML, CSS, and HubL to be creative in the way they build their templates and create a website with editability in mind. This is usually what we opt for here at IMPACT.

hubspot-visual-builder-vs-coded-G0

Better Templates = Happy Marketers + Happy Users

Overall, a good website is one that both performs well for the user and is endlessly useful for its owner. Both Visual Builder or Coded Templates have the potential to provide you with a powerful foundation for your website, but depending on your team’s structure and internal processes you may end up preferring one over the other.

At IMPACT, we almost always recommend a website built around powerful templates with lots of options. In most cases, we’ve found this to be one built almost entirely of Custom Modules thanks to HubSpot’s new Design Manager, but there are many possibilities. Thanks, HubSpot!

If you need help getting started, talk to us about building your website on HubSpot.

Want to learn more about digital sales and marketing?

Master digital sales and marketing when you join IMPACT+ for FREE. Gain instant access to exclusive courses and keynotes taught by Marcus Sheridan, Brian Halligan, Liz Moorehead, Ann Handley, David Cancel, Carina Duffy, Zach Basner, and more.

Sign up for free
Take a peek

Access hundreds of FREE courses and keynotes

Free Course
Digital Sales & Marketing Framework for Today’s Buyers
By: Marcus Sheridan
View Course Preview View Course Preview
Free Keynote
A New Way to Compete & Win
By: Brian Halligan
View Course Preview View Course Preview
Free Virtual Keynote
How To Genuinely Feel Confident, Be Likable, And Build Trust On Camera
By: Liz Moorehead
View Course Preview View Course Preview
Free Keynote
The Future of Marketing is Conversational​
By: David Cancel
View Course Preview View Course Preview
Free Deep Dive
HubSpot On a Budget: Getting Started with HubSpot Starter Hubs
By: Courtney Caldwell
View Course Preview View Course Preview
Free Course
Assignment Selling: Content is Your Greatest Sales Tool
By: Marcus Sheridan
View Course Preview View Course Preview
Free Keynote
The Big, Bold, Brave New World of Marketing​
By: Ann Handley
View Course Preview View Course Preview
Free Course
Investing in Incredible Digital Sales and Marketing Results
By: Chris Duprey
View Course Preview View Course Preview
Free Course
How To Show Your Content Makes Money With HubSpot Marketing and Sales Hubs
By: Liz Moorehead
View Course Preview View Course Preview
Free Virtual Keynote
The Visual Sale
By: Marcus Sheridan & Tyler Lessard
View Course Preview View Course Preview
Free Keynote
Marketing Tech: What’s Now, What’s Near and What’s Not Anytime Soon?​
By: Dharmesh Shah
View Course Preview View Course Preview
Free Course
Inbound Lead Generation & Conversion Optimization
By: Carina Duffy
View Course Preview View Course Preview
Free Virtual Keynote
Fundamentals of Videography: You Can Be a Great Videographer Too
By: Zach Basner
View Course Preview View Course Preview
Free Deep Dive
The Ultimate Customer Service Toolkit for Any Budget
By: Andriti Gulati
View Course Preview View Course Preview
Free Course
6 Topics Subject Matter Experts Need to Address
By: Kevin Phillips
View Course Preview View Course Preview
Free Keynote
Fanocracy: The Power of Making Business Personal​
By: David Meerman Scott
View Course Preview View Course Preview
Free Keynote
The Power of Pillar Content
By: Liz Moorehead
View Course Preview View Course Preview
Free Keynote
SEO for the Future
By: Franco Valentino
View Course Preview View Course Preview
Free Course
Fundamentals of Social Media Marketing
By: Stephanie Baiocchi
View Course Preview View Course Preview
Free Deep Dive
A Practical Guide To Video Graphics
By: Colton Trcic
View Course Preview View Course Preview
Free Session
How To Get Your Community To Know, Like, And Trust You With Video
By: Marki Lemons Rhyal
View Course Preview View Course Preview
Free Course
Video Sales and Marketing Strategy
By: Zach Basner
View Course Preview View Course Preview
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.

IMPACT+ Sign Up
A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out
Hundreds of courses and recorded keynotes, completely FREE
Check it out
Access hundreds of digital sales and marketing courses and recorded keynotes, completely FREE