Cómo añadir hermosas líneas de tiempo de eventos en WordPress

Las líneas de tiempo de eventos son fantásticas para representar visualmente sus eventos, haciéndolos más atractivos y fáciles de seguir para su audiencia.

Más allá de los eventos, las líneas de tiempo también pueden utilizarse en su página “Acerca de” para destacar la historia y los hitos de su empresa.

Pero, sin las herramientas adecuadas, planificar y mostrar cronogramas de eventos en su sitio de WordPress puede ser todo un reto.

En este artículo, le mostraremos cómo añadir hermosas líneas de tiempo de eventos a su sitio WordPress.

Por qué añadir una hermosa línea de tiempo de eventos en WordPress

Las cronologías de eventos destacan hitos significativos con una estructura cronológica clara. El uso de una de ellas puede ayudar a realzar el aspecto narrativo del contenido.

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

Cuando se trata de casos de uso, muchos propietarios de sitios web WordPress utilizan 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 porfolio, como un portafolio de fotografía en línea, puedes mostrar tus fotografías en una bonita línea de tiempo vertical que muestre tu viaje alrededor del mundo.

Esto puede resultar más atractivo que escribir su historia y añadirla a su sitio como una página de texto sin formato.

Cómo añadir una línea de tiempo de eventos en WordPress

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

Una vez activado, verá una nueva área de Timeline Addons en su escritorio de WordPress.

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

La primera es haciendo clic en el botón “Añadir nueva historia” del Escritorio de complementos de la línea de tiempo.

Se abrirá el editor, donde podrá escribir un título y una descripción, establecer una imagen destacada y añadir otra información importante.

Una vez que hayas terminado de añadir eventos, Cool Timeline mostrará todas estas historias de eventos en la misma línea de tiempo. A continuación, puedes añadir la línea de tiempo a cualquier página o entrada.

Este método es perfecto para mostrar la misma línea de tiempo varias veces en su sitio web. Sin embargo, solo permite crear una única línea de tiempo.

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.

Si añade varios bloques de línea de tiempo a su sitio web, podrá mostrar diferentes líneas de tiempo en distintas partes de su sitio.

Sin embargo, este método no le permite reutilizar la misma línea de tiempo en todo su sitio web, a menos que usted mismo las guarde como un patrón de bloques.

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. Si necesita más detalles, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, estarás listo para crear tu línea de tiempo utilizando el menú de extensiones de la línea de tiempo o el editor de bloques. Si prefieres ir directamente a un método concreto, puedes enlazar con los que aparecen a continuación:

¿Preparados? Primeros pasos.

Método 1. Cómo crear una línea de tiempo de eventos reutilizable utilizando el menú de extensiones de la línea de tiempo

Para crear su primer evento, puede ir a Timeline Addons ” Añadir Nueva Historia desde su escritorio de WordPress.

A continuación, puede dar un título al evento escribiéndolo en el campo “Añadir título”.

En el editor principal, puede seguir adelante y escribir todo el texto que desea mostrar en su línea de tiempo. Normalmente será una descripción del evento.

Una vez hecho esto, es hora de hacer clic en el enlace “Establecer imagen destacada”.

Ahora puede elegir la imagen que representará el evento en su línea de tiempo. Puede hacer clic para elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo de imagen desde su ordenador.

A continuación, desplázate hasta la sección “Ajustes de la cronología de la historia”. Aquí, puedes hacer clic en el campo “Fecha / Año de la historia” y utilizar la ventana emergente del calendario para seleccionar la hora y la fecha en que ocurrió el evento.

También puede elegir entre una imagen “Completa” o “Pequeña” para el evento.

En la siguiente imagen, puede ver un ejemplo de imagen “Completa”.

Las imágenes más grandes atraerán la atención del visitante hacia los acontecimientos más importantes de la cronología. 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’ en su lugar.

Si quieres añadir muchos eventos diferentes a tu línea de tiempo, puedes utilizar el ajuste “Pequeño”.

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

Una vez realizados estos cambios, desplácese hasta la parte superior de la página y haga clic en el botón “Publicar”.

Y ya está. Ahora puede repetir estos pasos para crear más eventos.

¿Quieres ver todos los eventos que has creado hasta ahora? Entonces sólo tienes que ir a Extensiones del Timeline ” Cool Timeline Stories.

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 ello, puedes ir a Extensiones de la línea de tiempo ” Ajustes de la línea de tiempo ” Ajustes generales.

En la sección “Título de la cronología”, puedes escribir el título que aparecerá encima de tu cronología.

Cool Timeline también puede mostrar una imagen encima de su línea de tiempo, como el logotipo de su empresa. Esto puede ayudar a reforzar su imagen de marca / marca y dejar que los visitantes saben lo que está mostrando la línea de tiempo.

Para añadir esta imagen opcional, deberá hacer clic en el botón “Subir”.

Ahora puede elegir una imagen de su biblioteca de medios de WordPress o subir un nuevo archivo desde su ordenador.

Si añades mucho texto a una línea de tiempo, puede parecer desordenada y poco atractiva.

Teniendo esto en cuenta, es posible que desee 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 escriba un número en el campo “Longitud del contenido”.

Si estableces un límite, entonces es una buena idea añadir enlaces “Leer más” a tu línea de tiempo. Cool Timeline añadirá este enlace a las descripciones que superen tu límite de palabras.

Para añadir este enlace, busque la sección “¿Mostrar más información?” y haga clic en el botón “Sí”.

