Sunology is a company based in Nantes with the ambition of popularizing the use of solar energy within private household. In collaboration with François, the Product Owner, I successfully developed the Tous gagnants platform, which aims to disseminate reliable and high-quality information about solar energy to the public. For this project, the design had already been produced, so I intervened as a Webflow developer.
The main objectives of this mission were: Structuring the CSS to have a reliable and sustainable organization and architecture, creating and configuring different CMS collections to efficiently organize content, and developing the provided mockups.
To ensure a solid and functional structure, I developed the Tous gagnants platform following the nomenclature and recommendations of Finsweet and their Client First guide. In addition to being comprehensive and adaptable to any project, Finsweet's Client First is well-documented and accompanied by numerous tutorials on YouTube. Thus, it will be easy for any developer to evolve the site in the future.
Defining the CSS and creating a reference style guide on Webflow allowed me to develop the various screens quickly and efficiently. However, I encountered some obstacles that I overcame by doing simple research:
How to create a dynamic breadcrumb on Webflow?
To create a dynamic breadcrumb on Webflow, simply create a Multi-reference CMS field and organize these fields according to the desired breadcrumb. This video explains all the steps to follow to achieve this.
How to display dates of a CMS item in French on Webflow (or in a language other than English)?
To display the CMS date in a language other than English, you need to add a few lines of custom code to your project. All information can be found in this article.
How to have multiple layouts on a single CMS page template on Webflow?
It is possible to create as many layouts as desired for a CMS collection. To do this, create these layouts in the editor, identify them with a CSS class, and link them to Webflow CMS elements by creating a "Layout" field in the collection. This Webflow live stream explains clearly the steps to follow to create a multi-layout template.