Cómo crear una línea de tiempo con el módulo Blurb de Divi

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 brindan 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 de Divi integradas, lo que significa que no necesitará agregar ningún código CSS adicional. También nos aseguramos 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 su color de fondo.

Acolchado 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

Vaya 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí

Margen y relleno personalizados

A continuación, agregue el siguiente relleno personalizado y margen personalizado a la fila:

• Relleno superior: 1 px
• Acolchado inferior: 0px
• Margen inferior: -200px

Y agregue '3px' al relleno superior e inferior de cada columna.

Desactivar en tableta y teléfono

Por último, desactive la fila tanto en la tableta como en el teléfono.

Agregar otra fila de tres columnas (módulos Blurb)

Fondo degradado de columna

Una vez que haya creado la primera fila de tres columnas, puede continuar y crear la segunda justo debajo de ella (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 degradado: 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
• Acolchado inferior: 100px
• Relleno izquierdo: 60px
• Margen superior: -100px

Agregue '5px' al relleno superior de cada columna también.

Módulo de propaganda

Una vez que haya completado la configuración de la fila, puede agregar un módulo 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 un ícono de su elección.

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 ícono:

• Color del icono: # e09900
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 50px

Dentro de la subcategoría Texto, asegúrese de que la Orientación del texto izquierda esté habilitada.

Las opciones para la subcategoría Texto del encabezado son las siguientes:

• Fuente de encabezado: Crete Round
• Alineación del texto del encabezado: izquierda
• Tamaño de fuente del encabezado: 32px
• Altura de la línea de encabezado: 1em

Luego, abra la subcategoría Body Text 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.7em

También usaremos un borde con la siguiente configuración:

• Usar borde: sí
• Color del borde: # 000000
• Ancho del borde: 2px
• Estilo de borde: punteado

A continuación, 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 degradado: radial
• Dirección radial: centro
• Posición inicial: 20%
• Posición final: 24%

Vaya 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 la línea de texto: 1.7em
• Orientación del texto: centro

Abra la subcategoría Tamaño, use un ancho de '48% 'y seleccione la alineación del módulo correcta.

Por último, use un margen superior de '-100px' y agregue '50px' al relleno superior e inferior.

Clonar el módulo de texto y propaganda

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 propaganda, el color de la propaganda y el primer color de 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 la tableta y el teléfono es ligeramente diferente. Clone la fila con anuncios que ha creado en la parte anterior de esta publicación y siga los siguientes pasos para que se ajuste al 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 degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 1%
• Posición final: 0%

Relleno de filas

Elimine todo el relleno personalizado y el margen que se utilizó en la versión de escritorio y agregue '100px' al relleno superior.

Desactivar en el escritorio

Por último, en lugar de desactivar la fila en el teléfono y la tableta, desactívela en el escritorio.

Resultado

Después de haber seguido todos los pasos de 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úrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!