Rich Text Enhancer

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Interactions
CMS
Boosters

Rich Text Enhancer

Use Refokus Rich Text Booster to add Classes, IDs, or Custom Attributes to rich text elements in Webflow so you can style text, anchor to it, add animations, add custom functionalities, and more.

[.c-title-3-primary]How do you add Classes, IDs, or Attributes to Rich Text elements in Webflow?[.c-title-3-primary]

Use Refokus Rich Text Booster to add Classes, IDs, or Custom Attributes to rich text elements in Webflow so you can style text, anchor to it, add animations, add custom functionalities, and more.

Classes

Classes are great when you want to add specific styles or target a fragment of your rich text elements when adding Webflow's interactions (ie. style code snippets, click on a text to open a modal, etc).


IDs

IDs are great for adding a table of contents and IDs inside your article's titles so you can anchor links to them.


Attributes

Attributes are the ultimate power-up for rich text. It allows you to add custom functionality to specific elements inside the rich text element. For example, if you want to add our “copy to clipboard” tool to have fragments of code that users could copy.

Step #1

Copy the

Rich Text Enhancer

<script> and paste it before the </body> of your page

Copy Script Code
<script
src=
"
https://tools.refokus.com/rich-text-enhancer/bundle.v1.0.0.js
"
></script>
<script src="https://tools.refokus.com/rich-text-enhancer/bundle.v1.0.0.js"></script>
Copy Text to Clipboard
Copied!
Step #2

Set Custom Attributes

Everything is made using custom attributes, so when we say “Add” that means "Add a custom attribute”.
Learn more
Using 'Classes' to style Rich Text elements
Using 'IDs' to style Rich Text elements
Using 'Attributes' to style or add functionality to Rich Text elements
General Notes

You can also add as many classes, ids, or attributes as you want, for example, this is how we created the hero of the clonable demo:

Step #3

Publish your site to the staging domain to test the tool is working.

Clonable Demo

Publish your site to the staging domain to test the tool is working.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback
Share on LinkedInShare on TwitterShare via URL
Other Webflow tools you might be interested in
Back to directory
Slider Generator
Create custom sliders in Webflow powered by SlickJS.
Link to tool
Page Transitions
Create visual continuity between pages with custom page transitions.
Link to tool
Copy to Clipboard
Create a button that will copy any piece of text, including links, to the clipboard.
Link to tool