En esta publicación, le mostraremos cómo puede crear fácilmente una línea de tiempo simple pero elegante con sus módulos Blurb de Divi. Combinaremos las diferentes opciones que proporcionan los módulos y las filas para lograr el resultado que puede ver a continuación. El ejemplo que compartiremos se basa únicamente en las opciones integradas de Divi , lo que significa que no necesitará agregar ningún código CSS adicional. También nos estamos asegurando de que se vea bien tanto en computadoras de escritorio como en dispositivos móviles.
Resultado
La apariencia de una línea de tiempo se logra con dos elementos de diseño; la línea que cruza los tres módulos de Blurb y los números. La versión de escritorio se ve así:
Y la versión móvil se ve así:
¡Empecemos!
Cómo crear una línea de tiempo con el módulo Blurb de Divi
Suscríbete a nuestro canal de Youtube
Agregar sección estándar
Color de fondo de la sección
Comience agregando una nueva sección estándar y usando ‘rgba(0,0,0,0.12)’ como color de fondo.
Relleno de sección
Vaya a la pestaña Diseño y use un relleno superior de ‘300px’.
Agregar fila de tres columnas (línea de tiempo)
Fondos de columna
Una vez que haya creado la sección, agréguele una fila de tres columnas. Dentro de la pestaña Contenido de esa fila, use ‘#e09900’ como color de fondo de la Columna 1, ‘#0c71c3’ como color de fondo de la Columna 2 y ‘#8300e9’ como color de fondo de la Columna 3.
Dimensionamiento
Pase a la pestaña Diseño y use la siguiente configuración para la subcategoría Tamaño:
- Hacer esta fila FulldWidth: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
Margen personalizado y relleno
A continuación, agregue el siguiente relleno personalizado y margen personalizado a la fila:
- Relleno superior: 1px
- Relleno inferior: 0px
- Margen inferior: -200px
Y agregue ‘3px’ al relleno superior e inferior de cada columna.
Desactivar en tableta y teléfono
Por último, deshabilite la fila tanto en la tableta como en el teléfono.
Agregar otra fila de tres columnas (módulos de Blurb)
Fondo degradado de columna
Una vez que haya creado la primera fila de tres columnas, puede continuar y crear la segunda justo debajo (comparten la misma sección). Cada una de las columnas necesita un fondo degradado con la misma configuración pero con un primer color diferente:
- Primer color: #e09900 (Columna 1), #0c71c3 (Columna 2), #8300e9 (Columna 3)
- Segundo Color: rgba(255, 255, 255, 0)
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 73%
- Posición final: 92%
Hacer fila de ancho completo
Luego, vaya a la pestaña Diseño y habilite la opción ‘Hacer esta fila de ancho completo’.
Relleno personalizado de fila
Abra la subcategoría de espaciado y use el siguiente relleno personalizado y margen personalizado para la fila:
- Relleno superior: 0px
- Relleno derecho: 60px
- Relleno inferior: 100px
- Relleno izquierdo: 60px
- Margen superior: -100px
Agregue ‘5px’ al relleno superior de cada columna también.
Módulo de publicidad
Una vez que haya completado la configuración de la fila, puede agregar un módulo de Blurb a la primera columna de la fila que acaba de crear. Dentro de la subcategoría Imagen e ícono de la pestaña de contenido, habilite la opción ‘Usar ícono’ y seleccione el ícono que prefiera.
Desplácese hacia abajo en la misma pestaña y use ‘#f4f4f4’ como color de fondo.
Vaya a la pestaña Diseño y realice los siguientes ajustes en la subcategoría Imagen e icono:
- Color del icono: #e09900
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 50 px
Dentro de la subcategoría Texto, asegúrese de que la Orientación izquierda del texto esté habilitada.
Las opciones para la subcategoría Texto de encabezado son las siguientes:
- Fuente del encabezado: Creta redonda
- Alineación del texto del encabezado: Izquierda
- Tamaño de fuente del encabezado: 32 px
- Altura de la línea de cabecera: 1em
Luego, abra la subcategoría Texto del cuerpo y use la siguiente configuración:
- Alineación del texto del cuerpo: Izquierda
- Tamaño de fuente del cuerpo: 12px
- Altura de la línea del cuerpo: 1,7 em
También usaremos un borde con las siguientes configuraciones:
- Usar borde: Sí
- Color del borde: #000000
- Ancho del borde: 2px
- Estilo de borde: Punteado
Luego, abra la subcategoría Tamaño y use ‘279px’ para el ancho del contenido y ‘100%’ para el ancho.
Por último, agregue ’30px’ al relleno superior, derecho, inferior e izquierdo.
Módulo de texto
Una vez que haya agregado y modificado el módulo Blurb, continúe y agregue un módulo de texto justo debajo de él. El módulo de texto también necesitará un fondo degradado:
- Primer color: #e09900
- Segundo Color: rgba(255, 255, 255, 0)
- Tipo de gradiente: Radial
- Dirección radial: Centro
- Posición inicial: 20%
- Posición final: 24%
Pase a la pestaña Diseño y use la siguiente configuración para la subcategoría Texto:
- Tamaño de fuente de texto: 21px
- Color del texto: #FFFFFF
- Altura de línea de texto: 1,7 em
- Orientación del texto: Centro
Abra la subcategoría Tamaño, use un ancho de ‘48%’ y seleccione la Alineación de módulo correcta.
Por último, use un margen superior de ‘-100px’ y agregue ’50px’ al relleno superior e inferior.
Clonar Blurb y módulo de texto
Una vez que haya completado la primera columna, puede clonar ambos módulos y colocarlos en las otras dos columnas. Lo único que tendrá que cambiar es el icono de la publicidad, el color de la publicidad y el primer color degradado del Módulo de texto en ‘#0c71c3’ para la segunda columna y ‘#8300e9’ para la última columna.
Desactivar en tableta y teléfono
Una vez que haya completado esta segunda fila, asegúrese de desactivarla también para el teléfono y la tableta.
Clonar fila de tres columnas (tableta y teléfono)
La versión de la línea de tiempo en tabletas y teléfonos es ligeramente diferente. Clone la fila con anuncios publicitarios que creó en la parte anterior de esta publicación y siga los siguientes pasos para que quepa en el teléfono y la tableta.
Agregar fondo degradado de fila
La fila en la tableta y el teléfono necesitará el siguiente fondo degradado:
- Primer color: rgba(0,0,0,0.7)
- Segundo Color: rgba(255, 255, 255, 0)
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición de inicio: 1%
- Posición final: 0%
Relleno de fila
Elimine todo el relleno personalizado y el margen que se usó en la versión de escritorio y agregue ‘100px’ al relleno superior.
Deshabilitar en el escritorio
Por último, en lugar de deshabilitar la fila en el teléfono y la tableta, deshabilítela en el escritorio.
Resultado
Después de haber seguido todos los pasos en la publicación, debería poder lograr el siguiente resultado en el escritorio:
Y el siguiente resultado en tableta y teléfono:
Pensamientos finales
En esta publicación, le mostramos cómo puede crear una línea de tiempo simple de su módulo Blurb usando nada más que las opciones integradas de Divi. Dos factores que ayudan a identificar los Módulos de Blurb como una línea de tiempo son la línea que conecta los tres Módulos de Blurb y los números. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!