Cuando se trata de estructurar contenido, crear una línea de tiempo es una excelente manera de mantener la información interesante y atractiva para sus visitantes. También les ayuda a navegar y procesar la información que leen mucho más rápido. Y cuando usa un diseño agradable, también eleva la apariencia general de su página. En esta publicación, le mostraremos cómo crear una sección de línea de tiempo impresionante con Divi y sus opciones de transformación. El diseño que recrearemos seguirá respondiendo en pantallas más pequeñas y es una manera perfecta de usar Divi en lugar de instalar un complemento de línea de tiempo por separado .
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de la sección de la línea de tiempo GRATIS
Para poner sus manos en el diseño de la sección de la línea de tiempo gratuita, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Espaciado
Cree una nueva página o abra una existente y agréguele una sección normal. Abra la configuración de la sección, vaya a la configuración de espaciado y agregue un relleno superior e inferior personalizado.
- Acolchado superior: 12vw
- Acolchado inferior: 0vw
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila. Vaya a la configuración de tamaño en la pestaña de diseño y permita que la fila ocupe todo el ancho de la pantalla.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Visibilidad
Usaremos esta fila para agregar una ilustración en los próximos pasos. Sin embargo, solo necesitamos esa ilustración para el escritorio. Es por eso que ocultaremos toda la fila en la tableta y el teléfono.
Agregar módulo de imagen
Subir ilustración
Como se mencionó en el paso anterior de esta publicación, la única razón por la que necesitamos esta fila es para agregar la ilustración de la línea de tiempo. Puede encontrarlo en la carpeta que ha descargado al principio de esta publicación. Una vez que lo haya localizado, súbalo a un nuevo módulo de imagen.
Dimensionamiento
Para asegurarnos de que todo siga respondiendo en todos los tamaños de pantalla, habilitaremos la opción ‘Forzar ancho completo’ en la configuración de tamaño del Módulo de imagen.
- Forzar ancho completo: Sí
Añadir Fila #2
Estructura de la columna
Continúe agregando una segunda fila a la sección, usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Luego, vaya a la configuración de espaciado. Aquí, queremos limitar el espacio que ocupa la fila (en el escritorio) eliminando todo el relleno superior e inferior personalizado. Estamos reteniendo algo de relleno superior e inferior en tamaños de pantalla más pequeños.
- Relleno superior: 0px (escritorio), 15vw (tableta y teléfono)
- Relleno inferior: 0px (escritorio), 15vw (tableta y teléfono)
Agregue el módulo Blurb a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! Agregue un módulo de Blurb a la columna 1. Ingrese algún contenido de su elección.
Seleccionar icono
Continúe seleccionando un icono de su elección.
Fondo degradado
Agregue un fondo degradado también.
- Color 1: #a5c4ff
- Color 2: #ffffff
- Posición inicial: 40%
- Posición final: 40%
Configuración de iconos
Luego, vaya a la pestaña de diseño y cambie la configuración del icono.
- Color del icono: #ffffff
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 5vw (escritorio), 17vw (tableta), 18vw (teléfono)
Configuración del texto del título
Pase a la configuración del texto del título y modifique las opciones en consecuencia:
- Fuente del título: Didact Gothic
- Peso de la fuente del título: Negrita
- Alineación del texto del título: Centro
- Tamaño del texto del título: 1.1vw (escritorio), 2.7vw (tableta), 4vw (teléfono)
- Altura de la línea de título: 2,8 em
Configuración del texto del cuerpo
Haga lo mismo para la configuración del texto del cuerpo.
- Fuente del cuerpo: Open Sans
- Alineación del cuerpo del texto: Centro
- Tamaño del cuerpo del texto: 0.7vw (escritorio), 1.5vw (tableta), 2.1vw (teléfono)
- Altura de la línea del cuerpo: 2em
Espaciado
También agregaremos algunos márgenes personalizados y valores de relleno que personalizaremos según los diferentes tamaños de pantalla.
- Margen izquierdo: 3vw
- Margen derecho: 3vw
- Margen inferior: 5vw (tableta), 7vw (teléfono)
- Acolchado superior: 2vw (escritorio), 6vw (tableta y teléfono)
- Acolchado inferior: 2vw (escritorio), 6vw (tableta y teléfono)
- Relleno izquierdo: 3vw (escritorio), 9vw (tableta y teléfono)
- Relleno derecho: 3vw (escritorio), 9vw (tableta y teléfono)
Borde
Pase a la configuración del borde y agregue ’20px’ a cada una de las esquinas.
Sombra de la caja
Por último, pero no menos importante, cree algo de profundidad en la página agregando una sutil sombra de cuadro al módulo Blurb.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.1)
Clonar módulo Blurb tres veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de crear y personalizar el Módulo de Blurb, puede clonarlo tres veces. Coloque los duplicados en las columnas restantes de la fila.
Cambiar el fondo degradado del duplicado n.º 1
Abra el primer duplicado (Módulo Blurb en la columna 2) y modifique el primer color del fondo degradado.
- Color 1: #ffa5ae
Cambiar el fondo degradado del duplicado n.º 2
Haga lo mismo para el Módulo de Blurb en la columna 3.
- Color 1: #f7e3a0
Cambiar el fondo degradado del duplicado n.º 3
Y modifique también el fondo degradado del último módulo de Blurb.
- Color 1: #caa5ff
Agregar configuraciones de transformación a los módulos de Blurb
Agregar Transformar Traducir a Blurb Módulo #1
Ahora que tenemos todos los elementos de diseño que necesitamos, ¡podemos comenzar a transformar su posición! Para hacer eso, usaremos la opción de traducción de transformación. Abra el módulo de Blurb en la columna 1 y modifique los valores en consecuencia:
- Abajo: 2vw (escritorio), 0vw (tableta y teléfono)
- Derecha: -106vw (escritorio), 0vw (tableta y teléfono)
Agregar Transformar Traducir a Blurb Módulo #2
Pase al segundo módulo de Blurb y cambie los valores de traducción de transformación en consecuencia:
- Inferior: 16,6vw (inferior), 0vw (tableta y teléfono)
- Derecha: -78vw (derecha), 0vw (tableta y teléfono)
Agregar Transformar Traducir a Blurb Módulo #3
Abra el módulo de Blurb en la columna 3 a continuación y use los siguientes valores de traducción de transformación:
- Abajo: 17vw (escritorio), 0vw (tableta y teléfono)
- Derecha: -46vw (escritorio), 0vw (tableta y teléfono)
Agregar Transformar Traducir a Blurb Módulo #4
Haga lo mismo con el último módulo de Blurb, usando los siguientes valores:
- Abajo: -66vw (escritorio), 0vw (tableta y teléfono)
- Derecha: -24vw (escritorio), 0vw (tableta y teléfono)
Agregar Margen Inferior Negativo a la Fila #2
El uso de la opción de traducción de transformación no eliminará el espacio que ocupan inicialmente los módulos de Blurb en la fila. Para deshacernos de este espacio, podemos agregar un margen inferior negativo a la fila y ¡listo!
- Margen inferior: -15vw (escritorio), 0vw (tableta y teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear una hermosa sección de línea de tiempo utilizando las nuevas opciones de transformación de Divi . ¡Al comienzo del tutorial, pudo descargar el archivo JSON y la ilustración de forma gratuita! Esto debería ayudarlo a comenzar de inmediato. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.