Cómo agregar fácilmente puntos de viñeta y listas numeradas en WordPress

Crear contenido bien organizado con puntos de viñeta y listas numeradas puede parecer básico, pero hemos descubierto que muchos usuarios tienen dificultades para que se vean bien. 📋

Después de explorar varios métodos de formato en el editor de bloques, hemos descubierto las formas más fáciles de crear listas limpias y consistentes.

A través de pruebas exhaustivas en nuestros entornos de demostración, hemos identificado varios métodos para agregar y estilizar listas en WordPress, desde simples puntos de viñeta hasta listas personalizadas.

Lo bueno es que no necesitas ningún conocimiento de codificación para que tus listas se vean profesionales.

En esta guía para principiantes, te mostraremos exactamente cómo agregar y formatear puntos de viñeta y listas numeradas en WordPress.

Cuándo agregar puntos de viñeta y listas numeradas en WordPress

Debes agregar listas a tu contenido cada vez que necesites presentar información en un formato estructurado y fácil de escanear. La clave es elegir el tipo de lista adecuado para tu contenido.

Usa una lista numerada cuando el orden de los elementos sea importante. Esto es ideal para tutoriales paso a paso, rankings de los 10 mejores o cualquier proceso que siga una secuencia específica.

Usa una lista con viñetas cuando el orden de los elementos no importe. Esto es excelente para enumerar características de productos, ejemplos o un grupo de ideas relacionadas.

Usar listas correctamente ayuda a los visitantes a comprender tu contenido de un vistazo, incluso si la información es compleja. Esto mejora la experiencia del usuario y puede mantener a las personas en tu sitio web de WordPress por más tiempo.

Con esto en mente, veamos cómo puedes agregar viñetas y listas numeradas en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Método 2: Usar Shortcodes Ultimate (Listas con iconos personalizados)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Preguntas frecuentes sobre cómo agregar puntos de viñeta y listas numeradas en WordPress

Método 1: Usar el bloque de lista integrado de WordPress (Fácil)

La forma más fácil de agregar viñetas y listas numeradas es usando el bloque de lista y el editor de bloques de WordPress Gutenberg.

Esto te permite crear listas numeradas o con viñetas simples sin instalar un plugin de WordPress separado. Dicho esto, este bloque predeterminado solo tiene algunas opciones de personalización.

Si deseas ajustar tus listas con iconos personalizados, diseños horizontales, diferentes colores y más, te recomendamos usar uno de los otros métodos en este artículo.

Para empezar, simplemente abre el editor de bloques para la publicación o página de WordPress donde deseas agregar una lista. O bien, puedes abrir el editor de widgets para agregar la lista con viñetas a un área de widget, como una barra lateral.

Luego puedes elegir si crear una lista con viñetas o una lista numerada.

Cómo crear una lista con viñetas en WordPress

Para crear una lista con viñetas, haz clic en el ícono ‘+’ para agregar un nuevo bloque de WordPress.

En la ventana emergente que aparece, escribe ‘Lista’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la página.

Esto crea el primer elemento de una lista con viñetas. Simplemente escribe el texto que deseas usar para el primer elemento de la lista.

Una vez hecho esto, presiona la tecla ‘Enter’ en tu teclado para pasar a la siguiente línea. WordPress creará automáticamente la segunda viñeta.

Ahora puedes continuar y escribir el texto que deseas usar para la segunda viñeta. Simplemente repite estos pasos para agregar más elementos a la lista.

Si deseas crear una lista anidada, haz clic en el botón ‘Sangría’. Esto mueve el cursor un paso a la derecha, listo para que escribas el texto con sangría.

Puedes hacer clic en el botón ‘Aumentar sangría’ nuevamente para crear dos niveles de puntos anidados.

Como puedes ver en la siguiente imagen, cada nivel utiliza un icono diferente.

Para disminuir la sangría, haz clic en el botón ‘Disminuir sangría’.

Esto mueve el cursor un paso a la izquierda, listo para que comiences a escribir.

Al presionar los botones ‘Aumentar sangría’ y ‘Disminuir sangría’, puedes crear listas anidadas con múltiples niveles diferentes.

Por defecto, el editor de bloques de WordPress usará el tamaño de fuente ‘Mediano’, pero puedes cambiar entre pequeño, grande y extra grande usando la configuración de ‘Tipografía’ en las opciones de bloque del lado derecho.

