Webflow CMS development is one of the latest additions to our long list of services. The popularity of this SaaS solution among businesses has recently been on the rise for two main reasons. <\/p>\n\n\n\n
First, this platform allows anyone without a technical background to run a website and edit its content easily. <\/p>\n\n\n\n
Second, unlike many similar tools (Squarespace, Wix, etc.), Webflow provides access to the underlying code. That enables web developers to create custom layouts and blocks, making websites unique and professional-looking. <\/p>\n\n\n\n
In this post, we discuss a case when our team assisted a creative agency from the United States with building their corporate website by leveraging the customization capabilities of Webflow CMS. <\/p>\n\n\n\n
The Mr. White Creative agency<\/a> is a \u201cgroup of highly skilled creatives that do big agency level work for clients of all sizes.\u201d The agency provides a wide range of services, including branding, graphic design, photography, UX\/UI design, and web design. <\/p>\n\n\n\n We were contacted by Michael White, the agency\u2019s Creative Director \/ Owner, who told us that they had a set of templates for a Webflow website and they needed help building them out. There were eight templates all in all which included a: <\/p>\n\n\n\n Michael provided the desktop and mobile designs of the pages, giving us free reign to create the tablet versions. <\/p>\n\n\n\n As for the CMS-based pages, they were only supposed to be the blog pages (the listing page and detail page) and the latest blog post titles on the homepage. The client asked us to make the website\u2019s components as reusable as possible. <\/p>\n\n\n\n Michael also wanted us to add some animations to the website. Those were mostly simple fade-in\/fade-up animations on scroll. The only big animation was the main hero background, which featured a list of the agency\u2019s services that cycled through the screen. <\/p>\n\n\n\n Another element that Michael requested was the animated filtering of the articles by category on the Scribbles page and the projects by service feature on the What We\u2019ve Done page. <\/p>\n\n\n\n To convert the templates into fully fledged animated web pages, we mostly used the responsive Webflow builder. Whenever the native Webflow capabilities were not enough to translate the client\u2019s idea into reality, we wrote custom HTML\/CSS\/JS code. <\/p>\n\n\n\n We also used Webflow CMS to build out the Scribbles listing and detail pages, plus display some blog post titles on the homepage. <\/p>\n\n\n\n To build out the contact form, we applied the default Webflow Forms functionality. <\/p>\n\n\n\n For reusable components, we used components with override fields that were set so that the client could later place unique content for each instance of the component. <\/p>\n\n\n\n Michael was satisfied with our performance but did have some comments and update requests when we delivered the work. <\/p>\n\n\n\n For example, one of his concerns was the way the logos panned across the homepage on the mobile and tablet versions. The movement seemed to be a bit too intense to him, so he wanted us either to place the logos in two rows or apply a lazy load. <\/p>\n\n\n\n Unfortunately, those options were not viable simply because that was the way that type of animation worked in Webflow. Placing the logos in two rows wouldn\u2019t change anything.<\/p>\n\n\n\n We always offer our clients the best solution for their particular project. In this case, we suggested that we should make a swipe for the logos. The client agreed and we fixed the issue in no time flat. <\/p>\n\n\n\n Michael also had another request. He wanted to be able to place quotes in specific locations on different blog detail pages. However, since we used the Webflow CMS to build the blog detail pages, it was impossible because the template for every blog post detail was the same and the data was fetched from the CMS.<\/p>\n\n\n\n To resolve the problem, we developed a static page template, which the client can now use to create pages with varying layouts and insert quotes wherever he sees fit. <\/p>\n\n\n\n To facilitate running the website, we put together a detailed guide for the client. It contains instructions on how to work with CMS Collection Lists\/Pages, Symbols, and Interactions. <\/p>\n\n\n\n Overall, it took us 55 business hours<\/strong> to build and animate the Mr. White Creative agency website. It was broken down like so: <\/p>\n\n\n\n The best evidence for us that the client was happy with our efforts was that he returned with another Webflow development project at a later date. <\/p>\n\n\n\n Want to be our next happy client? Write <\/a>to us. We\u2019ll be delighted to help. <\/p>\n","protected":false},"excerpt":{"rendered":" In this post, we talk about one of our Webflow 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":16541,"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,757],"tags":[836,774,812],"class_list":["post-16534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-webflow-development","tag-agencies","tag-cms-development","tag-webflow"],"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\/2023\/01\/25122515\/Intro-preview-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Case study<\/a>","Webflow development<\/a>"],"unlinked":["Case study<\/span>","Webflow development<\/span>"]},"tags":{"linked":["Agencies<\/a>","CMS development<\/a>","Webflow<\/a>"],"unlinked":["Agencies<\/span>","CMS development<\/span>","Webflow<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on January 25, 2023","modified":"Updated on April 3, 2025"},"absolute_dates_time":{"created":"Posted on January 25, 2023 12:42 pm","modified":"Updated on April 3, 2025 1:38 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/01\/25122515\/Intro-preview.png"},"featured_post_color":"#25bfb3","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/2bc1e2706ee61710b1ba07fb6d106e9c35f8baed29da8ff47798b1e63665bba7?s=96&d=mm&r=g","author_position":"Business Development Manager","reading_time":"<\/span> 3<\/span> min read<\/span><\/span>","prev_post":{"slug":"how-we-redeveloped-website-for-agency","name":"How We Redeveloped a Media & Design Agency's Website"},"next_post":{"slug":"best-wordpress-gallery-plugins","name":"6 Best WordPress Gallery Plugins to Try Out in 2023"},"related_posts":["fresh-products-webstore-development-for-fish-retailers","how-we-built-the-new-eezy-website-and-enhanced-its-functionality","how-we-customized-artday-wordpress-theme-for-the-qtex-brand"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16534","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=16534"}],"version-history":[{"count":22,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16534\/revisions"}],"predecessor-version":[{"id":24694,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16534\/revisions\/24694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/16541"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=16534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=16534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=16534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The Challenge <\/h2>\n\n\n\n
\n
The Solution<\/h2>\n\n\n\n
The Outcome <\/h2>\n\n\n\n
\n