Table of
Contents

Meet our Rich Text Enhancer

[.c-webflow-logo][.c-webflow-logo] [.c-highlighted]Rich Texts[.c-highlight-yellow][.c-highlight-yellow][.c-highlighted] are getting even [.c-text-800]richer[.c-text-800] now🔥

When bold and italic are not enough anymore ... you need something [.c-highlighted]better.[.c-circle-yellow][.c-circle-yellow][.c-highlighted]

[.c-box-inline]Style[.c-box-inline] over Substance!

[.c-mb-40]Now you can style your text [.c-however]however[.c-however] you want. By applying classes to your rich text, you now have full visual control over how everything looks.[.c-mb-40]

[.c-row-flex][.c-box-pink]You can add icons[.c-text-star][.c-text-star]or images 😍 to your text and put everything inside of a callout like this.[.c-box-pink][.c-text-column]You can also go [.c-text-pink]colorful,[.c-text-pink] [.c-text-dot-underline]add some dots,[.c-text-dot-underline] [.c-text-disabled]strikethrough words[.c-text-disabled] or [.c-text-bg-pink]highlight important stuff.[.c-text-bg-pink][.c-text-column][.c-row-flex]

[.c-text-center][.c-text-16]Use[.c-text-16] [.c-text-18]whatever[.c-text-18] [.c-text-20]font[.c-text-20] [.c-text-22]size[.c-text-22] [.c-text-24]you[.c-text-24] [.c-text-26]need,[.c-text-26] [.c-text-28]whenever[.c-text-28] [.c-text-30]you[.c-text-30] [.c-text-32]want.[.c-text-32]
[.c-text-32]There[.c-text-32] [.c-text-28]are[.c-text-28] [.c-text-24]no[.c-text-24] [.c-text-20]limits.[.c-text-20][.c-text-center]

[.c-text-caveat]Or go absolutely crazy and change your font in the middle of your text. Just not on Papyrus ... [.c-highlighted]please.[.c-circle-red][.c-circle-red][.c-highlighted][.c-text-caveat]

Interactive [.c-baloo-border]Elements[.c-baloo-border][.c-hand][.c-hand]

[.c-mb-32]Style isn’t everything though. With our Rich Text Enhancer you can make your rich text fields much more interactive.[.c-mb-32]

[.c-button-modal]Click me![.c-button-modal]

[.c-row-flex-luke][.c-text-column-luke][.c-mb-16]But that’s not all. Don’t want to piss people off with spoilers? You can hide spoiler text behind a box.[.c-mb-16]If you hover over it, it will tell you that [.c-hide-text]Darth Vader[.c-hide-text] is Luke’s father. [.c-text-column-luke][.c-column-luke][.c-column-luke][.c-row-flex-luke]

[.c-row-flex][.c-box-wow_wrapper][.c-box-wow_copy-2][.c-box-wow_copy-2][.c-box-wow_copy][.c-box-wow_copy][.c-box-wow][.c-wow-heading]WOW 🤯[.c-wow-heading]Everything you see here is made using only one rich text field.[.c-box-wow][.c-box-wow_wrapper][.c-text-column][.c-mb-16]Show even more details by hovering over or clicking on dropdowns, tooltips, cards, etc. Check this out:[.c-mb-16]What is [.c-refokus-tooltip]Refokus[.c-underline-blue][.c-underline-blue][.c-refokus-tooltip]?[.c-text-column][.c-row-flex]

And here’s one of the coolest things: you can copy important stuff from the website you’re on! For example, code snippets or hex codes of colors. Click on [.c-copy-icon][.c-copy-icon] and try it out for yourself:

[.c-copy-wrapper][.c-copy-card][.c-copy-top]Blue [.c-copy-hex]#57A8FF[.c-copy-hex][.c-copy-top][$r-copy-to-clipboard=#57A8FF][.c-copy-icon][.c-tooltip]Copied[.c-tooltip_triangle][.c-tooltip_triangle][.c-tooltip][.c-copy-icon][$r-copy-to-clipboard][.c-copy-card][.c-copy-card-green][.c-copy-top]Green [.c-copy-hex]#82C265[.c-copy-hex][.c-copy-top][$r-copy-to-clipboard=#82C265][.c-copy-icon][.c-tooltip]Copied[.c-tooltip_triangle][.c-tooltip_triangle][.c-tooltip][.c-copy-icon][$r-copy-to-clipboard][.c-copy-card-green][.c-copy-card-yellow][.c-copy-top]Yellow [.c-copy-hex]#FFD840[.c-copy-hex][.c-copy-top][$r-copy-to-clipboard=#FFD840][.c-copy-icon][.c-tooltip]Copied[.c-tooltip_triangle][.c-tooltip_triangle][.c-tooltip][.c-copy-icon][$r-copy-to-clipboard][.c-copy-card-yellow][.c-copy-card-red][.c-copy-top]Red [.c-copy-hex]#EC655E[.c-copy-hex][.c-copy-top][$r-copy-to-clipboard=#EC655E][.c-copy-icon][.c-tooltip]Copied[.c-tooltip_triangle][.c-tooltip_triangle][.c-tooltip][.c-copy-icon][$r-copy-to-clipboard][.c-copy-card-red][.c-copy-wrapper]

As you can see, there are no limitations whatsoever with our Rich Text Enhancer. You can completely customize every element in your text field using classes and IDs.

[.c-how-to_title]How to[.c-how-to_title]

To learn more about our Rich Text Enhancer, you can visit our documentation page. Make sure you add the following script in the "Before tag" field under the Custom Code section in the page settings:
[$r-copy-to-clipboard=<script src='https://tools.refokus.io/rich-text-enhancer.js'></script>][.c-script-wrapper][.c-box-script]<script src="https://tools.refokus.io/rich-text-enhancer.js"></script>[.c-script_copy-icon][.c-script_copy][.c-script_copy][.c-tooltip]Copied[.c-tooltip_triangle][.c-tooltip_triangle][.c-tooltip][.c-script_copy-icon][.c-box-script][.c-script_bottom-star][.c-script_bottom-star][.c-script_top-star][.c-script_top-star][.c-script-wrapper][$r-copy-to-clipboard]
Inside of the rich text field, wrap the text snippet inside brackets containing the type and value of the attribute you want to add. For example:

[.c-box-wrapper][.c-box]This part [ .custom-color ]right here[ .custom-color ] will have the "custom-color" class added.[.c-box][.c-box-wrapper]
Currently, you can address [#id] and [.class] tags.

[.c-button-green][.c-button-icon-content]Full documentation here[.c-button-icon][.c-button-icon][.c-button-icon-content][.c-button-green]

Meet Refokus

Our Rich Text Enhancer is not the only thing we offer. We offer many more Webflow tools. All for free!

Sign up for our
future releases

We are on a mission to provide our experience and tools we use to all of you, be sure to sign for future releases and be the first, who can use the magic.