Box element Webflow : un seul élément pour toute votre structure

Le Box element Webflow, c'est quoi exactement ?

Webflow vient de repenser un geste que vous répétez des centaines de fois par projet : choisir le bon élément de structure. Fini l'hésitation entre Div Block, Section, Container, Columns, Grid, V Flex et H Flex. Place au Box element, un seul élément dont la balise HTML devient un simple réglage, modifiable à tout moment.

Concrètement, vous ajoutez un Box et vous choisissez sa balise : div, section, nav, header, footer, main, article, aside, address ou figure. Vous pouvez changer d'avis en cours de route sans supprimer ni recréer l'élément. Votre structure reste intacte, seule la sémantique évolue.

Dans le Navigator, chaque balise sémantique affiche désormais sa propre icône et son propre nom. Votre arborescence devient immédiatement lisible, même sur un projet complexe avec de multiples sections imbriquées.

Les 19 nouveaux sélecteurs de tag, le vrai changement de fond

La fonctionnalité qui accompagne le Box element est peut-être encore plus stratégique : l'expansion massive des tag selectors. Ces sélecteurs fonctionnent comme un type selector en CSS pur : vous stylisez une balise une seule fois, et tous les éléments qui portent cette balise héritent du style.

Webflow étend désormais ce principe à div, section, nav, header, footer, main, article, aside, address, button, input, textarea, select et bien d'autres. Un Box réglé sur "section" récupère automatiquement vos styles "All Sections". Styliser "All Divs" s'applique aussi à tout Box configuré en div.

Point rassurant : ces nouveaux sélecteurs démarrent totalement vides. Aucun style existant n'est appliqué par défaut, donc votre site conserve son rendu actuel tant que vous ne touchez à rien volontairement.

• Un seul élément pour remplacer six choix qui se chevauchaient
• Une balise HTML modifiable à tout moment, sans recréer l'élément
• Un Navigator plus lisible, avec une icône propre par balise sémantique
• Des styles de base posés une fois sur la balise, comme en CSS natif
• Une compatibilité totale avec l'existant, rien n'est cassé ni supprimé

Ce que ça change concrètement pour vos projets

Vos éléments actuels continuent de fonctionner normalement. Ils sont simplement masqués dans le panneau Add au profit du Box, sans disparaître de vos projets existants. Un Div Block publié avant cette mise à jour reste un div à l'affichage, exactement comme un Box réglé sur div publié après.

La recherche dans Quick Find devient aussi plus directe : tapez "box", "div" ou le nom d'une balise comme "address", et Webflow insère un Box déjà préconfiguré avec le bon tag. Un gain de temps réel sur les phases de montage de page, surtout sur des structures riches en sémantique HTML5.

Autre point notable pour les équipes techniques : le Box element est pleinement accessible via le Designer API et le serveur MCP de Webflow. La méthode getTag() permet de vérifier la balise HTML d'un Box, y compris sur des éléments personnalisés. Une porte ouverte vers des workflows d'automatisation plus poussés.

{{webflow}}

L'avis de Mazette.co sur cette mise à jour

Chez Mazette.co, on suit ce type d'évolution avec un œil particulièrement attentif, parce qu'elle touche à la fondation même de chaque site que l'on construit : la structure HTML. Et sur ce coup-là, Webflow frappe juste.

La fusion en un seul élément règle un vrai irritant du quotidien. Combien de fois avons-nous vu des designers juniors hésiter entre Section et Container, ou multiplier les Div Block là où un Grid aurait été plus pertinent ? Cette friction de choix, invisible pour le client final, coûtait du temps en production et générait parfois des structures HTML moins propres qu'elles ne l'auraient dû.

Le vrai bénéfice business se trouve du côté du SEO et de l'accessibilité. Une sémantique HTML plus riche et plus facile à poser signifie des pages mieux comprises par les moteurs de recherche et par les technologies d'assistance. Pour nos clients, c'est un gain silencieux mais réel, sans effort supplémentaire de notre part, juste parce que l'outil facilite le bon réflexe plutôt que le chemin de moindre résistance.

Les tag selectors, eux, rapprochent encore un peu plus Webflow d'une logique CSS classique, pensée pour les designers autant que pour les développeurs qui interviennent sur nos projets. C'est exactement le genre d'évolution qui rend la conception Webflow plus rigoureuse sans la complexifier. On appréciera aussi la rétrocompatibilité totale : aucun site existant ne casse, aucune migration forcée. C'est le genre de transition qu'on aimerait voir plus souvent dans l'écosystème no-code.

Seul bémol, mineur : la période d'adaptation pour les équipes très habituées aux anciens éléments. Mais la courbe d'apprentissage reste légère, et le gain à moyen terme largement supérieur au petit effort de réapprentissage.

{{seo-aeo}}

Comment intégrer cette nouveauté dans votre prochain projet Webflow

Si vous démarrez un nouveau site, autant adopter directement le Box element plutôt que les anciens éléments, désormais relégués au second plan. Sur un projet existant, rien ne presse : vos Div Block et Section continuent de fonctionner normalement, vous pouvez faire la transition progressivement, section par section.

Pour les agences et équipes produit qui travaillent avec des design systems structurés, c'est aussi l'occasion de revoir votre bibliothèque de styles et de profiter des tag selectors pour poser des bases plus solides, plus proches des standards du web. Un chantier qui mérite d'être cadré en amont plutôt que improvisé au fil de l'eau.

Si vous voulez vérifier que votre structure actuelle profite pleinement de ces évolutions, ou repenser l'architecture de votre site avec cette logique sémantique dès la conception, notre équipe reste disponible pour en discuter sur la page contact de Mazette.co.