How can I overlay the individual houses onto the plan in Webflow and allow the client to set each house's status via the CMS?
Published on
September 22, 2023
To overlay individual houses onto a plan in Webflow and allow the client to set each house's status via the CMS, you can follow these steps:
- Plan Layout:
- Create a plan layout using the Webflow Designer, where you can display a map or an image of the plan.
- Use div blocks or image components to represent each house on the plan.
- Create CMS Collection:
- Go to the Webflow CMS and create a new collection to manage the house data.
- Define fields in the collection to hold information about the houses, such as house name, status, coordinates, etc.
- Connect Collection to Plan:
- On the plan layout page, select the div or image representing a house.
- In the Element Settings panel, connect the element to the CMS collection and choose the appropriate field for the house name.
- Add a dynamic link to the house details page to allow the client to see more information about each house.
- Set House Status:
- On the house details page, add a checkbox or dropdown field to allow the client to set the house status.
- Connect this field to the CMS collection and the corresponding status field.
- Make sure to style the checkbox or dropdown as desired to fit your design.
- Display Status on Plan:
- On the plan layout page, select the div or image representing a house.
- Use a conditional visibility setting to show or hide the house based on its status field value.
- For example, if a house is marked as sold in the CMS, you can hide it from the plan view.
- Publish and Test:
- Once you have set up the CMS collection, connected the elements, and styled them, publish your site to see the changes.
- Go to the CMS editor and test the functionality by updating the house status and checking if the plan view reflects the changes.
By following these steps, you can overlay individual houses onto the plan in Webflow and allow the client to set each house's status via the CMS.
Additional Questions:
- How do I create a plan layout in Webflow?
- Can I customize the appearance of the overlay for each house on the plan in Webflow?
- Is it possible to add additional fields to the CMS collection for more house details in Webflow?
