Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How Marketing Agencies Can Design Websites on the HubSpot CMS<br />        John McTigue                            Dan Ron...
Agenda<br /><ul><li>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</li></li></ul><li>HubSpot Business Update<br />Inbound Marketing software & advi...
Traditional Outbound Marketing is dying … <br />CALLER ID: 800-555-1234<br />Annoying<br />Salesperson<br />Interruptions ...
Inbound Marketing is thriving … <br />Relevant info is being sought daily…<br />
Inbound Is Cheaper<br />Respondents were asked to rate the relative cost of each lead channel as “below average,” “near yo...
So, what is HubSpot?<br />HubSpot Inbound <br />Marketing System<br /><ul><li>Simple & Integrated Software
Support + Expertise
No IT Required</li></ul>Qualified Traffic<br />Content<br />Creation<br />SEO<br />Blog<br />Social<br />Media<br />Landin...
Proven Approach Drives Traffic, Leads & Customers<br />1<br />2<br />3<br />Find the full methodology at success.hubspot.c...
HubSpot Partner & Customer Case Studies & ROI<br />MIT study shows: HubSpot customers get 4.2 times more leads after using...
Agenda<br /><ul><li>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</li></li></ul><li>What is a CMS?<br />Web Server<br />Content Management System<...
Migration Fees<br /><ul><li>Minimum $250 migration fee
$10/page
NOT a design process
We do NOT do design tweaks</li></li></ul><li>We Refer Design Work to Our Partners<br />Leverage http://services.hubspot.co...
Skills Required to Implement Design on HubSpot CMS<br /><ul><li>Graphic design
html
CSS/xhtml
Javascript</li></li></ul><li>Agenda<br /><ul><li>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 HubSpotSmal (Lynton)</li></li></ul><li>HubSpot Modules<br />Content<br />HTML/JavaScript<br />...
Content Module<br />Use the content module for all editable content<br />Avoid:<br />Tables for layout<br />Inline CSS (st...
Form module<br />Simple forms create less friction and convert more effectively<br />When you need a longer form, use css ...
Form module<br />19<br />
Form module<br />20<br />
Follow Me<br />HubSpot integrates with all your social media accounts<br />Easily display links to your accounts with the ...
Web Voter<br />Use the web voter to share news and blog articles<br />Digg-style voter can be hidden with css<br />
Blog module<br />SEO-friendly and easy to use blog<br />Social media sharing<br />Comment notifications and moderation<br ...
Subscribe<br />Allow your readers to subscribe by email<br />Use the subscribe module for blog subscriptions only - use th...
Organize Posts by Category<br />The tags list can get long and cluttered over time<br />Create categories for your posts a...
Feed Module<br />List content from any RSS feed, including HubSpot’s blog RSS<br />HubSpot’s blog RSS can be filtered by t...
Examples of Sites on HubSpot CMS by LyntonWeb<br />
Agenda<br /><ul><li>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 HubSpotSmal (Lynton)</li></li></ul><li>Agenda<br /><ul><li>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 HubSpotSmal (Lynton)</li></li></ul><li>How Pages & Blogs Are Built<br /><html><br /><head></he...
Choose a HubSpot Template<br />Foxboro (Default)<br />Brighton<br />Cambridge<br />Duxbury<br />Everett<br />Courtesy Link...
HubSpot Template<br />Predefined HTML Blocks<br /><ul><li>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</li></li></ul><li>Styling Your Template Via CMS<br />Do it Yourself: Settings > Templ...
Styling Your Template Via CMS<br />Do it Yourself: Settings > Template Configuration<br />
Styling Your Template Via CSS<br />Do it Yourself: Custom Stylesheet – Settings > File Manager<br />1. Create Custom Style...
Styling Your Template Via Custom CSS<br />Do it Yourself: Edit Custom Stylesheet – custom.css<br />Override default styles...
Using Firefox/Firebug to Update CSS<br />
So How Do We Get From This…<br />
Upcoming SlideShare
Loading in …5
×

10

Share

Download to read offline

Designing Website on HubSpot's CMS

Download to read offline

3 Sucessful HubSpot Marketing Agency Partners Share How to Implement a Custom Design on the HubSpot CMS.

Related Books

Free with a 30 day trial from Scribd

See all

Designing Website on HubSpot's CMS

  1. 1. How Marketing Agencies Can Design Websites on the HubSpot CMS<br /> John McTigue Dan Ronken Dan Lyntonwww.kunocreative.comwww.pullnotpush.comwww.lyntonweb.com<br />Host: Peter Caputa, HubSpot Twitter:: #HubSpotCMS<br />
  2. 2. Agenda<br /><ul><li>Welcome & Introductions
  3. 3. How HubSpot Software Can Help Agencies
  4. 4. What HubSpot Does & Doesn’t Do re: Design Work
  5. 5. Using the HubSpot CMS & Available Modules (Lynton)
  6. 6. Implementing Custom Designs on the HubSpot CMS( Kuno)
  7. 7. An Efficient Process for Designing & Lanching Sites (PnP)
  8. 8. What the HubSpot CMS can NOT Host
  9. 9. Implementing eCommerce with HubSpot Small</li></li></ul><li>HubSpot Business Update<br />Inbound Marketing software & advice that helps SMB businesses grow<br />2006<br />~3,300<br />98%<br />160+<br />Founded<br />Customers<br />Retention<br />Employees<br />
  10. 10. Traditional Outbound Marketing is dying … <br />CALLER ID: 800-555-1234<br />Annoying<br />Salesperson<br />Interruptions get ignored … <br />
  11. 11. Inbound Marketing is thriving … <br />Relevant info is being sought daily…<br />
  12. 12. Inbound Is Cheaper<br />Respondents were asked to rate the relative cost of each lead channel as “below average,” “near your average,” and “above your average”.<br />
  13. 13. So, what is HubSpot?<br />HubSpot Inbound <br />Marketing System<br /><ul><li>Simple & Integrated Software
  14. 14. Support + Expertise
  15. 15. No IT Required</li></ul>Qualified Traffic<br />Content<br />Creation<br />SEO<br />Blog<br />Social<br />Media<br />Landing<br />Pages<br />Marketing Analytics<br />Lead Nurturing & <br />Intelligence<br />CRM<br />(Salesforce.com or other)<br />Sales<br />
  16. 16. Proven Approach Drives Traffic, Leads & Customers<br />1<br />2<br />3<br />Find the full methodology at success.hubspot.com <br />
  17. 17. HubSpot Partner & Customer Case Studies & ROI<br />MIT study shows: HubSpot customers get 4.2 times more leads after using HubSpot for 5 months<br />http://www.hubspot.com/partners/partner-case-studies<br />
  18. 18. Agenda<br /><ul><li>Welcome & Introductions
  19. 19. How HubSpot Software Can Help Agencies
  20. 20. What HubSpot Does & Doesn’t Do re: Design Work
  21. 21. Using the HubSpot CMS & Available Modules (Lynton)
  22. 22. Implementing Custom Designs on the HubSpot CMS( Kuno)
  23. 23. An Efficient Process for Designing & Lanching Sites (PnP)
  24. 24. What the HubSpot CMS can NOT Host
  25. 25. Implementing eCommerce with HubSpot Small</li></li></ul><li>What is a CMS?<br />Web Server<br />Content Management System<br />Web Author<br />Target Audience<br />Store and Index in Database<br />Convert to HTML<br />Apply CSS<br />Apply Template<br />Photo credit: Jon Ovington<br />Photo credit: OxOx<br />
  26. 26. Migration Fees<br /><ul><li>Minimum $250 migration fee
  27. 27. $10/page
  28. 28. NOT a design process
  29. 29. We do NOT do design tweaks</li></li></ul><li>We Refer Design Work to Our Partners<br />Leverage http://services.hubspot.com to develop new in-demand service offerings. <br />
  30. 30. Skills Required to Implement Design on HubSpot CMS<br /><ul><li>Graphic design
  31. 31. html
  32. 32. CSS/xhtml
  33. 33. Javascript</li></li></ul><li>Agenda<br /><ul><li>Welcome & Introductions
  34. 34. How HubSpot Software Can Help Agencies
  35. 35. What HubSpot Does & Doesn’t Do re: Design Work
  36. 36. Using the HubSpot CMS & Available Modules (Lynton)
  37. 37. Implementing Custom Designs on the HubSpot CMS( Kuno)
  38. 38. An Efficient Process for Designing & Lanching Sites (PnP)
  39. 39. What the HubSpot CMS can NOT Host (PnP)
  40. 40. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li>HubSpot Modules<br />Content<br />HTML/JavaScript<br />Blog<br />News Feed<br />Form<br />Web Voter<br />Follow Me<br />
  41. 41. Content Module<br />Use the content module for all editable content<br />Avoid:<br />Tables for layout<br />Inline CSS (style=“”)<br />Resizing images with html (width=“”)<br />WYSIWYG editor:<br />Format text with paragraph styles and Headings 1-4<br />Link to other pages, documents<br />Insert images and multimedia<br />Includes version history and rollbacks<br />Keep your page layouts simple whenever possible. Focus on content. What will drive the visitor to convert?<br />
  42. 42. Form module<br />Simple forms create less friction and convert more effectively<br />When you need a longer form, use css to make it clean and user friendly<br />Building a form:<br />Add fields<br />Change the “submit” button<br />Set the thank you page or message<br />Create an autoresponder<br />Add the lead to a lead nurturing campaign<br />Monitor the conversion rate of your forms at Settings > Form Manager or Create > Landing Pages.<br />
  43. 43. Form module<br />19<br />
  44. 44. Form module<br />20<br />
  45. 45. Follow Me<br />HubSpot integrates with all your social media accounts<br />Easily display links to your accounts with the Follow Me widget<br />Visit Settings > Social Media to toggle the Follow Me links to show<br />
  46. 46. Web Voter<br />Use the web voter to share news and blog articles<br />Digg-style voter can be hidden with css<br />
  47. 47. Blog module<br />SEO-friendly and easy to use blog<br />Social media sharing<br />Comment notifications and moderation<br />Customizable with CSS<br />Start creating content and get found!<br />
  48. 48. Subscribe<br />Allow your readers to subscribe by email<br />Use the subscribe module for blog subscriptions only - use the form module to grow leads for email marketing<br />
  49. 49. Organize Posts by Category<br />The tags list can get long and cluttered over time<br />Create categories for your posts and link to the tag URLs<br />
  50. 50. Feed Module<br />List content from any RSS feed, including HubSpot’s blog RSS<br />HubSpot’s blog RSS can be filtered by tags<br />+<br />=<br />
  51. 51.
  52. 52. Examples of Sites on HubSpot CMS by LyntonWeb<br />
  53. 53.
  54. 54.
  55. 55.
  56. 56.
  57. 57. Agenda<br /><ul><li>Welcome & Introductions
  58. 58. How HubSpot Software Can Help Agencies
  59. 59. What HubSpot Does & Doesn’t Do re: Design Work
  60. 60. Using the HubSpot CMS & Available Modules (Lynton)
  61. 61. Implementing Custom Designs on the HubSpot CMS( Kuno)
  62. 62. An Efficient Process for Designing & Lanching Sites (PnP)
  63. 63. What the HubSpot CMS can NOT Host (PnP)
  64. 64. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li>Agenda<br /><ul><li>Welcome & Introductions
  65. 65. How HubSpot Software Can Help Agencies
  66. 66. What HubSpot Does & Doesn’t Do re: Design Work
  67. 67. Using the HubSpot CMS & Available Modules (Lynton)
  68. 68. Implementing Custom Designs on the HubSpot CMS( Kuno)
  69. 69. An Efficient Process for Designing & Lanching Sites (PnP)
  70. 70. What the HubSpot CMS can NOT Host (PnP)
  71. 71. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li>How Pages & Blogs Are Built<br /><html><br /><head></head><br /><body><br /> <brighton_body><br /><brighton_container><br /> <brighton_header><br /> </brighton_header><br /> <brighton_menu><br /> </brighton_menu><br /> <brighton_content><br /> </brighton_content><br /> <brighton_footer><br /> </brighton_footer><br /> </brighton_container><br /> </brighton_body><br /></body><br /></html><br />Your Content Goes Here<br />
  72. 72. Choose a HubSpot Template<br />Foxboro (Default)<br />Brighton<br />Cambridge<br />Duxbury<br />Everett<br />Courtesy Links<br />Main Menu<br />Submenu<br />Side Menu<br />http://success.hubspot.com/support-help-services/template-guide<br />
  73. 73. HubSpot Template<br />Predefined HTML Blocks<br /><ul><li>Content added via CMS
  74. 74. Styling applied by CSS
  75. 75. CSS (Stylesheets) predefined by HubSpot
  76. 76. Can alter colors, fonts via CMS
  77. 77. Can apply custom stylesheets via CMS</li></li></ul><li>Styling Your Template Via CMS<br />Do it Yourself: Settings > Template Configuration<br />
  78. 78. Styling Your Template Via CMS<br />Do it Yourself: Settings > Template Configuration<br />
  79. 79. Styling Your Template Via CSS<br />Do it Yourself: Custom Stylesheet – Settings > File Manager<br />1. Create Custom Stylesheet – custom.css<br />2. Edit Custom Stylesheet - custom.css<br />
  80. 80. Styling Your Template Via Custom CSS<br />Do it Yourself: Edit Custom Stylesheet – custom.css<br />Override default stylesheets attached <br />to template.<br />
  81. 81. Using Firefox/Firebug to Update CSS<br />
  82. 82. So How Do We Get From This…<br />
  83. 83. To This?<br />
  84. 84. Start With the Design Concept (Photoshop)<br />
  85. 85. Then Start Slicing Key Images<br />
  86. 86. Then Start Slicing Key Images<br />
  87. 87. Then Start Slicing Key Images<br />
  88. 88. Then Start Slicing Key Images<br />
  89. 89. Then We Build a Custom Layout via CSS<br />#brighton_body {<br />background:#EFF0EB url("/Portals/32387/images/design2010/background.jpg") repeat-x 0 0 !important;<br />color:#323232 !important;<br />font-family:Century Schoolbook Regular !important;<br />font-size:12px !important;<br />line-height:1.6em !important;<br />margin:0 !important;<br />padding:0 !important;<br />width:100% !important;<br />}<br />#home-ribbon {<br />background:url("/Portals/32387/images/design2010/hubspot_ribbon-home.jpg“) no-repeat 0 0;<br />float:left;<br />height:352px;<br />margin:0 15px 0 0;<br />width:242px;<br />}<br />
  90. 90. Finally, We Build Out The Website<br />We can even apply<br />more CSS for custom<br />looks on different pages and sections.<br />
  91. 91. How to Add More Custom Stylesheets<br />1. Create new stylesheets<br />2. Reference CSS on Page<br />Go to Page Properties > Show Advanced Options <br />Reference CSS Here<br />
  92. 92. Kuno Creative Examples<br />
  93. 93.
  94. 94.
  95. 95.
  96. 96.
  97. 97.
  98. 98.
  99. 99.
  100. 100.
  101. 101. Agenda<br /><ul><li>Welcome & Introductions
  102. 102. How HubSpot Software Can Help Agencies
  103. 103. What HubSpot Does & Doesn’t Do re: Design Work
  104. 104. Using the HubSpot CMS & Available Modules (Lynton)
  105. 105. Implementing Custom Designs on the HubSpot CMS( Kuno)
  106. 106. An Efficient Process for Designing & Lanching Sites (PnP)
  107. 107. What the HubSpot CMS can NOT Host (PnP)
  108. 108. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li><ul><li>The PSD Design Process is quick, easy, non-technical for the HubSpot client
  109. 109. 100% focused on making websites into marketing tools to build your prospect funnel</li></li></ul><li><ul><li> Choose one of our custom built themes for fast, affordable, and predictable design
  110. 110. Work with our design team to tailor HubSpot site around your brand</li></li></ul><li>Park Street Designs Theme Examples<br />
  111. 111. <ul><li> Brand site with your logo on home page and whatever sub-pages you wish
  112. 112. PNP can consult with you on logo redesign as part of design process if desired</li></li></ul><li><ul><li> 3 different nav styles – dropdowns, side menu on internal pages, or permanent side menu nav</li></ul>Dropdowns: Click on ‘services’ displays on-page drop-down menu of sub pages<br />Side Menu on Internal Page: Click on ‘solutions” displays sub page with subset of options in sidebar specific to page<br />Permanent side menu nav: standard set of side nav menu options on home page stays consistent across all subpages<br />
  113. 113. <ul><li> Select new banner image for your site
  114. 114. Work w/ us to choose from stock options or work w/ our designers for custom banner</li></li></ul><li><ul><li> Choose a compelling Call-To-Action button from our library which can be customized
  115. 115. Select the copy for your button in consultation with our Inbound Marketing Experts</li></li></ul><li>Further customizations available for an additional fee<br /><ul><li>Customized graphical banner image
  116. 116. Additional CTA buttons
  117. 117. Programming (e.g. Javascript, etc.)</li></li></ul><li>Agenda<br /><ul><li>Welcome & Introductions
  118. 118. How HubSpot Software Can Help Agencies
  119. 119. What HubSpot Does & Doesn’t Do re: Design Work
  120. 120. Using the HubSpot CMS & Available Modules (Lynton)
  121. 121. Implementing Custom Designs on the HubSpot CMS( Kuno)
  122. 122. An Efficient Process for Designing & Lanching Sites (PnP)
  123. 123. What the HubSpot CMS can NOT Host (PnP)
  124. 124. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li>Items to Avoid in HubSpot Sites<br /><ul><li>Database driven elements.
  125. 125. Flash Navigation
  126. 126. Sophisticated Image Galleries
  127. 127. Foreign Language Sites
  128. 128. Misc...</li></li></ul><li>Items to Avoid in HubSpot Sites<br /><ul><li>Look for Server-side scripting (PHP, Ruby, Python, ASP.net, Cold Fusion).
  129. 129. Server-side scripted websites are able to interact with a database, so this is a decent clue.</li></li></ul><li>Items to Avoid in HubSpot Sites<br />Login Screens/Authentication<br />
  130. 130. Items to Avoid in HubSpot Sites<br />Booking and Reservation Systems<br /><ul><li>These are not embeddable and we should steer clear of iframing these into the CMS.</li></li></ul><li>Agenda<br /><ul><li>Welcome & Introductions
  131. 131. How HubSpot Software Can Help Agencies
  132. 132. What HubSpot Does & Doesn’t Do re: Design Work
  133. 133. Using the HubSpot CMS & Available Modules (Lynton)
  134. 134. Implementing Custom Designs on the HubSpot CMS( Kuno)
  135. 135. An Efficient Process for Designing & Lanching Sites (PnP)
  136. 136. What the HubSpot CMS can NOT Host (PnP)
  137. 137. Implementing eCommerce with HubSpotSmal (Lynton)</li></li></ul><li>E-commerce<br />Yes, HubSpot plays well with e-commerce!<br />
  138. 138. Amazon Checkout<br />http://payments.amazon.com<br />Best for small number of products<br />Includes an embedded shopping cart on your site<br />
  139. 139. ECWID<br />www.ecwid.com<br />Free plan available<br />Entire product catalog and shopping cart appears on your HubSpot site<br />Easy to get started - simply copy and paste ecwid’s code on your site<br />
  140. 140. Shopify<br />www.shopify.com<br />For fully featured e-commerce websites, host Shopify or HubSpot on a subdomain<br />Complete closed-loop integration – track abandoned carts as leads and purchases as customers<br />Install the app atapps.shopify.com<br />
  141. 141. How to Get Help… <br />
  142. 142. Ask for Help… <br />John McTiguewww.kunocreative.com<br />Dan Ronkenwww.pullnotpush.com<br />Daniel Lynton www.lyntonweb.com<br />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<br />
  • cgall2992

    Jan. 21, 2017
  • FaithScimeca

    Nov. 23, 2015
  • CesarMoralesCPHIMSIT

    Feb. 27, 2015
  • AgileMarketing

    Jan. 16, 2015
  • LeoLee12

    Apr. 24, 2014
  • JulianaCMcKee

    Sep. 26, 2013
  • fredrik_u

    Dec. 14, 2012
  • tlorang

    Dec. 5, 2012
  • trishgillis

    Jan. 12, 2011
  • wkanaday

    Dec. 29, 2010

3 Sucessful HubSpot Marketing Agency Partners Share How to Implement a Custom Design on the HubSpot CMS.

Views

Total views

16,835

On Slideshare

0

From embeds

0

Number of embeds

920

Actions

Downloads

258

Shares

0

Comments

0

Likes

10

×