También puedes agregar enlaces o usar opciones de formato de texto estándar, como negrita e itálica. Esto hace que tus listas sean aún más fáciles de escanear y comprender de un vistazo.

Cómo crear una lista numerada en WordPress

Para crear una lista numerada en WordPress, simplemente presiona la tecla ‘1’ en tu teclado seguida de un punto (.)

WordPress convertirá automáticamente este texto en el primer elemento de una lista numerada.

Ahora estás listo para escribir el primer elemento de la lista numerada.

Después de eso, simplemente presiona la tecla ‘Enter’ en tu teclado, y WordPress creará el siguiente punto numerado automáticamente.

Al igual que con los puntos de viñeta, puedes crear listas anidadas haciendo clic en los botones ‘Aumentar sangría’ y ‘Disminuir sangría’.

Esto crea un punto de viñeta con sangría debajo del punto de viñeta numerado.

A diferencia de las listas de puntos de viñeta, solo puedes usar un solo nivel de sangría.

Cuando estés satisfecho con el aspecto de la lista, simplemente haz clic en el botón ‘Actualizar’ o ‘Publicar’ para que esté activa en tu sitio web de WordPress.

Método 2: Usar Shortcodes Ultimate (Listas con iconos personalizados)

El bloque de Lista integrado es perfecto para crear listas de texto, pero a veces, es posible que desees crear una lista con íconos personalizados. De esta manera, puedes hacer que tus listas sean más atractivas visualmente y se adapten mejor al tema de tu contenido.

La forma más fácil de hacer esto es usando Shortcodes Ultimate. Este plugin te permite crear listas con íconos personalizados usando simples shortcodes.

Para esto, usaremos la versión gratuita del plugin, ya que es suficiente para este método. Pero si deseas funciones más avanzadas, puedes actualizar a un plan de pago.

Para usar Shortcodes Ultimate, procede a instalar el plugin de WordPress en tu área de administrador. Después de eso, crea una nueva publicación o edita una existente en el editor de bloques.

Ahora, haz clic en el botón ‘+’ en cualquier parte de la página y selecciona el bloque ‘Shortcode’.

En este punto, procede a pegar el siguiente shortcode en el bloque:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Este shortcode mostrará tres elementos de lista con viñetas e íconos de estrella amarilla, así:

Para personalizar el ícono y el color, puedes ir al sitio web de Fork Awesome. Aquí verás todos los íconos que puedes usar para tus listas con viñetas. Aquí, simplemente busca un ícono que quieras usar.

Por ejemplo, usaremos el ícono 'flag'. Ahora, copia el nombre del ícono y regresa al editor de bloques.

Una vez allí, simplemente reemplaza star con él. Así que en lugar de icon: star, usaremos icon: flag.

Para cambiar el color, reemplaza el código HEX en icon_color="#ffde0f" con el código HEX de tu color deseado.

Así que si quieres hacer el ícono verde, necesitas escribir icon_color="#008000". Puedes aprender más sobre cómo encontrar los colores correctos en nuestro artículo sobre cómo encontrar el esquema de color perfecto para tu sitio de WordPress.

Ahora, no olvides reemplazar List item con tu propio texto.

Así se ve nuestro código ahora:

Cuando estés satisfecho con cómo se ve la lista, puedes hacer clic en el botón ‘Actualizar’ o ‘Publicar’ para que esté activa en tu blog de WordPress o sitio web.

Así es como se ve la lista en el front-end:

Método 3: Usar un plugin de constructor de páginas (Mejor para páginas de destino)

Si quieres crear listas hermosas con estilos personalizados, entonces quizás quieras usar SeedProd.

Este tema avanzado de WordPress y plugin constructor de páginas te permite crear páginas diseñadas profesionalmente usando un editor simple de arrastrar y soltar.

También viene con un bloque de Lista prefabricado que te permite ajustar cada parte del diseño de la lista, incluyendo cambiar el espacio entre elementos individuales, reemplazar los puntos de viñeta estándar con íconos personalizados, y más.

Además, facilita el diseño de páginas independientes que tienen un diseño único, por lo que esta es también una excelente opción si quieres agregar listas a una página de inicio personalizada o página de destino.

Hemos probado a fondo la herramienta y hemos descubierto que es muy fácil de usar para principiantes. Para saber más, consulta nuestra reseña de SeedProd.

Lo primero que necesitas hacer es instalar y activar SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, necesitas ingresar tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de agregar la clave de licencia, simplemente haz clic en ‘Verificar clave’.

