LexiqueWebflow
Webflow est l'outil no-code qui permet de concevoir, animer et mettre en ligne un site professionnel sans écrire de code, avec un CMS intégré. Voici son vocabulaire complet.
106 TERMES · COLLECTION OUTIL · UNIVERS NO-CODE
/ LES ESSENTIELS
Les 6 termes à connaître
avant tous les autres.
INTERFACEDisplay : FlexLa propriété qui aligne les enfants d'un élément en ligne ou en colonne, et gère leur répartition dans l'espace.INTERFACEDisplay : GridLa mise en page en lignes ET en colonnes : tu poses une grille, tu places les blocs dedans.INTERFACEListe de collectionLa base de données de Webflow affichée dans la page : une liste d'éléments dynamiques rendus par un template unique.INTERFACEInteractionsL'animation déclenchée par une action : scroll, survol, clic ou chargement de page.INTERFACEContainerLe bloc qui plafonne la largeur du contenu et le centre, pour que la page tienne sur un grand écran.CONCEPTSeoAbréviation de « Search Engine Optimization ». Ensemble de bonnes pratiques pour optimiser ton site Webflow : balises meta, titres, descriptions, URLs, performance et structure du contenu afin d’améliorer le référencement sur les moteurs de recherche.
/ INDEX WEBFLOW
Les 106 termes, définis en une phrase.
/ CHERCHER
/ SAUTER À
/ NATURE
B
Backdrop filtersLes filtres d’arrière‑plan appliquent des effets (flou, saturation, teinte, luminosité) à tout ce qui se trouve derrière un élément semi‑transparent.Background colorLa couleur d’arrière‑plan définit la teinte pleine appliquée derrière le contenu d’un bloc. Dans Webflow on la règle via le panneau Style > Backgrounds et on peut lui associer plusieurs couches (dégradé, image, vidéo).Background videoLe composant « Background Video » insère une vidéo MP4, WebM ou MOV qui se lit en boucle derrière un contenu. Il est rendu par une balise <video> avec attributs muted et autoplay pour ne pas bloquer le chargement.BlendingLes modes de fusion (blend modes) changent la manière dont un calque se mélange visuellement avec ceux situés en dessous.Bloc "more type options"Le bloc « More type options » regroupe des paramètres avancés de typographie dans Webflow. Il donne accès à des réglages tels que l’espacement des lettres (letter spacing), la hauteur de ligne (line height), la casse du texte (text transform), les…Bloc de texte (Text Block)Le « Text Block » est l’élément de base pour afficher un paragraphe continu sans balisage spécifique. Contrairement au « Heading », il ne porte pas de sémantique hiérarchique (H1–H6) mais engendre une balise dans le DOM.BorderLa bordure encadre un élément avec un trait dont on peut régler épaisseur, style (solid, dashed, dotted) et couleur.Bouton (Button)Le composant « Button » est un lien stylé (<button> ou <a> selon le contexte) optimisé pour l’accessibilité (role = button, tabindex).Box shadowL’ombre portée (box‑shadow) projette un flou derrière ou autour d’un bloc afin de donner de la profondeur. Webflow permet d’enchaîner plusieurs ombres avec offsets, blur et spread différents pour simuler l’élévation matérielle.C
CH« ch » est une unité relative équivalente à la largeur du caractère « 0 » de la police courante. Dans Webflow, elle sert à définir des largeurs de colonne ou des marges basées sur le nombre approximatif de lettres, pratique pour créer des mesures…Champ (Input)Le composant « Input » crée un champ de formulaire pouvant être texte, email, number, etc. Webflow expose les attributs HTML5 (placeholder, required, pattern) et offre un panneau Validation pour personnaliser les messages d’erreur.CheckboxL’élément « Checkbox » est une entrée binaire où l’utilisateur peut cocher ou décocher. Webflow génère automatiquement l’input type="checkbox" et son label encapsulé, stylisable via des pseudo‑éléments.Citation (Quote)Le composant « Quote » produit les balises <quote> qui sont utiles pour mettre en avant des témoignages ou extraits.ClippingLe clipping (ou « clip ») permet de masquer une partie du contenu d’un élément en définissant une zone visible.Colonnes (Columns)Le composant « Columns » génère un système de grilles flexibles basé sur Flexbox ou CSS Grid. Il permet de diviser rapidement du contenu en 2, 3 ou 4 colonnes avec un gutter ajustable.CommentairesLes « Commentaires » font référence à la fonctionnalité d’annotation interne de Webflow Editor, permettant aux collaborateurs de laisser des retours directement sur le site publié.ContainerLe bloc qui plafonne la largeur du contenu et le centre, pour que la page tienne sur un grand écran.Cursor(probablement « Cursor ») Propriété CSS accessible dans le panneau « Style » de Webflow qui contrôle l’icône du pointeur lorsque l’utilisateur survole un élément.Custom elementFonctionnalité avancée qui autorise l’insertion de balises HTML personnalisées directement dans le canvas via l’élément « Custom Code » ou via des composants clonés.Custom propertiesLes variables CSS (prefixe --ma-variable) que Webflow expose dans le Designer depuis 2024. Elles permettent de centraliser des valeurs (couleurs, espacements, typographies) que l’on rappelle ensuite dans les règles de style grâce à la fonction var().D
Display : BlockValeur de la propriété CSS display mise à disposition dans l’onglet Layout du panneau Style. Elle force l’élément à occuper toute la largeur disponible et à provoquer un retour à la ligne après lui.Display : FlexLa propriété qui aligne les enfants d'un élément en ligne ou en colonne, et gère leur répartition dans l'espace.Display : GridLa mise en page en lignes ET en colonnes : tu poses une grille, tu places les blocs dedans.Display : InlineValeur display qui permet à l’élément de s’insérer dans le flux de texte sans créer de saut à la ligne. L’élément ne supporte ni largeur ni hauteur personnalisée, mais accepte les marges horizontales.Display : NoneValeur magique pour masquer complètement un élément dans le DOM sans le supprimer. Employée dans Webflow pour construire des menus burger, des carrousels ou gérer la visibilité conditionnelle dans les interactions.Div BlockÉlément conteneur polyvalent, comparable à une balise neutre en HTML. C’est la brique de base de tout projet Webflow : on l’utilise pour regrouper des éléments, appliquer des classes, gérer la mise en page via flex/grid ou masquer du contenu.DropdownComposant interactif natif de Webflow composé d’un bouton et d’une liste qu’on peut afficher/masquer. Utile pour créer des menus secondaires, des filtres ou des FAQ accordéon.Dropdown opensSous‑propriété du Dropdown qui contrôle le sens d’apparition de la liste (vers le bas, vers le haut, vers la gauche ou la droite).E
EMUnité de mesure relative à la taille de police de l’élément parent. Dans Webflow, elle est surtout utilisée pour créer des espacements et des tailles de texte fluides où l’échelle est déterminée par le contexte.Embed codeWidget ‘Embed’ qui autorise l’insertion directe d’HTML, CSS ou JavaScript personnalisé. Il est indispensable pour intégrer des scripts marketing (Hotjar, Google Tag Manager), des iframes (Google Maps) ou des solutions e‑commerce tierces.F
FiltersEffets visuels de type CSS filter (blur, brightness, contrast, hue‑rotate, etc.) accessibles dans l’onglet Effects du Designer.FixedValeur de la propriété position qui fige l’élément par rapport à la fenêtre d’affichage (viewport), indépendamment du scroll.FocusedÉtat (pseudo‑class :focus) appliqué quand un élément interactif reçoit le focus clavier ou clic. Webflow expose cet état dans le sélecteur d’états, permettant de personnaliser l’apparence d’un input ou d’un bouton lorsqu’il est actif.Form BlockConteneur principal d’un formulaire Webflow. Il encapsule les champs, le bouton de soumission et les messages de validation, et gère l’envoi des données vers Webflow Forms ou un endpoint personnalisé.Form buttonBouton de type « Submit » que l’on place à l’intérieur d’un bloc « Form ». Il déclenche l’envoi des données saisies vers Webflow Forms ou vers un service externe (Zapier, Make, etc.).I
ImageL’élément « Image » insère une balise HTML <img>. Tu téléverses le fichier (PNG, JPG, WebP, GIF, SVG), puis tu règles l’aspect‑ratio, l’alignement et les attributs SEO (alt texte, titre).Images et gradient"Image & gradient" est une fonctionnalités CSS permettant d'ajouter soit une image dans le fond d'un élément (div), soit un dégradé de couleur.InteractionsL'animation déclenchée par une action : scroll, survol, clic ou chargement de page.L
L'interface designerL’interface designer est l’atelier visuel de Webflow où tu construis ton site. Elle comprend la barre des éléments, le canvas de conception, les panneaux de style et les paramètres d’élément.LabelBalise <label> associée à un champ de formulaire via l’attribut « for ». Elle permet à l’utilisateur de cliquer sur le texte pour activer le champ correspondant, parfait pour l’accessibilité.Le panneau hiérarchiqueAppelé « Navigator », il montre la structure imbriquée des éléments comme un dossier de fichiers. Chaque ligne est une boîte (div, section, container…).Les classesSystème de style basé sur la spécification CSS. Une classe porte un ensemble de propriétés réutilisable sur plusieurs éléments ; Webflow les gère dans la barre supérieure en haut du panneau de style.Les modesTerme générique pour les différents modes de configuration : états de style (normal, hover, active, focus), positionnement (static, relative, absolute, sticky) et modes de fusion ou de display.Lien texte (Text Link)Élément ancêtre « a » stylisé inline au sein d’un flux de texte. On le glisse depuis l’onglet Typography. Peut pointer vers une URL externe, une page interne, une ancre ou un asset d’email.LightboxComposant interactif permettant d’ouvrir une image, une galerie ou une vidéo dans une fenêtre modale superposée.Link BlockBloc cliquable qui enveloppe d’autres éléments (images, titres, paragraphes) et se transforme en balise <a> autour du contenu.List et list itemÉlément sémantique <ul> (unordered) ou <ol> (ordered) et ses enfants <li>. Dans Webflow, tu peux ajouter des listes de check‑list, d’étapes, ou un sommaire de page.Liste de collectionLa base de données de Webflow affichée dans la page : une liste d'éléments dynamiques rendus par un template unique.Locale listDepuis 2024, Webflow prend en charge la gestion multi‑langues via « Locales ». Une « Locale List » affiche le menu de langue (fr, en, es…) que l’utilisateur peut sélectionner.Lottie animationIntégration native du format .json généré par After Effects via Bodymovin. On insère un « Lottie Element », on télécharge le fichier ou on colle une URL. Synchronisable avec le « scroll » ou les « hover interactions » pour un contrôle ultra‑fin sans code.M
MarginEspace externe autour d’un élément, défini en pixels, rem, %, etc. Contrairement au « padding » (qui pousse le contenu intérieur), la « margin » pousse l’élément lui‑même par rapport à son voisin.Modifier et utiliser un templateModifier et utiliser un template consiste à sélectionner un modèle prédéfini dans Webflow, puis à personnaliser ses sections, styles et interactions pour l’adapter à ton projet.Mouse clickDéclencheur d’interactions qui s’active lorsque l’utilisateur clique (ou tape) sur un élément. Dans l’onglet « Interactions », choisis « Mouse click (tap) » puis configure « On 1st click » (ouvrir un menu) et éventuellement « On 2nd click » (fermer le menu).Mouse hoverLe déclencheur « Mouse Hover » dans Webflow Interactions détecte le passage (Hover Over) et le retrait (Hover Out) de la souris au-dessus d’un élément.Mouse move in viewportDétecte la position du curseur dans l’ensemble du viewport (fenêtre du navigateur). Les coordonnées globales de la souris peuvent animer des éléments en fonction du pointeur sur toute la page, utile pour créer des effets interactifs qui suivent le…Mouse move over elementDéclencheur d’interaction qui détecte le mouvement de la souris au sein d’un élément spécifique. Il fournit les coordonnées X et Y relatives à l’élément, permettant de lier le déplacement du curseur à des animations (rotation, translation, opacité,…N
NavbarLa navbar (barre de navigation) est le composant principal pour guider les utilisateurs à travers ton site. Elle inclut un logo, des liens de menu et un menu hamburger pour les mobiles.Navbar opensÉvénement qui se déclenche lorsque le menu de navigation responsive s’ouvre (clic sur l’icône burger sur mobile).O
OpacityLa propriété CSS « opacity » contrôle la transparence d’un élément. Une valeur de 1 est totalement opaque, et 0 est entièrement transparent.OutlineLa propriété CSS « outline » trace une ligne autour de l’élément, en dehors de sa bordure. Contrairement à « border », elle ne modifie pas le layout et n’affecte pas la taille de l’élément ou les éléments voisins.OverflowLa propriété CSS « overflow » contrôle le comportement du contenu qui dépasse les limites d’un élément. Webflow propose plusieurs options : visible (le contenu déborde naturellement), hidden (le contenu excédentaire est masqué), scroll (ajoute des…P
PaddingLe padding est une propriété CSS qui définit l’espace intérieur entre le bord d’un élément et son contenu. Il est appliqué individuellement sur les quatre côtés (haut, droite, bas, gauche).Page loadDéclencheur qui lance des animations ou des actions dès que la page est complètement chargée. Tu peux démarrer l’animation immédiatement ou avec un délai, parfait pour présenter des en-têtes, des images ou du contenu d’introduction de façon fluide…Page scrolledSimilaire à « While page is scrolling », mais actif une seule fois à un pourcentage de défilement défini. Tu spécifies un point de déclenchement (par exemple 25 %) où l’animation s’exécute automatiquement, idéal pour charger ou animer du contenu au…Page templateModèle de page pré-conçu dans Webflow offrant une structure de base pour générer des pages cohérentes. Les templates incluent des sections, styles et interactions prédéfinis pour accélérer le développement de sites.Pages e-commerceTypes de pages dédiées à l’e-commerce sur Webflow : product, category, cart, checkout, account. Chaque page est dotée de champs et de composants spécifiques pour gérer l’affichage des produits, le panier et le paiement.ParagrapheLe paragraphe est le bloc de texte standard pour ajouter du contenu écrit sur ton site. Tu peux personnaliser la police, la taille, l’interligne et l’alignement.ParamètresSection dédiée aux paramètres avancés d’un élément dans le panneau Settings : attributs HTML (ID, classes), liens, configurations de formulaire, options de publication et intégrations tierces.PixelsLe pixel (px) est l’unité de mesure de base en CSS. Un pixel correspond à un point sur l’écran et reste constant quelle que soit la taille du viewport.PlaceholderLe « Placeholder » est un texte indicatif affiché dans un champ de formulaire (input) lorsqu’il est vide. Généralement affiché en gris clair, il guide l’utilisateur sur le format ou le contenu attendu.Présentation du compte WebflowLa page de présentation de ton compte Webflow sert de point d’entrée pour tous tes projets. Tu y trouveras la liste de tes sites, tes espaces de travail, tes paramètres de facturation et d’équipe.R
Radio buttonLe radio button est un élément de formulaire qui permet de sélectionner une seule option parmi plusieurs. Les boutons radio sont regroupés par nom, et un seul peut être actif à la fois.RadiusLa propriété CSS « border-radius » (Rayon) arrondit les coins d’un élément. Tu peux définir un rayon global pour tous les coins ou appliquer des valeurs distinctes pour chaque coin.Ratio et FitDans Webflow, le paramètre « Ratio » permet de conserver un rapport d’aspect fixe (par exemple 16:9 pour les vidéos ou images).RecaptchaRecaptcha est un service de Google intégré à tes formulaires pour se protéger des spams et des robots. Tu configures une clé publique et une clé privée, puis Webflow ajoute la vérification invisible ou visible.RelativeLa position « relative » permet de déplacer un élément par rapport à son emplacement d’origine à l’aide des propriétés top, right, bottom et left.REML’unité rem (root em) est relative à la taille de la police définie sur l’élément racine (généralement l’HTML).S
Scène SplineLa scène Spline est un composant qui intègre des modèles 3D interactifs créés sur la plateforme Spline. Tu peux importer des animations en temps réel, des interactions de caméra et des contrôles tactiles.Scroll into viewSe produit lorsqu’un élément entre dans le champ de vision du navigateur pendant le défilement. Tu peux définir un seuil de pourcentage pour lancer des animations dès qu’une partie de l’élément devient visible, idéal pour animer des sections ou des…Search barLa search bar est un composant qui permet aux visiteurs de rechercher du contenu sur ton site. Elle peut être connectée aux collections CMS pour filtrer les résultats en temps réel.SectionUne section est un conteneur large qui occupe toute la largeur de la fenêtre et permet de regrouper plusieurs éléments de contenu (textes, images, boutons).SelectLe select est un menu déroulant qui affiche une liste d’options compactes. Lorsqu’on clique dessus, il s’ouvre pour révéler les choix disponibles.SeoAbréviation de « Search Engine Optimization ». Ensemble de bonnes pratiques pour optimiser ton site Webflow : balises meta, titres, descriptions, URLs, performance et structure du contenu afin d’améliorer le référencement sur les moteurs de recherche.SliderLe slider est un composant de type carrousel qui permet de faire défiler plusieurs diapositives de contenu, telles que des images, textes ou vidéos.Slider changeDéclencheur qui intervient lors du passage d’une diapositive à une autre dans un composant Slider. Il facilite l’animation d’éléments à l’entrée et à la sortie des slides, ainsi que la synchronisation d’autres actions avec le changement de diapositive.StaticLa position « static » est le comportement par défaut des éléments : ils s’affichent dans le flux normal de la page, sans possibilité de décalage via top/right/bottom/left.StickyLa position « sticky » combine les comportements fixed et relative. Un élément sticky reste dans le flux normal jusqu’à atteindre une position définie (top, bottom), puis reste fixé à cet endroit pendant le défilement, jusqu’à la fin de son conteneur parent.SVH et DVHLes unités SVH (small viewport height) et DVH (dynamic viewport height) sont des variantes récentes des vh, conçues pour tenir compte des barres d’outil des navigateurs mobiles.T
Tab changeSe produit lorsqu’un onglet différent est sélectionné dans un composant Tabs. Il détecte le changement d’onglet et permet d’animer le contenu (apparition, translation, opacité) pour une transition plus fluide entre les sections.TabsLes tabs sont un composant interactif qui organise le contenu en onglets, avec un ensemble de liens cliquables (tab links) et des panneaux de contenu associés (tab panels).Text areaLe text area est un champ de formulaire à plusieurs lignes où les utilisateurs peuvent saisir des commentaires, des descriptions ou tout texte long.Texte enrichi (Rich Text)Le texte enrichi (Rich Text) permet de combiner différents types de contenu (titres, paragraphes, images, liens, listes) dans un seul bloc.Titres (Heading)Les titres (de H1 à H6) structurent le contenu de ton site en niveaux hiérarchiques. Le H1 est le titre principal, important pour le SEO, tandis que les H2 à H6 servent de sous-titres pour organiser les sections.Transfert de siteLe transfert de site permet de déplacer un projet Webflow d’un espace de travail ou d’un compte à un autre. Cette fonctionnalité est utile pour collaborer avec d’autres équipes, transférer la propriété d’un site à un client ou réorganiser tes projets.TransitionsLes transitions CSS permettent d’animer le changement de propriétés (couleur, taille, position) de manière fluide.V
V / H - flexLes options V (vertical) et H (horizontal) pour flex te permettent de contrôler l’axe principal d’un conteneur flex.VidéoLe composant vidéo te permet d’intégrer des vidéos hébergées sur YouTube, Vimeo ou directement en MP4. Tu peux configurer la lecture automatique, le contrôle des lecteurs et l’arrière-plan vidéo plein écran.VW et VHLes unités vw (viewport width) et vh (viewport height) sont basées sur les dimensions de la fenêtre du navigateur : 1vw équivaut à 1% de la largeur du viewport, 1vh à 1% de la hauteur.W
While page is scrollingActive des animations en continu pendant que la page défile, sans se limiter à un élément précis. Il mesure la progression globale du scroll et transmet des valeurs de 0 à 100 %, permettant de synchroniser des animations globales comme des barres de…While scrolling in viewDéclencheur continu qui agit tant qu’un élément reste visible pendant le défilement. Il transmet le pourcentage de visibilité, permettant des animations proportionnelles (parallaxe, changement de couleur) synchronisées avec le scroll de la page.Width et HeightLes propriétés CSS « width » (largeur) et « height » (hauteur) définissent respectivement la largeur et la hauteur d’un élément.FIN DE L'INDEX WEBFLOW
Retour en haut
/ SE FORMER
Tu connais les mots.
Apprends à t'en servir.
La formation Webflow reprend chacun de ces termes en pratique, projet par projet. Accès à vie.
Voir la formation Webflow★ ★ ★ ★ ★ 4,9/5 · 86 AVIS
/ AUTRES COLLECTIONS
Le vocabulaire des autres outils,
au même endroit.
/ FIGMA55 termes FigmaAuto-layout, variants, contraintes : le vocabulaire de la maquette.Explorer/ FRAMER129 termes FramerComposants, variables, effets : le vocabulaire du site animé.Explorer/ NO-CODE354 termes No-codeWebflow, Figma, Framer, Shopify : le vocabulaire des outils que tu utilises tous les jours.Explorer
