Cómo crear viñetas con sangría en el Rich Text del CMS de Webflow
Guía paso a paso para crear fácilmente una viñeta con sangría en el Rich Text del CMS de Webflow.
Webflow, de forma nativa, no permite sub-viñetas (ni sangrar viñetas) dentro del panel del CMS. Es decir, cuando intentas hacerlo con la tecla TAB, que es la forma más común de lograrlo en cualquier otro editor de texto, simplemente salta al siguiente campo.
Sin embargo, como suele pasar, el equipo de Finsweet explica cómo hacerlo en un video de Joe Krug (ver video). Las siguientes instrucciones se basan en ese video.
Guía paso a paso
En la página donde queremos usar esto (dentro de las páginas de una colección del CMS), en la configuración de la página, copiaremos el siguiente código:
Dentro de la etiqueta <head>
<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>
Antes de la etiqueta </body>
<script>
$(document).ready(function() {
const listItems = $('li');
listItems.each(function (index, item) {
if($(item).text().startsWith('~~')){
indentText(this, 'hack20-sub-bullet-2');
} else if($(item).text().startsWith('~')){
indentText(this, 'hack20-sub-bullet');
}
});
function indentText(li, className) {
$(li).addClass(className);
const reformatedText = $(li).text().replace(/^~+/,'');
$(li).text(reformatedText);
}
});
</script>
Con esto, en el editor del CMS puedes simplemente usar el carácter '~' para crear una sub-viñeta (por ejemplo, •~Hola) y, si quieres una sub-sub-viñeta, usa '~~'.
Actualmente, para escritorio, el espaciado está definido en 30px para las sub-viñetas y 60px para las sub-sub-viñetas. Para móvil, el espaciado está definido en 20px para las sub-viñetas y 40px para las sub-sub-viñetas.
