<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1581599555431982&amp;ev=PageView&amp;noscript=1">

~ whisper ~

Sales + Marketing + Technology

The Sales Whisperer® blog is a compilation of podcasts—The Sales Podcast and The CRM Sushi Podcast—How-To articles and videos, inspirational posts, a little humor, and a whole lot of common sense. Subscribe here to have Wes Schaeffer's musings sent to your inbox for free from time to time. It's the best way to keep your sanity in this world of flash, gimmicks, and goo-roos.

HubSpot vs Wordpress

Posted by Wes Schaeffer | March 02

Benefits of HubSpot vs Wordpress

HubSpot Offers World-class Security

  • Security firewall
  • 24-hour security team
  • SSL
  • All included

HubSpot's Website Hosting is FAST

  • Hosted on their content delivery network (CDN)
  • Hosted on their Akamai Web Application Accelerator

HubSpot Offers No-Hassle Support

  • Live, 24/7/365 phone support
  • You can request that support calls you to eliminate waiting on hold

HubSpot's Web Design Is Built on the Twitter Bootstrap Grid

  • Responsive websites
  • 12-column grid
  • But built for larger computer screens

ATTRACT MORE LEADS

HubSpot's Design Manager

  • Drag and Drop visual system (powerful and intuitive)
  • Rapid development platform for staging new content and testing styling
  • Allows you to also develop in code (full HTML and CSS is supported)
  • Two Parts
    • Templates (The Template Builder): the frame of your site, provides structure
    • Stylesheets (The Code Editor): like coats of paint on a house they make the structure attractive
  • You can use code in the Template Builder, including:
    • HubL tokens
    • HTML
    • Javascript
    • JQuery library
    • Or any combination

Creating a HubSpot Template, Coded File, or Module

HubSpot create template coded file module wes schaeffer.jpg
    • Select the one you want to use:
      • Template Builder: drag and drop builder
      • Code Editor: HTML, CSS, JS in a powerful IDE
      • Custom Module (a re-usable, customizable module)
    • Select what you want to create:
HubSpot default page template wes schaeffer.jpg
      • Page: Website pages or Landing pages, include by default
        • Logo
        • Section Header
        • Right column
        • Social sharing
        • Page footer

Take the CRM Quiz

HubSpot default email template wes schaeffer.jpg

HubSpot default email template wes schaeffer.jpg

      • Email module includes by default
        • View As Web Page
        • Logo
        • Main Email Body
        • Social sharing
        • Footer
        • CAN:SPAM

HubSpot Default Blog Template Wes Schaeffer .png

BUILD BETTER BONDS

    • Blog module includes by default
      • Logo
      • Blog Header
      • Blog Content
      • Blog Comments
      • About this blog
      • Blog Email Subscription
      • Recent Posts
      • Posts by Topic
      • Page Footer

HubSpot default system page wes schaeffer.jpg 

  • System module includes by default
    • 404 Error Page
    • Subscription Preference
    • Password Prompt Page
    • Backup Unsubscribe Page
    • Subscriptions Update Confirmation

CONVERT CUSTOMERS

The HubSpot Template Builder

HubSpot template builder detailed wes schaeffer.jpg

  •  Open New Tab
  • Back
  • Actions Menu
  • Edit Menu
  • Group
  • Layout / Preview
  • Publish Changes
  • Module Sidebar
  • Workspace

Adding Modules to HubSpot Page Builder

HubSpot adding modules wes schaeffer.jpg

  • Choose from Built-in Modules
    • Dynamic sidebar
    • Only shows relevant modules
  • Drag and drop them
DELIVER "WOW"

Arranging Modules in HubSpot Page Builder

HubSpot arranging cos modules wes schaeffer.jpg

  • To split a module simply hover over it and click on the "Split" button that appears
  • To move a module simply drag and drop it

Edit Modules in HubSpot Page Builder

HubSpot edit modules wes schaeffer.jpg

  • Click on the gear icon in the top right of the module to access
    • Edit Options
    • Lock Module
    • Edit CSS
    • Swap Module
    • Make Module Global
    • Split Horizontally
    • Add Module Below
    • Delete Module
  • Within the various options you can edit the styling of just that module, rename it, etc.
