Maîtriser Webflow : un aperçu complet pour les développeurs et designers

J'ai récemment eu l'occasion de reconstruire le site web de Aidi de zéro sur Webflow. Aidi, une plateforme destinée aux propriétaires de projets de construction pour la gestion complète des projets, avait besoin d'un site qui puisse clairement mettre en valeur leurs solutions pour les propriétaires de projets publics et privés. Puisque leur site initial était déjà hébergé sur Webflow, nous avons choisi de rester sur cette plateforme pour une transition fluide. De plus, la flexibilité de Webflow permettait à leur équipe de gérer indépendamment les mises à jour de contenu après le lancement.

Venant d’un parcours en développement avec une expérience dans la création de sites web marketing, j’ai abordé ce projet comme n’importe quel autre défi de codage—avec structure, logique et efficacité en tête. Puisque Webflow était nouveau pour moi, j’ai beaucoup appris tout au long du processus. Voici un aperçu de mon flux de travail d’intégration, des points clés à retenir et des conseils pratiques pour vous aider à démarrer sur Webflow.

Qu'est-ce que Webflow?

Webflow est un constructeur de sites web visuel et une plateforme d'hébergement qui permet aux utilisateurs de concevoir, de construire et de lancer des sites web sans écrire de code. Il utilise une interface de glisser-déposer, mais génère du HTML, CSS et JavaScript en arrière-plan, ce qui en fait un outil puissant à la fois pour les designers et les développeurs.

Se familiariser avec l'éditeur

Avant de plonger dedans, je recommande vivement de consulter Webflow University. Leurs tutoriels vidéo offrent une base solide, rendant l'éditeur beaucoup plus intuitif lorsque vous commencez à travailler sur votre site.

Une fois dans l'éditeur, prenez le temps d’expérimenter. Comprendre l'héritage des styles et les remplacements est essentiel :

• Orange = style hérité
  
• Bleu = style remplacé
  
• Gris = style par défaut

Utilisez le sélecteur de styles pour naviguer dans l'arbre d'héritage et modifier les propriétés des éléments parents. Vous pouvez aussi appliquer des états (par exemple, des effets au survol) via la flèche déroulante. Même après un mois de travail avec Webflow, je continue de découvrir des fonctionnalités cachées—alors cliquez et explorez !

Accélérer le flux de travail avec des raccourcis

Les raccourcis clavier peuvent grandement améliorer l'efficacité. Voici quelques-uns que j'ai trouvés indispensables :

• Commande + E (Mac) / Ctrl + E (Windows) : Recherche rapide pour ajouter des éléments, rechercher des bibliothèques UI ou trouver des composants.
  
• 1-4+ : Passer entre les points de rupture.
  
• Option (Mac) / Alt (Windows) + Clic : Supprimer un style remplacé pour revenir au style hérité/par défaut.
  
• Annuler/Refaire, copier/coller : Fonctionne comme dans n’importe quelle autre application.

Pour une liste complète des raccourcis, consultez la documentation de Webflow.

Pourquoi la connaissance du frontend est un plus

Webflow se présente comme une plateforme low-code/no-code, mais une bonne maîtrise du CSS, du HTML et même du JavaScript fait toute la différence. L’éditeur fonctionne sur des principes de CSS et HTML—comprendre les sélecteurs, l'héritage des styles et la structure vous aidera à travailler plus efficacement. Si vous débutez en développement web, je vous suggère d'apprendre les bases du HTML et du CSS pour tirer le meilleur parti de Webflow.

‍
Pour commencer

Commencer Cloner un site existant (optionnel)

Si votre projet consiste à réaménager un site Webflow existant, le clonage peut être un excellent moyen de transférer des éléments CMS, des images, des pages et des scripts. Soyez juste attentif, cela peut aussi importer des éléments inutilisés, des pages, des animations et des variables qui encombrent votre espace de travail.

Pour ceux qui partent de zéro, Webflow propose une variété de sites clonables et de modèles à utiliser comme inspiration ou base de départ.

Mettre en place un système de design avec des variables Webflow

Si vous avez déjà un design en place, commencez par intégrer le système de design avec les variables Webflow. Définissez des styles globaux pour :

• Couleurs
  
• Typographie
  
• Espacement & padding
  
• Boutons & états

Cette approche assure une cohérence et facilite les modifications à l'échelle du site—modifiez une variable et elle se met à jour partout où elle est utilisée.

Les variables Webflow vous permettent aussi de créer des modes, comme :

• Mode automatique : Ajuster dynamiquement les tailles de police en fonction des points de rupture.
  
• Mode manuel : Modifier la couleur des boutons au survol.

Styliser les balises HTML de base