Ahora puede decidir si al hacer clic en el enlace “Leer más” se mostrará el resto del texto en la misma pestaña o en una nueva pestaña del navegador. Para ello, basta con hacer 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 necesite mostrar esta información. Por ejemplo, si todos los acontecimientos ocurrieron en el mismo año.

Para ocultar la etiqueta del año, basta con hacer clic en el carrusel / control deslizante “Etiqueta del año” para que pase de “Mostrar” a “Ocultar”.

Por defecto, el primer evento de tu línea de tiempo aparecerá a la derecha 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? Entonces, sólo tienes que hacer clic en el botón “Izquierda” situado a continuación de “Historias de la línea de tiempo vertical comienza desde”.

Cuando estés satisfecho con los cambios, haz clic en el botón “Guardar” para guardar los cambios.

Ahora puedes pasar a la pestaña “Ajustes de estilo”.

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

Si quieres, puedes añadir un fondo de color a tu línea de tiempo haciendo clic en el carrusel / control deslizante “Fondo de la línea de tiempo” para cambiarlo de “No” a “Sí”.

A continuación, haz clic en el botón situado junto a “Color de fondo de la historia”.

Ahora debería poder elegir un color de fondo utilizando los ajustes del selector de color.

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

Cuando estés satisfecho con los cambios realizados, no olvides hacer clic en el botón “Guardar”.

A continuación, puedes ir a la pestaña “Ajustes tipográficos”. Aquí puedes cambiar el tamaño y el tipo de letra que se utiliza para los distintos contenidos de tu línea de tiempo, como el título de la línea de tiempo y el título de la historia.

Si cambia los ajustes tipográficos por defecto, no olvide guardar los cambios al hacer clic en el botón “Guardar”.

Una vez que hayas terminado de personalizar la línea de tiempo, estarás listo para añadirla a tu sitio web. Solo tienes que abrir la página o entrada en la que quieras mostrarla y, a continuación, hacer clic en el botón “+”.

Ahora, querrás escribir ‘Cool Timeline’ en la barra de búsqueda. Este plugin tiene varios bloques diferentes, así que asegúrate de hacer clic en ‘Cool Timeline Shortcode Block’.

Ahora puede actualizar o publicar su página con normalidad.

Ahora, si visitas tu sitio web, verás la línea de tiempo en directo.

Método 2. Cómo crear varias líneas de tiempo de eventos en WordPress utilizando el bloque de línea de tiempo

También puedes crear una bonita línea de tiempo de eventos en WordPress utilizando el editor de bloques y ‘Cool Timeline Block’.

Este bloque tiene muchos marcadores de posición. Para construir su línea de tiempo, sólo tiene que sustituir cada marcador de posición con su propio texto e imágenes. Esto te permite construir tu línea de tiempo de forma más visual.

Para empezar, sólo tienes que abrir la página o entrada en la que deseas añadir una línea de tiempo.

A continuación, haz clic en el icono “+” y escribe “Cool Timeline Block”. Cuando aparezca este bloque, haz clic para añadirlo a la página o entrada.

El bloque Línea de tiempo tiene 4 marcadores de posición. Puede empezar a editarlos uno a uno al hacer clic en el primer evento de la línea de tiempo.

En el menú de la derecha, sustituya el marcador de posición “Título de la historia” por el encabezado que desee utilizar para este evento.

A continuación, puede añadir una descripción en el campo “Descripción de la historia”.

A continuación, busque el campo “Etiqueta principal (Fecha/Pasos)”. Aquí, escriba la fecha en la que ocurrió el evento.

Por defecto, el bloque Línea de tiempo muestra el primer evento a la derecha de la línea de tiempo.

Si prefiere mostrar el evento en el lado izquierdo de la línea vertical, puede hacer clic en el botón de opción “Izquierda”.

Ahora, el bloque Línea de tiempo tiene un marcador de posición para cada evento. Para reemplazar este marcador de posición con su propia imagen, simplemente haga clic en el botón ‘Quitar’.

Una vez hecho esto, sigue adelante y haz clic en el botón “Subir/elegir imagen”.

A continuación, puede elegir una imagen de la biblioteca de medios de WordPress o subir un archivo nuevo desde su ordenador.

El bloque “Cool Timeline” mostrará cada imagen a tamaño completo. Para mostrar una imagen más pequeña, abra el menú desplegable “Tamaño de imagen” y elija “Mediana” o “Miniatura”.

En cuanto haga 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 queda mejor en tu sitio web.

Por defecto, la línea de tiempo marca cada evento en la línea vertical con un punto. Puede sustituir este punto por un icono personalizado.

Por ejemplo, puedes utilizar diferentes iconos para diferentes tipos de eventos. A continuación, puede explorar los distintos iconos personalizados que puede utilizar para su línea de tiempo al hacer clic en el botón de opción “Personalizado (icono de Font Awesome)”.

Una vez hecho esto, aparecerá un menú desplegable con el icono de una flecha. Amplíalo para desplazarte por los distintos iconos.

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

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

Si quieres añadir más eventos a la línea de tiempo, sólo tienes que hacer clic en el icono “Añadir historia”. Esto añadirá un nuevo marcador de posición, listo para que lo personalices.

Cuando esté satisfecho con el aspecto de la línea de tiempo, puede actualizar o publicar la página normalmente. Una vez hecho esto, su línea de tiempo estará en vivo en su sitio web de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir un bonito calendario de eventos a tu sitio web en WordPress. También puedes comprobar nuestras guías sobre cómo crear un calendario de eventos sencillo y cómo añadir un widget temporizador de cuenta atrás en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.