regresar a página artículos

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.

Última actualización

02/2024

Web (diseño y desarrollo)

No items found.

Autor (es):

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:

‍

Inside <head> tag

  
<style>
.hack20-sub-bullet {
margin-left: 30px;
}
.hack20-sub-bullet-2 {
margin-left: 60px;
}
@media (max-width: 767px) {
.hack20-sub-bullet{
margin-left: 20px;
}
.hack20-sub-bullet-2 {
margin-left: 40px;
}
}
</style>

‍

Before </body> tag

  
<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.

‍

Buscas generar leads mediante una web única y robusta que proyecte tu marca, destaque sobre la web de tu competencia y te haga sentir orgullo de mostrarla a clientes, amigos y familiares.

Llegaste al lugar correcto
‍

Conoce más sobre Menta aquí.