Creación de una sección de "Nuestro proceso" con las nuevas estructuras de columnas de Divi

Las nuevas estructuras de columnas de Divi han agregado sin lugar a dudas una tonelada más de posibilidades de diseño integradas a Divi. Para mostrarle lo único que puede llegar a ser con las versátiles estructuras de columnas de Divi, le mostraremos cómo crear una sección única de “nuestro proceso” utilizando únicamente las opciones integradas de Divi. Además de eso, también agregaremos un efecto de desplazamiento sutil que aparece al pasar el ratón por uno de los pasos del proceso. Estas secciones son excelentes para explicar cómo hace lo que hace a sus clientes o posibles clientes.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado que puede esperar de este tutorial.

Agregar nueva sección

Color de fondo

Agregue una sección estándar a una página nueva o existente y use el siguiente color de fondo para ella:

• Color de fondo: # 3a1dad

Espaciado

Vaya a la configuración de espaciado a continuación y agregue un relleno superior e inferior personalizado.

• Acolchado superior: 170px
• Acolchado inferior: 170px

Visibilidad

Estamos creando una alternativa en tamaños de pantalla más pequeños, pero comenzaremos creando la versión de escritorio. Es por eso que deshabilitamos esta sección en el teléfono y la tableta en la configuración de visibilidad.

Agregar fila n. ° 1

Estructura de la columna

Una vez que haya terminado de modificar la configuración de la sección, continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregar fondo degradado a las columnas 1, 3 y 5

Para crear un buen efecto de desplazamiento, vamos a agregar un fondo degradado a las columnas 1, 3 y 5. Estas son las columnas que contendrán un paso de proceso. Usaremos las dos columnas restantes para conectar los pasos entre sí. Cada una de las tres columnas que mencionamos necesitará el mismo fondo degradado:

• Color 1: # 580cf2
• Color 2: rgba (41,196,169,0)
• Columna 1 Tipo de degradado: radial
• Posición inicial de la columna 1: 38%
• Posición final de la columna 1: 38%

Dimensionamiento

Una vez que haya terminado de agregar los fondos degradados, vaya a la configuración de tamaño y habilite la opción de ancho completo.

• Hacer esta fila de ancho completo: Sí

Espaciado

También necesitaremos algunos valores de relleno personalizados para toda la fila y la columna que están dedicadas a mantener los pasos del proceso.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 1: 20px
• Relleno inferior de la columna 1: 20px
• Relleno superior de la columna 3: 20px
• Relleno inferior de la columna 3: 20px
• Relleno superior de la columna 5: 20px
• Relleno inferior de la columna 5: 20px

Clonar fila n. ° 1 dos veces

Antes de agregar módulos, vamos a clonar la fila dos veces. Esto nos ayudará a ahorrar tiempo en los próximos pasos.

Modificar el primer duplicado

Eliminar fondos degradados de columna

Abra la segunda fila en su sección (el primer duplicado) y elimine todos los fondos de degradado de columna que se le han aplicado. No los necesitaremos ya que la segunda fila no contendrá ningún paso del proceso, solo un título y divisores verticales que conectarán los pasos.

Eliminar espacio entre columnas

Del mismo modo, elimine todo el relleno personalizado de columna que se ha aplicado a las columnas 1, 3 y 5.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregue el módulo Blurb a la primera columna de la fila n. ° 1

Agregar contenido

¡Es hora de comenzar a agregar los módulos! Comenzaremos con un módulo Blurb en la columna 1 de la primera fila. Este módulo de Blurb contendrá el contenido de nuestro primer paso, así que continúe y agregue el texto de su elección.

Elegir icono

También estamos usando el siguiente ícono que indicará dónde buscar para el siguiente paso:

Color de fondo predeterminado

Luego, agregue un color de fondo predeterminado al módulo Blurb. Este color de fondo es el mismo que usamos para la sección. Oculta el fondo degradado de la columna que agregamos en la parte anterior de este tutorial.

• Color de fondo: # 3a1dad

Colocar el cursor sobre el color de fondo

Sin embargo, queremos que el fondo degradado de la columna se muestre al pasar el mouse. Es por eso que cambiamos el color de fondo al pasar el mouse por uno completamente transparente.

• Color de fondo: rgba (255,255,255,0)

Configuración de iconos predeterminada

Continúe yendo a la configuración del icono y realizando algunos cambios.

• Color del icono: # 9d8ad8
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 80px

Configuración del icono de desplazamiento

Aplique un color de icono y un tamaño de fuente diferentes al pasar el mouse.

• Color del icono: #ffffff
• Tamaño de fuente del icono: 120px

Configuración de texto

A continuación, vaya a la configuración de texto y realice algunos cambios.

• Orientación del texto: centro
• Color del texto: claro

Configuración del texto del título

La configuración del texto del título también debe modificarse.

• Peso de la fuente del título: Ultra Bold
• Estilo de fuente del título: mayúsculas

Transiciones

Para crear una transición suave, aumentaremos la duración de la transición.

• Duración de la transición: 500 ms

Clonar el módulo de propaganda y colocarlo en columnas desiguales (tanto en la fila 1 como en la 3)

Ahora que hemos creado el primer paso del Módulo Blurb, podemos clonarlo 5 veces y colocar los duplicados en las columnas marcadas en la pantalla de impresión a continuación.

Cambiar el contenido y el icono de cada duplicado

Por supuesto, tendrás que cambiar el contenido de cada uno de los duplicados junto con el icono para asegurarte de que el proceso tiene sentido.

