Webflow Collection Reorder : modifiez rapidement l’ordre d’affichage des éléments d’une collection CMS

Introduction

Dans un projet Webflow, une organisation précise et bien pensée des contenus est essentielle pour créer les meilleures expériences web possible. Lorsque vous travaillez avec des collections CMS dans Webflow, l'ordre d'affichage des éléments de ces collections peut jouer un rôle crucial dans la création d’un site web bien structuré.

Cependant, cette tâche représente souvent une manipulation très fastidieuse et chronophage. Il existe toutefois une solution simple qui permet de rendre la réorganisation de vos collections CMS beaucoup plus rapide et intuitive.

Dans cet article, on va découvrir une technique pour trier rapidement et efficacement vos collections CMS grâce à une extension Chrome simple mais très pratique. Avec cette extension, vous pourrez gagner du temps et éviter les erreurs humaines. Découvrons donc comment cette extension peut améliorer votre workflow CMS dans Webflow.

L'importance de l'ordre d'affichage

Quand on parle de conception web, l'ordre dans lequel les éléments sont affichés peut s’avérer essentiel pour une expérience utilisateur fluide et cohérente.

D’abord, pour créer une hiérarchie logique :

L'un des objectifs fondamentaux d’une bonne conception web est de présenter l'information de la manière la plus claire et logique possible. L'ordre dans lequel les éléments sont présentés dans une collection CMS peut aider à établir une hiérarchie visuelle et à guider les visiteurs vers les contenus les plus importants.

Par exemple, sur un site e-commerce, il est essentiel que les produits soient classés dans un ordre logique, en plaçant les produits les plus populaires ou pertinents en tête de liste.

Ensuite, dans certaines situations, pour des questions d’équilibre ou d’esthétique :

Par exemple, il peut arriver que vous vouliez simplement réorganiser l’affichage des logos d’une collection CMS pour rendre le design plus esthétique et harmonieux.

En résumé : pouvoir contrôler facilement l'ordre d'affichage des éléments d’une collection CMS peut s’avérer très utile, que ce soit pour la compréhension de votre site web ou pour des raisons purement visuelles.

La solution “native” pour trier une collection CMS