Pour assurer la cohérence sur votre site, stylisez les éléments de base dès le départ. Un petit hack : déposez un élément de texte riche sur une page vide, puis sélectionnez le contenu et utilisez les sélecteurs roses (par exemple, "Body (Toutes les pages)", "Tous les titres H1", "Tous les paragraphes", etc.) pour styliser les éléments HTML de base. Les valeurs de variable et les modes que vous avez définis précédemment devraient s'appliquer aux propriétés de ces éléments.

Points de rupture et design responsive 

Webflow gère la réactivité avec des points de rupture prédéfinis pour garantir que votre site s'affiche correctement sur toutes les tailles d'écran :

• Bureau (par défaut, stylisez ceci en premier)
  
• Tablette
  
• Mobile (paysage)
  
• Mobile (portrait)

Après avoir adapté vos styles pour différents points de rupture, vous verrez les styles changer en fonction lors du redimensionnement de votre site. Vous pouvez également ajouter des points de rupture plus grands que la vue de bureau par défaut en sélectionnant "Ajouter un point de rupture large" dans le sélecteur de points de rupture en haut de l'éditeur.

Construire avec des composants

Pourquoi les composants sont importants

Les pages web sont constituées d'éléments réutilisables—boutons, en-têtes, pieds de page, bannières, etc. Les composants de site de Webflow vous permettent de créer ces blocs de construction une seule fois et de les réutiliser tout au long de votre site.

Créer des composants pour la réutilisabilité

Une fois que vous avez terminé de styliser un élément ou une section qui pourrait être réutilisé (par exemple, des boutons, des en-têtes de site, des bannières, des pieds de page, des sections texte et image), vous pouvez le convertir en composant. Cliquez sur "Créer un composant" (le cube avec un icône plus), donnez-lui un nom et ajoutez éventuellement un groupe et une description. Une fois créé, il sera disponible dans la section Composants du site de l'éditeur (icône cube) dans la barre latérale gauche. L’utilisation de ces composants garantit une cohérence à travers votre site et facilite les mises à jour.

Instance vs composant de base

Lorsque vous ajoutez un composant à une page, cela crée une instance du composant de base. Toute mise à jour du composant de base sera automatiquement appliquée à toutes les instances, à moins qu'elles ne soient dissociées. Cela est particulièrement utile pour effectuer des changements sur tout le site ou pour mettre à jour des contenus statiques efficacement.

Propriétés

Les éléments d'un composant—comme les textes, liens et images—peuvent être convertis en propriétés de composant. Ces propriétés sont accessibles lors de l'édition du composant de base, sous l'onglet Paramètres à droite et sont marquées d'un point violet. Une fois une propriété créée, chaque instance du composant peut avoir des valeurs uniques tout en maintenant une structure cohérente. C'est particulièrement utile pour des éléments comme les boutons, où le texte ou les liens peuvent différer d'une instance à l'autre.

Nidification des composants

Les composants peuvent également être utilisés à l'intérieur d'autres composants, comme placer un bouton dans un composant de bannière. Les propriétés des composants enfants peuvent être exposées en tant que propriétés du composant parent en les connectant dans les paramètres du parent. Si vous êtes familier avec React, ce concept ressemble au prop drilling.

Variantes de composants

Vous pouvez créer des variantes en modifiant le composant de base, en naviguant vers l'onglet Style, et en cliquant sur l'icône du cube dans la section "Sélecteur de style". Cela permet de personnaliser facilement les styles par variante. Les cas d'utilisation courants incluent les boutons primaires vs secondaires ou l'inversion de l’ordre d’une image et d’un texte dans une mise en page.

Utiliser des bibliothèques UI pour un démarrage rapide

Webflow propose diverses bibliothèques UI disponibles pour l’installation. Parmi les meilleures bibliothèques gratuites, citons : Untitled UI, FlowUI et Radiant UI. Leurs composants peuvent être utilisés comme point de départ pour vos propres composants de site personnalisés en adaptant les styles à vos besoins.

Attention : ces bibliothèques peuvent ajouter des éléments de remplacement et remplacer vos styles globaux (par exemple, polices, couleurs, etc.), alors vérifiez et supprimez toute surcharge problématique.

Utilisation de Webflow CMS

Le système de gestion de contenu (CMS) de Webflow facilite la gestion de contenu structuré comme les articles de blog, les profils d’équipe, les catégories, les listes de produits, les projets, et plus encore—sans avoir besoin d’une base de données séparée. Ce contenu peut ensuite être bouclé et rendu dynamiquement sur votre site web avec l'élément Liste de Collection. Chaque collection a aussi sa propre page de modèle qui peut être utilisée pour afficher des vues détaillées des éléments individuels (par exemple, des articles de blog, des profils d'équipe). Cela facilite l'ajout et la mise à jour du contenu dynamiquement sans avoir à modifier manuellement chaque page—une fonctionnalité particulièrement utile pour les clients.

Limitations de l'éditeur et solutions de contournement

