Cómo agregar líneas de tiempo de eventos atractivas en WordPress (2 métodos)

¿Quieres compartir la historia de tu empresa sin aburrir a tus visitantes con muros de texto? Una línea de tiempo visual es la solución perfecta.

Las líneas de tiempo de eventos son una forma fantástica de resaltar tu historia o mostrar momentos clave de una manera que realmente involucre a tu audiencia.

En lugar de saltarse bloques de texto, los visitantes se sienten atraídos por un viaje visual que los guía a través de cada hito.

Después de probar muchas soluciones de líneas de tiempo para WordPress, hemos encontrado dos que son fáciles de usar y ofrecen resultados de aspecto profesional. En esta guía, te mostraremos cómo crear líneas de tiempo atractivas que mantengan a los visitantes interesados y desplazándose. 🚀

📌 Respuesta Rápida: La forma más fácil de agregar una línea de tiempo a WordPress es usando el plugin Cool Timeline. Ofrece dos métodos:

Característica	Método 1 – Historias de línea de tiempo	Método 2 – Bloque de línea de tiempo
🌟 Lo mejor para	Líneas de tiempo globales reutilizables	Líneas de tiempo únicas y puntuales
🎢 Flexibilidad	Alta (Actualizaciones globales)	Moderada (Específica de la página)
⚙️ Configuración	Menú del panel	Editor de Bloques

¿Por qué agregar una hermosa línea de tiempo de eventos en WordPress?

Las líneas de tiempo de eventos resaltan hitos significativos con una estructura clara y cronológica. Los estudios demuestran que el contenido con elementos visuales relevantes obtiene un 94% más de visitas que el contenido solo de texto, y el uso de una línea de tiempo puede ayudar a mejorar el aspecto narrativo de tu contenido.

Más allá de los hitos, las líneas de tiempo te permiten representar visualmente el progreso, las fases y la interconexión de los eventos. Esto puede hacer que tu contenido sea más atractivo.

Cuando se trata de casos de uso, muchos sitios web de WordPress usan líneas de tiempo para mostrar eventos relacionados de una manera organizada y visualmente atractiva.

Las empresas y organizaciones también suelen utilizar líneas de tiempo para mostrar su historia.

Si tienes un sitio web de portafolio, como un portafolio de fotografía en línea, entonces puedes mostrar tus fotografías en una bonita línea de tiempo vertical que muestre tu viaje alrededor del mundo.

Esto puede ser más atractivo que escribir tu historia y agregarla a tu sitio como una página de texto plano.

Cómo agregar una línea de tiempo de eventos en WordPress

La forma más fácil de agregar una línea de tiempo de eventos en WordPress es usando el plugin Cool Timeline. Este plugin gratuito y fácil de usar te permite crear líneas de tiempo impresionantes de forma rápida y sencilla.

Para empezar, puedes navegar a Plugins » Agregar Plugin en tu panel de administración de WordPress.

En la siguiente pantalla, escribe 'Cool Timeline' en la barra de búsqueda para encontrar rápidamente el plugin.

Cuando lo veas, haz clic en 'Instalar ahora' y 'Activar'.

Para detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, verás un nuevo menú Complementos de línea de tiempo en la barra lateral de administración de tu WordPress.

Con este plugin, puedes crear líneas de tiempo de eventos en 2 métodos.

El primer método consiste en agregar historias individualmente a través del menú Complementos de línea de tiempo. Esto crea una base de datos de eventos que te permite mostrar la misma línea de tiempo en varias páginas de tu sitio automáticamente.

Sin embargo, este método no te permite reutilizar la misma línea de tiempo en tu sitio web a menos que la guardes como un Patrón Sincronizado (anteriormente conocido como Bloque Reutilizable).

La otra opción es usar el Bloque Cool Timeline para construir una línea de tiempo visual dentro del editor de bloques de WordPress. Esto te permite mostrar diferentes líneas de tiempo en diferentes partes de tu sitio.

Como desventaja, este método no te permite reutilizar la misma línea de tiempo en tu sitio web a menos que la guardes como un patrón de bloques tú mismo.

En esta guía, cubriremos ambos métodos. No importa cómo construyas tu línea de tiempo, necesitarás instalar y activar el plugin Cool Timeline.

Una vez hecho esto, estarás listo para crear tu línea de tiempo usando el menú Timeline Addons o el editor de bloques. Si prefieres ir directamente a un método en particular, puedes usar los enlaces a continuación:

¿Listo? Empecemos.

Método 1. Cómo crear una línea de tiempo de eventos reutilizable usando el menú Timeline Addons

