Hay contenidos que se entienden mejor cuando los vemos siguiendo un orden. Si queremos contar la historia de una empresa, explicar cómo avanzó un proyecto o reunir varios hechos por fecha, un bloque de texto puede quedarse corto.
En esos casos, crear un timeline en WordPress nos permite ordenar cada etapa y mostrarla de una forma más visual. El usuario puede ver qué ocurrió primero, qué vino después y cómo fue avanzando todo.
Podemos utilizar una línea de tiempo para enseñar los primeros años de una marca, las fases de un servicio, los logros de una organización o el desarrollo de un proyecto. También puede servir para una biografía, un resumen histórico, una hoja de ruta o cualquier proceso dividido en varias etapas.
Cada punto puede incluir una fecha, un título y una explicación breve. Si lo necesitamos, también podemos añadir imágenes, iconos o enlaces para dar más contexto sin convertir la página en un texto demasiado pesado.
El diseño dependerá de la información que vayamos a mostrar. Un timeline vertical suele funcionar bien cuando hay muchos eventos, porque permite recorrerlos hacia abajo con facilidad. El formato horizontal puede quedar muy bien con pocas etapas, aunque debemos revisar con cuidado cómo se adapta al móvil.
WordPress no trae una función específica para crear líneas de tiempo en todos los casos. Podemos hacerlo con un plugin, utilizar alguno de los bloques de Gutenberg que incluya esta opción o preparar una estructura propia aprendiendo cómo editar HTML en WordPress y añadir código CSS para darle el diseño que necesitamos.
Antes de elegir el método, conviene ordenar las fechas y decidir qué acontecimientos merece la pena incluir. Si añadimos explicaciones demasiado largas o demasiados puntos, la línea de tiempo puede perder justo la claridad que buscábamos.
Tabla de contenidos
Qué es un timeline en WordPress
Un timeline en WordPress es una forma visual de ordenar acontecimientos, etapas o cambios siguiendo una secuencia. En lugar de repartir la información entre varios párrafos, cada punto puede mostrar una fecha, un título, una pequeña explicación y, si hace falta, una imagen o un icono en WordPress.
Esto permite entender una historia de un vistazo. Si queremos contar cómo ha crecido una empresa, por ejemplo, podemos comenzar por su fundación y continuar con los lanzamientos, cambios y logros que llegaron después. Este contenido puede integrarse dentro de una parte de una pagina para presentar su trayectoria de una manera más visual.
La línea de tiempo no tiene por qué verse siempre igual. Podemos encontrar distintos formatos:
- Vertical: los eventos aparecen uno debajo de otro y se recorren al bajar por la página.
- Horizontal: las etapas se colocan de izquierda a derecha, a veces dentro de un carrusel en Elementor o mediante controles de navegación.
- Alternado: cada acontecimiento aparece a un lado distinto de una línea central.
- Interactivo: incluye botones, animaciones de contenido o información que se abre cuando el usuario pulsa sobre cada punto.
Algunas líneas de tiempo solo necesitan una fecha y una frase corta. En otras podemos añadir fotografías, vídeos en WordPress, enlaces o botones que lleven a más información. Todo dependerá de lo que queramos contar, aunque es mejor no convertir cada etapa en un texto demasiado largo.
Podemos utilizar un timeline para mostrar:
- La historia de una empresa o una marca.
- El avance de un proyecto.
- La trayectoria profesional de una persona.
- Las distintas fases de un servicio.
- Una sucesión de hechos históricos.
- Los logros de una organización.
- Las fechas previstas para un lanzamiento.
- Los cambios de un producto o una tecnología.
Tampoco es obligatorio incluir años o fechas concretas. Este formato puede servir para explicar una serie de pasos, como el recorrido de un cliente desde que solicita un servicio hasta que recibe el trabajo terminado.
Lo importante es que la secuencia se entienda sin esfuerzo. Si añadimos demasiados puntos o llenamos cada uno con mucha información, el timeline puede terminar siendo tan difícil de consultar como un texto convencional.
En WordPress podemos prepararlo con un plugin, con los bloques disponibles en nuestro constructor visual de WordPress o mediante una estructura creada con código. La elección dependerá del diseño que busquemos y de cuánto queramos personalizar su funcionamiento.
Usos de una línea de tiempo en WordPress
Un timeline en WordPress puede venirnos bien cuando la información tiene un orden que conviene respetar. A veces serán fechas; otras, etapas de un proyecto o pasos que siguen una secuencia. La ventaja es que no obliga al usuario a leer una explicación larga para entender qué ocurrió primero y qué vino después. Cada momento queda separado y se puede recorrer con bastante facilidad.
Un uso muy común es contar la historia de una empresa. Podemos empezar por su creación y añadir después algún lanzamiento importante, un cambio de sede, un reconocimiento o la llegada de un nuevo servicio. No hace falta incluir cada pequeño detalle, solo los momentos que ayudan a entender su recorrido.
También encaja bien al explicar cómo se presta un servicio. Pensemos en una agencia: recibe la solicitud, habla con el cliente, prepara una propuesta, desarrolla el trabajo y hace la entrega. Aquí las fechas no son tan importantes; lo que interesa es que el proceso se vea claro.
Hay bastantes formas de aprovechar una línea de tiempo:
- Seguir un proyecto: mostrar lo que ya se hizo, en qué punto se encuentra y qué queda pendiente. También podemos apoyarnos en herramientas de gestión de tareas en WordPress.
- Contar una trayectoria personal: ordenar estudios, empleos, cambios profesionales o logros.
- Presentar hechos históricos: colocar cada acontecimiento en su momento para que sea más fácil seguirlo.
- Explicar cómo evolucionó un producto: desde la primera idea hasta sus mejoras y versiones más recientes.
- Reunir premios o reconocimientos: útil para empresas, asociaciones o profesionales.
- Enseñar una hoja de ruta: dejar claro qué objetivos ya se cumplieron y cuáles vienen después. En algunos proyectos también podemos utilizar un checklist de WordPress para organizar las tareas pendientes.
- Explicar una compra o contratación: indicar qué sucede tras enviar una solicitud, hacer el pago o confirmar un pedido.
- Organizar un evento: mostrar horarios, actividades, ponentes y lugares. Para proyectos con varias fechas, también podemos utilizar alguno de los plugins de calendarios de eventos para WordPress.
También podemos usarlo dentro de una página de ventas. Por ejemplo, para enseñar qué recibirá el cliente en cada etapa o cómo será el trabajo desde el primer contacto hasta la entrega. Eso sí, cuanto más simple, mejor. Si metemos demasiados puntos o llenamos cada etapa con varios párrafos, la línea de tiempo pierde sentido. Lo ideal es quedarse con lo importante, usar títulos claros y dejar que el orden haga buena parte del trabajo.
Crear timeline en WordPress de forma manual
Con este método vamos a poder agregar una pequeña línea de tiempo en WordPress personalizada mediante código HTML personalizado, que se puede insertar en cualquier lugar de su sitio web añadiendo un widget en una página de WordPress.
El código que debemos agregar a nuestro sitio unifica tanto el código HTML como el CSS, este código se puede insertar en cualquier parte del sitio siempre y cuando utilicemos el widget respectivo, sin ningún complemento adicional.
<style>
.tl {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.tl:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}
.tl > li {
position: relative;
margin-bottom: 20px;
list-style-type: none !important;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li > .tl-panel {
float: left;
position: relative;
width: 40%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}
.tl-body {
font-size: 18px;
line-height: 26px;
color: rgba(121, 112, 112, 0.71);
}
.tl > li > .tl-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
.tl > li > .tl-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.tl > li > .tl-badge {
z-index: 1;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.tl > li.tl-inverted > .tl-panel {
float: right;
}
.tl > li.tl-inverted > .tl-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.tl > li.tl-inverted > .tl-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.tl-badge {
font-size: 18px !important;
font-weight: bold;
}
.tl-badge.primary {
background-color: #2e6da4 !important;
}
.tl-badge.success {
background-color: #3f903f !important;
}
.tl-badge.warning {
background-color: #f0ad4e !important;
}
.tl-badge.danger {
background-color: #d9534f !important;
}
.tl-badge.info {
background-color: #5bc0de !important;
}
.tl-title {
margin-top: 0;
margin-bottom: 10px;
color: rgba(45, 45, 72, 0.44);
font-size: 20px;
}
@media screen and (max-width: 380px) {
.tl > li > .tl-panel {
width:25% !important;
}
}
@media screen and (max-width: 800px) {
.tl > li > .tl-panel {
width:33%;
}
}
</style>
<ul class="tl">
<li>
<div class="tl-badge success">
2023
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Título de evento línea de tiempo 5</h4>
</div>
<div class="tl-body">
<p>Aquí el contenido de la línea de tiempo. Ingresa una descripción corta del titular.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge warning">
2022
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Título de evento línea de tiempo 4</h4>
</div>
<div class="tl-body">
<p>Aquí el contenido de la línea de tiempo. Ingresa una descripción corta del titular.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge danger">
2021
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Título de evento línea de tiempo 3</h4>
</div>
<div class="tl-body">
<p>Aquí el contenido de la línea de tiempo. Ingresa una descripción corta del titular.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge">
2020
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Título de evento línea de tiempo 2</h4>
</div>
<div class="tl-body">
<p>Aquí el contenido de la línea de tiempo. Ingresa una descripción corta del titular.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge info">
2019
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Título de evento línea de tiempo 1</h4>
</div>
<div class="tl-body">
<p>Aquí el contenido de la línea de tiempo. Ingresa una descripción corta del titular.</p>
</div>
</div>
</li>
</ul>
Este código lo vamos a poder agregar mediante cualquier modulo de widget utilizando la herramienta de html, o bien mediante un modulo de código que agreguemos a nuestras paginas, en el caso de una instalación de Divi, podremos aplicar este código utilizando el modulo respectivo.
Ya una vez tenemos el conocimiento de cómo agregar esta línea de tiempo en WordPress por medio de código, podemos pasar a la opción con plugins, y para ello vamos a ver primero como instalar estos mismos.
Recordemos que contamos con una guía de como instalar complementos en cualquier instalación de WordPress:
Instalar plugin WordPress
Añadir timeline en WordPress mediante plugin
Una de las alternativas más fáciles de configurar en WordPress es mediante un plugin de timeline, y tenemos muchos disponibles en el repositorio de WordPress. De igual forma, también es posible el crear un widget e insertarlo en cualquier lugar con contenido personalizado.
Plugin Cool Timeline
El primer plugin del que vamos a hablar es Cool Timeline. Este complemento utiliza la función de búsqueda en un submenú en una categoría, o en la barra lateral. Después de activar este complemento, vamos a poder ver nuevos elementos en el panel de administración de WordPress bajo el nombre de Timeline Addons, y dentro de este mismo tenemos la opción de ver las líneas de tiempo para WordPress ya creadas, o bien crear una nueva para ello crear eventos según van a ser mostrados en orden por un calendario, así mismo los ajustes del propio timeline.
Ajustes del plugin Cool Timeline
Si lo que necesitamos es personalizar la configuración que se muestra por defecto de nuestro timeline WordPress, debemos ingresar al submenú de Configuración de Cool Timeline donde vamos a encontrar las configuraciones de este complemento, en las que vamos a destacar las siguientes.
Configuración general: en esta solapa podemos encontrar lo que corresponde a la personalización y alineaciones por defecto, la longitud del contenido, tipo de visualización para el título de cada sección, la cantidad de historias a mostrar, activar o desactivar un botón para leer más, el orden de las historias, etc.
Configuración de estilo: esta segunda solapa nos proporciona los cambios que podemos hacer a nivel de personalización de los colores, fondos y otros elementos. También en caso de que lo necesitemos, se puede agregar CSS personalizado en WordPress para definir aún más los colores de nuestra tienda.
Configuración de tipografía: esta pestaña es una de las más simples de comprender, ya que, solo tenemos información referente a la configuración del tamaño de fuente, la familia y el peso de cada elemento que se va a mostrar en la línea de tiempo.
Configuración avanzada: esta solapa es informativa, porque solo nos muestra las diferencias entre las versiones gratuita y profesional (de pago).
Hay que tener en cuenta que una vez terminemos de realizar las personalizaciones, se debe hacer clic en el botón Guardar cambios o no se harán efectivos estos cambios que hemos realizado en nuestro sitio.
Creación de una línea de tiempo en WordPress con Cool Timeline
En este momento podemos crear historias para usarlas como eventos en el widget de línea de tiempo de este plugin. Lo primero que debemos hacer es agregar un título y los medios que irían junto con la pestaña de la historia, luego podemos pasar a la descripción de la historia utilizando la interfaz usual de WordPress, tanto Visual como la de Texto. También podemos agregar un icono a la historia haciendo clic en él mismo.
Luego de que tenemos esto configurado, podemos ver al desplazarnos a la parte inferior del contenido tenemos la opción de configurar la fecha/año/hora de la historia, esto es importante, ya que esta opción es la que nos dará la línea de tiempo que necesitamos, es decir los acontecimientos que sucedan antes en el calendario se mostraran más abajo y los más recientes arriba. Una vez tenemos todos los ajustes hechos podemos hacer clic en el botón de publicar para crear las historia de la línea de tiempo.
Ya necesitaríamos volver a repetir el proceso con los demás elementos que aparecerán en la línea temporal en WordPress.
Insertar las líneas de tiempo en editor Gutenberg y clásico
Tenemos dos formas de generar y agregar la línea de tiempo, ya sea por medio del shortcode en WordPress o generando un bloque donde tengamos esta línea de tiempo para poder editarla, para utilizar cualquiera de estas opciones necesitamos agregar el elemento, primero por medio de Gutenberg haciendo clic en el botón + vamos a tener las opciones de este plugin.
Si agregamos los bloques que indican shortcode vamos a ver ejemplos de cómo se va a ver nuestro timeline en WordPress cuando la ingresemos en el sitio, si necesitamos modificar estos mismos, podemos ver sus ajustes, de forma directa en el panel lateral:
Sí, por el contrario, utilizamos la opción de bloque sin shortcode, tendremos una vista general de como va a ser nuestra línea de tiempo con la diferencia de que podremos editarla en el momento:
Para agregar esto en el editor clásico si tendremos una gran diferencia, ya que desde el editor clásico no podremos ver una previsualización de cómo se inserta el shortcode, y no tendremos disponible el modo de línea de tiempo preestablecida, solo podremos agregarlo por medio de shortcode y de la siguiente forma.
Plugin Timeline Module for Divi
Timeline Module for Divi añade a Divi los módulos necesarios para crear una línea de tiempo sin tener que preparar toda la estructura con código.
Puede servir para contar la historia de una empresa, ordenar las fases de un proyecto, mostrar una trayectoria profesional o explicar cómo fue cambiando un producto con el paso del tiempo.
El plugin necesita que Divi esté activo, ya que funciona como una ampliación de su constructor Divi Builder. Si usamos otro tema o editor, sus módulos no aparecerán.
La instalación se hace igual que con cualquier otro plugin de WordPress:
- Entramos al panel de WordPress.
- Abrimos Plugins > Añadir plugin.
- Buscamos Timeline Module for Divi.
- Localizamos el desarrollado por Cool Plugins.
- Pulsamos Instalar ahora.
- Cuando termine, hacemos clic en Activar.
Antes de instalarlo, también podemos comprobar si el plugin es compatible con nuestra versión de WordPress y si recibe actualizaciones con regularidad.
Después de activarlo, encontraremos sus opciones al abrir una página con Divi Builder.
Añadir la línea de tiempo de Timeline module for Divi
Primero abrimos la página donde irá el timeline y seleccionamos Editar con Divi. Creamos una sección, añadimos la fila y abrimos el buscador de módulos.
Al escribir Timeline, debería aparecer el módulo incluido por el plugin. Lo añadimos y empezamos a crear los distintos puntos de la línea.
Cada etapa puede llevar una fecha, un título y una descripción. También admite imágenes, iconos o vídeos, aunque no siempre hace falta usar todos estos elementos. A veces una fecha y un texto breve son más que suficientes.
El diseño se ajusta desde las opciones habituales de Divi. Allí podemos cambiar la tipografía, los colores, los fondos, la separación entre etapas, el tamaño de los iconos o la posición de cada acontecimiento.
La versión gratuita permite trabajar con timelines verticales. Los puntos pueden quedar todos en un mismo lado o ir alternándose alrededor de la línea central. El diseño horizontal forma parte de la versión Pro.
Mientras editamos, podemos ir viendo el resultado en la propia página. Aun así, antes de publicarlo conviene abrirlo también desde un móvil y comprobar que mantiene un diseño adaptable. Puede que tengamos que acortar algún texto, reducir espacios o ajustar imágenes para que la secuencia siga siendo fácil de leer.
Conclusión
Crear un timeline en WordPress puede venirnos muy bien cuando necesitamos contar algo que sigue un orden. Fechas, etapas, cambios o momentos importantes se entienden mejor si los presentamos como una secuencia y no repartidos en varios párrafos largos.
Podemos usarlo para mostrar la historia de una empresa, explicar cómo se desarrolla un servicio, enseñar la evolución de un producto o resumir la trayectoria de una persona. También encaja bastante bien en hojas de ruta, donde queremos diferenciar lo que ya se ha completado de lo que todavía está por llegar.
En WordPress tenemos varias formas de hacerlo. Podemos instalar un plugin específico, utilizar algún módulo incluido en nuestro constructor visual o crear la estructura con código. La elección dependerá del diseño que busquemos y de las herramientas que ya estemos usando en la web.
Si trabajamos con Divi, por ejemplo, Timeline Module for Divi permite montar la línea de tiempo desde el propio editor. Podemos cambiar colores, tipografías, iconos y espacios sin tener que construir cada parte manualmente.
Una vez terminada, merece la pena revisar cómo se ve fuera del ordenador. En móvil puede que algunos textos queden demasiado largos o que las imágenes ocupen más espacio del necesario. A veces basta con acortar una descripción o reducir los márgenes para que todo se siga con más facilidad. Podemos ayudarnos de algunas herramientas de diseño web responsive para comprobar el resultado en diferentes tamaños de pantalla.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
