Webflow Designer : le guide de l'interface et des outils

Qu'est-ce que le Webflow Designer ?

Le Designer est l'éditeur principal de Webflow. Chaque action visuelle y produit du vrai code : un élément ajouté devient une balise HTML, une classe devient une règle CSS, une animation devient du JavaScript. On ne code pas, mais on travaille avec la logique du développement front-end : boîtes, héritage des styles, flux de la page.

C'est ce qui le distingue d'un constructeur de pages à blocs : plus de liberté, mais aussi plus de rigueur nécessaire pour garder un site propre.

Les panneaux du Webflow Designer et leurs raccourcis

Les noms et raccourcis ci-dessous viennent de la page d'aide Webflow sur les raccourcis clavier (mise à jour le 24 août 2026). Sur Windows, Ctrl remplace Cmd.

Autres raccourcis utiles : 1, 2, 3 et 4 pour passer d'un breakpoint à l'autre (Desktop, Tablet, Mobile landscape, Mobile portrait), Cmd + Maj + P pour l'aperçu, Maj + P pour ouvrir la publication, Cmd + Maj + X pour le mode X-ray qui révèle la structure des boîtes.

Créer un site et ajouter des éléments

1. Depuis le tableau de bord, créez un nouveau site, vierge ou à partir d'un template.
2. Ouvrez le panneau Add et glissez les éléments sur le canvas ou directement dans le Navigator, plus précis pour viser le bon parent.
3. Double-cliquez sur un texte pour le modifier, ou appuyez sur Entrée pour ouvrir les réglages d'un élément.
4. Définissez les liens dans Element settings (D) : page, section, URL externe, e-mail ou téléphone.
5. Importez les images dans Assets (J) et renseignez leur texte alternatif une fois pour toutes.

Les classes : la notion la plus importante du Designer

Dans le Style panel, un style s'applique à une classe, pas à un seul élément. Modifier la classe « card » modifie toutes les cartes du site. Quatre règles évitent la plupart des problèmes :

• Stylisez d'abord les balises (Body, titres, paragraphes, liens) au niveau All pages.
• Donnez des noms explicites (hero_title, card_image), jamais « Div Block 12 ».
• Utilisez une combo class (card + is-featured) pour une variante, plutôt qu'une nouvelle classe.
• Stockez couleurs, tailles et espacements dans le panneau Variables, puis utilisez-les dans les classes.

Chez Synqro, nous appliquons une convention de nommage commune sur chaque projet Webflow, inspirée de la méthode Client-First. Un autre intégrateur, ou l'équipe du client, retrouve ainsi n'importe quel style sans deviner. Le panneau Style selectors (G) sert ensuite à supprimer les classes inutilisées.

Mise en page et responsive

La structure se construit avec Section, Container, V flex, H flex et Quick Stack, puis Flexbox ou Grid dans la section Layout du Style panel. Le design part du breakpoint Desktop et s'ajuste vers les plus petits écrans. Tout est détaillé dans notre guide de mise en page sur Webflow.

Les interactions : GSAP ou classiques

Le panneau Interactions (H) propose deux versions. Selon l'aide Webflow comparant les deux systèmes (mise à jour le 8 septembre 2026), Interactions with GSAP, lancé à l'été 2025, est la version par défaut des nouveaux sites et la seule qui recevra de nouvelles fonctionnalités. Les Classic Interactions restent disponibles.

Évitez de mélanger les deux sur un même site : chaque version charge ses propres ressources, et Webflow indique que la combinaison est la moins performante. Pour aller plus loin, voir notre guide GSAP sur Webflow.

Formulaires

Un Form Block contient le formulaire, ses messages de succès et d'erreur. Sélectionnez chaque champ pour régler dans Element settings son nom, son type, son placeholder et son caractère obligatoire. Les soumissions sont visibles dans les réglages du site. Pour les champs à choix, voir notre tutoriel sur le radio button Webflow.

Réglages SEO des pages

Dans le panneau Pages, l'icône d'engrenage d'une page ouvre ses réglages :

• le slug (l'adresse de la page) ;
• la balise title et la meta description ;
• les réglages Open Graph pour le partage sur les réseaux sociaux ;
• l'exclusion de la page du sitemap et de l'indexation ;
• le code personnalisé de la page, par exemple des données structurées JSON-LD.

Attention au slug d'une page déjà en ligne : le changer sans redirection 301 crée une erreur 404. Voir comment changer un slug Webflow sans perdre son SEO.

Masquer un élément sans le supprimer

Dans le Style panel, section Layout, réglez Display sur None. Pensez que ce réglage s'applique à la classe et au breakpoint actif : un élément masqué sur Mobile portrait reste visible sur Desktop, ce qui est pratique pour adapter un contenu à l'écran. Pour retrouver un élément masqué, passez par le Navigator.

Prévisualiser, publier et sauvegarder

1. Testez en aperçu (Cmd + Maj + P) sur chaque breakpoint : liens, formulaires, menus, animations.
2. Publiez d'abord sur le sous-domaine webflow.io pour une recette complète, puis sur le domaine personnalisé (Maj + P).
3. En cas d'erreur, restaurez une version précédente depuis les sauvegardes du site. La procédure est détaillée dans notre article pour sauvegarder et restaurer un site Webflow.

Les erreurs fréquentes des débutants

• Styliser sans classe ou avec des classes génériques, puis modifier tout le site par accident.
• Construire la mise en page en position absolute ou avec des hauteurs fixes.
• Commencer le design sur mobile alors que Webflow fait descendre les styles depuis le Desktop.
• Copier-coller un bloc partagé (navbar, footer) au lieu d'en faire un composant.
• Publier sans avoir renseigné titles, meta descriptions et textes alternatifs.

Synqro est une agence brand, web et visibilité, Webflow Premium Partner depuis Paris et Dubaï, fondée en 2019. Si vous préférez confier la construction et garder la main sur les contenus, découvrez notre accompagnement Webflow.