Clara Homes
Category
Presentation, Real EstateTechnologies
Challenge
The client needed a website created in Webflow using the design provided, while allowing a way to easily update content in the future.
Each project page will have a similar structure, and a gallery will be present. The gallery will work as a masonry, and it must position and align images in a certain way based on the number of elements present.
The images need to be played in a slider once clicked.
Solution
We ended up using the Webflow CMS option because it allows us to store data in an organized way. We defined dedicated post types for projects and homes, while using custom fields that will store all the meta details necessary for the single page template to be created.
Key features
CMS implementation
A centralized way of storing data and add new content without requiring technical informationTemplating
Projects and homes are automatically getting generated with data pulled from the CMSIndividual elements
The templating uses individual elements saved in Webflow that can be reused and easily ordered if the template every requires adjustmentsAdjustable masonry
Custom JS script that will generate the project gallery in a masonry format and visualize it as slider carousel when interacting with it
Dynamic Content
Use Webflow CMS with custom fields to pull the correct posts to the front page based on their status change.
Custom post collection
Leveraged the CMS feature from Webflow to create collections with custom fields. Templates were built to pull data from the single collection element and display them properly on a main collection page.
Development presentation
Single page presentation for the development projects which includes a gallery and lightbox slider that plays when interacting with the images.
