Sweet Text
<h-sweet>Sweet Text<h-sweet>
Hey people, Finsweet here with a short story!
Once upon a time, a scripting sensei, an architect of deep thought, and a human webflow js glue stick asked themselves a question: why is working with rich text in Webflow so limited? Why can't we make our rich content <p-color-blue>colorful<p-color-blue>, add <p-underscore>underscores<p-underscore>, fancy <p-hover>hover<p-hover> states, and <p-sthrough>strikethroughs<p-sthrough> to our text? Or even add <draggable>⤮ custom<draggable> <draggable>⤮ js-driven<draggable> <draggable>⤮ objects<draggable>?
Less than 30 minutes later a concept was born, raised, became mature, and went into development. The newborn idea was: what if we could apply any class to any part of rich text content? Including those with interactions set to <ix-avoid>t<ix-avoid><ix-avoid>r<ix-avoid><ix-avoid>i<ix-avoid><ix-avoid>g<ix-avoid><ix-avoid>g<ix-avoid><ix-avoid>e<ix-avoid><ix-avoid>r<ix-avoid> <ix-avoid>o<ix-avoid><ix-avoid>n<ix-avoid> <ix-avoid>c<ix-avoid><ix-avoid>l<ix-avoid><ix-avoid>a<ix-avoid><ix-avoid>s<ix-avoid><ix-avoid>s<ix-avoid><ix-avoid>!<ix-avoid>
The results of this short conversation will <ix-explosion>blow<ix-explosion> your mind!
Yes, everything above (including that magnificently scrolling title) is inside a single rich text element. And yes, it works with CMS!
We hope you are sufficiently blown away, and are ready to make this work on your own project.
There are two things to do to make this happen:
- Add our 100% free hosted CDN javascript file to your website. <script src="https://cdn.finsweet.com/files/sweet-text/richtext-stylesystem-v1.0.min.js"></script> Then paste it in the before body tag in the custom code area of project settings.
- Use <angle-brackets> to add classes inside rich text like this: "Did you know <h2-purple>Finsweet<h2-purple> loves you?" The word "Finsweet" will have the class '.h2-purple' applied to it. You can apply <class-name>content<class-name> anywhere inside the rich text block.
That's it! You are good to go! Say goodbye to impossible-to-style templates. Say goodbye to cursing at the rich text element. Since we love doing tutorial videos you, here is Joe explaining everything about Sweet Text in detail:
What the heck is Sweet Text?
Video Library
What the heck is Sweet Text?
Sweet Text in CMS
Establishing classes in Designer to use with Sweet Text
Create alternate style options for Rich Text using Sweet Text
Technical review of Sweet Text with Chrome inspector
Adding classes to parent elements inside rich text, like p, li, ul, h2, etc.
Create draggable text elements inside a rich text element
Create a sortable list of elements inside a rich text element
Trigger custom popup interaction via CMS rich text field, Sweet Text, and Webflow Interactions
Sweet Updates!
