Depuis la Webflow Conf' 2023, les webflowers ne sont pas en manque de bonnes surprises. Entre les annonces, les nouvelles fonctionnalités et les découvertes de la communauté, nous ne savons plus où donner de la tête.

Récemment, c'est Timothy Ricks qui a fait le buzz en découvrant la possibilité d'utiliser l'élément DOM dans Webflow. Dans ce guide, nous allons explorer en détail ce qu'est l'élément DOM, comment l'insérer dans Webflow, et les divers cas d'utilisation qui en découlent.

Qu'est-ce qu'un élément DOM ?

Un élément DOM est comme une boîte dans laquelle vous pouvez mettre du contenu sur une page web. Ces boîtes sont empilées les unes sur les autres, comme des blocs de construction. Chaque boîte a une étiquette (tag) qui dit ce qu'elle contient, comme "image", "paragraphe" ou "lien".

Le Document Object Model (DOM) est simplement l'ensemble de toutes ces boîtes organisées dans une structure, comme une liste. Vous pouvez prendre une boîte, la déplacer, la changer ou la supprimer selon vos besoins. C'est ainsi que vous personnalisez une page web pour qu'elle ressemble et fonctionne comme vous le souhaitez.

Comment insérer un élément DOM dans Webflow ?

La découverte de l'élément DOM par Timothy Ricks s'est faite un peu par hasard car l'élément DOM n'existe pas directement dans Webflow. En effet, l'élément DOM provient directement des Apps Webflow qui ajoutent des éléments sur notre page.

Étape 1 : Ajouter l'extension Unsplash à votre projet

L'app Unsplash Webflow est une super application pour ajouter facilement des images sur votre site web. Cependant, elle offre une fonctionnalité "cachée" : la possibilité d'ajouter des éléments DOM.

Pour ce faire, il faudra ajouter l'application Unsplash à votre projet.

Étape 2 : Insérer une image Unsplash dans votre projet avec l'app

Une fois l'application installée, il faudra ajouter une image via cette même application (peu importe l'image).

Étape 3 : Supprimer le tag et les attributes de l'élément Unsplash

Lorsque vous avez ajouté une image Unsplash, il vous suffira de supprimer sa classe, puis dans les paramètres de l'élément de :

• Supprimer le tag
• Supprimer tous les attributes

Et voilà, vous avez un élément DOM que vous pouvez modifier comme bon vous semble.

Les cas d'utilisation de l'élément DOM Webflow

C'est bien beau d'avoir un élément DOM, mais à quoi ça sert ?

Ajouter des éléments correctement balisés dans le Designer

Webflow ne possède à l'heure actuelle pas tout les éléments HTML nativement.

Avec cet élément vous pouvez donc ajouter des éléments nouveaux. Par exemple, les éléments button (les boutons sont actuellement balisés comme des liens 'a') ou encore iframe, n'existent pas.

Avoir plus de flexibilité dans le design

Une autre possibilité de l'élément DOM est de garder une cohérence de structure dans notre page sans avoir de limite de design.

Un des exemples avancé par Timothy Ricks est de pouvoir ajouter un élément DOM avec un tag H2 et d'ajouter à l'intérieur du texte et des images. Cela n'était pas possible avant sauf en passant par du custom code ou en ajoutant plusieurs éléments H2 sur notre page pour un même titre (ce qui n'est pas bon pour le SEO).

Débloquer des fonctionnalités pour les éléments

L'élément DOM permet également de dépasser certaines limitations de Webflow.

Par exemple, si on passe par un élément DOM pour ajouter un input, on peut créer des inputs de couleur (en ajoutant l'attribute type="color") ou de date (en ajoutant l'attribute type="date") facilement et sans custom code.

De plus, nous pouvons aussi ajouter des attributes spécifiques que nous ne pouvons pas ajouter sur des éléments natifs Webflow. Par exemple, nous pouvons ajouter à l'élément DOM, des attributes de type "class", "onclick", "onload", etc.)

Ressources utiles concernant l'élément DOM Webflow :

Vidéo de Timothy Ricks :

Article de Jack Redley sur Webflail :

WTF Is A DOM Element In Webflow?

Vidéo d'Ailín Tobin :

Webflow DOM element X Slater :

Il y a encore beaucoup de cas d'utilisation possible pour l'élément DOM dans Webflow et sûrement de nouveaux qui vont être découvert dans le futur et changer notre façon de développer.

Peut-être aussi que l'élément DOM, deviendra un élément natif dans Webflow dans le futur 🤞

En attendant, l'élément DOM est une découverte majeure dans Webflow. Il vous permet de personnaliser et de contrôler la structure et le comportement de votre site web de manière avancée. En comprenant comment insérer et utiliser l'élément DOM dans Webflow, vous pouvez dépasser les limites de Webflow. Alors, n'hésitez pas à explorer et à expérimenter pour tirer pleinement parti de cette fonctionnalité 😉