How We Customized a Webflow Template for a Real Estate Agency

We are strongly convinced that building a fully custom web solution tailored to a business’s 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. 

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.

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. 

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

The Client 

New Home Buyer LLC 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. 

The Challenge

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

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

In general, we needed to address the following tasks: 

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

The Solution 

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’s blocks and manually populate the property listing with items, adding a redirect to the New Home Buyer portal. 

The reason was that the automatic population of the listing with data from the client’s portal was impossible due to the lack of a respective API. 

After the call, the work began. Here are the most notable things that we did. 

Homepage 

Animated Hero Image 

Initially, Kallia wanted us to apply the effect that she had seen in the Koch Finance 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. 

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. 

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: 

New Sections Below the Hero Image

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.  

At the client’s request, we also created a completely new section with builders’ names and logos. Each logo links to the respective builder’s website. 

How to Save Page 

Hero Image 

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. 

Simple Steps to Save Section 

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. 

The Savvy Way to Buy section 

We deleted the original Meet Our Team Section and created a new one entitled “The Savvy Way to Buy New” from the ground up, using the background images and text provided by the client.

Home Search Page 

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’s web portal. 

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:

Get Started Page 

Hero Section 

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. 

Contacts & Our Team Section

We also altered the right-hand part of the Contacts & Our Team section, as the screenshots below illustrate: 

The Outcome 

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:

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.

It took us 50 business hours to get the job done. Here is the breakdown: 

Development	QA	PM
40 hours	6 hours	4 hours

In addition to the development work, we also assisted Kallia in integrating her domain with the website and wrote a helpful guide with content editing instructions so that she could update the website content easily herself whenever she wanted. And, of course, we readily answered all Kallia’s questions about making changes to the template. 

Want to be our next happy client? Let’s talk!