Para crear tu primer evento, puedes ir a Complementos de línea de tiempo » Agregar nueva historia desde tu panel de WordPress.

Luego puedes darle un título al evento escribiéndolo en el campo 'Agregar título'.

En el editor principal, escribe la descripción del evento.

Una vez que hayas hecho eso, haz clic en el enlace 'Establecer imagen destacada' en la columna de la derecha.

Ahora puedes elegir la imagen que representará el evento en tu línea de tiempo. Puedes hacer clic para elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo de imagen desde tu computadora.

A continuación, querrás desplazarte hacia abajo hasta la sección 'Configuración de la historia de la línea de tiempo'. Aquí, puedes hacer clic en el campo 'Fecha / Año de la historia' y usar el calendario emergente para seleccionar la hora y la fecha en que ocurrió el evento.

También puedes elegir entre una imagen 'Completa' o 'Pequeña' para el evento.

En la siguiente imagen, puedes ver un ejemplo de una imagen 'Completa'.

Las imágenes más grandes atraerán la atención del visitante hacia los eventos más importantes en la línea de tiempo. Sin embargo, las imágenes 'Completas' ocupan más espacio.

La siguiente imagen muestra el mismo evento, pero esta vez con una imagen 'Pequeña'.

Si deseas agregar muchos eventos diferentes a tu línea de tiempo, es posible que desees usar la configuración 'Pequeña'.

Esto puede ayudar a evitar que tu línea de tiempo se vea desordenada.

Después de realizar estos cambios, querrás desplazarte hasta la parte superior de la página y hacer clic en el botón 'Publicar'.

Y eso es todo: ahora puedes repetir estos pasos para crear más eventos.

¿Quieres ver todos los eventos que has creado hasta ahora? Entonces simplemente ve a Complementos de línea de tiempo » Historias de línea de tiempo geniales.

Una vez que hayas creado todos tus eventos, el siguiente paso es personalizar cómo se verá la línea de tiempo en tu sitio web.

Para hacer esto, puedes ir a Complementos de línea de tiempo » Configuración de línea de tiempo » Configuración general.

En la sección 'Título de la línea de tiempo', puedes escribir el título que aparecerá encima de tu línea de tiempo.

Cool Timeline también puede mostrar una imagen encima de tu línea de tiempo, como el logo de tu empresa. Esto puede ayudar a reforzar tu marca y permitir a los visitantes saber qué muestra la línea de tiempo.

Para agregar esta imagen opcional, querrás hacer clic en el botón 'Subir'.

Ahora puedes elegir una imagen de tu biblioteca de medios de WordPress o subir un archivo nuevo desde tu computadora.

Si agregas mucho texto a una línea de tiempo, puede verse desordenada y desagradable.

Teniendo esto en cuenta, es posible que desees establecer un número máximo de palabras que se mostrarán en la línea de tiempo. Para establecer un límite máximo de palabras, simplemente escribe un número en el campo 'Longitud del contenido'.

Si estableces un límite, entonces es una buena idea agregar enlaces de 'Leer más' a tu línea de tiempo. Cool Timeline agregará este enlace a cualquier descripción que sea más grande que tu límite de palabras.

Para agregar este enlace, busca la sección 'Mostrar leer más?' y haz clic en el botón 'Sí'.

Ahora puedes decidir si hacer clic en el enlace 'Leer más' mostrará el resto de tu texto en la misma pestaña o en una nueva pestaña del navegador. Para tomar esta decisión, simplemente haz clic en el botón de opción 'Misma pestaña' o 'Nueva pestaña'.

Por defecto, la línea de tiempo muestra el año en que ocurrió cada evento. Sin embargo, es posible que no siempre necesites mostrar esta información. Por ejemplo, si todos los eventos ocurrieron en el mismo año.

Para ocultar la etiqueta del año, simplemente haz clic en el control deslizante 'Etiqueta del año' para cambiarlo de 'Mostrar' a 'Ocultar'.

Por defecto, el primer evento en tu línea de tiempo aparecerá en el lado derecho de la línea vertical de la línea de tiempo.

¿Quieres mostrar este evento en el lado izquierdo de la línea de tiempo en su lugar? Entonces, simplemente haz clic en el botón 'Izquierda' junto a 'La línea de tiempo vertical comienza desde'.

Cuando estés satisfecho con tus cambios, haz clic en el botón 'Guardar' para guardarlos.

Ahora, puedes pasar a la pestaña 'Configuración de estilo'.

Por defecto, la línea de tiempo no tiene fondo.

