Introduction à Webflow - Aide Webflow
Apprenez à naviguer dans Webflow.
Dans Webflow, vous pouvez structurer, construire et concevoir votre site à travers des pages, des branches et des localités. Webflow vous permet de créer et de gérer efficacement du contenu dynamique et des données, et fournit des outils pour analyser et optimiser les performances du site. Vous pouvez également partager votre travail, solliciter des retours, et enfin, publier votre site dans des environnements dédiés (c'est-à-dire, de préproduction et de production).
Vous pouvez accéder à Webflow depuis le Tableau de bord en cliquant sur la vignette de votre site ou depuis les Paramètres du site en cliquant sur Ouvrir le site dans la barre d'outils supérieure. Les outils auxquels vous avez accès dans Webflow diffèrent selon votre rôle sur le site (par exemple, réviseur, éditeur de contenu, etc.), vous pouvez donc accéder rapidement aux outils dont vous avez besoin — et oublier ceux dont vous n'avez pas besoin.
Avant de commencer
Vérifiez les navigateurs, appareils et résolutions d'écran pris en charge par Webflow.
Collaboration multi-utilisateurs
Plusieurs coéquipiers peuvent collaborer ensemble sur un site dans Webflow. Pour garder le processus de conception fluide, vous pouvez transférer le contrôle de la conception entre vos coéquipiers et voir où d'autres personnes travaillent sur votre site en temps réel.
Aperçu de l'interface Webflow
Lorsque vous ouvrez votre site dans Webflow, l'écran principal qui affiche votre site est la zone de travail. Autour de la zone de travail se trouvent les barres d'outils et panneaux suivants :
- La barre supérieure comprend la navigation par onglets, la barre de contexte et les actions du site (par exemple, outils de collaboration et de publication).
- La barre de la zone de travail comprend annuler/rétablir, la navigation par fil d'Ariane, les points de rupture étendus et les paramètres de la zone de travail.
- La barre d'outils de gauche inclut le menu principal, divers panneaux d'outils et de navigation, les paramètres, l'audit du site et les tutoriels.
- La barre d'outils de droite inclut les styles des éléments, les paramètres et les interactions.
La zone de travail
La plus grande zone dans Webflow est la zone de travail. C'est là que vous pouvez interagir avec la page et concevoir en temps réel. Vous pouvez sélectionner des éléments, les déplacer et éditer le contenu directement sur la page. Webflow enregistre votre travail automatiquement, mais vous pouvez enregistrer manuellement votre site en appuyant sur Commande + S (sur Mac) ou Contrôle + S (sur Windows).
La barre supérieure
La barre supérieure vous donne un accès rapide aux modes de conception, au CMS, à Analyser, Optimiser, aux localisations, à un sélecteur de page et aux actions du site.
La navigation principale par onglets comprend l'onglet Design, l'onglet CMS et l'onglet Insights.
- Onglet Design — Cet onglet indique le mode actuel (par exemple, conception, construction, etc.) et vous permet de basculer entre les modes ou de créer des branches de page. Le rôle sur le site d'un membre détermine les modes disponibles. Par exemple, les gestionnaires de site et les designers peuvent accéder au mode conception, tandis que les marketeurs ne peuvent accéder qu'au mode construction.
- Onglet CMS — Ouvre le panneau CMS (Système de gestion de contenu), où vous pouvez créer et gérer des Collections, des éléments de Collection et des produits et catégories Ecommerce.
- Onglet Insights — Ouvre le panneau Insights, où vous pouvez accéder à Analyser et Optimiser. Analyser fournit des analyses globales du site avec des insights exploitables. Optimiser vous permet de mener des expériences sur votre site pour tester différents styles, mises en page, flux, verbages, images, et plus encore.
Barre de contexte
La barre de contexte vous permet de gérer les optimisations du site avec Optimize et de basculer entre les locales, les pages, les pages de collection et les éléments de collection. Elle indique également lorsque vous modifiez le composant principal (plutôt qu'une instance de composant), ainsi que le statut d'approbation de la conception.
Actions du site
Les actions du site sont liées à la page spécifique sur laquelle vous vous trouvez ou au site lui-même. Les membres de l'équipe collaborant sur le site en temps réel sont également listés ici avec un avatar ou un compte.
- Mode d'analyse — Obtenez des analyses et insights au niveau de la page (par exemple, jusqu'où les visiteurs défilent et où ils cliquent).
- Commentaires — Consultez les commentaires laissés par d'autres membres de l'équipe ou ajoutez vos propres retours/notes.
- Aperçu — Passez en mode aperçu.
- Partager — Générez un lien de site en lecture seule.
- Publier — Publiez votre site.
La barre de toile
La barre de toile est positionnée au-dessus de la toile par défaut, mais vous pouvez la déplacer en dessous dans les paramètres de la toile.
- Icônes annuler/rétablir — Réversion ou réapplication rapide des modifications.
- Navigation par fil d'Ariane — Montre la hiérarchie des éléments de l'élément sélectionné.
- Paramètres de la toile — Différentes options (par ex., règles, guides, aperçu du zoom texte).
- Points de rupture — Aperçu et édition pour différentes tailles d'appareils.
La barre d'outils de gauche
Contient le menu principal et les panneaux pour la structuration du site web.
Cliquez sur le logo Webflow pour accéder au menu principal.
- Recherche rapide pour les éléments, composants, pages, etc.
- Actions annuler/rétablir
- Exporter le code
- Raccourcis clavier
- Ouvrir l'aperçu CSS
- Obtenir de l'aide ou envoyer des commentaires
Panneaux et journal d'activité du site
- Panneau Ajouter — Raccourci : A
- Panneau Pages — Raccourci : P
- Panneau Navigateur — Raccourci : Z
- Panneau Composants — Raccourci : Shift + A
- Panneau Variables — Raccourci : G
- Panneau Sélecteurs de style — Raccourci : J
- Panneau Actifs — Raccourci : L
- Panneau Bibliothèques — Raccourci : L
- Panneau Applications — Raccourci : E
- Journal d'activité du site — Modifications de conception apportées à votre site
Paramètres, assistant d'apprentissage IA, audits, recherche rapide et tutoriels
- Panneau Paramètres — Interface, recherche, sauvegarde, localisation.
- Assistant d'apprentissage IA — Aide alimentée par l'IA.
- Panneau d'audit — Raccourci : U.
- Recherche rapide — Raccourci : Command + E (Mac), Control + E (Windows).
- Panneau de tutoriels vidéo — Cours vidéo gratuits.
La barre d'outils de droite
Contient des panneaux pour les styles d'éléments, les paramètres et les interactions.
- Panneau de style — Raccourci : S.
- Panneau des paramètres de l'élément — Raccourci : D.
- Panneau des interactions — Raccourci : H.
FAQ
Quels navigateurs Webflow prend-il en charge ?
Webflow prend officiellement en charge les trois dernières versions majeures de tous les navigateurs modernes : Chrome, Edge, Firefox et Safari. Cela s'applique à la fois à la plateforme et aux sites publiés.
Pour les fonctionnalités avec un support limité, voir les articles connexes :
Webflow ne prend pas en charge Internet Explorer.
Quelles résolutions d'écran/appareils Webflow prend-il en charge ?
Webflow nécessite un ordinateur de bureau/portable avec une largeur d'écran d'au moins 1268px.
Pourquoi Webflow est-il une application en ligne/hébergée — pourquoi pas une application téléchargeable ?
Webflow est en ligne/hébergé pour permettre la conception dans le navigateur et des mises à jour rapides.
- Conception WYSIWYG — effet direct sur HTML/CSS.
- Mises à jour rapides — Toujours la dernière version, pas de mises à jour manuelles.