April 18, 2023
How Marketing Agencies Can Design Websites on the HubSpot CMS
John McTigue Dan Ronken Dan Lynton www.kunocreative.com www.pullnotpush.com www.lyntonweb.com
Host: Peter Caputa, HubSpot Twitter:: #HubSpotCMS
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host• Implementing eCommerce with HubSpot Small
HubSpot Business Update
Founded
Customers
Retention
Employees
2006
~3,300
98%
160+
Inbound Marketing software & advice that helps SMB
businesses grow
Traditional Outbound Marketing is dying …
Advertising Direct MarketingCALLER ID: 800-555-1234
AnnoyingSalesperson
Interruptions get ignored …
Inbound Marketing is thriving …
Blog SEO Social Media
Relevant info is being sought daily…
Inbound Is Cheaper
Respondents were asked to rate the relative cost of each lead channel as “below average,” “near your average,” and “above your average”.
So, what is HubSpot?
HubSpot Inbound
Marketing System
• Simple & Integrated Software
• Support + Expertise
• No IT Required
SEO ContentCreation
Blog
SocialMedia
Lead Nurturing & Intelligence
LandingPages
CRM(Salesforce.com
or other)
Marketing Analytics
QUALIFIED TRAFFIC
SALES
Proven Approach Drives Traffic, Leads & Customers
Get Found
ConvertAnalyze
1
23
Find the full methodology at success.hubspot.com
HubSpot Partner & Customer Case Studies & ROI
MIT study shows: HubSpot customers get
4.2 times more leads after using HubSpot for
5 months
http://www.hubspot.com/partners/partner-case-studies
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host• Implementing eCommerce with HubSpot Small
What is a CMS?
Web AuthorTarget Audience
Web Server
Content Management System
Convert to HTML
Store and Index in
Database
Apply CSS
Apply Template
Photo credit: Jon OvingtonPhoto credit: OxOx
Migration Fees
• Minimum $250 migration fee• $10/page • NOT a design process• We do NOT do design tweaks
We Refer Design Work to Our Partners
Leverage http://services.hubspot.com to develop new in-demand service offerings.
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
Content Module
• Use the content module for all editable content
• Avoid:• Tables for layout• Inline CSS (style=“”)• Resizing images with html (width=“”)
• WYSIWYG editor:• Format text with paragraph styles and
Headings 1-4• Link to other pages, documents• Insert images and multimedia• Includes version history and rollbacks
• Keep your page layouts simple whenever possible. Focus on content. What will drive the visitor to convert?
Form module
• Simple forms create less friction and convert more effectively
• When you need a longer form, use css to make it clean and user friendly
• Building a form:• Add fields• Change the “submit” button• Set the thank you page or message• Create an autoresponder• Add the lead to a lead nurturing campaign
• Monitor the conversion rate of your forms at Settings > Form Manager or Create > Landing Pages.
Follow Me
• HubSpot integrates with all your social media accounts
• Easily display links to your accounts with the Follow Me widget
• Visit Settings > Social Media to toggle the Follow Me links to show
Web Voter
• Use the web voter to share news and blog articles
• Digg-style voter can be hidden with css
Blog module
• SEO-friendly and easy to use blog
• Social media sharing• Comment
notifications and moderation
• Customizable with CSS
• Start creating content and get found!
Subscribe
• Allow your readers to subscribe by email• Use the subscribe module for blog subscriptions only -
use the form module to grow leads for email marketing
Organize Posts by Category
• The tags list can get long and cluttered over time• Create categories for your posts and link to the tag URLs
Feed Module
• List content from any RSS feed, including HubSpot’s blog RSS
• HubSpot’s blog RSS can be filtered by tags
+ =
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
How Pages & Blogs Are Built
Your Content Goes Here
<html><head></head><body> <brighton_body> <brighton_container> <brighton_header> </brighton_header> <brighton_menu> </brighton_menu> <brighton_content> </brighton_content> <brighton_footer> </brighton_footer> </brighton_container> </brighton_body></body></html>
Choose a HubSpot Template
Foxboro (Default) Brighton Cambridge
Everett Duxbury
Courtesy Links
Main Menu
Submenu
Side Menu
http://success.hubspot.com/support-help-services/template-guide
HubSpot Template
Predefined HTML Blocks• Content added via CMS• Styling applied by CSS• CSS (Stylesheets) predefined by HubSpot• Can alter colors, fonts via CMS
• Can apply custom stylesheets via CMS
Styling Your Template Via CSS
Do it Yourself: Custom Stylesheet – Settings > File Manager
1. Create Custom Stylesheet – custom.css
2. Edit Custom Stylesheet - custom.css
Styling Your Template Via Custom CSS
Do it Yourself: Edit Custom Stylesheet – custom.css
Override default stylesheets attached to template.
Then We Build a Custom Layout via CSS
#brighton_body {background:#EFF0EB url("/Portals/32387/images/design2010/background.jpg") repeat-x 0 0 !important;color:#323232 !important;font-family:Century Schoolbook Regular !important;font-size:12px !important;line-height:1.6em !important;margin:0 !important;padding:0 !important;width:100% !important;}
#home-ribbon {background:url("/Portals/32387/images/design2010/hubspot_ribbon-home.jpg“) no-repeat 0 0;float:left;height:352px;margin:0 15px 0 0;width:242px;}
Finally, We Build Out The Website
We can even applymore CSS for customlooks on different pages and sections.
How to Add More Custom Stylesheets
1. Create new stylesheets 2. Reference CSS on Page
Go to Page Properties > Show Advanced Options
Reference CSS Here
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
The PSD Design Process is quick, easy, non-technical for the HubSpot client 100% focused on making websites into marketing tools to build your
prospect funnel
Choose one of our custom built themes for fast, affordable, and predictable design Work with our design team to tailor HubSpot site around your brand
Brand site with your logo on home page and whatever sub-pages you wish PNP can consult with you on logo redesign as part of design process if desired
Dropdowns: Click on ‘services’ displays on-page drop-down menu of sub pages
Side Menu on Internal Page: Click on ‘solutions” displays sub page with subset of options in sidebar specific to page
Permanent side menu nav: standard set of side nav menu options on home page stays consistent across all subpages
3 different nav styles – dropdowns, side menu on internal pages, or permanent side menu nav
Select new banner image for your site Work w/ us to choose from stock options or work w/ our designers for custom banner
Choose a compelling Call-To-Action button from our library which can be customized Select the copy for your button in consultation with our Inbound Marketing Experts
Customized graphical banner image Additional CTA buttons Programming (e.g. Javascript, etc.)
Further customizations available for an additional fee
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
Items to Avoid in HubSpot Sites
•Database driven elements.
•Flash Navigation
•Sophisticated Image Galleries
•Foreign Language Sites
•Misc...
Items to Avoid in HubSpot Sites
•Look for Server-side scripting (PHP, Ruby, Python, ASP.net, Cold Fusion).
•Server-side scripted websites are able to interact with a database, so this is a decent clue.
Items to Avoid in HubSpot Sites
Booking and Reservation Systems• These are not embeddable and we should steer clear of
iframing these into the CMS.
Agenda
• Welcome & Introductions• How HubSpot Software Can Help Agencies• What HubSpot Does & Doesn’t Do re: Design Work• Using the HubSpot CMS & Available Modules (Lynton)• Implementing Custom Designs on the HubSpot CMS( Kuno) • An Efficient Process for Designing & Lanching Sites (PnP)• What the HubSpot CMS can NOT Host (PnP)• Implementing eCommerce with HubSpot Smal (Lynton)
Amazon Checkout
• http://payments.amazon.com• Best for small
number of products
• Includes an embedded shopping cart on your site
ECWID
• www.ecwid.com• Free plan available• Entire product catalog
and shopping cart appears on your HubSpot site
• Easy to get started - simply copy and paste ecwid’s code on your site
Shopify
• www.shopify.com• For fully featured e-commerce
websites, host Shopify or HubSpot on a subdomain
• Complete closed-loop integration – track abandoned carts as leads and purchases as customers
• Install the app atapps.shopify.com
Analytics via HubSpot Visitor
Tracking
Abandoned Cart = HubSpot Lead
Checkout = HubSpot customer
Nurture customers and leads to
increase sales
Ask for Help…
• John McTigue www.kunocreative.com• Dan Ronken www.pullnotpush.com• Daniel Lynton www.lyntonweb.com
And/or Request a Consultation with a Senior Member of the HubSpot Team to discuss your skills, goals, etc: http://www.hubspot.com/partners/marketing-agency-consultation-request