Hoy te traigo otro snippet útil para Gutenberg: un timeline horizontal animado totalmente personalizado, que puedes insertar directamente desde un bloque de HTML sin depender de constructores visuales o plugins adicionales.
¿Qué vamos a crear?
Un timeline o línea de tiempo con 8 pasos, perfecto para mostrar procesos, roadmaps o fases de un proyecto, con las siguientes características:
- Diseño horizontal responsive (que se adapta a móvil/tablet).
- Animación «en cadena» al cargar.
- Efecto hover con escala de grises + tooltip.
- Hecho solo con HTML y CSS.
Código completo del timeline
Simplemente copia y pega este código dentro de un bloque de HTML de Gutenberg:
<style>
.timeline-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
padding: 50px 0;
overflow: hidden;
}
.timeline-track {
display: flex;
justify-content: space-between;
position: relative;
flex-wrap: nowrap;
}
.timeline-track:before {
content: "";
position: absolute;
top: 36px;
left: 0;
width: 100%;
height: 2px;
background: #ccc;
z-index: 1;
transition: background 0.3s ease;
}
.timeline-step {
position: relative;
width: 12.5%;
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s forwards;
}
.timeline-step:nth-child(1) { animation-delay: 0.2s; }
.timeline-step:nth-child(2) { animation-delay: 0.4s; }
.timeline-step:nth-child(3) { animation-delay: 0.6s; }
.timeline-step:nth-child(4) { animation-delay: 0.8s; }
.timeline-step:nth-child(5) { animation-delay: 1s; }
.timeline-step:nth-child(6) { animation-delay: 1.2s; }
.timeline-step:nth-child(7) { animation-delay: 1.4s; }
.timeline-step:nth-child(8) { animation-delay: 1.6s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-step:before {
content: "";
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
background: #13b0a0;
border-radius: 50%;
z-index: 2;
transition: background 0.3s ease, transform 0.3s ease;
}
.timeline-step:hover:before {
background: #111;
transform: translateX(-50%) scale(1.2);
}
.timeline-content {
margin-top: 60px;
}
.timeline-content img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 10px;
transition: filter 0.3s ease;
}
.timeline-step:hover img {
filter: grayscale(100%);
}
.timeline-content h4 {
font-size: 1rem;
margin-bottom: 5px;
}
.timeline-content p {
font-size: 0.85rem;
color: #555;
}
/* Tooltip */
.timeline-step:hover .tooltip {
opacity: 1;
transform: translateY(-10px);
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(0);
background: rgba(0,0,0,0.7);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.75rem;
opacity: 0;
transition: all 0.3s ease;
white-space: nowrap;
pointer-events: none;
}
/* Responsive */
@media (max-width: 768px) {
.timeline-track {
flex-wrap: wrap;
}
.timeline-step {
width: 50%;
margin-bottom: 40px;
}
.timeline-track:before {
height: 100%;
width: 2px;
left: 50%;
top: 0;
}
.timeline-step:before {
top: auto;
left: 50%;
transform: translateX(-50%);
margin-top: 0;
}
}
</style>
<div class="timeline-container">
<div class="timeline-track">
<div class="timeline-step">
<div class="tooltip">Inicio</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/article-image-1.webp" alt="Paso 1">
<h4>Paso 1</h4>
<p>Idea inicial y análisis de objetivos.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Roadmap</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-2.webp" alt="Paso 2">
<h4>Paso 2</h4>
<p>Planificación detallada y cronograma.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Diseño UI</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-3.webp" alt="Paso 3">
<h4>Paso 3</h4>
<p>Diseño de la interfaz y experiencia.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Desarrollo</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/article-image-1.webp" alt="Paso 4">
<h4>Paso 4</h4>
<p>Programación y desarrollo del proyecto.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Testing</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-2.webp" alt="Paso 5">
<h4>Paso 5</h4>
<p>Pruebas internas y control de calidad.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Feedback</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-3.webp" alt="Paso 6">
<h4>Paso 6</h4>
<p>Feedback del cliente y ajustes finales.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Entrega</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/article-image-1.webp" alt="Paso 7">
<h4>Paso 7</h4>
<p>Entrega y formación del cliente.</p>
</div>
</div>
<div class="timeline-step">
<div class="tooltip">Soporte</div>
<div class="timeline-content">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-2.webp" alt="Paso 8">
<h4>Paso 8</h4>
<p>Soporte post-lanzamiento y seguimiento.</p>
</div>
</div>
</div>
</div>
Lenguaje del código: HTML, XML (xml)
Paso 1
Idea inicial y análisis de objetivos.
Paso 2
Planificación detallada y cronograma.
Paso 3
Diseño de la interfaz y experiencia.
Paso 4
Programación y desarrollo del proyecto.
Paso 5
Pruebas internas y control de calidad.
Paso 6
Feedback del cliente y ajustes finales.
Paso 7
Entrega y formación del cliente.
Paso 8
Soporte post-lanzamiento y seguimiento.
¿Cómo personalizarlo?
Vamos a ver punto por punto cómo modificar este timeline a tu gusto.
1. Cambiar las imágenes
Busca esta línea dentro de cada paso:
<img src="URL-DE-LA-IMAGEN" alt="Paso X">
Sustituye URL-DE-LA-IMAGEN por la URL de la imagen que tengas subida en tu biblioteca de WordPress.
2. Editar los textos de cada paso
Modifica directamente el título y la descripción dentro de cada paso:
<h4>Paso X</h4> <p>Texto descriptivo aquí.</p>
Además, puedes cambiar el texto del tooltip en esta línea:
<div class="tooltip">Texto del tooltip</div>
3. Agregar o eliminar pasos
Si necesitas más de 8 pasos, solo debes duplicar este bloque:
<div class="timeline-step"> ... </div>
Y ajustar esta parte del CSS para recalcular el ancho:
.timeline-step {
width: calc(100% / N);
}
Por ejemplo, si quieres 10 pasos:
width: 10%; /* 100% / 10 = 10% */
4. Cambiar la animación y la velocidad
La animación está controlada por la propiedad animation-delay de cada paso:
.timeline-step:nth-child(1) { animation-delay: 0.2s; }
Puedes ajustar la velocidad global de todos los pasos aquí:
animation: fadeInUp 0.6s forwards;
Cámbialo por 0.4s o 1s según lo rápido o lento que quieras que aparezcan.
5. Tooltip y efectos hover
El tooltip se muestra al pasar el ratón, pero también puedes personalizar su color, tamaño o posición en esta clase:
.tooltip {
background: rgba(0,0,0,0.7);
color: #fff;
padding: 5px 10px;
}
Además, puedes modificar el punto de la línea y la imagen con este efecto hover:
.timeline-step:hover img {
filter: grayscale(100%);
}
.timeline-step:hover:before {
background: #111;
}
6. Estilos generales y colores
Todo el color base del timeline lo controla esta variable:
background: #13b0a0; /* Color del punto y línea */
Puedes cambiarlo por tu color corporativo. También puedes modificar la línea base:
.timeline-track:before {
background: #ccc;
}
Resultado final
Con este snippet tendrás una línea de tiempo horizontal elegante, animada y responsive, lista para usar directamente en cualquier página creada con Gutenberg.
Agregar Comentario