{"id":18029,"date":"2023-08-09T11:22:12","date_gmt":"2023-08-09T11:22:12","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=18029"},"modified":"2025-04-03T15:54:50","modified_gmt":"2025-04-03T15:54:50","slug":"how-we-customized-webflow-template-for-real-estate-agency","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/how-we-customized-webflow-template-for-real-estate-agency.html","title":{"rendered":"How We Customized a Webflow Template for a Real Estate Agency"},"content":{"rendered":"\n

We are strongly convinced that building a fully custom web solution tailored to a business\u2019s specific needs and requirements is the best approach hands down. To be honest, though, custom websites cost more than many entrepreneurs can afford, especially those who do business on their own. <\/p>\n\n\n\n

Thus, they have to use an alternative – a ready-made template, either free or premium, altering it to suit their needs. That, of course, cannot compare to a custom website as far as uniqueness is concerned since typically there are only minor adjustments to the layout, even though images and text are different.<\/p>\n\n\n\n

Still, when done right by professionals, customization can bring business owners tangible benefits in terms of cost efficiency and engagement. That is particularly true when it comes to Webflow templates, which are very flexible and easy to modify. <\/p>\n\n\n\n

In this connection, we want to discuss one of our Webflow template customization projects that we did for a solopreneur from the USA. <\/p>\n\n\n\n

The Client <\/h2>\n\n\n\n
\"\"
The New Home Buyer LLC web portal <\/em><\/figcaption><\/figure>\n\n\n\n

New Home Buyer LLC<\/a> is a US real estate agency that is owned and run by a single entrepreneur. It specializes in selling new construction residential homes, providing buyer consultations, listing property, performing marketing activities, negotiating, and more. <\/p>\n\n\n\n

The Challenge<\/h2>\n\n\n\n

We were contacted by the New Home Buyer LLC owner, Kallia Slupczynski, with a request to customize the Alley <\/a>Webflow template for real estate businesses that she had previously purchased and intended to use for her new website<\/a>. <\/p>\n\n\n\n

Before reaching out to us, Kallia had prepared a detailed list of all the customizations that she wanted us to make on each page.<\/p>\n\n\n\n

In general, we needed to address the following tasks: <\/p>\n\n\n\n

    \n
  1. Remove template blocks and add new ones. <\/li>\n\n\n\n
  2. Create custom blocks from scratch.<\/li>\n\n\n\n
  3. Add content, various assets, and a logo. <\/li>\n\n\n\n
  4. Animate still photos. <\/li>\n\n\n\n
  5. Implement custom widgets from the New Home Buyer web portal. <\/li>\n\n\n\n
  6. The template had its own CMS system under the hood. We needed to adapt it to display the property listing from the client\u2019s web portal (change tags, fill in required fields, etc.). <\/li>\n\n\n\n
  7. Connect the client’s domain. <\/li>\n<\/ol>\n\n\n\n

    The Solution <\/h2>\n\n\n\n

    Right off the bat, we had a call with Kallia where we discussed the most efficient implementation options. We agreed that the best way was to adapt the current (template) CMS to the client\u2019s blocks and manually populate the property listing with items, adding a redirect to the New Home Buyer portal. <\/p>\n\n\n\n

    The reason was that the automatic population of the listing with data from the client\u2019s portal was impossible due to the lack of a respective API. <\/p>\n\n\n\n

    After the call, the work began. Here are the most notable things that we did. <\/p>\n\n\n\n

    Homepage <\/h3>\n\n\n\n
    \"\"
    The hero section on the Alley template homepage <\/em><\/figcaption><\/figure>\n\n\n\n

    Animated Hero Image <\/h4>\n\n\n\n

    Initially, Kallia wanted us to apply the effect that she had seen in the Koch Finance<\/a> template on her own website’s homepage. On a closer review, though, we discovered that the hero image on the Koch Finance main page was a video. <\/p>\n\n\n\n

    \"\"
    The video in the hero section on the Koch Finance template homepage <\/em><\/figcaption><\/figure>\n\n\n\n

    Making a similar professional-looking video would add quite a hefty amount to the total bill. Besides, videos normally increase web page loading speed, which is bad from a UX point of view. <\/p>\n\n\n\n

    We suggested a more cost-efficient alternative: using custom CSS code to implement the motion effect that closely resembled the Koch Finance homepage video. Kallia liked the idea and gave us the green light to proceed. Here is the result: <\/p>\n\n\n\n

    \"\"
    The  animated hero image on the New Home Buyer homepage<\/em><\/figcaption><\/figure>\n\n\n\n

    New Sections Below the Hero Image<\/h4>\n\n\n\n

    We also replaced the original text below the hero image with a new custom section that we coded from scratch. It includes three items with the text that Kallia provided.  <\/p>\n\n\n\n

    \"\"
    The new section that we custom-coded from scratch <\/em><\/figcaption><\/figure>\n\n\n\n

    At the client\u2019s request, we also created a completely new section with builders\u2019 names and logos. Each logo links to the respective builder\u2019s website. <\/p>\n\n\n\n

    \"\"
    A custom section with builders\u2019 names and logos <\/em><\/figcaption><\/figure>\n\n\n\n

    How to Save Page <\/h3>\n\n\n\n

    Hero Image <\/h4>\n\n\n\n

    The How to Save page is based on the Alley template About page. First, we replaced the hero image with one provided by the client and animated it, simulating motion just like we did with the hero image on the homepage. We also changed the main text and the button label. <\/p>\n\n\n\n

    \"\"
    The original hero image on the Alley template About page <\/em><\/figcaption><\/figure>\n\n\n\n
    \"\"
    The new animated hero image on the N<\/em>ew Home Buyer<\/em> How to Save page<\/em><\/figcaption><\/figure>\n\n\n\n

    Simple Steps to Save Section <\/h4>\n\n\n\n

    Just like we did on the home page, we added the 3-item custom-coded section to the How to Save page, but under a different title. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The Savvy Way to Buy section <\/h4>\n\n\n\n

    We deleted the original Meet Our Team Section and created a new one entitled \u201cThe Savvy Way to Buy New\u201d from the ground up, using the background images and text provided by the client. <\/p>\n\n\n\n

    \"\"
    The Savvy Way to Buy New section <\/em><\/figcaption><\/figure>\n\n\n\n

    Home Search Page <\/h3>\n\n\n\n

    The Home Search page is based on the Alley template Buyer page. The most notable modification that we implemented here was related to the property listing. As mentioned before, there was no API to enable the automatic population of the listing on the website with real-time data from the client\u2019s web portal. <\/p>\n\n\n\n

    Therefore, we needed to adapt each item for the data that could be retrieved from the portal and populate it with the details manually. Take a look at what we achieved:<\/p>\n\n\n\n

    \"\"
    The New Home Buyer property listing on the Home Search page <\/em><\/figcaption><\/figure>\n\n\n\n

    Get Started Page <\/h3>\n\n\n\n

    Hero Section <\/h4>\n\n\n\n

    The Get Started page is the edited Alley template Contact page. As you can see in the screenshot below, we completely changed the hero section here, using the same custom-coded 3-item section that we used on other pages, and removing the original image. <\/p>\n\n\n\n

    \"\"
    The default hero section on the Alley template Contact page<\/em><\/figcaption><\/figure>\n\n\n\n
    \"\"
    The hero section on the New Home Buyer Get Started page<\/em><\/figcaption><\/figure>\n\n\n\n

    Contacts & Our Team Section<\/h4>\n\n\n\n

    We also altered the right-hand part of the Contacts & Our Team section, as the screenshots below illustrate: <\/p>\n\n\n\n

    \"\"
    The Contacts & Our Team section on the Alley template Contact page<\/em><\/figcaption><\/figure>\n\n\n\n
    \"\"
    The Contacts section on the New Home Buyer Get Started page <\/em><\/figcaption><\/figure>\n\n\n\n

    The Outcome <\/h2>\n\n\n\n

    There were other elements that we removed, updated, or added, such as the website footer or FAQ section on the How to Save page. Kallia did have some comments when we finished the work. On the whole, though, she was completely satisfied with our performance, speed, and quality. Here is what she said: <\/p>\n\n\n\n\n

    \n

    I am so glad I decided to work with GetDevDone P2H! My project manager and her team did an excellent job in executing my vision into my website. I started by sending the team a template and a task list of what I wanted. We had a virtual meeting to discuss my needs and review their process and cost. After the meeting, the PM emailed me a summary of everything we talked about, and the team got started right away. I was updated frequently throughout the process. They were extremely efficient, and responsive. Not only did they execute my expressed needs, but they made suggestions on how to solve unexpected obstacles and help me stay on budget. If there were new ideas I wanted to add to my site, the team was patient with my changes. In the few instances when words were misunderstood, the PM was understanding to my request and the team was willing to try until I was satisfied with the results. At the end I was given the opportunity to review the website again to ensure it looked the way I desired. I am very happy with the results of my website.<\/p>\n