• Saltar a la navegación principal
  • Saltar al contenido principal

gimenole.com

Diseño y marketing

  • Filtro de artículos
    • Sobre diseño web
    • Sobre WordPress
    • Sobre marketing Online
  • Contacto
Estás en Blog >> Inicio / Artículos sobre desarrollo Wordpress / Salto de línea en elementos de lista en WordPress.

Salto de línea en elementos de lista en WordPress.

ejemplo de saltos de línea hechos desde WordPress en elementos de una lista

En este videotutorial verás cómo hacer un salto de línea en elementos de una lista desde el editor de bloques de WordPress.

En ocasiones es interesante para favorecer el escaneo de tu página web, añadir un salto de línea separando lo que es un texto destacado, de la explicación en sí. En este formato de videotutoriales cortos te muestro cómo hacerlo de manera sencilla y rápida.

Antes recuerda que puedes suscribirte al newsletter de este blog.
Si te suscribes, tienes acceso a soporte técnico para resolver dudas de tu web, puedes proponer temas para el blog y escribiré un artículo detallado sobre el tema que has propuesto. También te envío un email semanal con todas las novedades publicadas en el blog para que las apliques y mejores tu proyecto web.

Contenido importante

  • Cómo hacer un salto de línea en WordPress en elementos de una lista.
    • Si estás suscrito al blog…

Cómo hacer un salto de línea en WordPress en elementos de una lista.

Es muy sencillo dar un aspecto más amigable para los usuarios a las listas que añades en tu web, con un simple salto de línea y destacando el texto que sirve de punto de ancla para identificar rápidamente de qué trata, facilitas el escaneado del contenido de tu página y la lectura de los textos.

En el video verás que simplemente se trata de poner el código HTML al elemento de lista encargado de hacer saltos de línea, sólo añadiendo <br> antes del texto que quieres separar en otra linea al resto es suficiente; fíjate en este video lo sencillo que es hacerlo.

Te dejo el código HTML de cómo queda el resultado final del ejemplo.

<ul>
<li><strong>Esto es un texto destacado:</strong><br>esto es la explicación extendida del elemento de la lista que queremos poner en otra línea</li>
<li><strong>Esto es otro texto destacado:</strong><br>y aquí añadimos nuestra explicación de nuevo poner en otra línea</li>
</ul>

Te dejo dos artículos relacionados interesantes:

  • Separar los item de una lista con CSS.
  • Cómo hacer el contenido de tu web escaneable.
  • Buenas prácticas de usabilidad web.

¿Fácil verdad? Con tan solo cuatro caracteres y destacando un texto previo consigues que tus listas se lean mucho más fácilmente.

Soy Albert Gimeno diseñador y consultor web
Albert Gimeno, diseñador y consultor web.
Suscripción al newsletter para recibir noticias y proponer temas

Si estás suscrito al blog…

  • Podrás proponer temas para el blog.
  • Recibirás un email semanal con el contenido publicado durante la semana.

¡Gracias por suscribirte! Ves a tu email y revisa la bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Aviso legal · Política de privacidad · Política de cookiesFeel & design · © 2023 gimenole.com