designing website on hubspot's cms

82
3/30/22 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

Upload: hubspot

Post on 20-Aug-2015

14.106 views

Category:

Business


0 download

TRANSCRIPT

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

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.

Skills Required to Implement Design on HubSpot CMS

• Graphic design• html• CSS/xhtml• Javascript

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)

HubSpot Modules

• Content• HTML/JavaScript• Blog• News Feed• Form• Web Voter• Follow Me

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.

Form module

19

Form module

20

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

+ =

Examples of Sites on HubSpot CMS by LyntonWeb

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 CMS

Do it Yourself: Settings > Template Configuration

Styling Your Template Via CMS

Do it Yourself: Settings > Template Configuration

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.

Using Firefox/Firebug to Update CSS

So How Do We Get From This…

To This?

Start With the Design Concept (Photoshop)

Then Start Slicing Key Images

Then Start Slicing Key Images

Then Start Slicing Key Images

Then Start Slicing Key Images

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

Kuno Creative Examples

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

Park Street Designs Theme Examples

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

Login Screens/Authentication

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)

E-commerce

Yes, HubSpot plays well with e-commerce!

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

How to Get Help…

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