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:

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon

Maintain Form Height on Success

Code
jQuery

Using a little bit of jQuery to adjust the success message height

Read more
Blue arrow iconWhite Arrow icon