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:

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

  body.insertBefore(symbol, body.childNodes[5]);
</script>

Copy

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.

Preview:

browser mockup
Share:
Heart icon

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Scaleable Vanilla JS Nested Tabs

JavaScript
Cloneable
Code

Nested tabs in an accordion template

Read more
Blue arrow iconWhite Arrow icon

Buttons Hover Interactions

Cloneable
Interactions

A small collection of buttons and hover interactions.

Read more
Blue arrow iconWhite Arrow icon

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

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

Read more
Blue arrow iconWhite Arrow icon