WTF Is A DOM Element In Webflow? + Killer Resources

Webflow Twitter went mental when the goat dropped this tweet:

Timothy Ricks seemed to stumble across this while he was using apps from the Webflow app marketplace because it's not in the Webflow panel currently. It was confirmed from the Staff Product Designer at Webflow that this is indeed something that the Webflow team have been working on and it's a super exciting update for Webflowers when they understand what it is and how to use it.

But there were people like me that were seeing the buzz and were like "wtf is a dom element and how does it benefit me?" so I went on a personal mission to find out some of this stuff and then write an article about it that even noobs like me can understand. Before we dig in to the element itself, let's cover what DOM actually means first.

‍

ps. I am NOT well versed in custom code so if you're reading this and thinking "Jack is missing crucial information and is a fucking tool,", please do dm me here with any additional information/clarification that I should add to this article.

‍

What does DOM actually mean?

DOM stands for Document Object Model. It is a programming interface that allows developers to create and manipulate documents (HTML, SVG, XML documents) and their contents. The DOM is used by browsers to interpret web pages and enable dynamic content and scripting.

‍

So, if you switched off while reading that, and need a simile to help, it's like a magic wand - it's an insanely powerful element that is highly capable and flexible.

‍

The DOM element is therefore an element you can drag in to the Webflow designer to things you simply couldn't do before in Webflow. This brings us to some usecases.

‍

Killer Resources To Learn About The DOM Element

Before we talk about use cases, I am using examples that I found in the most useful pieces of content about the DOM element that I have found so far from Timothy Ricks, Ailín Tobin and Matt Evans. I have actually interviewed Ailín and Matt on Webflail (Tricks I still need to have on but waiting for a milestone episode) so check them out too if you want to know more about them. Anyway, Timothy and Ailín have excellent YouTube channels and you should a bazillion percent go follow them if you are reading this article.

‍

1) Timothy Ricks YT Channel

Get Tim's cloneable for this project here

‍

2) Ailín Tobin's YT Channel

Ailín also has a killer video explaining various different use cases.

‍

3) W3 Schools

Although these guys cover some particular use cases, the DOM element has all sorts of capabilities. Tim points out this resource in his video from W3 schools which seems shows off the different ways the magic DOM element can be used.

‍

4) Things That Flow

Another resource is from Matt Evans called Thingsthatflow other resource is fire. Copy and paste straight from here which means you don't even need to type in a tag which speeds up your workflow. I happen to know he's cooking up other useful things from Thingsthatflow.

‍

3 Use Cases For The Dom Element

1) Putting elements inside header text

Timothy Ricks shows how it's not possible to put an inside header text. There should be 1 H1 per page and one H2 per section so say you want a funky layout with images within your header text, this can mess up your SEO. SO, with the DOM element, you can now ensure that you can put an image in there without having multiple H2's.

As Tim explains, you can search for a DOM element and drop it in the canvas. Then use plan text to write out whatever the title should be.

By then clicking on the DOM element, you can then go to the settings and change the tag to H2. Why is this cool? Because you have changed the individual bits of text to all become one single H2 within that section even though there is an image placed in between the text. Tim goes further though...

SPICY.

‍

2) Buttons

Ailín explains that if you want to make a button in Webflow that does more than just link something, you can't do that without using custom code in an embed on Webflow. However, using the DOM, you can create a button element, put whatever you want inside it. You can also target attributes using Javascript which means that instead of just linking, you can filter or retrieve data or change the text on click etc etc. By the way, if you want help doing any of that stuff, I recommend checking out Slater.

‍

3) I-Frames

Ailín also explains that you can drop in an i-frame and then target the source element which allows you to have 3rd party scripts and content eg. chatbots. He also talks about potentially connecting these to CMS items using attributes which is wild.

So much potential. Excited to explore this further and will write about any of my own findings about being a complete noob.

‍

By the way, if you enjoy this type of content, I recommend checking out my spicy newsletter called the Webflail Roundup. Every week, I'll send you an article, a podcast, 3 Webflow jobs and 3 inspo websites for FREE!

‍

Go check it here