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

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Round Scroll Indicator / Progress Bar

Cloneable
Interactions
Animation

A round scroll indicator mad with Webflow elements and interactions

Read more
Blue arrow iconWhite Arrow icon

Pass Parameters

Cloneable
Code

Pass input fields parameters and add them to the destination URL.

Read more
Blue arrow iconWhite Arrow icon

Before / After effect

Cloneable
Tricks
Interactions

A Before / After effect for photos, without any code. Only Webflow's interaction.

Read more
Blue arrow iconWhite Arrow icon