How to create indent bullet Rich Text CMS in Webflow
Step-by-Step Guide on How to Easily Create an Indent Bullet in Rich Text CMS on Webflow.
Help others discover this - share it:
Link Copied
Date updated:
February 29, 2024
Web design and development
No items found.
Author(s):
No items found.
Native Webflow does not allow sub-bullets (or indenting bullets) within the CMS panel. In other words, when you try to do this with the TAB key, which is the most common way to do it in any other text editor, it simply jumps to the next field.
However, as is often the case, the Finsweet team explains how to do it in a video by Joe Krug (video here). The following instructions are based on this video.
Step-by-step Guide
On the page where we want to use this (inside CMS Collection pages), within the page settings, we will copy the following code:
<script>
//when the DOM is ready
$(document).ready(function() {
// get the li items
const listItems = $('li');
// for each li item
listItems.each (function (index, item) {
//check for character
//it's recommended to start with the deepest level of sub bullet
//to ensure only the relevant classes are applied
// if the li item text starts with
if($(item).text().startsWith('~~')){
// run indentTexti) function
indentText(this, 'hack20-sub-bullet-2');
} // else if the li item starts with '~'
else if($(item).text().startsWith('~')){
//run indentText() function
indentText (this, 'hack20-sub-bullet');
}
});
// indentText function
function indentText(li, className) {
// add jolevant className to li Item
// if the li item text starts with '~'add the sub-bullet-2 class
// else if the li item starts with '~~'add the sub-bullet class
$(li).addClass(className);
//remove the '-' from the li items
const reformatedText = $(li).text().replace(/^~+/,'');
// replace the li item text that has - tags
// with the now toxt that removed the - characters)
$(li).text(reformatedText);
}
});
</script>
With this, in the CMS editor, you can simply use the character '~' to create a sub-bullet (e.g., •~Hello), and if you want a sub-sub bullet, use '~~'.
Currently, for desktop, the spacing is set to 30px for sub-bullets and 60px for sub-sub bullets.
For mobile, the spacing is set to 20px for sub-bullets and 40px for sub-sub bullets.