Elige una plantilla diseñada profesionalmente

Después de eso, ve a SeedProd » Landing Pages y haz clic en ‘Agregar nueva Landing Page’.

En la siguiente pantalla, se te pedirá que elijas una plantilla.

SeedProd viene con más de 300 plantillas hermosas que están organizadas en diferentes categorías, como plantillas de página 404 y páginas de agradecimiento personalizadas de WooCommerce.

Simplemente haz clic en cualquier pestaña para ver las diferentes plantillas dentro de esa categoría.

Cuando encuentres una plantilla que quieras usar, pasa el mouse sobre ella y luego haz clic en el ícono de marca de verificación.

Estamos usando la plantilla ‘Explosive Growth Webinar’ en todas nuestras imágenes, pero puedes usar el diseño que quieras.

A continuación, necesitas darle un título a la página.

SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiarla a lo que quieras. Por ejemplo, agregar palabras clave relevantes a una URL a menudo mejora tu SEO de WordPress y ayuda a que la página aparezca en los resultados de búsqueda relevantes.

Para obtener más información, consulta nuestra guía sobre cómo investigar palabras clave para tu blog de WordPress.

Cuando estés satisfecho con el título y la URL, simplemente haz clic en 'Guardar y empezar a editar la página'.

Crea el diseño de tu página personalizada

SeedProd ahora abrirá tu plantilla en su editor de arrastrar y soltar. A la derecha, verás una vista previa en vivo del diseño de la página, con algunas configuraciones a la izquierda.

SeedProd viene con muchos bloques que puedes agregar a tu diseño, incluidos bloques que te permiten agregar botones para compartir en redes sociales, videos, formularios de contacto y más.

Para más información, consulta nuestra guía sobre cómo crear una página personalizada en WordPress.

Para agregar una lista a tu diseño, busca el bloque 'Lista' y arrástralo a la página.

Esto agrega una lista vertical a tu página con un marcador de posición 'Elemento 1'.

Si prefieres crear una lista horizontal, haz clic en la pestaña 'Avanzado' y luego selecciona el botón 'Horizontal'.

Ahora estás listo para empezar a construir tu lista seleccionando la pestaña 'Contenido'.

Para reemplazar el texto predeterminado con tu propio mensaje, haz clic en 'Elemento 1' en el menú de la izquierda.

Ahora puedes escribir tu elemento de lista en el pequeño editor de texto que aparece.

Aquí, también puedes aplicar cualquier formato que desees usar, como negrita o cursiva.

Por defecto, SeedProd usa una marca de verificación para cada punto de viñeta, pero tiene una biblioteca integrada de fuentes de iconos, que incluye 1400 iconos de Font Awesome que puedes usar en su lugar.

Para reemplazar la marca de verificación, simplemente pasa el mouse sobre ella y luego haz clic en 'Biblioteca de iconos' cuando aparezca.

Esto abre una ventana emergente donde puedes elegir el icono que deseas usar en su lugar.

Puedes usar diferentes iconos para los puntos de viñeta individuales dentro de la lista, por lo que esta es una excelente manera de crear listas más interesantes y llamativas.

Para crear más puntos de viñeta, simplemente haz clic en el botón 'Agregar nuevo elemento'.

Ahora puedes agregar texto y cambiar el icono predeterminado siguiendo exactamente el mismo proceso descrito anteriormente.

Después de agregar todos los elementos a tu lista, puedes cambiar el tamaño de fuente y la alineación usando la configuración en el menú de la izquierda.

También puedes aumentar o disminuir el espacio entre los elementos de lista individuales usando el control deslizante 'Espacio entre'.

Después de eso, es posible que desees cambiar el color de los íconos en la lista. Incluso si estás usando íconos diferentes, SeedProd aplicará el mismo color a cada elemento para que el diseño siempre se vea consistente.

Para hacer este cambio, haz clic en el área 'Color del ícono' y luego elige un nuevo color del cuadro emergente que aparece.

Con eso hecho, es posible que desees hacer clic en 'Avanzado' y ver algunas configuraciones adicionales. Ya hemos visto cómo puedes alternar entre diseños de lista vertical y horizontal, pero también puedes cambiar el color del texto y la fuente.

Para que tu lista realmente destaque, incluso puedes agregar una sombra de caja o una animación CSS.

