En este increíble tutorial gratuito para el canal de YouTube aprenderás a crear una línea de tiempo (timeline) vertical con Divi Builder (ver demo), ¡y lo mejor de todo es que no necesitarás instalar ningún plugin!
Construir una línea de tiempo en Divi puede parecer un poco tedioso al principio debido a su estructura modular, pero en este tutorial te guiaré paso a paso, mostrándote trucos, buenas prácticas y soluciones creativas para lograr resultados sorprendentes. Utilizaremos secciones, filas, columnas y módulos nativos de Divi, combinados con pequeños fragmentos de código CSS para adaptar la estructura visual, y un poco de JavaScript para implementar la funcionalidad de una barra de progreso vertical animada.
🔧 Este es un ejercicio 10 de 10 que realmente vale cada segundo de tu tiempo. Estoy seguro de que aprenderás varias técnicas útiles que podrás aplicar más adelante en tus propios proyectos con Divi.
¿Qué tipo de timeline vamos a crear?
En este ejemplo, nos centraremos en una línea de tiempo diseñada como itinerario de boda, pero no te preocupes: este es solo un caso práctico. Tú podrás adaptarlo fácilmente a otros contextos, como:
- Itinerario de un evento corporativo
- Cronología de servicios o procesos
- Presentación de tu equipo de trabajo o historia de la empresa
- Línea del tiempo educativa o profesional
🧠 La clave está en tu creatividad y en el tipo de contenido que deseas presentar. Este diseño es completamente adaptable.
Diseño 100% responsivo
Esta línea de tiempo está perfectamente diseñada para ofrecer una experiencia óptima en cualquier dispositivo. He cuidado cada detalle para asegurar que se visualice de forma impecable en escritorio, tabletas y móviles.
Fragmentos de código utilizados
Para lograr este diseño y funcionalidad, vamos a utilizar pequeños fragmentos de código que te detallo a continuación. Están organizados en el mismo orden en que se implementan dentro del tutorial:
1. Fragmento CSS para implementar el indicador en la llamada a la acción (after):
content: ''; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border: 15px solid transparent; border-left-color: white;
2. Fragmento CSS para ajustar el ícono en versión móvil (elemento principal):
grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center;
3. Fragmento CSS para ajustar la hora en versión móvil (elemento principal):
grid-column: 2; position: absolute; top: -30px;
4. Fragmento CSS para ajustar los elementos dentro de la columna (elemento principal):
display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0px 20px; align-items: center;
5. Fragmento CSS para ajustar los elementos dentro de la columna (elemento principal):
display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0px 20px; align-items: center;
6. Código CSS para agregar la barra vertical de progreso (sección / CSS de formato libre):
.ov-timeline-container {
--progress-height: 0%;
}
/* Estilos linea timeline */
.ov-timeline-container::before,
.ov-timeline-container::after {
content: '';
position: absolute;
left: 50%;
top: 15%;
width: 3px;
transform: translateX(-50%);
border-radius: 2px;
}
.ov-timeline-container::before {
background: #bbc4a6;
bottom: 13%;
}
.ov-timeline-container::after {
height: var(--progress-height, 0%);
background: linear-gradient(to bottom, #829373, #829373);
box-shadow: 0 0 8px rgba(130, 147, 115, 0.3);
transition: height 0.1s ease-out;
}
.ov-timeline-icon .et_pb_icon_wrap {
transition: all 0.4s ease;
}
/* OV Timeline Icono - activo */
.ov-timeline-icon .et_pb_icon_wrap.active {
background-color: #829373 !important;
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(130, 147, 115, 0.4);
}
@media (max-width: 768px) {
.ov-timeline-container::before,
.ov-timeline-container::after {
left: 44px;
top: 12%;
bottom: 13%;
transform: none;
}
}
7. Fragmento de código JavaScript para animar la barra de progreso vertical:
<script>
function updateTimelineProgress(percentage) {
const timeline = document.querySelector('.ov-timeline-container');
if (!timeline) return;
const iconWraps = document.querySelectorAll('.ov-timeline-icon .et_pb_icon_wrap');
const totalIcons = iconWraps.length;
if (totalIcons > 0) {
iconWraps.forEach((iconWrap, index) => {
const activationPoint = ((index + 1) / totalIcons) * 100;
if (percentage >= activationPoint) {
iconWrap.classList.add('active');
} else {
iconWrap.classList.remove('active');
}
});
}
const topPosition = window.innerWidth <= 768 ? 12 : 15;
const bottomPosition = 13; // Cambiar este valor según el CSS bottom
const availableHeight = 100 - topPosition - bottomPosition;
let adjustedHeight = 0;
if (totalIcons > 0) {
const firstIconActivation = (1 / totalIcons) * 100;
if (percentage >= firstIconActivation) {
const adjustedPercentage = (percentage - firstIconActivation) / (100 - firstIconActivation);
adjustedHeight = adjustedPercentage * availableHeight;
}
} else {
adjustedHeight = (percentage / 100) * availableHeight;
}
timeline.style.setProperty('--progress-height', adjustedHeight + '%');
}
function calculateScrollProgress() {
const timeline = document.querySelector('.ov-timeline-container');
if (!timeline) return 0;
const timelineRect = timeline.getBoundingClientRect();
const windowHeight = window.innerHeight;
let progress = 0;
if (timelineRect.top < windowHeight * 0.8 && timelineRect.bottom > 0) {
const timelineStart = timelineRect.top;
const timelineHeight = timelineRect.height;
const visiblePoint = windowHeight * 0.5;
if (timelineStart < visiblePoint) {
const scrolledDistance = visiblePoint - timelineStart;
const totalDistance = timelineHeight - (windowHeight * 0.3);
progress = Math.min(100, Math.max(0,
(scrolledDistance / totalDistance) * 100
));
}
}
return progress;
}
window.addEventListener('scroll', function() {
const scrollProgress = calculateScrollProgress();
updateTimelineProgress(scrollProgress);
});
document.addEventListener('DOMContentLoaded', function() {
updateTimelineProgress(0);
});
</script>
Descargar demo
Descarga la demo del ejercicio hacienco clic en el siguiente botón:
Descargar JSON desde
Conclusión
Como has podido ver, crear una línea de tiempo vertical profesional en Divi sin plugins es totalmente posible y el resultado es elegante, funcional y adaptable. Esta solución aprovecha al máximo las herramientas nativas de Divi y demuestra que con algo de creatividad y unos pocos ajustes con código, puedes llevar tus diseños al siguiente nivel.
Si este tutorial te gustó y te ayudó, estoy seguro de que te encantará lo que tengo preparado en mi academia OV Divi:
✅ Tutoriales exclusivos, ejercicios prácticos y contenido avanzado para que domines Divi y crees sitios web únicos y profesionales.
👉 Accede hoy a contenido que marcará la diferencia en tus proyectos web con Divi
¡Nos vemos en el próximo tutorial!
0 comentarios