Bienvenue, chers lecteurs, dans ce second volet de notre exploration approfondie de Webflow. Après avoir traité de la manière d'établir une landing page d'exception dans notre précédent article, il est temps de plonger dans les méandres du CMS de Webflow. Et croyez-moi, ce n'est pas moins excitant que de découvrir un trésor caché dans votre jardin, sauf que dans ce cas, le trésor est un ensemble de champs ultra-polyvalents qui vont métamorphoser votre gestion du contenu !
Pour ceux qui pensent que les champs dans un CMS sont aussi passionnants que de regarder de la peinture sécher, détrompez-vous !
Webflow a réussi l'exploit de rendre chaque champ non seulement fonctionnel mais également fascinant. Vous trouverez plus de polyvalence et d'opportunités dans ces petits rectangles que dans une salle de bal remplie de contorsionnistes.
Mais je m'emballe, allons droit au but...
Types de Champs
Champs de textes "simple"
Je ne vais pas vous faire un dessin, mais il s'agit d'un champ simple, soit multi-lignes, soit uniligne, vous permettant de renseigner une phrase, ou un mot en fonction de vos besoins.
Voici quelques exemples d'utilisation pour vous montrer les possibilités :
- Temps de lecture d'un blog
- Nom d'une catégorie ou d'un auteur
- Description
- SEO Title Tag ou Meta Description
- etc etc
Champs d'images
Ensuite, nous avons le champ d'image.
Vous avez deux options :
- L'image simple
- La gallerie
Dans le champ image simple, vous pouvez ajouter une image de votre choix, que vous pourrez par la suite utiliser pour illustrer votre contenu.
Dans la galerie, vous pouvez ajouter jusqu'à 24 images. Dans la page template, vous pourrez lister ces images sous la forme de votre choix.
Si vous avez du mal à vous imaginez où cela pourrait vous servir, voici quelques sites de nos clients avec utilisation de la galerie :
🤔 Pourquoi ne pas utiliser un champ simple ?
En terme de vitesse d'import pour commencer, avec la galerie vous pouvez importer beaucoup d'image d'un seul coup. Et pour les re-ordoner, ça se fait avec du drag and drop, c'est parfait !
Ensuite, le nombre de champs disponibles dans un CMS n'est pas illimité (vous avez le droit à 60) donc mieux vaut avoir un unique champ pour votre galerie.
Pour terminer, la flexibilité. Ce sera à vous de choisir pour chacun de vos projets si vous souhaitez une ou vingt images, sans avoir à remplir des tas de conditions de visibilité.
Les images simples peuvent être utilisées comme image de fond d'un élément.
Champ de Référence
Pour ceux qui ont une affinité pour les relations complexes, le champ de référence est votre meilleur allié. Il vous permet de lier différentes collections entre elles, créant ainsi un réseau d'informations interconnectées aussi complexe qu'un roman de Tolstoï.
Les références vous permettront de lier un ou plusieurs éléments d'une collection CMS à cette même collection ou une autre.
Exemple d'usage :
- L'auteur
- Les clients
- Les catégories ou tags
- Les éléments associés (dans le blog par exemple, des articles similaires)
🌸 L'avantage d'utiliser ce type de champ est que vous pouvez ajouter d'autres informations reliée à cette information qui seront utilisable dans la collection principale et dans celle où vous lier l'élément, comme la photo de profile, le logo de l'entreprise, une couleur associée à la catégorie, etc. Et vous n'aurez à changer cette information qu'une seule fois pour que ce soit mis à jour partout.
Même si ces champs semblent être magiques, ils possèdent certaines limitations, qu'il serait trop complexe de vous expliquer dans cet article. Si vous êtes designer, je vous conseille de vous rapprocher de vos développeurs Webflow pour vérifier la faisabilité de vos idées.
Champ lien
Ce champ vous permet de mettre un lien vers :
- une page de votre site,
- une page vers un site externe,
- un raccourci pour envoyer un mail à une certaine adresse
- un raccourci pour envoyer un numéro de téléphone
Champ booléen
Un champ de type booléen permet de dire "oui" ou "non".
Ce dernier se présente sous forme d'un switch dans le CMS.
En général, il sera utilisé pour jouer sur l'affichage de certains éléments dans la page ou pour filtrer les éléments quand vous allez par exemple choisir les articles de votre blog à mettre en avant.
Champ couleur
Ce champ est très utile pour avoir une flexibilité dans le design des pages template en ajoutant une couleur différente pour chacune de vos pages template.
Ces couleurs peuvent s'appliquer à
- Un texte
- Un fond
- Une bordure
Champ vidéo
Ce champ vous permet d'insérer ensuite dans votre page template une vidéo.
Champ numéraire
Ce champ est comme un champ texte mais permet uniquement de renseigner un nombre.
Vous pouvez choisir le format du nombre (entier, relatif) et aussi indiquer s'il peut être négatif ou non.
Ce champ peut-être particulièrement utile pour trier vos éléments selon un ordre définit "arbitrairement" dans le Webflow (contrairement aux tris les plus courants comme celui par ordre alphabétique ou par date)
Champ d'option
Proche de la référence, ce dernier permet d'uniformiser les valeurs possibles pour un champ. Il peut être utile pour des catégories par exemple.
Comme pour la référence, vous pourrez modifier en une seule fois le nom d'une option, par exemple si vous voulez remplacer "Végétarien" par "Végé" parce que vous trouviez ça trop long, c'est très rapide, alors que si vous aviez utilisé un champ libre, il aurait fallu passer sur chaque élément un par un.
A noter que contrairement à l'utilisation de la référence, vous n'aurez pas de page dédiée qui se créée, et qu'il vous faudra ajouter à la main cette nouvelle information si à des endroits de votre site vous listiez toutes les options, là où pour le champ de type référence, cela se fait automatiquement.
Champ richtext
Mon petit chouchou quand il s'agit de faire un blog ou des études de cas.
Il vous permet d'ajouter du contenu structuré, un peu comme sur un word. Vous choisissez combien de titres , images, ou vidéos vous souhaitez dans la champ, et cela peut varier d'une page à l'autre.
😁 Pssst, nous avons même développé un addon qui permet de faire un sommaire automatique d'un richtext. C'est celui que nous utilisons dans nos blogs.
Comment bien choisir mon type de champ ?
La sélection appropriée des champs dans le CMS de Webflow est une étape cruciale qui peut influencer la flexibilité, l'efficacité et la facilité d'utilisation de votre système de gestion de contenu. Un choix inadéquat peut entraîner des complications dans la gestion des données et réduire les performances de votre site web. Il est donc vital de prendre en considération le type de contenu que chaque champ accueillera. Par exemple, le choix d'un champ de texte pour un contenu nécessitant des valeurs numériques entraverait la possibilité d'effectuer des calculs ou des triages basés sur ces données.
Un autre aspect à considérer est la relation entre les différentes collections de données. Si votre contenu doit être associé à d'autres éléments d'une collection différente, le champ de référence est le choix le plus judicieux. Ce champ vous permet de créer des relations complexes entre différentes collections, offrant ainsi une plus grande polyvalence dans l'organisation du contenu. Il permet une gestion plus fluide des données en évitant la redondance et en facilitant l'accès à des informations connexes.
Enfin, l'optimisation pour les moteurs de recherche (SEO) et l'expérience utilisateur (UX) sont d'autres facteurs qui peuvent influencer votre décision. Les champs comme l'URL slug et le champ SEO Meta Title sont cruciaux pour le référencement, tandis que les champs d'image et de vidéo peuvent être optimisés pour réduire le temps de chargement et améliorer l'expérience utilisateur. Réfléchir à la façon dont chaque champ interagit avec ces facteurs peut vous aider à créer un site Web plus efficace et plus convivial.