ENDEAR YOURSELF

Group Modules in HubSpot Page Builder

  • Global and Local Groups
  • Used when the group or module must be used across multiple page templates
  • Local groups are used to ensure specific modules always remain together. It also helps with styling a cohesive section
  • Global Groups are ideal for
    • Headers,
    • Footers,
    • Sidebar,
    • Copyright or Privacy links since they remain the same across all pages.
  • Grouping modules adds them to a parent div.
  • When you attempt to Group a set of Modules that are not adjacent to one another, the Modules will turn red

HubSpot module grouping error wes schaeffer.jpg

  • When you select "Group" and choose adjacent Modules they will turn green

HubSpot module grouping correct wes schaeffer.jpg

  • When the Group is actually created, a new Module Group heading will appear 
HubSpot module group appearance wes schaeffer.jpg
  • Use the gear icon on the top right of the new Module Group to make it a Globule Module if you want to reuse it throughout your site
  • You'll know it's a Global Group because it will be green

HubSpot green global group wes schaeffer.jpg

Start HubSpot

Four HubSpot CSS Options

  1. Primary CSS file: Account-wide
  2. Domain Stylesheets
  3. Template Stylesheets
  4. Page-specific Stylesheets

HubSpot control stylesheets wes schaeffer.jpg

  • You have complete control over which stylesheets are or are not attached to the template.
  • Ditto for the Page level

Building CSS files with the HubSpot Code Editor

HubSpot building css coded file wes schaeffer.jpg

  1. Within the "New Tab" window, choose "New Coded File"
  2. Choose "Code Editor" in the "Create New" window then click "Create"
  3. Give the stylesheet a name with the ".css" extension
  4. Select a folder and click "Save"
  5. If you've done it correctly, you'll be taken to the Code Editor in Editing Mode as shown below...

HubSpot code editor editing mode wes schaeffer.jpg

Pro Tip: Use custom classes instead of styling the built-in structural classes since the latter and their built-in attributes are subject to change.

Pro Tip: Use your browser's "Inspect Element" feature or a browser plugin like Firebug to identify the names of the structural classes.

Start HubSpot

How to Assign CSS Classes to HubSpot Modules

Assign HubSpot CSS classes to modules wes schaeffer.jpg

  • Enter the name of the class or
  • Add multiple classes to a module. (Just use a space vs. a comma in the CSS classes.)
  • You can assign CSS IDs to existing stylesheets to make the migration of existing stylesheets much easier
  • Add a CSS class or inline styling to your page template's <body> tab found within the Body CSS Options tool
  • Edit the <head> section of your template for features such as attaching a stylesheet or linking to JavaScript libraries

Pro Tip: After editing your CSS stylesheets be sure to test your site's mobile responsiveness since CSS errors can disable it.

HubSpot content editor preview wes schaeffer.jpg

Pro Tip: Avoid using inline styling on a permanent basis. Use it as a tool for experimenting. 

Email Pro Tip: Use inline styling for email styles.

Create Advanced Menus With HubSpot

Adding menus and sub-menus is easy with HubSpot.

Visit "Content > Content Settings > Advanced Menus" then select the Menu Tree you want to edit.

HubSpot website edit advanced menus wes schaeffer.jpg

Reserve My 1 Hour Call!

At the bottom select "Add a Page" and name the page. On the far right either enter the URL of the page or select the blue "CHOOSE" icon to be shown a list of your existing pages.

HubSpot website advanced menus wes schaeffer.jpg

Begin typing the name of the page you want to add and you'll be shown a list of all of your pages with that name in the title.

HubSpot website add advanced menus wes schaeffer.jpg

Once you have selected the page you want to add simply click "Choose page" then "Publish changes" on the next page and your menu has been updated.

Learn The New A.B.C.s of Selling

