Sweet Text

p-colour1, p-underscore, p-hover, p-sthrough, draggable, ix-avoid, ix-explosion

<h-sweet>Technical<h-sweet>

Technical review of how add a class to a parent element

Sweet Text adds classes to rich text by adding <span> tags to the content. Maybe you want to apply a class direct to the element itself (like p li h2). Maybe you want to apply a class to the ul list element. With Sweet Text and 1 line of jquery, we can apply our classes anywhere inside the rich text block.

Demo

  • List without any sweet text
  • Same thang

‍

  • <li-text-alt>Item with sweet text<li-text-alt>
  • <li-text-alt>And mo' fo' sho'<li-text-alt>
  • <li-text-alt>And mo' fo' sho'<li-text-alt>
  • <li-text-alt>And mo' fo' sho'<li-text-alt>
li-text-alt
li-element-alt
ul-element-alt

This video shows you how Sweet Text adds classes to parent elements within rich text.

Video Library

Everyone

What the heck is Sweet Text?

Beginner

Sweet Text in CMS

Beginner

Establishing classes in Designer to use with Sweet Text

Beginner

Create alternate style options for Rich Text using Sweet Text

Intermediate

Technical review of Sweet Text with Chrome inspector

Intermediate

Adding classes to parent elements inside rich text, like p, li, ul, h2, etc.

Intermediate

Create draggable text elements inside a rich text element

Intermediate

Create a sortable list of elements inside a rich text element

Advanced

Trigger custom popup interaction via CMS rich text field, Sweet Text, and Webflow Interactions

Back to home

Sweet Updates!

Join the F'in sweet community!
Nice! You're now part of the Finsweet community!
Oops! Something went wrong while submitting the form.
click to copy to clipboard