Si lo deseas, puedes agregar un fondo de color a tu línea de tiempo haciendo clic en el control deslizante 'Fondo de la línea de tiempo' para cambiarlo de 'No' a 'Sí'.

Luego, haz clic en el botón junto a 'Color de fondo de la historia'.

Ahora deberías poder elegir un color de fondo usando la configuración del selector de color.

Esta pantalla también tiene configuraciones de color similares para todas las diferentes partes de tu línea de tiempo, incluida la línea vertical y los títulos de los eventos. Para cambiar cualquiera de estos colores predeterminados, simplemente haz clic en el botón de la sección y luego usa el selector de color que aparece.

Cuando estés satisfecho con los cambios que has realizado, no olvides hacer clic en el botón 'Guardar'.

A continuación, es posible que desees ir a la pestaña 'Configuración de tipografía'. Aquí, puedes cambiar la fuente y ajustar el tamaño del contenido diferente en tu línea de tiempo, como el título de la línea de tiempo y el título de la historia.

Si cambias la configuración de tipografía predeterminada, no olvides guardar tus cambios haciendo clic en el botón 'Guardar'.

Una vez que haya terminado de personalizar la línea de tiempo, estará listo para agregarla a su sitio web. Simplemente abra la página o publicación donde desea mostrarla y luego haga clic en el botón ‘+’.

Ahora, escribe 'Cool Timeline' en la barra de búsqueda de bloques. Dado que creaste tus eventos usando el menú 'Historias', debes seleccionar el bloque Shortcode de Cool Timeline para mostrarlos.

Esto importará automáticamente las historias que acabas de crear y las mostrará en un diseño vertical.

Luego, puedes actualizar o publicar tu página de forma normal.

Ahora, si visita su sitio web, verá la línea de tiempo en vivo.

Método 2. Cómo crear múltiples líneas de tiempo de eventos en WordPress usando el bloque Timeline

El Bloque Cool Timeline te permite construir una línea de tiempo visualmente dentro del editor de bloques.

Este bloque tiene mucho contenido de marcador de posición. Para construir su línea de tiempo, simplemente necesita reemplazar cada marcador de posición con su propio texto e imágenes. Esto le permite construir su línea de tiempo de manera más visual.

Antes de empezar, ten en cuenta que este método no utiliza las historias que creamos en el Método 1. En su lugar, introducirás manualmente los detalles del evento directamente en el bloque.

Para hacer esto, simplemente abre la página o publicación donde deseas agregar una línea de tiempo.

Luego puede hacer clic en el icono ‘+’ y escribir ‘Cool Timeline Block’. Cuando aparezca este bloque, haga clic para agregarlo a la página o publicación.

El bloque Cool Timeline tiene 4 eventos de marcador de posición. Puede comenzar a editarlos uno por uno haciendo clic en el primer evento de la línea de tiempo.

En el menú del lado derecho, simplemente reemplace el marcador de posición ‘Encabezado de la historia’ con el encabezado que desea usar para este evento.

A continuación, puede agregar una descripción al campo ‘Descripción de la historia’.

Después de eso, querrás encontrar el campo 'Etiqueta principal (Fecha/Pasos)'. Aquí, escribe la fecha en que ocurrió este evento.

Por defecto, el bloque Cool Timeline muestra el primer evento en el lado derecho de la línea de tiempo.

Si prefieres mostrar el evento en el lado izquierdo de la línea vertical, puedes hacer clic en el botón de opción 'Izquierda'.

Ahora, el bloque Cool Timeline tiene una imagen de marcador de posición para cada evento. Para reemplazar este marcador de posición con tu propia imagen, simplemente haz clic en el botón 'Eliminar'.

Una vez que hayas hecho eso, haz clic en el botón 'Subir/Elegir imagen'.

Luego, puedes elegir una imagen de la biblioteca de medios o subir un archivo nuevo desde tu computadora.

Para obtener los mejores resultados, recomendamos usar imágenes con la misma relación de aspecto, como todas cuadradas o todas apaisadas, para que tu línea de tiempo se vea ordenada y profesional.

El bloque Cool Timeline mostrará entonces cada imagen en su tamaño completo. Para mostrar una imagen más pequeña en su lugar, abre el menú desplegable 'Tamaño de imagen' y elige 'Mediano' o 'Miniatura'.

Tan pronto como hagas clic en uno de los diferentes tamaños de imagen, el bloque se actualizará para mostrar la nueva imagen. Esto te permite probar diferentes tamaños para ver cuál se ve mejor en tu sitio web.

Por defecto, la línea de tiempo marca cada evento en la línea vertical con un punto. Es posible que desees reemplazar este punto simple con un icono personalizado.