HubSpot Website Design Advanced Tactics

  1. Design a Master Template with all of your modules so you can see what your CSS will look like. It will also help you work more efficiently.
  2. HubSpot has a boilerplate CSS to show you some commonly used CSS selections.
  3. Use Custom Wrapping HTML.
  4. Use the Code Editor to build templates and leverage the "Clone to file" feature to speed up your work.
  5. Add JavaScript to the "Site Header HTML," the "Site Footer HTML," or "Raw HTML."
  6. The jQuery library is automatically referenced in all new templates you create in the Template Builder.
  7. HubL: a Python-based server-side language used to create COS Templates. It is based loosely on the Jinja language, but does not support all Jinja features. It can be used for creating logic or for simple tasks like importing the current date or user-specified colors.
  8. HubL Tags dynamically generate the HTML that creates your HubSpot templates.
  9. You can create Custom Modules in the Design Manager with HubL. 

Create Engaging Website Pages With HubSpot

Creating website pages in Wordpress is fine and dandy, but it will not be complete. 

With HubSpot, analytics will flow properly, contact information will be populated automatically in your CRM, and things will just work.

While HubSpot can work with other CMS frameworks such as Wordpress, Drupal, Joomla, it requires a bit of hacking and extra work to make it work well. 

You'd also be missing out on the Smart Content feature of HubSpot, which empowers you to deliver relevant content to visitors, which increases engagement.

