Conoces esa sensación cuando llegas a un sitio web de WordPress y, de repente, te encuentras leyendo la historia completa de la empresa. Ese es el poder de la narración visual.
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. 🚀
¿Por qué agregar una línea de tiempo de eventos atractiva en WordPress?
Las líneas de tiempo de eventos resaltan hitos significativos con una estructura clara y cronológica. Al usar una, 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 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 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 por el 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 impresionantes líneas de tiempo de forma rápida y sencilla.
Tras la activación, verás un área nueva de Complementos de línea de tiempo en tu panel de WordPress.
Con este plugin, puedes crear líneas de tiempo de eventos en 2 métodos.
El primero es haciendo clic en el botón 'Agregar nueva historia' desde el panel de Complementos de línea de tiempo.
Esto abrirá el editor, donde puedes escribir un título y una descripción, establecer una imagen destacada y agregar otra información importante.
Una vez que hayas terminado de agregar eventos, Cool Timeline mostrará todas estas historias de eventos en la misma línea de tiempo. Luego puedes agregar la línea de tiempo a cualquier página o publicación.
Este método es perfecto para mostrar la misma línea de tiempo varias veces en tu sitio web. Sin embargo, solo te 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.
Agregar múltiples Bloques Cool Timeline a tu sitio web te permite mostrar diferentes líneas de tiempo en diferentes partes de tu sitio.
Sin embargo, este método no te permite reutilizar la misma línea de tiempo en tu sitio web a menos que la guardes tú mismo como un patrón de bloque.
En esta guía, cubriremos ambos métodos. Sin importar cómo crees tu línea de tiempo, necesitarás instalar y activar el plugin Cool Timeline. Si necesitas más detalles, consulta 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 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:
- Método 1. Cómo crear una línea de tiempo de eventos reutilizable usando el menú Timeline Addons
- Método 2. Cómo crear múltiples líneas de tiempo de eventos en WordPress usando el bloque Timeline
- Consejo extra: Agregar esquema de eventos en WordPress
- Preguntas frecuentes: Agrega una hermosa línea de tiempo de eventos a tu sitio web de WordPress
- Guías relacionadas sobre la gestión de eventos de WordPress
¿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, puedes escribir todo el texto que deseas mostrar en tu línea de tiempo. Típicamente, será una descripción del evento.
Una vez que hayas hecho eso, es hora de hacer clic en el enlace 'Establecer imagen destacada'.
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 logotipo 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, 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 cambia la configuración de tipografía predeterminada, no olvide guardar sus 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, querrá escribir ‘Cool Timeline’ en la barra de búsqueda. Este plugin tiene algunos bloques diferentes, así que asegúrese de hacer clic en el ‘Bloque de código corto de Cool Timeline’.
Ahora puede actualizar o publicar su página como de costumbre.
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
También puede crear una hermosa línea de tiempo de eventos en WordPress utilizando el editor de bloques y el ‘Bloque Cool Timeline’.
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.
Para comenzar, simplemente abra la página o publicación donde desea 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 de WordPress o subir un nuevo archivo desde tu computadora.
El bloque Cool Timeline mostrará 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, entonces podrás 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 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, el mejor plugin SEO para WordPress. Admite múltiples tipos de esquema, incluido Evento, para ayudar a los motores de búsqueda a comprender y destacar mejor tu contenido.
Para más detalles, consulta nuestra guía sobre cómo agregar esquema 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 The Events Calendar.
¿El plugin Cool Timeline es gratuito?
Cool Timeline ofrece una versión gratuita en el repositorio de plugins de WordPress. Incluye funciones principales como líneas de tiempo verticales y horizontales. Para personalización avanzada y diseños adicionales, puedes actualizar a la versión premium.
¿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 un formato de calendario mensual o diario, te recomendamos usar un plugin de calendario como Sugar Calendar o The Events Calendar.
Para un tutorial rápido, consulta nuestra guía sobre cómo crear un calendario de eventos simple con Sugar Calendar. O consulta nuestra comparación completa de los mejores plugins de calendario de WordPress para encontrar uno que se ajuste a tus necesidades.
¿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 constructor de páginas y temas también tienen esta función integrada.
Guías relacionadas sobre la gestión de eventos de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar una línea de tiempo de eventos atractiva a tu sitio web de WordPress. Si te resultó útil, también puedes consultar nuestras guías sobre:
- Cómo crear un calendario de eventos simple
- 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Por eso me encantan tus tutoriales, son fáciles de implementar y seguir.
Gracias por el recorrido detallado de ambos métodos usando el plugin Cool Timeline. Lo estoy implementando en el sitio de un cliente, estoy seguro de que les encantará una línea de tiempo de eventos en su sitio.
¡Muchísimas gracias a ti WPBeginner!
Jiří Vaněk
Una línea de tiempo es una adición absolutamente genial al sitio web de una empresa, especialmente para una startup. Aprendí a crearlas usando Elementor y la extensión Royal Addons for Elementor. Permite crear líneas de tiempo hermosas. Sin embargo, en un sitio web donde el propietario no quiere Elementor, mis manos estaban atadas, y usualmente resolvía estas cosas usando Canva. Gracias por el consejo sobre el plugin de línea de tiempo perfecto que puedo usar incluso sin Elementor, solo en Gutenberg. Veo que el propietario cuida excelentemente el plugin, y fue actualizado hace tres días, lo cual es otra gran noticia.
Gunjan
¿Puedes crear diferentes líneas de tiempo? Por ejemplo, quiero una para mostrar mi trabajo remunerado y otra con mis puestos de voluntariado.
Soporte de WPBeginner
La versión pro del plugin permite múltiples líneas de tiempo.
Administrador
NICHOLAS AMOL GOMES
Gracias por darme los mejores plugins
Soporte de WPBeginner
Glad our recommendations are helpful
Administrador
Sunday Adeniran
Lo obtuve como A B C. Estaba buscando una línea de tiempo genial buscándola en wpbeginners cuando vi la línea de tiempo express.
Muchas gracias wpbeginners.
Soporte de WPBeginner
Glad our recommendation could help
Administrador
Thomas
No estoy seguro si mi primera pregunta se perdió, así que lo intento de nuevo.
¿Hay alguna posibilidad de incluir, de poner publicaciones más antiguas y ya existentes en la línea de tiempo?
Tengo varias publicaciones que pertenecen a información histórica que se remonta a principios de 1900 y quiero conectarlas para que los clientes utilicen las funciones de la línea de tiempo para ver lo que sucedió aquí hace 100 años.
Soporte de WPBeginner
Hola Thomas,
Puedes crear anuncios con fechas coincidentes y luego agregar el texto que deseas mostrar en la línea de tiempo.
Administrador
Syed
Hola. ¿Es posible cambiar "Readmore" a tener otro nombre como "Abrir para saber más"?
Jocelyn Edwards
Hola, solo quería saber si hay alguna forma de cambiar la configuración de este plugin para que las fechas se muestren según el año (es decir, 2007) en lugar de una fecha específica del año (17 de julio de 2007). Gracias.
Jan
¿Hay algún plugin similar que pueda proporcionar información de actividad de los miembros de un sitio como una línea de tiempo? Me refiero, para el propio miembro, en su panel personal, por ejemplo?
bob
No puedo descargarlo. Seguí todos los pasos, pero no encuentro la sección de agregar plugin. ¿Necesito una versión diferente de WordPress?
Soporte de WPBeginner
Hola Bob,
Probablemente estés usando WordPress.com. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
Mariana Cubillos
Tengo problemas con los íconos porque cada vez que agrego una nueva publicación, no corresponden a la publicación y van en la dirección opuesta. ¿Hay alguna forma de hacer que los íconos cambien respectivamente a la publicación? Por ejemplo, si en una publicación hay una flecha hacia la derecha, tan pronto como publico una nueva publicación, la publicación se mueve hacia la izquierda pero la flecha correspondiente permanece a la derecha. ¿Cómo lo soluciono?
Adam
Lo siento, no funciona
a) no se puede poner una fecha anterior a 2007 – ¡es una línea de tiempo!
b) el menú desplegable para el anuncio de icono no se despliega
Pérdida de tiempo
Ron
¡Apesta! Perdí tiempo instalando. Las instrucciones son pobres. ¿Anuncios? ¿Qué tal publicaciones?
Sidhesh Halarnkar
Señor
Quiero crear un sitio web para un Departamento de Investigación y su diseño es el siguiente:
1) Tienen un slider principal que recorre toda la página de inicio.
3) Después del slider, tienen la sección "Acerca de nosotros".
2) Después de "Acerca de nosotros", tienen dos secciones, básicamente son Noticias y Eventos en la misma fila con efectos de desplazamiento.
Me está resultando muy difícil crear estas dos secciones en la página de inicio, ¿tiene alguna sugerencia para hacerlo, por favor dígamelo, señor?
Esperando su respuesta
Gracias y saludos,
Sidhesh Halarnkar
Owais Ali
¿Cómo puedo eliminar la fecha del anuncio en mi publicación?
Evan Herman
Hola Owais,
Puedes ocultar fácilmente las fechas usando la página de configuración. Ve a ‘Timeline Express > Settings’ y desactiva la visibilidad de la fecha.
Si sigues teniendo problemas, consulta nuestra documentación:
Evan
Lindsey @ Hut Marketing
¿Has notado que las imágenes no son responsivas? En mi teléfono se ven aplastadas...
Estoy a punto de cargar una serie de imágenes en lugar de meterme con una línea de tiempo, jajaja
John Morken
Tengo seis anuncios publicados. Cuando presiono el botón 'leer más', obtengo el texto adicional bien, pero luego una gran lista debajo de todas las páginas y más en mi sitio web. Además, el video (y la imagen) del primer anuncio migra a los otros anuncios que solo son videos y los reemplaza.
Chris
Hi there! The plugin is not working correctly. When you set up the announcements and post them to the page they are not displayed ok if you remove the “read more” option. Event icons are one over another and the text boxes have no space between them. The top one end just over the heading of the next one.
When you turn on the read more option the whole mess is fixed but not everyone wants to have the read more button
Soporte de WPBeginner
Por favor, prueba el plugin con un tema predeterminado y mira si todavía se comporta mal. Si no es así, esto significa que el CSS de tu tema está en conflicto con el CSS del plugin.
Administrador
Andrew Hansen
Esto es genial. Estoy trabajando en una novela y esto será de gran ayuda una vez que empiece a escribir sobre la escritura de mi ficción. Podré usar esto para organizar mi trama después de que mi novela sea publicada (¡ojalá, jajaja!), para que la gente pueda revisar el orden de los eventos en un formato fácil de entender.