Creating Sub Bullets in Webflow

If you are a Webflow user, you may have noticed that working with rich text only allows you to set one level of bullets. In this tutorial, I will guide you through a cool Webflow hack that allows you to create sub bullets inside a rich text element.

Understanding the Hack

In this hack, we will learn how to create sub bullets inside a rich text element. By using custom code and the tilde character, we can achieve different levels of bullets within the same rich text.

Let's see how everything works in practice. We will be working with a live example where we have a rich text element with various levels of sub bullets.

Implementing the Hack in Webflow

To implement this hack in Webflow, we will not need any classes or IDs applied to the rich text element. It's important to note that everything works with custom code and the tilde character, which will allow us to apply unique classes to the list items.

In the designer view, we will have a rich text element on the page. While in this example, a class is applied to it, it's essential to highlight that classes or IDs are not mandatory for this hack to work.

Custom CSS and JavaScript Implementation

To get started, we need to apply some custom CSS styles and insert JavaScript. We will define some important classes and apply a margin-left style to these classes. The margin-left value will define the indent for the sub bullets.

Here's a breakdown of what the custom CSS and JavaScript implementation looks like:

Custom CSS

Firstly, we establish important classes and apply a margin-left style to these classes. For example, we have the .sub-bullet class with a margin-left of 15px and the .sub-sub-bullet class with a margin-left of 30px.

Additionally, a media query is used to adjust the margin-left values based on different screen sizes, ensuring proper formatting across various devices.

JavaScript

Before the closing body tag, we insert our JavaScript code. When the DOM is ready, we'll get all our list items (li elements) and store them in a variable called list_items. For each list item, we'll run a function to check for the squiggly character.

The function will examine the text of the list item and determine whether to apply the sub-bullet or sub-sub-bullet class based on the presence of one or two squiggly characters.

We ensure that the classes specified in the custom CSS match the classes we apply in the JavaScript code to maintain consistency.

The outlined functions work together to apply the specified classes to the list items and reformat the text to remove the squiggly characters effectively.

Conclusion

This Webflow hack provides a powerful way to handle sub bullets inside a rich text element. By applying the custom CSS and JavaScript, we can easily create multiple levels of sub bullets within the same rich text without being limited to a single level of bullets.

The possibilities with this hack extend beyond sub bullets and can be applied to various elements within rich text, allowing for a wide range of customization and creativity.

I hope you found this tutorial helpful, and I encourage you to explore the potential of this hack in your own Webflow projects. As always, feel free to experiment and share your creations. Happy designing!