Por ejemplo, podrías usar diferentes iconos para distintos tipos de eventos. Luego, puedes explorar los diferentes iconos personalizados que puedes usar para tu línea de tiempo haciendo clic en el botón de opción 'Personalizado (Icono de Font Awesome)'.

Una vez que hagas eso, aparecerá un menú desplegable con un icono de flecha. Querrás expandirlo para desplazarte por todos los iconos diferentes.

Cuando encuentres el icono perfecto para usar en tu evento, puedes hacer clic en él.

Ahora puedes personalizar el resto de los eventos de marcador de posición siguiendo el mismo proceso descrito anteriormente.

Si deseas agregar más eventos a la línea de tiempo, simplemente haz clic en el icono 'Agregar historia'. Esto agregará un nuevo evento de marcador de posición que está listo para que lo personalices.

Cuando estés satisfecho con el aspecto de la línea de tiempo, puedes actualizar o publicar la página como de costumbre. Una vez hecho esto, tu línea de tiempo estará activa en tu sitio web de WordPress.

Consejo extra: Agregar esquema de eventos en WordPress

Una vez que hayas creado una línea de tiempo atractiva para mostrar tus eventos o hitos, puedes ir un paso más allá ayudando a los motores de búsqueda a entender de qué se tratan.

Ahí es donde entra el marcado de esquema de eventos.

El esquema de eventos es un tipo especial de código que funciona detrás de escena. Le da a Google un resumen claro de los detalles clave de tu evento, como la fecha, hora, ubicación y quizás información de boletos, en un formato estructurado que puede leer fácilmente.

Además, agregar el esquema de eventos puede ayudar a que tu contenido aparezca en fragmentos enriquecidos o en los listados de eventos de Google. Ya sea que compartas eventos próximos o la historia de la empresa, ayuda a las personas adecuadas a encontrarte cuando buscan actividades o hitos relacionados.

Una de las formas más sencillas de hacerlo es usando AIOSEO Pro, el mejor plugin de SEO para WordPress. Ofrece un potente Generador de Esquemas que admite múltiples tipos de esquemas, incluido el de Eventos, para ayudar a los motores de búsqueda a comprender y destacar mejor tu contenido.

Para obtener detalles, consulta nuestra guía sobre cómo agregar esquemas de eventos en WordPress.

Preguntas frecuentes: Agrega una hermosa línea de tiempo de eventos a tu sitio web de WordPress

¿Tienes preguntas sobre cómo mostrar tus eventos en formato de línea de tiempo en WordPress? Aquí tienes algunas respuestas rápidas para ayudarte a empezar.

¿WordPress tiene una función de calendario o línea de tiempo integrada?

WordPress no incluye una función de calendario o línea de tiempo integrada por defecto. Sin embargo, puedes agregar una fácilmente usando plugins como Cool Timeline o Sugar Calendar.

¿El plugin Cool Timeline es gratuito?

Sí, Cool Timeline tiene una versión gratuita que es lo suficientemente potente para la mayoría de los sitios web. Incluye las funciones principales necesarias para crear líneas de tiempo verticales. Para diseños horizontales y aspectos de diseño avanzados, necesitarás actualizar a la versión Pro.

¿Cómo creo una línea de tiempo de eventos en WordPress?

La forma más fácil es usar un plugin como Cool Timeline. Una vez instalado, puedes agregar eventos o hitos como historias en la línea de tiempo, personalizar el diseño y mostrarlos usando un shortcode o bloque.

¿Puedo agregar una vista de calendario junto a la línea de tiempo?

Sí, puedes. Si bien el plugin Cool Timeline se enfoca en líneas de tiempo visuales, no ofrece una vista de calendario tradicional. Si deseas mostrar tus eventos en formato de calendario mensual o diario, te recomendamos usar un plugin de calendario como Sugar Calendar.

¿Cómo muestro la fecha de hoy en WordPress?

Puedes usar un shortcode, un widget o código personalizado para mostrar la fecha de hoy. Algunos widgets de constructores de páginas y temas también tienen esta función incorporada.

Guías relacionadas para administrar eventos de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar una hermosa línea de tiempo de eventos a tu sitio web de WordPress.

Si encontraste esto útil, también te puede interesar consultar nuestras guías sobre:

• Cómo mostrar eventos próximos en WordPress
• Cómo organizar eventos solo para miembros en WordPress
• Cómo Crear una Página de Registro de Eventos en WordPress
• Cómo agregar un widget de temporizador de cuenta regresiva en WordPress
• Los mejores plugins de calendario de WordPress

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