Agregar divisor horizontal a la segunda columna de la fila n. ° 1

Visibilidad

El segundo módulo que necesitaremos agregar es un módulo divisor. Estamos usando este módulo para conectar todos los pasos del módulo Blurb entre sí. Continúe y agregue uno a la segunda columna de la primera fila.

• Mostrar divisor: Sí

Color del divisor

A continuación, cambie el color del divisor.

• Color: #dddddd

Espaciado

Para alinear el módulo divisor verticalmente, usaremos un margen superior. También aumentaremos el ancho del módulo usando algunos márgenes negativos izquierdo y derecho.

• Margen superior: 150 px
• Margen izquierdo: -60px
• Derecha: -60px

Clonar el divisor horizontal y colocarlo en columnas pares (ambas filas 1 y 3)

Clone el módulo divisor y colóquelo en las columnas que están marcadas en la pantalla de impresión a continuación:

Agregar divisor vertical a la primera columna de la fila n. ° 2

Visibilidad

También necesitaremos un divisor vertical. Para crear uno, agregaremos un nuevo módulo divisor a la columna 1 de la segunda fila, pero nos aseguraremos de que la opción 'Mostrar divisor' esté desactivada.

• Mostrar divisor: No

Color de fondo

Agregue un color de fondo al módulo a continuación.

• Color de fondo: #dddddd

Dimensionamiento

Y cambie la configuración de tamaño a continuación. Una vez que lo hagas, notarás que un divisor vertical cae en su lugar.

• Ancho: 0.5%
• Alineación del módulo: centro

Espaciado

Para aumentar la altura del divisor vertical, usaremos algunos valores de espaciado personalizados.

• Margen superior: 20px
• Relleno superior: 120 px
• Acolchado inferior: 120 px

Clonar el divisor vertical y colocar el duplicado en la columna 5 de la fila n. ° 2

Clona el divisor vertical que has creado y colócalo en la última columna de la segunda fila.

Agregue el módulo de texto del título a la columna 3 de la fila n. ° 2

Agregar contenido

El último módulo que necesitaremos es un título Módulo de texto. Agregue este módulo a la tercera columna de la segunda fila con algún contenido de su elección.

Configuración del texto del encabezado

Vaya a la configuración del texto del título y realice algunos cambios en la apariencia de su título.

• Peso de fuente del encabezado 2: Ultra Bold
• Alineación del texto del encabezado 2: centro
• Título 2 Color del texto: rgba (255,255,255,0.09)
• Tamaño del texto del encabezado 2: 220 px (escritorio), 150 px (tableta), 100 px (teléfono)
• Encabezado 2 espaciado de letras: -50px (escritorio), -30px (tableta), -25px (teléfono)

Espaciado

Por último, agregue algunos valores de espaciado personalizados para permitir que el título Módulo de texto encaje en su lugar.

• Margen superior: 30 px
• Margen izquierdo: -800px
• Margen derecho: -800px

Crear alternativa para tableta y teléfono

Agregar nueva sección

Color de fondo

Como se mencionó al comienzo de esta publicación, crearemos una alternativa para tamaños de pantalla más pequeños. Continúe y agregue una nueva sección regular con el mismo color de fondo que la anterior.

• Color de fondo: # 3a1dad

Espaciado

Agregue algunos valores de relleno superior e inferior personalizados.

• Acolchado superior: 170px
• Acolchado inferior: 170px

Visibilidad

Y oculta la sección en el escritorio en la configuración de visibilidad.

Agregar fila n. ° 1

Estructura de la columna

En lugar de usar una fila de 6 columnas, como hicimos para la sección de escritorio, usamos solo una columna.

Clonar el módulo de texto del título de la sección anterior y colocarlo en la fila n. ° 1

Clone el módulo de texto del título de la sección de su escritorio y coloque el duplicado en su nueva fila.

Eliminar espaciado

Continúe eliminando la configuración de espaciado de este módulo.

Agregar fila n. ° 2

Estructura de la columna

Luego, agregue otra fila con una columna.

Clonar el módulo de propaganda de la sección anterior y colocarlo en la fila n. ° 2

Clona uno de los pasos del módulo Blurb en la sección del escritorio y coloca el duplicado en tu nueva fila.

Cambiar el ícono

Cambie el icono por el que apunte hacia abajo.

Cambiar talla

A continuación, cambie la configuración de tamaño.

• Ancho: 39% (tableta), 59% (teléfono)
• Alineación del módulo: centro

Clonar el divisor vertical de la sección anterior y colocarlo en la fila 2

Aquí también estamos usando el divisor vertical de la sección anterior. Continúe, clónelo y coloque el duplicado justo debajo del Módulo Blurb.

Cambiar espaciado

Cambie la configuración de espaciado de este módulo para disminuir su altura.

• Relleno superior: 50px
• Acolchado inferior: 50px

Clone ambos módulos tantas veces como desee

Puede clonar ambos módulos tantas veces como desee para mostrar todos los pasos del proceso en tamaños de pantalla más pequeños.

Avance

Ahora que hemos pasado por todos los pasos, echemos un vistazo final al resultado.

Pensamientos finales

En esta publicación, le mostramos cómo usar creativamente las estructuras de columnas de Divi para crear una sección de proceso sorprendente y única. Además de eso, también hemos agregado un efecto de desplazamiento sutil a cada uno de los pasos del proceso que aparece una vez que coloca el cursor sobre un elemento. Siéntase libre de jugar con este diseño para crear su propia alternativa única. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!