Apr 20, 2021
White Arrow icon
Back to all Elements

Symbol in RichText

Insert a symbol element into a RichText. On a static or dynamic page.

If you need a Webflow Symbol element inserted to a RichText element, somewhere in the middle - this one's for you!

We need:

  1. A Symbol element, somewhere on the same page of the RichText element. This Symbol needs an ID.
  2. A RichText element, also with an ID.

The RichText can be dynamic or static content, and the page can be a CMS template page or a static page. If we use this code in a CMS template page, we can also give the power of dynamically deciding where the symbol will be placed (before which element inside the RichText).

This code:

  var symbol = document.getElementById("symID");
  var body = document.getElementById("richID");

  body.insertBefore(symbol, body.childNodes[5]);


Takes the symbol and places it inside the element with the "symID" ID right before it's 5th child.

We can do the same and replace the number '5' with a dynamic field, so each dynamic page will have a different outcome.



Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

3d Video Slider (swiper.js)


A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon



A clonable for creating an Alphabetical glossary

Read more
White Arrow icon