{"id":15252,"date":"2022-09-08T13:26:49","date_gmt":"2022-09-08T13:26:49","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=15252"},"modified":"2024-05-14T10:15:16","modified_gmt":"2024-05-14T10:15:16","slug":"hubspot-cms-development-case-study","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/hubspot-cms-development-case-study.html","title":{"rendered":"HubSpot CMS Development Case Study: How We Built the pr.co Website"},"content":{"rendered":"\n<p>Over the past few years, Hubspot CMS has gained popularity among brands and businesses due to its combination of simplicity and flexibility. The platform is easy to use, even for non-tech-savvy people, making it a powerful tool for multidisciplinary teams. <\/p>\n\n\n\n<p>However,&nbsp; creating a truly unique page or integrating a custom functionality without professional assistance can be quite challenging and error-prone.&nbsp;<\/p>\n\n\n\n<p>At P2H, we specialize in building and customizing websites by Hubspot CMS. Below, we will share the process of how a Hubspot-based website was built and why the results guarantee customer loyalty for years to come.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Client&nbsp;<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.pr.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">pr.co<\/a> designs and builds custom newsrooms and cutting-edge software that makes writing and publishing news a breeze for communications teams. The platform allows publishers to manage relationships with media contacts via a CRM, collaborate with their teams, organize their media assets in one centralized hub, and much more.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>We were contacted by Padraig McKee &#8211; pr.co\u2019s Director of Product. He explained that the company widely used the HubSpot ecosystem to manage their sales and marketing activities, so when the decision to create a new corporate website was made, the choice naturally gravitated towards HubSpot CMS.\u00a0<\/p>\n\n\n\n\n    <blockquote>\n        <p>P2H is my go-to partner when I have low in-house development capacity. P2H is fast, reliable and always delivers quality work on time. And a special shoutout to Anya for her impeccable project management.<\/p>\n        <footer class=\"author-block\">\n                            <div class=\"photo-holder\">\n                    <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/08100530\/Padraig-McKee-150x150.jpg\" width=\"48\" height=\"48\" alt=\"Padraig McKee \"\n                    srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/08100530\/Padraig-McKee-300x300.jpg 2x, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/08100530\/Padraig-McKee.jpg 3x\" \/>\n                <\/div>\n                        <div class=\"text-holder\">\n                                    <span class=\"h6\">Padraig McKee <\/span>\n                                <p>Director of Product<\/p>\n            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<p>The client provided the designs of all the pages along with detailed specifications. Our task was to integrate those designs into HubSpot CMS and add some features to enhance user experience and meet pr.co\u2019s specific business needs.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Technologies&nbsp;<\/h3>\n\n\n\n<p>To get the job done, we used the staple web technologies: HTML5, CSS3, Flexbox, and JQuery.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What We Did&nbsp;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Modules&nbsp;<\/h4>\n\n\n\n<p>Our task was to develop several web pages for HubSpot CMS. If we hardcoded them, though, the client would have a hard time maintaining and updating them afterwards. The solution was to develop a number of modules that the client could easily edit and use to create new pages.<\/p>\n\n\n\n<p>We created two groups of drag &amp; drop modules.&nbsp;<\/p>\n\n\n\n<p><br><strong>Global.<\/strong> These modules are used in areas found on every page of the website, most frequently in the header, sidebar, and footer.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module-1024x489.png\" alt=\"\" class=\"wp-image-15254\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module-1024x489.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module-300x143.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module-768x367.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module-1536x734.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02091053\/global-module.png 1898w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Custom. <\/strong>These modules contain content that the client can change depending on the page such as a callout box with an image and CTA button. It can have different text for different calls to action.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4-1024x481.png\" alt=\"\" class=\"wp-image-15260\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4-1024x481.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4-300x141.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4-768x361.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4-1536x722.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093529\/custom-module-4.png 1895w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Using these modules, the client can &nbsp;easily (and quickly) create new pages, adapting them to their needs.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"mobile-versionnbsp-00f849b6-af96-4844-8159-e86554f35410\">Mobile Version&nbsp;<\/h4>\n\n\n\n<p>In the era of handheld gadgets and Google\u2019s mobile-first indexing, not having a mobile version of your website is unwise.&nbsp;<\/p>\n\n\n\n<p>The client was well aware of that. Therefore, we made the pr.co website mobile friendly, adapting it for different screen sizes\/resolutions and creating a sliding mobile menu based on the client\u2019s mobile designs.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"510\" height=\"794\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093647\/mobile-version-1.gif\" alt=\"\" class=\"wp-image-15261\"\/><\/figure>\n\n\n\n<p>Because reading content on smartphones and tablets is so easy, the chances of losing visitors, leads, and customers have decreased significantly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"animations-interactions-6b6a8c64-66ba-41b1-b734-87ec7622e66c\">Animations &amp; Interactions<\/h4>\n\n\n\n<p>To make the website more engaging and user friendly, we added several animation and interaction effects.&nbsp;<\/p>\n\n\n\n<p><strong>Animation on scroll<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"419\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093850\/animation-on-scroll.gif\" alt=\"\" class=\"wp-image-15262\"\/><\/figure>\n\n\n\n<p><strong>Animation on hover<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"419\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02093916\/animation-on-hover-1.gif\" alt=\"\" class=\"wp-image-15263\"\/><\/figure>\n\n\n\n<p><strong>Animation on hovering over a grid with cards&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02104756\/animation-grid.gif\" alt=\"\" class=\"wp-image-15283\"\/><\/figure>\n\n\n\n<p><strong>Dots pulsing animation&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"419\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094038\/dots-pulsing.gif\" alt=\"\" class=\"wp-image-15264\"\/><\/figure>\n\n\n\n<p><strong>Carousel&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02104728\/carousel.gif\" alt=\"\" class=\"wp-image-15282\"\/><\/figure>\n\n\n\n<p><strong>Filter<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094133\/filter-1.gif\" alt=\"\" class=\"wp-image-15265\"\/><\/figure>\n\n\n\n<p><strong>Sticky Header&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094207\/sticky-header.gif\" alt=\"\" class=\"wp-image-15266\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"multilanguage-featurenbsp-d34e304c-1001-4260-a860-07a8fbd02d67\">Multi-Language Feature&nbsp;<\/h4>\n\n\n\n<p>These days, you can easily reach your target audience in virtually any corner of the globe with an Internet connection. This means your website should \u201cspeak\u201d more than one language.&nbsp;<\/p>\n\n\n\n<p>Because pr.co is a fast-growing company, it strives to reach an international audience. Therefore, our task was to add the multi-language feature to the website. Below, we share the results of the successful integration.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"419\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094234\/multi-language-feature.gif\" alt=\"\" class=\"wp-image-15267\"\/><\/figure>\n\n\n\n<p>Currently there are two languages available on the pr.co site. There is always the possibility to increase this number whenever needed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"blognbsp-27219b46-6195-4e50-8607-c00ad844753f\">Blog&nbsp;<\/h4>\n\n\n\n<p>The client also commissioned us to create a new (second) blog with information on product updates. Using HTML and CSS, we converted the provided designs into two page templates: the <strong>blog listing page template<\/strong> and the<strong> blog post page template<\/strong>.&nbsp;<\/p>\n\n\n\n<p><strong>The blog listing page template<\/strong><\/p>\n\n\n\n<p>The blog listing page aggregates all the company\u2019s product blog posts. As you can see in the screenshot below, the blog post cards are made up of the title, publish date, tags, and the body text. When the body text contains more than 500 characters, it\u2019s truncated. Users can click a \u201cRead full update\u201d link to take them to the blog post page where they can read the entire update.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094254\/blog-listing-page.gif\" alt=\"\" class=\"wp-image-15268\"\/><\/figure>\n\n\n\n<p><strong>The blog post page template&nbsp;<\/strong><\/p>\n\n\n\n<p>This template is used for each post. The \u201cAll updates\u201d link takes the user back to the blog listing page. There are 12 blog posts per page. The primary tags (New, Improved, Fixed) are color coded. The secondary tags share a similar design (Newsroom, App, PR, CRM, Virtual Events, Press Page).&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094320\/product-page-template.gif\" alt=\"\" class=\"wp-image-15269\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"custom-modules-for-creating-marketing-emails-quickly-82262b19-c10e-4eec-bcf9-ff60e47247c9\">Custom Modules for Creating Marketing Emails Quickly<\/h4>\n\n\n\n<p>The pr.co management wanted to speed up the process of creating marketing emails, all while making them engaging and visually attractive..&nbsp;<\/p>\n\n\n\n<p>We handled this task by developing a number of custom modules that can be easily assembled into an email template by pr.co\u2019s marketing professionals. All they have to do next is change the content of the modules and they\u2019re good to go. Here\u2019s an example of an email made up of our modules.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"650\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02094342\/email.gif\" alt=\"\" class=\"wp-image-15270\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-outcomenbsp-f9512ce9-a4a4-47f0-aeff-5e4d24a2825a\">The Outcome&nbsp;<\/h2>\n\n\n\n<p>Our collaboration with pr.co is an example of how we\u2019ve gained customer trust and loyalty through our work. After completing one task, the client kept coming back with more&nbsp; work for us over a long time span. That shows how satisfied they were with the quality we delivered.<\/p>\n\n\n\n<p><br>Want to be our next happy client? <a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noreferrer noopener\">Write <\/a>to us.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we talk about one of our HubSpot CMS development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved. <\/p>\n","protected":false},"author":19,"featured_media":15272,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[743,756],"tags":[774,779,825,808,820,845],"class_list":["post-15252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-hubspot-development","tag-cms-development","tag-component-based-frontend","tag-html-css","tag-hubspot-cms","tag-javascript","tag-saas"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Baylor Eaton","author_link":"https:\/\/getdevdone.com\/blog\/author\/baylor"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/case-study\" class=\"advgb-post-tax-term\">Case study<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">HubSpot development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">HubSpot development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">Component-based frontend<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">HTML &amp; CSS<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">HubSpot CMS<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">JavaScript<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/hubspot-development\" class=\"advgb-post-tax-term\">SaaS<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">Component-based frontend<\/span>","<span class=\"advgb-post-tax-term\">HTML &amp; CSS<\/span>","<span class=\"advgb-post-tax-term\">HubSpot CMS<\/span>","<span class=\"advgb-post-tax-term\">JavaScript<\/span>","<span class=\"advgb-post-tax-term\">SaaS<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on September 8, 2022","modified":"Updated on May 14, 2024"},"absolute_dates_time":{"created":"Posted on September 8, 2022 1:26 pm","modified":"Updated on May 14, 2024 10:15 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/09\/02101251\/Intro-preview.png"},"featured_post_color":"#e88080","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/2bc1e2706ee61710b1ba07fb6d106e9c35f8baed29da8ff47798b1e63665bba7?s=96&d=mm&r=g","author_position":"Business Development Manager","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"shopify-case-study-how-we-developed-abvgroup-wine-store","name":"Shopify Case Study: How We Developed the abvgroup.ca Wine Store"},"next_post":{"slug":"frontend-development-case-study","name":"How We Brought usafootballpools.com Into the Green Zone on PageSpeed Insights"},"related_posts":["winchester-white-website-transformation-wordpress-plugin-integration","ai-automation-for-client-onboarding-and-status-updates","custom-crm-ai-reports"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=15252"}],"version-history":[{"count":39,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15252\/revisions"}],"predecessor-version":[{"id":24704,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/15252\/revisions\/24704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/15272"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=15252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=15252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=15252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}