Since Webflow Conf' 2023, webflowers have not been lacking in pleasant surprises. Between announcements, new features, and community discoveries, we can hardly keep up.
Recently, it was Timothy Ricks who created a buzz by unveiling the potential of using the DOM element in Webflow. In this guide, we will explore in detail what the DOM element is, how to insert it into Webflow, and the various use cases that arise from it.
What is a DOM element?
A DOM element is like a box that you can fill with content on a web page. These boxes are stacked on top of each other, similar to building blocks. Each box has a label (tag) that indicates what it contains, such as "image," "paragraph," or "link."
The Document Object Model (DOM) is simply the collection of all these boxes organized into a structure, like a list. You can take a box, move it, modify it, or delete it as needed. This is how you customize a web page to look and function the way you want.
How to insert a DOM element into Webflow?
Timothy Ricks's discovery of the DOM element came somewhat by chance, as the DOM element does not exist directly in Webflow. In fact, the DOM element comes directly from Webflow Apps that introduce elements to our page.
Step 1: Add the Unsplash extension to your project
The Unsplash Webflow app is a fantastic application for easily adding images to your website. However, it offers a "hidden" feature: the ability to add DOM elements.
To do this, you’ll need to add the Unsplash app to your project.
Step 2: Insert an Unsplash image into your project using the app
Once the application is installed, you will need to add an image through this app (any image will do).
Step 3: Remove the tag and attributes from the Unsplash element
After you have added an Unsplash image, simply remove its class, then in the element's settings:
- Remove the tag
- Remove all attributes
And there you have it, you now have a DOM element that you can modify as you wish.
Use cases for the Webflow DOM element
Having a DOM element is great, but what is it used for?
Adding correctly tagged elements in the Designer
Currently, Webflow does not natively have all HTML elements.
With this element, you can add new elements. For instance, button elements (currently tagged as 'a' links) or iframes do not exist.
Having more design flexibility
Another possibility offered by the DOM element is to maintain a consistent structure on our page without design limitations.
One of the examples presented by Timothy Ricks is the ability to add a DOM element with an H2 tag and include text and images within it. This was not possible before without resorting to custom code or adding multiple H2 elements on our page for the same title (which isn’t good for SEO).
Unlocking functionalities for elements
The DOM element also allows you to bypass certain limitations of Webflow.
For example, if you use a DOM element to add an input, you can easily create color inputs (by adding the attribute type="color") or date inputs (by adding the attribute type="date"), all without custom code.
Additionally, we can also add specific attributes that can't be added to native Webflow elements. For example, we can add to the DOM element attributes like "class," "onclick," "onload," etc.)
Useful resources regarding the Webflow DOM element:
Video by Timothy Ricks:
Article by Jack Redley on Webflail:
WTF Is A DOM Element In Webflow?
Video by Ailín Tobin:
Webflow DOM element X Slater:
There are still many potential use cases for the DOM element in Webflow, and surely new ones will be discovered in the future that will change our development process.
Perhaps the DOM element will also become a native element in Webflow in the future 🤞
In the meantime, the DOM element is a significant discovery in Webflow. It allows you to customize and control the structure and behavior of your website in advanced ways. By understanding how to insert and utilize the DOM element in Webflow, you can go beyond the limitations of Webflow. So, don’t hesitate to explore and experiment to fully leverage this feature 😉
