{"id":17884,"date":"2023-07-26T12:50:54","date_gmt":"2023-07-26T12:50:54","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=17884"},"modified":"2025-04-03T21:51:00","modified_gmt":"2025-04-03T21:51:00","slug":"how-we-used-webflow-to-redevelop-winona-lake-grace-church-website","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/how-we-used-webflow-to-redevelop-winona-lake-grace-church-website.html","title":{"rendered":"How We Used Webflow to Redevelop the Winona Lake Grace Church Website as Part of Our Pro Bono Initiative"},"content":{"rendered":"\n<p>Giving back to society is high on our list of priorities. We are committed to helping nonprofits and charitable organizations reach out to the maximum number of people to promote their noble causes. To back it up, GetDevDone has a special pro bono programme that allows charities and nonprofits to have a working website entirely free or at greatly discounted rates.&nbsp;<\/p>\n\n\n\n<p>Today, we want to tell you about a case like that &#8211; the development of the Winona Lake Grace Church (WLGC) <a href=\"https:\/\/www.wlgrace.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">website <\/a>that we did for just <strong>half of our standard price.<\/strong>&nbsp;&nbsp;<\/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\/2023\/07\/03215055\/wlgrace-1024x445.png\" alt=\"\" class=\"wp-image-22960\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-1024x445.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-300x130.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-768x334.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-1536x668.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-723x315.png 723w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace-1445x630.png 1445w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/03215055\/wlgrace.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Winona Lake Grace Church is part of the network of churches, campuses, and ministries in the USA and Canada. Its mission is to \u201cworship Jesus, love each other, and reach our world.\u201d&nbsp;<\/p>\n\n\n\n<p>We were contacted by the Winona Lake Grace Church Communication Assistant Nolan Perry. He told us that he had found our company through <a href=\"https:\/\/webflow.com\/@p2h-inc\" target=\"_blank\" rel=\"noopener\" title=\"\">Webflow\u2019s website<\/a>. Since <strong>we were the first to respond, thoroughly investigated the project, and offered the nonprofit discount alone among multiple providers<\/strong>, the church decided to collaborate with us.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>When the WLGC reached out to us, it already had a live WordPress-based website. However, there were some issues with it that needed fixing.&nbsp;<\/p>\n\n\n\n<p>Specifically, the UI\/UX design was below par. It was confusing, there was not much style, and it didn\u2019t benefit the user. The biggest issue was the poor responsiveness on mobile devices, especially on the <strong>Sermons <\/strong>page.&nbsp;<\/p>\n\n\n\n<p>To address the issues, the client created new designs of the website\u2019s pages that followed the essential usability principles. Our task was to convert those mockups into a fully developed website using <strong>Webflow as the page builder <\/strong>and <strong>content management system<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Nolan chose Webflow because of its powerful features and a lot of positive feedback about it. He didn\u2019t want to go with a basic template that hundreds of people used because of a lack of personality. The WLGC wanted to stand out in comparison to other churches in the area, and Nolan believed that Webflow would be able to help them achieve that goal more efficiently than other platforms.&nbsp;<\/p>\n\n\n\n<p>As mentioned earlier, responsiveness was one of the client\u2019s biggest pain points. He gave us free reign in how we approached the task of making the website render well on mobiles. Besides, Nolan wanted to have some nice, subtle animations that added to the feel of the site.&nbsp;<\/p>\n\n\n\n<p>The client was also concerned about making the Sermons functionality as user friendly as possible. The church holds frequent sermons that are recorded on video. Those recordings are then uploaded to the website.&nbsp;<\/p>\n\n\n\n<p>The Sermons functionality on the old website was not efficient or flexible enough. Our task was to improve it both on the front-end and back-end sides, simplifying the management of sermons and sermon series.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<p>To get the job done, we used the following tools and technologies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>Webflow Designer <\/strong>to convert the client\u2019s mockups into fully developed web pages.&nbsp;<\/li>\n\n\n\n<li>CSS and JavaScript to add custom styles and dynamic effects to the pages and page elements, as well as to create some advanced features such as searching and filtering through sermons.&nbsp;<\/li>\n\n\n\n<li>The<strong> Webflow CMS <\/strong>to set up several chuch-specific CMS collections for quick content generation and manipulation.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Here is what we did exactly.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Website-Wide Features&nbsp;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Reusable Components&nbsp;<\/h4>\n\n\n\n<p>We built three reusable components: Header, Footer, and Team Item. These are global components that the website administrator can just drag and drop when creating new pages. Once changes are made on one page, they will automatically render on all pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sticky Navigation Bar&nbsp;<\/h4>\n\n\n\n<p>We made a sticky navigation bar that remains in place on scroll regardless of the page the user is browsing.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Animation on Scroll<\/h4>\n\n\n\n<p>We also added animation on scroll to every page of the website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pages&nbsp;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Home&nbsp;<\/h4>\n\n\n\n<p>The Home page contains several sections intended to give the user a general idea of the church and its activities. It has several sections with various dynamic features and videos. Here are the most notable ones.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Most Recent Sermons&nbsp;<\/h5>\n\n\n\n<p>This section contains a video of the most recent sermon that is <strong>uploaded automatically from the CMS<\/strong> using the <strong>Recent Sermons<\/strong> CMS collection that we created<strong>. <\/strong>The user can either play the sermon inline by clicking on the play button in the embedded Vimeo video player or on the <strong>Watch <\/strong>button that opens the corresponding sermon series page in the same tab.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">About&nbsp;<\/h4>\n\n\n\n<p>The <strong>About <\/strong>page presents some essential information about the church: its mission, ideals, and staff members. Here are the main features that we added to this page.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">What We Believe<\/h5>\n\n\n\n<p>We created a three-item accordion for this section. In addition, we replicated the old <strong>Statement of Faith<\/strong> page in Webflow. It opens in the same tab on clicking the <strong>Read more <\/strong>button.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Meet our team&nbsp;<\/h5>\n\n\n\n<p>This is a collection of cards with the positions and names of the church staff members. Each card includes the <strong>Contact <\/strong>button. Clicking on one brings up a popup for writing a message to the specific staff member.&nbsp;<\/p>\n\n\n\n<p>The client wanted each staff member to receive a personal email whenever someone contacts them from the website without the sender knowing the staff member\u2019s email address. To handle that task, we integrated the popup with the <a href=\"https:\/\/zapier.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Zapier <\/a>platform.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Groups&nbsp;<\/h5>\n\n\n\n<p>For the Groups page we created the corresponding <strong>Groups <\/strong>CMS collection. It allows the website administrator to create identically looking pages for each specific group of people quickly.&nbsp;<\/p>\n\n\n\n<p>We also used a multi-reference field to connect groups with the bottom cards. That allows you to choose any number or type of card to display there.<\/p>\n\n\n\n<p>The client wanted the same image-text cards to render on the pages with the ability to choose the number of cards in each particular case. Thus, rather than making a card with the same item over and over again, we just created a collection of cards &#8211; Connect Cards.&nbsp;<\/p>\n\n\n\n<p><em>Groups \/ Men &#8211; Two Connect Cards&nbsp;<\/em><\/p>\n\n\n\n<p>In the Groups, we assigned the Connect Cards as a multi-reference field. The client can now add any number and types of cards.<\/p>\n\n\n\n<p><em>Groups \/ Life Groups &#8211; <\/em><strong><em>Four <\/em><\/strong><em>Connect Cards&nbsp;<\/em><\/p>\n\n\n\n<p>We also created several CMS collections for other website pages to facilitate content management, such as Global Ministries, Local Ministries, Our Ministries, and more.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sermons&nbsp;<\/h4>\n\n\n\n<p>The user-friendly and mobile-optimized Sermons page was the client\u2019s key focus. To meet his requirements, we created several CMS collections to simplify uploading and searching for videos:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recent Sermons<\/li>\n\n\n\n<li>Sermon Series&nbsp;<\/li>\n\n\n\n<li>Teachers&nbsp;<\/li>\n\n\n\n<li>Scriptures<\/li>\n<\/ul>\n\n\n\n<p>The top section features the most recent sermons by default. Once a new sermon is added to the Recent Sermons collection, it is automatically displayed leftmost in that section. Clicking on a card opens the corresponding sermon series page in the same tab.&nbsp;<\/p>\n\n\n\n<p>We have the Recent Sermon and Teaching Series as two different CMS pages that share several categories: Sermon Series, Teacher, and Scripture as reference fields. So we can assign relative items to certain fields.&nbsp;<\/p>\n\n\n\n<p>We used a reference field like that to filter certain cards using the Finsweet attribute.<\/p>\n\n\n\n<p>Using JavaScript, we also created the <strong>Search &amp; Filter<\/strong> functionality. The user can enter a keyword into the search box or filter the sermons by the Teacher, Sermon Series, or Scripture criteria. The Reset filter feature is there as well.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sermon Series Page&nbsp;<\/h4>\n\n\n\n<p>As mentioned above, this page opens either from the Home or Sermons page. Each sermon belongs to a series, so the user sees the list of sermons in the series (e.g, Ecclesiastes) to the right of the specific sermon video. The most recent sermon is automatically listed first. The user can open any video in that list and it will appear in the video box on the left.&nbsp;<\/p>\n\n\n\n<p><br>Below the video there is an accordion section with the sermon resources. Every series is automatically populated with sermon recordings that are added to the Sermon Series collection.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Outcome&nbsp;<\/h2>\n\n\n\n<p>We met all the client\u2019s expectations in full. The new WLGC website renders perfectly on mobile devices. Its content is easy to update and modify thanks to the handy Webflow collections that we created. That is especially true when it comes to working with sermons: displaying recent videos, adding sermons to specific series, and searching for sermons using various criteria.&nbsp;<\/p>\n\n\n\n<p>We also wrote a detailed guide so that the website administrator could easily manipulate the content inside the CMS without our assistance. Nolan was completely satisfied with our attention to detail, diligence, and skills. Here is a quote from him:&nbsp;<\/p>\n\n\n\n\n    <blockquote>\n        <p>Working alongside you and the team has been very positive. Even from the start, you were the first team to reach out to our request we sent through Webflow. You were very quick to respond, and very helpful in your explanations. I also want to mention the 50% discount you gave us for being non-profit, which allowed us to go through with the project. This was very much appreciated. Every interaction with you was kind, understanding, and heartfelt.The final result ended up looking exactly like I had designed it. I was very impressed. I would recommend your team to anyone wanting to build a website.rnrnA final thank you for all you and the team has done. It\u2019s much appreciated!rn<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                    <span class=\"h6\">Nolan Perry<\/span>\n                                <p>Communication AssistantrnWinona Lake Grace Church <\/p>\n            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<p>Want to be our next&nbsp; happy client? Let\u2019s <a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noopener\" title=\"\">get in touch<\/a>!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how we used Webflow to redevelop a website as part of our commitment to giving back to society. <\/p>\n","protected":false},"author":13,"featured_media":17886,"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":[761,774,851,812],"class_list":["post-17884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-webflow-development","tag-api-third-party-integrations","tag-cms-development","tag-nonprofits","tag-webflow"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Anya Pozdniakova","author_link":"https:\/\/getdevdone.com\/blog\/author\/anya-pozdniakova"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/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\/webflow-development\" class=\"advgb-post-tax-term\">Webflow development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">Webflow development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/webflow-development\" class=\"advgb-post-tax-term\">API \/ third-party integrations<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/webflow-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/webflow-development\" class=\"advgb-post-tax-term\">Nonprofits<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/webflow-development\" class=\"advgb-post-tax-term\">Webflow<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">API \/ third-party integrations<\/span>","<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">Nonprofits<\/span>","<span class=\"advgb-post-tax-term\">Webflow<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on July 26, 2023","modified":"Updated on April 3, 2025"},"absolute_dates_time":{"created":"Posted on July 26, 2023 12:50 pm","modified":"Updated on April 3, 2025 9:51 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/07\/26121357\/Intro-preview-1.png"},"featured_post_color":"#9056e0","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/dc71cf0a9eb748331073dc31691b996b81a34904f25b01ea890a82b4dead8cfd?s=96&d=mm&r=g","author_position":"Project 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":"interactive-map-for-fundraising-site-supporting-ukraine","name":"How We Developed an Interactive Map for a Fundraising Website Supporting Ukraine"},"next_post":{"slug":"getdevdone-ranked-among-top-100-it-services-companies","name":"GetDevDone Ranked Among Top 100 IT Services Companies in the USA for 2023 by Techreviewer.co"},"related_posts":["how-we-customized-webflow-template-for-real-estate-agency","ai-personalization-and-retention-transforming-sms-and-on-site-experience-into-growth-drivers","building-a-complex-wordpress-powered-online-platform-for-the-music-publishers-association"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/17884","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=17884"}],"version-history":[{"count":31,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/17884\/revisions"}],"predecessor-version":[{"id":24701,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/17884\/revisions\/24701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/17886"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=17884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=17884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=17884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}