When bold and italic are not enough anymore ... you need something [.c-highlighted]better.[.c-circle-yellow][.c-circle-yellow][.c-highlighted]
[.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]
[.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-box][.c-refokus-tooltip_triangle][.c-refokus-tooltip_triangle][.c-refokus-tooltip_logo][.c-refokus-tooltip_logo][.c-text-16]We support B2B brands (startups and enterprises) to help them connect with their customers, increasing conversions and enable growth.[.c-text-16][.c-refokus-tooltip-box][.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.
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.
â
Our Rich Text Enhancer is not the only thing we offer. We offer many more Webflow tools. All for free!
With love by Refokus Webflow Agency
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.