La mayoría de las configuraciones en la pestaña 'Avanzado' son bastante autoexplicativas, por lo que vale la pena explorarlas para ver qué efectos puedes crear.

Con eso hecho, puedes continuar trabajando en el diseño de tu página agregando más bloques y luego personalizándolos usando las configuraciones en el menú de la izquierda.

Cuando estés satisfecho con el aspecto de la página, simplemente haz clic en el menú desplegable del botón 'Guardar' y selecciona 'Publicar'.

Ahora puedes visitar esta página para ver la lista en vivo en tu tienda en línea o sitio web.

Método 4: Usar código para agregar viñetas y listas numeradas (Avanzado)

También puedes crear listas usando el editor de código incorporado de WordPress y HTML.

Si bien el editor de bloques es más fácil, usar el editor de código te brinda un control preciso sobre la estructura HTML, lo que puede ser útil para solucionar problemas o pegar listas complejas preformateadas.

Para más información sobre este tema, consulta nuestra guía sobre cómo editar HTML en el editor de código de WordPress.

Para empezar, abre la página o publicación donde quieres mostrar la lista. Luego, haz clic en el icono de tres puntos en la esquina superior derecha y selecciona 'Editor de código'.

Los siguientes pasos variarán dependiendo de si quieres agregar una lista con viñetas o una lista numerada.

Cómo crear una lista con viñetas usando código

Para crear una lista con viñetas, comienza escribiendo lo siguiente:

<!-- wp:list -->
<ul>

El código ul significa 'lista desordenada', lo que indica que la lista no tiene números, y el código wp:list le dice a WordPress que estás creando un bloque de Lista manualmente.

A continuación, presiona la tecla 'Enter' para pasar a una nueva línea y crear tu primer elemento de lista:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Aquí, li significa 'elemento de lista', y cerramos la línea con /li.

Puedes repetir este proceso para crear más elementos de lista. Por ejemplo:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Cuando hayas terminado, cierra el bloque de código con otra etiqueta de 'lista desordenada':

</ul>
<!-- /wp:list -->

Esto nos da el siguiente código de lista:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Como puedes ver en la siguiente imagen, esto crea una lista muy simple, pero puedes personalizarla agregando otro HTML, como etiquetas de encabezado.

Cómo crear una lista numerada usando código

Para crear una lista numerada, simplemente escribe lo siguiente:

<!-- wp:list {"ordered":true} -->

Luego puedes escribir ol que significa lista ordenada:

<!-- wp:list {"ordered":true} -->
<ol>

Después de eso, agrega cada elemento de lista siguiendo el mismo proceso descrito anteriormente:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Finalmente, cierra la lista ordenada usando una etiqueta /ol y wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Preguntas frecuentes sobre cómo agregar puntos de viñeta y listas numeradas en WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar viñetas y listas numeradas en WordPress:

¿Cómo se crea una lista con viñetas y numeración?

Puedes crear una lista mixta usando el botón 'Aumentar sangría'. Comienza una lista numerada y, cuando quieras agregar un subelemento con viñeta, simplemente haz clic en el botón 'Aumentar sangría' en la barra de herramientas. Esto creará una viñeta anidada debajo de tu elemento numerado.

¿Cuál es el atajo para las viñetas en WordPress?

El atajo de teclado principal para iniciar una lista con viñetas en el editor de bloques de WordPress es escribir un asterisco (*) seguido de la barra espaciadora. Para una lista numerada, escribe 1. seguido de la barra espaciadora.

¿Cómo puedes hacer una lista numerada a) dl b) ol c) list d) ul?

Puedes hacer una lista numerada usando la opción (b), la etiqueta <ol> en HTML. 'ol' significa "ordered list" (lista ordenada), que se usa cuando la secuencia de elementos es importante. La etiqueta <ul> se usa para listas desordenadas (con viñetas).

¿Es mejor usar listas o divs?

Siempre es mejor usar etiquetas de lista apropiadas (como <ul> o <ol>) para el contenido de la lista en lugar de etiquetas <div>. Las etiquetas de lista proporcionan significado semántico, lo cual es crucial para el SEO y para que las herramientas de accesibilidad como los lectores de pantalla comprendan la estructura de tu contenido.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar viñetas y listas numeradas en WordPress. También es posible que desees aprender cómo agregar colaboración en el editor de bloques de WordPress y nuestras selecciones expertas de los mejores plugins de bloques de Gutenberg para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.