Designing Website on HubSpot's CMS
•
11 gefällt mir•11,747 views
3 Sucessful HubSpot Marketing Agency Partners Share How to Implement a Custom Design on the HubSpot CMS.
![Agenda ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (18)
Ähnlich wie Designing Website on HubSpot's CMS
Ähnlich wie Designing Website on HubSpot's CMS (20)
Mehr von HubSpot
Mehr von HubSpot (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Designing Website on HubSpot's CMS
- 1. How Marketing Agencies Can Design Websites on the HubSpot CMS John McTigue Dan Ronken Dan Lyntonwww.kunocreative.comwww.pullnotpush.comwww.lyntonweb.com Host: Peter Caputa, HubSpot Twitter:: #HubSpotCMS
- 3. How HubSpot Software Can Help Agencies
- 4. What HubSpot Does & Doesn’t Do re: Design Work
- 5. Using the HubSpot CMS & Available Modules (Lynton)
- 6. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 7. An Efficient Process for Designing & Lanching Sites (PnP)
- 8. What the HubSpot CMS can NOT Host
- 10. Traditional Outbound Marketing is dying … CALLER ID: 800-555-1234 Annoying Salesperson Interruptions get ignored …
- 11. Inbound Marketing is thriving … Relevant info is being sought daily…
- 12. 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”.
- 15. No IT RequiredQualified Traffic Content Creation SEO Blog Social Media Landing Pages Marketing Analytics Lead Nurturing & Intelligence CRM (Salesforce.com or other) Sales
- 16. Proven Approach Drives Traffic, Leads & Customers 1 2 3 Find the full methodology at success.hubspot.com
- 17. 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
- 19. How HubSpot Software Can Help Agencies
- 20. What HubSpot Does & Doesn’t Do re: Design Work
- 21. Using the HubSpot CMS & Available Modules (Lynton)
- 22. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 23. An Efficient Process for Designing & Lanching Sites (PnP)
- 24. What the HubSpot CMS can NOT Host
- 27. $10/page
- 28. NOT a design process
- 31. html
- 32. CSS/xhtml
- 34. How HubSpot Software Can Help Agencies
- 35. What HubSpot Does & Doesn’t Do re: Design Work
- 36. Using the HubSpot CMS & Available Modules (Lynton)
- 37. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 38. An Efficient Process for Designing & Lanching Sites (PnP)
- 39. What the HubSpot CMS can NOT Host (PnP)
- 41. 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?
- 42. 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.
- 43. Form module 19
- 44. Form module 20
- 45. 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
- 46. Web Voter Use the web voter to share news and blog articles Digg-style voter can be hidden with css
- 47. 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!
- 48. 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
- 49. 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
- 50. Feed Module List content from any RSS feed, including HubSpot’s blog RSS HubSpot’s blog RSS can be filtered by tags + =
- 52. Examples of Sites on HubSpot CMS by LyntonWeb
- 58. How HubSpot Software Can Help Agencies
- 59. What HubSpot Does & Doesn’t Do re: Design Work
- 60. Using the HubSpot CMS & Available Modules (Lynton)
- 61. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 62. An Efficient Process for Designing & Lanching Sites (PnP)
- 63. What the HubSpot CMS can NOT Host (PnP)
- 65. How HubSpot Software Can Help Agencies
- 66. What HubSpot Does & Doesn’t Do re: Design Work
- 67. Using the HubSpot CMS & Available Modules (Lynton)
- 68. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 69. An Efficient Process for Designing & Lanching Sites (PnP)
- 70. What the HubSpot CMS can NOT Host (PnP)
- 72. Choose a HubSpot Template Foxboro (Default) Brighton Cambridge Duxbury Everett Courtesy Links Main Menu Submenu Side Menu http://success.hubspot.com/support-help-services/template-guide
- 74. Styling applied by CSS
- 75. CSS (Stylesheets) predefined by HubSpot
- 76. Can alter colors, fonts via CMS
- 78. Styling Your Template Via CMS Do it Yourself: Settings > Template Configuration
- 79. 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
- 80. Styling Your Template Via Custom CSS Do it Yourself: Edit Custom Stylesheet – custom.css Override default stylesheets attached to template.
- 81. Using Firefox/Firebug to Update CSS
- 82. So How Do We Get From This…
- 83. To This?
- 84. Start With the Design Concept (Photoshop)
- 85. Then Start Slicing Key Images
- 86. Then Start Slicing Key Images
- 87. Then Start Slicing Key Images
- 88. Then Start Slicing Key Images
- 89. 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; }
- 90. Finally, We Build Out The Website We can even apply more CSS for custom looks on different pages and sections.
- 91. 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
- 102. How HubSpot Software Can Help Agencies
- 103. What HubSpot Does & Doesn’t Do re: Design Work
- 104. Using the HubSpot CMS & Available Modules (Lynton)
- 105. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 106. An Efficient Process for Designing & Lanching Sites (PnP)
- 107. What the HubSpot CMS can NOT Host (PnP)
- 116. Additional CTA buttons
- 118. How HubSpot Software Can Help Agencies
- 119. What HubSpot Does & Doesn’t Do re: Design Work
- 120. Using the HubSpot CMS & Available Modules (Lynton)
- 121. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 122. An Efficient Process for Designing & Lanching Sites (PnP)
- 123. What the HubSpot CMS can NOT Host (PnP)
- 125. Flash Navigation
- 131. How HubSpot Software Can Help Agencies
- 132. What HubSpot Does & Doesn’t Do re: Design Work
- 133. Using the HubSpot CMS & Available Modules (Lynton)
- 134. Implementing Custom Designs on the HubSpot CMS( Kuno)
- 135. An Efficient Process for Designing & Lanching Sites (PnP)
- 136. What the HubSpot CMS can NOT Host (PnP)
- 138. Amazon Checkout http://payments.amazon.com Best for small number of products Includes an embedded shopping cart on your site
- 139. 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
- 140. 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
- 141. How to Get Help…
- 142. Ask for Help… John McTiguewww.kunocreative.com Dan Ronkenwww.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
Hinweis der Redaktion
- If you’re still struggling to sell the idea of inbound marketing to your clients, this chart might come in handy for you. What you see on this chart is that traditional marketing is more expensive. It is usually slow to convert and difficult to measure – that has made a lot of major marketing activities financially out of reach for smaller companies. And has caused larger companies to start questioning where their spending their marketing budget. INBOUND MARKETING on the other hand is inexpensive, works quickly, is completely measureable and to a certain degree, predictable. It’s also more of an investment as opposed to an expense, since time investments in SEO, blogging, social media, landing pages, lead nurturing, etc is an asset that can be re-used over and over and over at very little ongoing costs. On this chart, tactics like SEO, Blogs & Social Media and some forms of Email Marketing all represent Inbound Marketing … and you can see that they all show a ‘below average’ cost per lead compared to the other traditional tactics.****END OF SPEAKER NOTES – BELOW IS JUST REFERENCE MATERIAL****DATA SOURCE: HubSpot State of the Inbound Marketing Report (p6 of 16)Additional survey data suggests that inbound marketing is less expensive than outbound. When asked to rate the relative cost of each lead channel as “below average,” “near your average,” and “above your average,” respondents more frequently cited blogs/social media, email marketing and search engine optimization as “below average.” Consequently, a very small percentage characterized these channels as costing “above average.” Trade shows were the worst offender of costing “above average” relative to other channels.
- Through my experience working with 100s of marketing agencies, there’s one thing that many are missing. Many don’t know they’re missing it. Most agencies have not developed consistent, repeatable, effective processes that deliver value to client after client. Too many firms rely on their unique creative. But, with the advent of the internet and measurability, we need to also take some cues from our old friends in the direct marketing industry: process and data is just as critical as creative. Many don’t know how important this. The companies that I’ve worked with - who’ve developed processes have scaled their revenue significantly faster than the ones who haven’t. The reason we developed the inbound marketing methodology is because we realized that our customers needed it. As we’ve onboarded 1,000s of customers and as our marketing team has built up our own inbound marketing success, … we documented all this knowledge in the HS METHODOLOGY.Most of you have seen this. Hopefully, you’ve read it and implemented it. It’s a simple 3 step process: Get Found by your target audience | Help you fill the top of your funnel with higher quality traffic through search engines, blogging & social media Convert higher percentages of site traffic into qualified leads and customers | That means getting more intelligence about prospects & customers based on their interactions with you and being able to develop ongoing relationships with them until they are ‘ready to buy’Analyze your marketing programs to duplicate what is working | That means aggregating vast amounts of data and doing automated analysis to GIVE YOU ACTIONABLE INFORMATIONThis is the process that our successful partners follow to provide the most value to their clients. Not so coincidentally, the product mirrors this methodology … Go Thru the Tabs –fast. Provide an overview at each tab – something like the first sentence or two of the tab description.Dashboard >Create > Optimize > Promote > Convert > AnalyzeBefore we fully dive into the product, I’m going to ask you two more poll questions which’ll help me focus on the areas of the product and methodology you’d like to learn the most about. QUESTION 4. QUESTION 5.
- What is a Content Management System (or CMS)? It’s a software platform that resides on a web server and enabling Web site authors to create and manage a web site without advanced knowledge of HTML or scripting languages such as ASP.net or php. On the management side, a Web author uses the CMS to input content, for example Web pages or blogs, usually by using a WYSIWYG editor. The CMS converts that content into HTML, the universal presentation language of the Web, and stores it in a database. The CMS also allows site managers to organize content into a site architecture and display it via dynamic menus. The look and feel of the website is controlled by one or more predefined HTML templates, the styling for which is controlled by cascading style sheets (or CSS). The CMS renders each page using the stored content, assigned template and CSS styles to present a finished web page to the visitors browser.
- DEMO LEAD: So, today we’ll discuss the concepts of Inbound Marketing and give you a quick demo of HubSpot’s software product. I won’t be able to show you the entire product suite in depth because there is just too much to cover in an hour … but if you have specific questions as we go along, please ask them in the question pane in gotowebinar. If for some reason, we are unable to answer your question today, please reach out to your Partner Account Manager. During the webinar, I’m going to ask a few more questions so I can focus on the stuff that’s most interesting to you. Let’s start by getting a feel for how familiar you are with HubSpot and inbound marketing. TRIGGER 2 questions.# of Active HS subscriptions? services you provide now?
- REVIEW ANSWERS TO POLLS. Unfortunately, I will not be able to cover everything today. I’ll focus on providing a high level overview and digging down into a few parts. I’m going to throw a lot at you today, just by covering parts of the product and parts of the methodology. To really take advantage of HubSpot as a reseller, you need to develop new service offerings. Many of you are already providing some of these services. Many of you already provide a solid ROI to your clients. But, the key to growing your agency is mastering the process. You need to master the process of planning client activities based on your client’s revenue and lead generation targets. In other words, you need to determining which services to provide and when to provide them so that you help your clients achieve their goals within the timeline and budget they require. In order to do that, you need to develop experience and competency in providing these services. The problem is that this isn’t going to happen overnight. So, I’d recommend you evaluate what you think you can learn and do effectively yourself. And then partner or identify freelancers who can fill in the gaps. You can levearge Services.HubSpot.com or HubSpot’s service marketplace to learn and find these partners. This is where we send our customers when they ask for help doing their inbound marketing. We’ve done the hard work of figuring out what services our customers need and defining packages. And then recruiting our partners to provide them. So, you simply can browse the marketplace, visit our certified partners landing pages and learn the how’s and why’s. If you want help doing certain things, you can connect with other partners. For example, many of our partners are not css/design/html experts, so they hire other partners like Pull not Push, Kuno Creative or Lynton Web to provide that service when their client needs it. Some partners aren’t strong at managing SEO for large sites. So, they hire firms like Pagetender to help. Some firms aren’t google adwords certified, so they’ll turn to companies like PR 20/20 and Ymarketing when their clients should be doing ppc smarter. Some firms are strategic marketing firms and setting up social media profiles is better done by someone who does it all day and can do it less expensively. So, they’ll hire some of the virtual assistants who are HubSpot certified like Stacie Chalmerrs or Shari Sultana.
- REVIEW ANSWERS TO POLLS. Unfortunately, I will not be able to cover everything today. I’ll focus on providing a high level overview and digging down into a few parts. I’m going to throw a lot at you today, just by covering parts of the product and parts of the methodology. To really take advantage of HubSpot as a reseller, you need to develop new service offerings. Many of you are already providing some of these services. Many of you already provide a solid ROI to your clients. But, the key to growing your agency is mastering the process. You need to master the process of planning client activities based on your client’s revenue and lead generation targets. In other words, you need to determining which services to provide and when to provide them so that you help your clients achieve their goals within the timeline and budget they require. In order to do that, you need to develop experience and competency in providing these services. The problem is that this isn’t going to happen overnight. So, I’d recommend you evaluate what you think you can learn and do effectively yourself. And then partner or identify freelancers who can fill in the gaps. You can levearge Services.HubSpot.com or HubSpot’s service marketplace to learn and find these partners. This is where we send our customers when they ask for help doing their inbound marketing. We’ve done the hard work of figuring out what services our customers need and defining packages. And then recruiting our partners to provide them. So, you simply can browse the marketplace, visit our certified partners landing pages and learn the how’s and why’s. If you want help doing certain things, you can connect with other partners. For example, many of our partners are not css/design/html experts, so they hire other partners like Pull not Push, Kuno Creative or Lynton Web to provide that service when their client needs it. Some partners aren’t strong at managing SEO for large sites. So, they hire firms like Pagetender to help. Some firms aren’t google adwords certified, so they’ll turn to companies like PR 20/20 and Ymarketing when their clients should be doing ppc smarter. Some firms are strategic marketing firms and setting up social media profiles is better done by someone who does it all day and can do it less expensively. So, they’ll hire some of the virtual assistants who are HubSpot certified like Stacie Chalmerrs or Shari Sultana.
- DEMO LEAD: So, today we’ll discuss the concepts of Inbound Marketing and give you a quick demo of HubSpot’s software product. I won’t be able to show you the entire product suite in depth because there is just too much to cover in an hour … but if you have specific questions as we go along, please ask them in the question pane in gotowebinar. If for some reason, we are unable to answer your question today, please reach out to your Partner Account Manager. During the webinar, I’m going to ask a few more questions so I can focus on the stuff that’s most interesting to you. Let’s start by getting a feel for how familiar you are with HubSpot and inbound marketing. TRIGGER 2 questions.# of Active HS subscriptions? services you provide now?
- The HubSpot CMS comes with a suite of modules designed to support your inbound marketing efforts. What you get is a very simple, easy to use toolset that keeps you focused on getting found and converting visitors.I’ll walk you through each of the modules listed here and show examples of how you can use them on your clients’ sites. With a touch of additional css and javascript, you’ll find that HubSpot’s CMS provides an ideal framework for designing effective and elegant marketing websites.
- Let’s start with the content module. As you might guess, this is how you add content to a page. The content module provides a what-you-see-is-what-you-get HTML editor that makes it easy for anyone to:-format text-link to pages and documents-insert images and multimediaThe editor includes a history of changes with the ability to roll back to a previous version. Once you delete a module, you’ll also delete its history, so be careful with that delete button.You can insert any custom HTML into the content module. This can be especially handy for applying css classes to page elements. However, avoid adding code for table layouts, inline css with the style tag, and don’t size down large images in html. First, resize those images on your desktop or using HubSpot’s image resizer. This will keep your page load times fast. When designing sites on the HubSpot CMS, don’t lose sight of the inbound marketing methodology. Keep page layouts simple and focus on content and calls to action that will drive the visitor to convert.
- The form module is essential to your website’s lead generation goals. HubSpot’s form builder module has everything you need to capture leads and nurture them into customers.Remember that simple forms create less friction and will convert leads more effectively. When you have a longer form, use css to make it clean and user friendly, like the two-column forms you see here.When building a form, first add your fields with HubSpot’s drag and drop interface. And don’t forget to change the name of the submit button. Think about it, when was the last time you submitted yourself to something? I submit myself to the long lines at the DMV, and I don’t enjoy it. Make your buttons actionable, and fun. You can use CSS to make them pop with a background image.After you have all the fields you need, it’s time to configure your form’s actions. Set a thank you message or thank you URL. I recommend redirecting the lead to a thank you page so their user experience doesn’t come to a complete halt. If you’re offering a whitepaper or e-book, you can send an autoresponder with a download link. Associate the form with a lead nurturing campaign to continue building the relationship with leads until they’re sales ready.With HubSpot’s new e-mail marketing tools, you can create lists based on leads who submitted forms on your site. This means you can use the form module even as a simple “join our newsletter” form.To analyze the conversion rate of your forms, visit Settings > Form Manager or Create > Landing Pages.
- The Follow Me module makes it easy to link to all your social media profiles anywhere on your website. Go to Settings > Social Media to integrate your social media accounts and toggle which follow me links HubSpot should display. This module is probably the most self explanatory, so go start using it.
- Think of the web voter like a news and article module. It’s a great way to share links to industry news and blog posts. Links can be categorized into tags and visitors can subscribe to an RSS feed of the articles. As the name “web voter” implies, the module comes with a digg-style voter that can be hidden with css.
- The blog module is what I consider the heart of HubSpot’s CMS. This is where you and your clients should be spending a great amount of time to get found on the search engines and grow your audience. HubSpot gives you all the features you would expect from a blog, and focuses its publishing tools on optimizing posts for SEO. The blog module includes options for share buttons, commenting, and automatic social media notifications. You can include custom header and footer html in your posts, customize the byline,
- The Feed module displays content from any RSS feed on the web. Use it to show your latest blog posts.
- Web pages and blogs are built from blocks of HTML code, usually created in a hierarchical structure. For example, here you can see an outer block called body and several nested blocks within its boundaries each with a unique name layout structure. In a design template, each of these blocks represents an area of the web page with a common position and styling on each page of the website which has this template assigned to it in the CMS database. You can see here where the unique content goes for this page along with other common elements, such as the header, logo, menu and footer which are shared among all of the pages. You can also see a glimpse of how the html code would look for a template like this.
- In the HubSpot CMS you have several choices for design templates that allow you to build your website with different layout features such as vertical or horizontal main menus shown in red, vertical or dropdown secondary menus shown in blue, courtesy links shown in yellow and additional side menus shown in green.
- Here is the default template called Foxboro, named of course after the New England Patriots football stadium. It features several predefined blocks where you can add content via the CMS. Once you have selected a template for your website, through discussions with your HubSpot inbound marketing consultant, you have 2 choices for customizing its styling.
- Your first option is to update your selected template by uploading your logo into the header and by modifying the site fonts and colors. This is done by going to Settings > Template Configuration. One tip is to login to HubSpot in 2 browser windows, one showing your website Home page and the other with the Settings menus so that you can see the styling effects as you change them. The basic styling menu lets you change the main site color scheme.
- The Advanced Color and Font Selection tab let’s you specific font families, sizes and colors for all of the main html elements such as headings, paragraph text and links. If your template includes Courtesy Links, you can update them in the Courtesy Links tab.
- A second way you can modify the styling of your template is by creating and updating a custom cascading style sheet. This is done by going to Settings > File Manager, then creating a new file in the root folder of the website called custom.css. Your file must be named “custom.css”, since the CMS senses the presence of this file and knows to use it in addition to the default stylesheets assigned to your template. You can then edit this stylesheet to change the styling of your template directly, including the layout, dimensions, positions of elements, widths and heights, fonts and background images.
- This is where a lot of experience in html and css comes in very handy. In order to override the default styles assigned to the template you must update individual element styles and in many cases tell the browser to use custom.css and not any other stylesheet or inline style. This is done by adding an !important attribute to styles you want to use in custom.css and by breaking elements down into very specific hierarchies.
- You can find the individual html elements and their styles very easily by using the Firebug add-on in the Firefox browser. You can see here I’ve selected the Home link in the main menu of the template and in Firebug below you can see the HTML on the left and the styling assigned to it in the stylesheets on the right. Notice that for this particular element, styling is being applied in more than one stylesheet, for example “skin.css”, which is a default stylesheet applied to this template. I need to set all of those style attributes in custom.css and make sure they override all the styles assigned in skin.css to get my desired effect.
- So now we have the tools to completely customize our HubSpot template. How do we get from the default template…
- To a completely customized design that looks nothing like the original template and captures the look and feel we want for our website?
- We start with an original design concept like this one, usually a Photoshop file where we capture all of the elements we want for our web page. It really helps to understand the overall structure and layout of a HubSpot template, however, so you don’t literally design yourself into a corner, i.e. include elements that can’t be duplicated in a template even with custom stylesheets. This is another place where experience with the HubSpot templates and HTML/CSS comes in very handy.
- Just by looking at the desired design, we know that we won’t be able to create it by simply modifying fonts and colors in the Template Configuration settings of the HubSpot CMS. Note in particular the positions, widths and background images of these main content features in the home page. These are certainly different from our original template and require a custom stylesheeet. Once we finalize our design concept, we start slicing it up into images and noting all of the colors, fonts, font sizes and dimensions of the elements in the design. This is the information we will need to construct our custom stylesheet.
- Here you can see we are slicing a logo image out of the design that we will use in the header.
- Then we’ll slice this ribbon banner…
- And all of the other unique images we will use to construct our custom template. We create a new images folder under the main site root in Settings > File Manager and upload our sliced images to that folder. Then we view them in the File Manager and take note of the exact URL for use in our stylesheet.
- Next, we use Firebug and start building our custom.css stylesheet, armed with the sliced images and information we saved from the original Photoshop design file. These are some of the styles we will add to custom.css Note the use of background images for these elements and the precise url used to access them from the stylesheet. A good practice is to again work on the stylesheet in one browser window and view the updated page in another window or tab. Don’t forget to refresh the web page window or tab to reflect any changes you have made to the stylesheet as you go.
- Once we finish building out our custom home page, we proceed to the other layouts available for our template, for example a 2 column interior page and a blog page. Note that in the case of our blog page, we have completely changed the color scheme of the header to give it a unique appearance and enhance the experience of visiting our blog. We did this by creating an additional custom stylesheet and applying it to our blog pages. This same approach can be used to customize landing pages or other distinct parts of your website.
- To create an additional custom stylesheet, you go to Settings > File Manager, create a new folder under the site root, for example we have created one called “css”. Then you create new stylesheets here just like you did for custom.css, only name them something appropriate like “landing .css” for landing pages. Next you go to the page where you want to apply the stylesheet and select Page Properties and scroll down and show the Advanced Options. Here you put a reference to your stylesheet in the HTML Head Tag Text as shown here. Note that in the case of blogs, you only need to apply this once to the main blog page. It will carry through to all your individual blog post pages, tag lists and archives.
- Well, by now you’re probably up to your eyeballs in the technical aspects of HubSpot custom design. Let’s take a look at a few of our most recent examples. Here’s one from a California software company in its design concept form. Our client wanted a very clean look with lots of white space and focus on lead conversion elements. Custom elements include the wide rotating banner area, calls-to-action in the center of the page, news and blog feeds and fat footer with four columns.
- Here’s another one with a very different, more color intensive look to it, a unique header layout, search box incorporate into the menu area, split banner with call-to-action and a three column block for testimonials, feeds and more calls-to-action.
- Here a healthcare insurance company wanted a clean look with well organized navigation menus for its visitors to let them easily find different sections that match their interests. Note the large tagline that serves as a differentiator from their competitors. The banner slider explains the company benefits and steers them to landing pages.
- Here’s another one that is almost entirely calls-to-action designed to capture leads and quickly steer visitors to specific applications for their industries. Keep in mind that all of these designs are done using HubSpot templates.
- Here’s one using a colorful background, prominnently displayed social media icons and a 3 column content section for calls-to-action, “what-we-do” text and blog feeds.
- Here’s another one making use of background images and colors to create a finished look and direct your eye to main benefits and calls-to-action.
- This one’s a decidely “out-of’the-box” design on a HubSpot template for a plastic surgeon who wanted a very stylish, feminine look that would welcome prospective clients and capture them as leads.
- Again, colors and graphics help to emphasize key content and calls-to-action for this high techolnology company.
- Finally, here’s an example of or a website refresh, where we took a pretty good looking site on HubSpot and made it better by updating the background and edge effects, layout and styling of the content.
- My team is 4 of our most senior team members. We’re adding 2 additional team members to the team next week. If you’d like to discuss how we can you help you, request a call.During this call, we typically talk about -The challenges that are holding you back from growth- Ways to increase client acquisition and retention rates- Ways to transition from project work to securing larger and longer retainers- Recruiting, training and managing employees and contractors successfully- Identifying service offerings that can provide additional value to your clients and growth potential for you- Ways to stay steps ahead of your competition in your knowledge of how to apply technology to marketing- Setting your inbound lead generation goals based on your sales and revenue goals
- My team is 4 of our most senior team members. We’re adding 2 additional team members to the team next week. If you’d like to discuss how we can you help you, request a call.During this call, we typically talk about -The challenges that are holding you back from growth- Ways to increase client acquisition and retention rates- Ways to transition from project work to securing larger and longer retainers- Recruiting, training and managing employees and contractors successfully- Identifying service offerings that can provide additional value to your clients and growth potential for you- Ways to stay steps ahead of your competition in your knowledge of how to apply technology to marketing- Setting your inbound lead generation goals based on your sales and revenue goals