{"id":20998,"date":"2024-05-17T10:19:47","date_gmt":"2024-05-17T10:19:47","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=20998"},"modified":"2025-04-03T22:21:20","modified_gmt":"2025-04-03T22:21:20","slug":"craft-cms-case-study-hallingcast-website","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/craft-cms-case-study-hallingcast-website.html","title":{"rendered":"Leveraging Craft CMS to Create Hallingcast&#8217;s Corporate Website"},"content":{"rendered":"\n<p>At GetDevDone, we&#8217;re committed to staying on top of the latest web development trends, continually expanding our offerings to meet and exceed our clients&#8217; evolving needs. We work with a wide range of technologies and content management systems, from the respected veterans like WordPress and Drupal to the innovative newcomers like Hubspot and Webflow.<\/p>\n\n\n\n<p>One of the latest strings added to our bow is website development using&nbsp;<a href=\"https:\/\/craftcms.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Craft CMS<\/a>, a cutting-edge content management system known for its flexibility and user-friendly interface.<\/p>\n\n\n\n<p>In this post, we&#8217;d like to showcase a particular Craft CMS project that has been a significant milestone for us. We developed it for Hallingcast, a digital agency renowned for its forward-thinking approach and demand for excellence.&nbsp;<\/p>\n\n\n\n<p>Our collaboration with them not only highlights our multi-faceted technical expertise but also underscores our steadfast dedication to client satisfaction, delivering tailor-made solutions that result in top-quality outcomes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Client&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-1024x445.png\" alt=\"\" class=\"wp-image-22991\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-1024x445.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-300x130.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-768x334.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-1536x668.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-723x315.png 723w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast-1445x630.png 1445w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221646\/hallingcast.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/hallingcast.no\/en\/design-marketing\" target=\"_blank\" rel=\"noopener\" title=\"\">Hallingcast <\/a>is a Norwegian digital agency, offering a broad spectrum of services that span film production, photography, website development, and more.&nbsp;<\/p>\n\n\n\n<p>In addition to visual content creation, Hallingcast excels in enhancing online visibility for their clients through effective SEO strategies, ensuring websites not only look great but are also easy to find. They incorporate Artificial Intelligence into their projects as well, using it to complement traditional marketing methods effectively.<\/p>\n\n\n\n<p>Leveraging both in-house talent and external specialists as needed, Hallingcast adeptly navigates a wide range of marketing challenges, delivering comprehensive solutions that reflect a blend of creativity and strategic thinking.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>Hallingcast turned to us for assistance in creating their new corporate website using Craft CMS. Our primary task was to convert the Figma designs provided by the client into four full-fledged web pages:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Homepage&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Subpage<\/strong>&nbsp;<\/li>\n\n\n\n<li><strong>Blog overview page<\/strong><\/li>\n\n\n\n<li><strong>Article page<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Each of the pages on the list included specific custom features and dynamic effects that we were required to implement as well (see the details below).&nbsp;<\/p>\n\n\n\n<p>The client also requested our help with setting up the Craft CMS back end and installing and configuring several essential plugins to extend the website\u2019s functionality:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/plugins.craftcms.com\/reading-time?craft4=\" target=\"_blank\" rel=\"noopener\" title=\"\">Reading Time <\/a>to show the estimated reading time of blog posts, in minutes.<\/li>\n\n\n\n<li><a href=\"https:\/\/plugins.craftcms.com\/craftagram?craft4\" target=\"_blank\" rel=\"noopener\" title=\"\">Craftagram <\/a>to add Instagram feeds to the website.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/plugins.craftcms.com\/campaign\" target=\"_blank\" rel=\"noopener\" title=\"\">Campaign <\/a>for email marketing.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/plugins.craftcms.com\/formie?craft4\" target=\"_blank\" rel=\"noopener\" title=\"\">Formie <\/a>to create forms on the website.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/plugins.craftcms.com\/seomatic?craft4\" target=\"_blank\" rel=\"noopener\" title=\"\">SEOmatic <\/a>for search engine optimization.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/plugins.craftcms.com\/star-ratings\" target=\"_blank\" rel=\"noopener\" title=\"\">Star Ratings <\/a>for assessing blog posts.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>After resolving the financial and technical details, our developers got down to building Hellingcast\u2019s website. Here\u2019s what we did.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Homepage&nbsp;<\/h3>\n\n\n\n<p>First off, we handled the Homepage, which involved creating a number of interesting features.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Hero Section Videos&nbsp;<\/h4>\n\n\n\n<p>One of the most challenging tasks was adding two videos to the hero section:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A short background video<\/strong> that plays automatically on page load.<\/li>\n\n\n\n<li><strong>A longer video <\/strong>(uploaded to Craft CMS) that users can start themselves. To address this task, we added an image with a <strong>Play <\/strong>button to the hero section and a button under the tagline. Once the user clicks the <strong>Play <\/strong>button on the image or the <strong>Watch the movie here <\/strong>button, the text and image layers fade away and the main video starts playing with sound. The video has <strong>Pause <\/strong>and <strong>Stop <\/strong>buttons on top of it. Clicking the latter closes the video and displays the original hero section with the short background video.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"960\" height=\"500\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17093634\/homepage-videos_1.gif\" alt=\"\" class=\"wp-image-21062\"\/><\/figure>\n\n\n\n<p>To implement this functionality, we applied some JavaScript magic we\u2019re so famous for.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Main Page Heading with Sequentially Changing&nbsp; Letters and Words&nbsp;<\/h4>\n\n\n\n<p>Another amazing JavaScript effect that we added to the Homepage is the main heading with dynamically changing letters and words. The changing letters are like an anagram. First, English characters change into random Greek ones and then back into English characters to form a new word.&nbsp;<\/p>\n\n\n\n<p>For example, the words<strong> Interior Design<\/strong> change into Greek letters first and then back into English letters to display the word <strong>Marketing <\/strong>with a question mark at the end. The words are always picked at random but the same word is never displayed twice in a row (e.g., <strong>Marketing <\/strong>doesn\u2019t change into <strong>Marketing<\/strong>). The question mark only appears when the entire word has been formed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16121616\/main-heading.gif\" alt=\"\" class=\"wp-image-21011\"\/><\/figure>\n\n\n\n<p>Why did Hallingcast decide to do this trick with Greek letters? That\u2019s because many of their clients are not familiar with web development, photography, or marketing. And when we don\u2019t understand something, we often say \u201cIt\u2019s all Greek to me.\u201d Hence, the effect for more audience engagement and fun.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Open-Close for the Methodology Section&nbsp;<\/h4>\n\n\n\n<p>Our developers also created the JavaScript open-close effect for the Methodology section of the website\u2019s homepage. But apart from the sliding animation, we made this section more functional on the client\u2019s request by turning the scissors icon into a clickable element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17094820\/open-close.gif\" alt=\"\" class=\"wp-image-21070\"\/><\/figure>\n\n\n\n<p>Depending on the \u0441lient\u2019s current needs, by clicking on the scissors users can either open a specific web page or download a PDF document using their default browser. That can be set up in the Craft CMS back end.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Customers\u2019 Logos Carousel&nbsp;<\/h4>\n\n\n\n<p>Yet another feature that we created on the Homepage is a carousel displaying the logos of the agency\u2019s key customers. By default, groups of logos change automatically in a loop at an interval of a few seconds. Alternatively, users can click on one of the three dots at the bottom of the carousel to see the next group of logos.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122017\/logos-carousel.gif\" alt=\"\" class=\"wp-image-21015\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Featured Blog Articles&nbsp;<\/h4>\n\n\n\n<p>Finally, we set up the section with featured blog articles selected in a random order from the Craft CMS database. Clicking on a specific card takes you to that article in the blog.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17094634\/featured-articles.gif\" alt=\"\" class=\"wp-image-21067\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Subpage&nbsp;<\/h3>\n\n\n\n<p>A subpage is like a Lego constructor for the other pages of Hallingcast\u2019s website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Film &amp; Photography&nbsp;<\/li>\n\n\n\n<li>Webpages &amp; Tech<\/li>\n\n\n\n<li>Design &amp; Marketing&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The Subpage includes a hero section with a background image and an image specific to a certain page like Film &amp; Photography. It also features an \u201cimage+text\u201d list, an image gallery (with an image opening in a fancy box), a partners section for internal board members, Instagram images, a price table for hosting web pages, and a contact form.<br><br>Here\u2019s what the Subpage looked like in the design:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"986\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots-1024x986.png\" alt=\"\" class=\"wp-image-21019\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots-1024x986.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots-300x289.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots-768x739.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots-1536x1478.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122425\/Screenshots.png 1704w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The client wanted to use all those sections of the Subpage on the other pages, depending on the setup they chose.&nbsp;<\/p>\n\n\n\n<p>After converting the Subpage design into a fully functional web page with all the requested sections and features, we could easily build the rest of the pages. Here\u2019s a quick overview&nbsp;of those.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Film &amp; Photography Page&nbsp;<\/h5>\n\n\n\n<p>We added Instagram feeds to this page using the Craftagram plugin:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122635\/flim-photos.gif\" alt=\"\" class=\"wp-image-21022\"\/><\/figure>\n\n\n\n<p>Using JavaScript, we also created an image gallery, with each image opening in a lightbox:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17103518\/film-photography-lightbox-1.gif\" alt=\"\" class=\"wp-image-21081\"\/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Webpages &amp; Tech Page&nbsp;<\/h5>\n\n\n\n<p>A background video with an image atop of it:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16122802\/webpages-tech-hero.gif\" alt=\"\" class=\"wp-image-21024\"\/><\/figure>\n\n\n\n<p>An image from the<strong> Reference websites<\/strong> section opening in a lightbox:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17100143\/webpages-tech-lightbox.gif\" alt=\"\" class=\"wp-image-21076\"\/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Design &amp; Marketing Page&nbsp;<\/h5>\n\n\n\n<p>A logo from the <strong>References visual identity<\/strong> section opening in a lightbox:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17095253\/design-marketing-lightbox.gif\" alt=\"\" class=\"wp-image-21073\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Blog Overview Page&nbsp;<\/h3>\n\n\n\n<p>Our next target was the blog overview page, which was also abundant in interesting features. To begin with, we added the respective blog post cards collection to the Craft CMS database. Each card in the collection includes the following attributes:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Post photo&nbsp;<\/li>\n\n\n\n<li>Post title&nbsp;<\/li>\n\n\n\n<li>Post excerpt&nbsp;<\/li>\n\n\n\n<li>Author\u2019s photo&nbsp;<\/li>\n\n\n\n<li>Author\u2019s name&nbsp;<\/li>\n\n\n\n<li>Time to read&nbsp;<\/li>\n\n\n\n<li>Publication date&nbsp;<\/li>\n\n\n\n<li>Category (labeled with a specific color provided by the client)&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>A category page can be filled with six blog post cards. Besides, it includes a top-rated article card at the top of the page, spanning its entire width.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page-1024x483.png\" alt=\"\" class=\"wp-image-22993\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page-1024x483.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page-300x141.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page-768x362.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page-1536x724.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221815\/category-page.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In addition to the attributes listed above, we added the <strong>SPENSTIG <\/strong>(meaning \u201cBounce\u201d in English) stamp as an overlay graphic to the top-rated&nbsp;article card.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig-1024x327.png\" alt=\"\" class=\"wp-image-22994\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig-1024x327.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig-300x96.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig-768x245.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig-1536x491.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221845\/spenstig.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Another feature that we added to this page is filtering blog posts by categories. To implement it, we used the Asynchronous JavaScript and XML (AJAX) technology.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16123232\/blog-overview-filtering.gif\" alt=\"\" class=\"wp-image-21027\"\/><\/figure>\n\n\n\n<p>If a category contains a top-rated article, it\u2019s displayed at the top.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Article Page<\/h3>\n\n\n\n<p>Finally, we reached the Article page. It includes the following main attributes:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Post title&nbsp;<\/li>\n\n\n\n<li>Post category&nbsp;<\/li>\n\n\n\n<li>Author\u2019s photo<\/li>\n\n\n\n<li>Publication date&nbsp;<\/li>\n\n\n\n<li>Time to read&nbsp;<\/li>\n\n\n\n<li>Featured Image&nbsp;<\/li>\n\n\n\n<li>Blog post content&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost-1024x480.png\" alt=\"\" class=\"wp-image-22995\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost-1024x480.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost-300x141.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost-768x360.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost-1536x720.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221917\/blogpost.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We also added the share functionality to the Article page by means of the <a href=\"https:\/\/sharethis.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ShareThis<\/a><strong> <\/strong>plugin. The social media for sharing an article include <strong>Facebook, X, <\/strong>and <strong>LinkedIn.&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"478\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media-1024x478.png\" alt=\"\" class=\"wp-image-22996\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media-1024x478.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media-300x140.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media-768x359.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media-1536x717.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03221944\/social-media.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That\u2019s not all though. The most interesting feature on the Article page is the rating system that we implemented using the <a href=\"https:\/\/plugins.craftcms.com\/star-ratings\" target=\"_blank\" rel=\"noopener\" title=\"\">Star Ratings <\/a>plugin. It allows readers to evaluate a specific post based on a 5-star rating.<\/p>\n\n\n\n<p>When a user clicks the fifth, rightmost star, two things happen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The <strong>SPENSTIG <\/strong>stamp appears.&nbsp;<\/li>\n\n\n\n<li>As&nbsp; soon as the stamp hits the pad, the background of the rating frame (bright blue) shakes, producing a spectacular <strong>fountain of emojis.<\/strong> We customized this effect a bit on the client\u2019s request (number of emojis, time interval).&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17094410\/emoji-fountain-1.gif\" alt=\"\" class=\"wp-image-21065\"\/><\/figure>\n\n\n\n<p>Finally, there\u2019s a <strong>Related posts<\/strong> section at the bottom of the Article page, containing three blog post cards randomly selected from the Craft CMS database.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222019\/related-posts-1024x559.png\" alt=\"\" class=\"wp-image-22997\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222019\/related-posts-1024x559.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222019\/related-posts-300x164.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222019\/related-posts-768x419.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222019\/related-posts.png 1347w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Other Notable Features and Effects&nbsp;<\/h3>\n\n\n\n<p>Apart from page-specific features, we also created several website-wide sections and effects.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sticky Header&nbsp;<\/h4>\n\n\n\n<p>The sticky header remains fixed on scroll no matter the page a user is currently on.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16123618\/sticky-header.gif\" alt=\"\" class=\"wp-image-21031\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Animated Footer on Scroll&nbsp;<\/h4>\n\n\n\n<p>Another exciting feature that\u2019s universal for all the website\u2019s pages is a footer that only appears when a user scrolls down to the very bottom of a page. Notice how the footer\u2019s top edge smoothly joins the page\u2019s separator.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/17094520\/footer.gif\" alt=\"\" class=\"wp-image-21066\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Language Selector&nbsp;<\/h4>\n\n\n\n<p>We also made Hallingast\u2019s website bilingual by setting up the appropriate functionality in Craft CMS. The site\u2019s content is available in Norwegian (the primary language) and English.&nbsp;Notice the round flag icons that we added to the language selection dropdown, although the design originally featured no icons.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian-1024x451.png\" alt=\"\" class=\"wp-image-22998\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian-1024x451.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian-300x132.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian-768x338.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian-1536x677.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222050\/homepage-norwegian.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Homepage &#8211; Norwegian (default)<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english-1024x449.png\" alt=\"\" class=\"wp-image-22999\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english-1024x449.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english-300x131.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english-768x336.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english-1536x673.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/03222110\/homepage-english.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Homepage &#8211; English selected&nbsp;<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Outcome&nbsp;<\/h2>\n\n\n\n<p>As is the case with any complex project, regardless of the technology or content management system used, there were some comments and update requests from Hallingcast throughout the development process.&nbsp;<\/p>\n\n\n\n<p>Those concerned various page sections, features, and effects. For example, the client asked us to adjust the emoji fountains to appear 750 milliseconds earlier. Or, add more dots to the customer logos carousel on the homepage (initially, we only made two).&nbsp;<\/p>\n\n\n\n<p>However, Hallingcast was impressed with how expertly we managed to bring their vision to life right on the first attempt. Moreover, we delivered the project for review 10(!) days before the ETA. Here\u2019s what the client said at that point:&nbsp;<\/p>\n\n\n\n\n    <blockquote>\n        <p>Wow! Very cool that you managed to deliver before ETA! I have looked over it briefly. It looks very much how I imagined it.<\/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\/2024\/05\/16124200\/Anders-Medhus-150x150.jpg\" width=\"48\" height=\"48\" alt=\"Anders Medhus\"\n                    srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16124200\/Anders-Medhus-300x200.jpg 2x, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16124200\/Anders-Medhus-1024x683.jpg 3x\" \/>\n                <\/div>\n                        <div class=\"text-holder\">\n                                    <span class=\"h6\">Anders Medhus<\/span>\n                                <p>Owner and CEO of Hallingcast<\/p>\n            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<p>Our back-end developer who set up the functionality in Craft CMS was particularly lauded by the client for his expertise and skill:&nbsp;<\/p>\n\n\n\n\n    <blockquote>\n        <p>&#8230;and also a big shout out to the BE developer who did the setup BE for Craft. There seems to be lots of options to choose from which makes the site easy to customize from page to page.<\/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\/2024\/05\/16124200\/Anders-Medhus-150x150.jpg\" width=\"48\" height=\"48\" alt=\"Anders Medhus\"\n                    srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16124200\/Anders-Medhus-300x200.jpg 2x, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16124200\/Anders-Medhus-1024x683.jpg 3x\" \/>\n                <\/div>\n                        <div class=\"text-holder\">\n                                    <span class=\"h6\">Anders Medhus<\/span>\n                                <p>Owner and CEO of Hallingcast<\/p>\n            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<p>The entire project took us 26 business days to complete.&nbsp;<\/p>\n\n\n\n<p>Looking to build a website with Craft CMS under the hood, too? Look no further! Our team specializes in creating web solutions that leverage the power and flexibility of this amazing CMS.&nbsp;<\/p>\n\n\n\n<p>From bringing your unique designs to life to designing and developing your entire website from scratch, we&#8217;ve got you covered. Need custom tweaks to your current project? Or perhaps ongoing maintenance and support to keep your site running smoothly? We&#8217;re up for the challenge.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Tell us <\/a>about your Craft CMS development needs and watch your web vision become a reality.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how our team transformed Hallingcast&#039;s vision into a dynamic, feature-rich, and engaging website ahead of schedule, using the powerful Craft CMS platform. <\/p>\n","protected":false},"author":12,"featured_media":21000,"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,758],"tags":[836,774,760,766],"class_list":["post-20998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-craft-cms-development","tag-agencies","tag-cms-development","tag-custom-development","tag-qa-testing"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Yuliya Mikitenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/yuliya-mikitenko"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1-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\/craft-cms-development\" class=\"advgb-post-tax-term\">Craft CMS development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">Craft CMS development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/craft-cms-development\" class=\"advgb-post-tax-term\">Agencies<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/craft-cms-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/craft-cms-development\" class=\"advgb-post-tax-term\">Custom development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/craft-cms-development\" class=\"advgb-post-tax-term\">QA &amp; testing<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Agencies<\/span>","<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">Custom development<\/span>","<span class=\"advgb-post-tax-term\">QA &amp; testing<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 2 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on May 17, 2024","modified":"Updated on April 3, 2025"},"absolute_dates_time":{"created":"Posted on May 17, 2024 10:19 am","modified":"Updated on April 3, 2025 10:21 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1-723x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1-800x630.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1-770x510.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/05\/16120010\/Intro-preview-1.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/7401c84439e6a6c4aa6a8ff19e0d4605c2906fb2d668abb29f831e4a5affc943?s=96&d=mm&r=g","author_position":"Account Manager","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 8<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"winchester-white-website-transformation-wordpress-plugin-integration","name":"Redeveloping the Winchester White Website on WordPress for Easier Content Management"},"next_post":{"slug":"redeveloping-soljets-outdated-website-wordpress","name":"Redeveloping SOLJET's Outdated Website on WordPress"},"related_posts":["p2h-inc-is-top-perfroming-wordpress-developer-on-clutch","the-vibe-coding-tax-a-payment-integration-broken-by-ai-restored-by-engineering","cnt-ag-website-redesign-modern-ui-faster-ux-scalable-build"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/20998","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=20998"}],"version-history":[{"count":39,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/20998\/revisions"}],"predecessor-version":[{"id":24614,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/20998\/revisions\/24614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/21000"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=20998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=20998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=20998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}