Bien que Webflow soit puissant, certaines fonctionnalités peuvent être limitantes. Cela peut être particulièrement frustrant pour les développeurs qui savent que ces choses peuvent être facilement réalisées avec du code. Par exemple :

• Vous pouvez styliser une portion de texte différemment en la transformant en span, mais si ce texte est à l'intérieur d'un composant et lié à une propriété de composant, le span stylisé sera perdu lorsque le texte sera modifié. Il n'y a aucun moyen de créer une propriété spécifiquement pour le span.
  
• Les listes de collections CMS peuvent être utilisées dans les composants, mais vous ne pouvez pas modifier dynamiquement la source de la collection par instance.
  
• L'élément Liste de Collection prend en charge la pagination, mais uniquement avec des boutons fléchés—il n'y a pas d'option intégrée pour la pagination numérotée.
  
• Webflow ne permet pas de boucler à travers les éléments Liste de Collection pour générer des diapositives pour un élément de slider. À la place, vous devez imbriquer une Liste de Collection dans chaque diapositive et ajuster manuellement les valeurs de limite et de décalage—une solution peu intuitive.
  
• Un seul niveau d'imbrication de Liste de Collection est autorisé par page, limitant les relations complexes entre les données.
  
• Une Liste de Collection imbriquée peut afficher un maximum de cinq éléments, ce qui peut être restrictif si vous avez beaucoup de données.

Les solutions de contournement consistent souvent à dissocier les composants pour effectuer des modifications indépendantes (par exemple, changements de couleur des spans, source de collection) sans affecter d’autres instances. Sinon, vous pouvez utiliser du CSS ou du JavaScript dans un élément d'intégration de code payant. La bibliothèque Finsweet Attributes peut également aider à automatiser certains de ces processus.

Déploiement et autres fonctionnalités clés

Fonctionnalités gratuites

• Déploiement sur un environnement de préproduction (staging) : Le déploiement sur un environnement de préproduction est rapide et facile, même avec le plan gratuit, ce qui le rend parfait pour les tests et pour le partage avec les clients et l’équipe.
• Aperçu CSS : La fenêtre d'aperçu CSS affiche tous les styles appliqués à un élément donné, quel que soit le point de rupture ou l'état. Cela est particulièrement utile pour le débogage et pour identifier les conditions dans lesquelles un style est appliqué, car il peut parfois être masqué par l'interface de l'éditeur.
• Interactions et animations : Chaque élément d'une page peut être défini comme un déclencheur d'interaction (par exemple, clic, survol, défilement), qui peut ensuite déclencher une animation sur cet élément ou un autre. Webflow propose quelques animations de base par défaut, mais vous pouvez créer les vôtres—bien que l'interface nécessite un certain apprentissage.

Fonctionnalités des plans payants

• Indexation du site et recherche : Webflow indexe le contenu de vos pages web, permettant ainsi une fonctionnalité de recherche sur l'ensemble du site lorsque vous ajoutez l’élément de recherche à une page. Vous pouvez contrôler les pages ou contenus à indexer en les excluant des résultats de recherche, ce qui permet des recherches plus ciblées (par exemple, rechercher uniquement des articles de blog).
• Traduction : Webflow inclut des fonctionnalités de localisation intégrées, ou vous pouvez utiliser une plateforme externe. La localisation est disponible sur tous les plans par défaut, mais la publication des traductions et l’utilisation des sous-répertoires nécessitent un plan payant.
• Sauvegardes automatiques : Webflow crée automatiquement des sauvegardes pendant que vous éditez votre site. Ces sauvegardes peuvent être utilisées pour restaurer une version précédente si nécessaire. Bien que toutes les options de tarification incluent des sauvegardes automatiques, la restauration n’est disponible que sur les plans payants.

Points à retenir

Après un mois d’utilisation de Webflow, j'ai trouvé que c'est une solution tout-en-un convaincante pour le développement de sites web. Vous pouvez rapidement mettre en ligne un site traduit, sans besoin de configurer une base de données ou un pipeline de déploiement.

Cela dit, j'ai souvent eu l'impression qu’écrire du CSS directement serait plus rapide que de sélectionner et de mettre à jour les propriétés dans l’éditeur. Cependant, la possibilité d’utiliser des bibliothèques d'UI accélère l’intégration de l’interface et compense le temps perdu à naviguer dans les limitations de la plateforme. Selon le design et l’objectif de votre site, vous pourriez ne même pas rencontrer ces limitations. La possibilité de styliser rapidement pour chaque point de rupture et d'utiliser directement des variables dans l'éditeur fait de Webflow un outil robuste et hautement efficace lorsqu’il est utilisé à son plein potentiel.

Vous envisagez d’utiliser Webflow pour votre prochain projet ? Que vous ayez besoin de conseils d'experts ou d’une solution entièrement personnalisée, notre équipe est là pour vous aider. Construisons quelque chose d’incroyable ensemble—contactez-nous dès aujourd'hui.