Avant de détailler la meilleure solution, voyons comment trier une collection CMS dans Webflow sans l’extension (ça vous fera apprécier davantage l'efficacité de l’autre solution !).

Pour trier une collection CMS nativement, il faudrait suivre les étapes suivantes :

Créez la collection CMS

Ouvrez l’onglet CMS, créez une nouvelle collection et ajoutez lui les champs nécessaires.
Ajoutez dans cette collection un champ Nombre et appelez le “Ordre de tri” par exemple.

Ajoutez cette collection dans une page

Une fois la collection créée, ajoutez une Collection List à l’une de vos page.
Sélectionnez la Collection List et ouvrez les paramètres de l’élément dans le panneau de droite.
Dans l’onglet “Collection list settings”, ajoutez un paramètre “Sort Order”.
Dans la première liste déroulante, sélectionnez le champ de tri créé plus tôt.
Dans la seconde liste déroulante, choisissez un ordre (croissant ou décroissant).

Triez les éléments manuellement

Pour modifier l’ordre d’affichage des éléments de votre Collection List, suivez les étapes suivantes :

Une fois la Collection List créée, retournez dans les paramètres de votre collection.‍
Ouvrez les paramètres d’un élément et modifiez le champ de tri.‍
Saisissez dans ce champ la position à laquelle vous voulez que cet élément soit placé.
Sauvegarder les changements et fermez l’élément.‍
Répétez l’opération pour tous les éléments que vous voulez triez, l’un après l’autre, en veillant à bien respecter l’ordre dans lequel vous voulez les afficher.

Ce processus peut ne pas être si dérangeant si vous travaillez avec de toutes petites collections. Cependant, si vous travaillez avec des collections plus grandes et plus nombreuses, les modifications peuvent vite devenir très chronophages.

Un tri manuel peut aussi comporter un risque d'erreurs humaines, comme des numéros d'ordre incorrects (entraînant des corrections qui rendent le processus encore plus chronophage).

Maintenant qu’on a exploré le processus de tri manuel, vous comprendrez pourquoi une meilleure solution peut être un atout. Dans la section suivante, on passe en revue cette meilleure solution étape par étape.

Triez vos collections facilement avec Webflow Collection Reorder

Maintenant qu’on a passé en revue le processus natif de Webflow, voyons comment installer et utiliser une meilleure solution pour simplifier la modification de l’ordre d’affichage des éléments CMS avec Webflow Collection Reorder.

Webflow Collection Reorder est une extension Chrome conçue spécialement pour la problématique de cet article. Cette extension permet de rendre la réorganisation des éléments dans les collections CMS plus rapide, plus intuitive et moins sujette aux erreurs humaines.

Installez Webflow Collection Reorder

Pour installer l’extension, suivez les étapes suivantes :

Rendez-vous sur le Chrome Web Store.
Recherchez l’extension Webflow Collection Reorder.
Cliquez sur "Ajouter à Chrome" pour installer l'extension.

Voilà, l’extension est maintenant prête à être utilisée ! Maintenant que c’est le cas, suivez ces étapes pour tirer parti de l’extension et simplifier votre processus dans Webflow :

Créez (ou paramétrez) la collection CMS

Ouvrez l’onglet CMS, créez une nouvelle collection et ajoutez lui les champs nécessaires.
Ajoutez dans cette collection un champ Nombre et appelez le “Sort Order”.

Important : Le champ de tri doit impérativement être un champ Nombre et être nommé Sort Order. Sinon, la fonctionnalité ne marchera pas.

Ajoutez cette collection dans une page

Suivez le même processus que pour la solution native :

Une fois la collection créée, ajoutez une Collection List à l’une de vos page.
Sélectionnez la Collection List et ouvrez les paramètres de l’élément dans le panneau de droite.

Dans l’onglet “Collection list settings”, ajoutez un paramètre “Sort Order”.
Dans la première liste déroulante, sélectionnez le champ Sort Order.
Dans la seconde liste déroulante, choisissez un ordre (croissant ou décroissant).

Trier votre collection avec Webflow Collection Reorder

Accédez à la collection dans l’onglet CMS.

Cliquez sur le nouveau bouton “Sort” dans la barre supérieure de l’interface, ajouté par l’extension. Une fois cliqué, le bouton ouvrira un modal qui affiche en liste tous les éléments de la collection.

Pour réorganiser un élément, faites-le simplement glisser dans la position souhaitée.

Webflow Collection Reorder met automatiquement à jour le champ "Sort Order" pour appliquer le nouvel ordre, éliminant ainsi le besoin de le faire manuellement pour chaque élément.

Une fois les changements d’ordre effectué, cliquez sur Save pour enregistrez. En revenant sur la page où se situe la Collection List, vous verrez que l’ordre a bien été modifié.

En résumé, Webflow Collection Reorder est un outil pratique qui transforme le tri des collections CMS en une tâche rapide, intuitive et sans erreur. En utilisant cette extension, vous pouvez gagner du temps précieux et vous concentrer sur les éléments important de la création de votre site Webflow.

Conclusion

Dans cet article, on a présenté une nouvelle solution pour simplifier considérablement le processus de tri de vos collections CMS dans Webflow : l'extension Chrome Webflow Collection Reorder.

Les avantages de l’extension :

Gain de temps : vous économisez un temps considérable par rapport au tri manuel.
Limitation des erreurs : vous éliminez les risques d'erreurs humaines liées au tri manuel.
Réorganisation en masse : vous pouvez facilement réorganiser des collections volumineuses.
Maintenance facilitée : vous pouvez modifier l'ordre ultérieurement, c'est rapide et simple.

En utilisant Webflow Collection Reorder, vous pourrez optimiser votre workflow CMS dans Webflow. Vous pourrez consacrer moins de temps à des tâches fastidieuses de tri et plus de temps à la création de sites web qui captivent et retiennent l'attention de vos utilisateurs.

Pour aller plus loin et découvrir d’autres astuces Webflow, aller lire ces articles :