When you use HubSpot, there is no need to know PHP. You can do all you need with just a fundamental understanding of HTML and a tad bit of CSS. However, since using the HubSpot platform for my entire site since the fall of 2015 I can tell you that 95% of my coding questions and needs have been met by the 24/7/365 live phone support HubSpot provides. (What's that worth?)

SUBSCRIBE FOR FREE

Create Effective Page Templates With HubSpot

  • Plan before you dive in
  • Create clear, user-focused architecture and navigation
  • Keep it simple (empty space is okay...it actually frames your information)
  • Create a visual hierarchy (if it's in ALL CAPS...then nothing is in caps!)
  • Entice visitors to scroll down "below the fold"
  • Use as few templates as possible to keep the look and feel consistent

Best Practices For Homepages With HubSpot

  1. The purpose should be clear
  2. It should not be cluttered with modules
  3. It should engage visitors and help them navigate your content
  4. Convert visitors into leads with at least one CTA (Call to action)
  5. Rich visuals entice visitors to browse such as
    • Logo
    • Video with a play button
    • Descriptive imagery
    • Screenshots or product photos
  6. Limit your usage of image sliders. According to a usage study by the Nielsen Norman Group, only 1% of website visitors click on links in an image slider and 89% of those click on the first slide only.
  7. Provide space for eye-catching headlines. Visitors should know "what are you offering?" in 2-3 seconds.
  8. Feature a list of benefits so visitors can understand what sets you apart from the competition.

Best Practices For Landing Pages With HubSpot

Great landing pages are like employees who never take a day off, or have a bad day, or rub a visitor wrong.

  • Use enticing headlines on your landing pages
  • Include your logo to help build brand awareness and trust that the visitor is still on one of your pages
  • Remove distractions to help keep the visitor focused (i.e. remove navigation menus)
  • Leave room for a description and a bulleted list to help explain the offer on your landing page
  • Embed a form to gather information on your visitors
Do This Before You Buy ANY CRM

Best Practices For Blog Templates With HubSpot

  • Keep your visuals consistent, i.e. fonts and colors should match the rest of your site.
  • Focus on readability first vs usability. Visitors are here for long-form content.
  • Use clear, emphasized headlines
  • Include whitespace
  • Use legible fonts (serif or sans serif is fine)
  • Keep mobile in mind

Best Practices For Marketing With HubSpot

  • Customize the post for the blog author (HubL helps here)
  • Use the sidebar to increase conversions
  • Include a CTA module for the blog author
  • Entice visitors to scroll down your page
  • Promote the blog author as a leader in your industry

Designing a User-focused Experience With HubSpot

"Too many companies believe that all they must provide a 'neat' technology or some 'cool' product or, sometimes, just good, solid engineering. Nope. All of those are desirable (and solid engineering is a must) but there is much more to a successful product than that: understanding how the product is to be used, design, engineering, positioning, marketing, branding—all matter. It requires designing the total user experience."

Psychologist Don Norman, Design and Usability Experience
Former VP of Apple and Author of "The Design of Everyday Things"

  • Focus on the user
  • A lack of focus yields complexity and complexity is the enemy of good design

"The argument is not between adding features and simplicity, between adding capability and usability. The real issue is about design: designing things that have the power required for the job while maintaining understandability, the feeling of control, and the pleasure of accomplishment."
Dan Norman, ACM Interaction, Vol 15, Issue 5

  • The answer lies in the user, not in you
  • Start and finish with the user
  • Develop personas for the users / visitors by asking questions such as
    • Who will use this?
    • What problems are they solving?
    • What is their level of expertise?
    • What other websites are they referencing?
    • What tools are they already using?
  • Discover the problems with your current site design
  • Create a basic prototype (low-tech is fine and even recommended)
  • Test each prototype on everyone you can including friends, co-workers, and a few customers
  • Iterate until the results no longer surprise you (Prototype, test, repeat)
  • Continue the feedback loop indefinitely
10 Ways To Make Inbound Sales

Principles For User-Focused Design

  • Be consistent. Reuse templates to help create recognition of where to find information. This helps the user spend more time browsing your content but they'll also be more likely to find the answers they're looking for.
    • Follow existing design patterns and practices such as underlined words that are blue are hyper-links, and buttons look like buttons.
    • Leverage a style guide so content creators know what their work should look like
    • Suggestions include:
      • Color palettes with hex codes
      • Fonts and spacing
      • Images and logo treatments
      • Iconography and design accents
      • Custom modules with instructions on how to use them
  • Visibility
    • This ensures that the user can quickly locate and easily access the most important options
    • Simplify your navigation at the top with major categories and expand the navigation in the footer instead of burying them under endlessly-unfolding menus
  • Affordances / Signifiers: Visual cues that teach the user how something can be operated
    • Button animation
    • Navigation menu animation
    • Not all animations work on mobile devices so test these
  • Mapping: the principle of drawing connections between interface objects and their intended effects
    • Turning a steering wheel, or
    • "Hamburger Menu" with text stating what the button does
  • Feedback: when a user completes an action, appropriate feedback will help them understand that the action was recognized and completed successfully.
    • Red borders around incomplete forms
    • Blue borders around optional fields
    • Comment boxes on optional fields
    • Create Thank You pages so the user knows they have input their information correctly and it can inform them what to expect next
  • Constraints: purposeful limitations placed on an interface or device
    • Use personas to create content sections that only show details that are pertinent to the person viewing them
    • Customized, curated, and personalized content is what we're aiming for
    • Do not create unnecessary constraints to block users from content. Avoid the overuse of modals, overlays, pop-ups, and slide-in assets.

Drafting Smarter Mobile Designs In HubSpot

  •  80% of internet users own a smart phone
  • The mobile experience is different, so your web design should be, too.
  • Short browser bursts are common on mobile
  • 47% of all email is opened on mobile (HubSpot 2014 Science of Email Marketing)
  • Why not use Adaptive Design like Apple, eBay, and Amazon? (They are huge companies that can make it work.) Responsive design is fine for most in the key areas of:
    • Content Management
    • SEO
    • Future-Proofing
  • Optimize for
    • Smaller screens
    • Touch-based interaction
    • User's intentions. This is an opportunity vs a constraint.
    • Data networks (12.1 Mbps average download speed on mobile vs 25.9 Mbps on a desktop) Akamai's study found that 40% of people will abandon their search if your site takes more than 3 seconds to load!
    • Data is expensive

Ready to take a closer look at HubSpot to see if it is right for you?

Let's talk

Topics: HubSpot, Wordpress, CMS, HubSpot vs Wordpress, HubSpot COS

Written by Wes Schaeffer

The Reassuringly Expensive, Ruthlessly Pragmatic pig-headed entrepreneur dedicated to discovering proven, transferable, effective tools for creating inbound sales so he can help you automate, integrate, and dominate your niche.

Related Posts

see all

Welcome to The Sales Whisperer®

Wes Schaeffer, The Sales Whisperer® helps you grow your sales. Sales | Marketing | Technology

Great marketing makes sales easy. Great selling makes great marketing possible. Great technology delivering great marketing and sales makes you rich. The World of The Whisperer is a community of doers, of action takers, of those who walk their talk. I'm thrilled that you are here. ~Wes Schaeffer

Get The Sales Agenda & Make Every Sale

Take The CRM Quiz 

Related Posts

see all