Las nuevas estructuras de columnas de Divi sin duda han agregado una tonelada más de posibilidades de diseño integradas a Divi. Para mostrarle lo único que puede llegar a ser con Divi y sus estructuras de columnas versátiles, 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 sutil efecto de desplazamiento que aparece al pasar el cursor sobre uno de los pasos del proceso. Estas secciones son excelentes para explicar cómo haces lo que haces a tus clientes o posibles clientes.
¡Hagámoslo!
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:
- Color de fondo: #3a1dad
Espaciado
Vaya a la configuración de espaciado a continuación y agregue un relleno superior e inferior personalizado.
- Relleno superior: 170px
- Relleno 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.
Añadir Fila #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, agregaremos un fondo degradado a las columnas 1, 3 y 5. Estas son las columnas que contendrán un paso del 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 gradiente: Radial
- Columna 1 Posición inicial: 38%
- Columna 1 Posición final: 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 se dedican a contener los pasos del proceso.
- Relleno superior: 0px
- Relleno inferior: 0px
- Columna 1 Relleno superior: 20px
- Relleno inferior de la columna 1: 20px
- Columna 3 Relleno superior: 20px
- Relleno inferior de la columna 3: 20px
- Columna 5 Relleno superior: 20px
- Columna 5 Relleno inferior: 20px
Clonar fila #1 dos veces
Antes de agregar cualquier módulo, vamos a clonar la fila dos veces. Esto nos ayudará a ahorrar tiempo en los próximos pasos.
Modificar primer duplicado
Eliminar fondos de degradado de columna
Abra la segunda fila en su sección (el primer duplicado) y elimine todos los fondos degradados de columna que se le hayan 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 espaciado de columnas
Del mismo modo, elimine todo el relleno personalizado de columna que se haya aplicado a las columnas 1, 3 y 5.
- Relleno superior: 0px
- Relleno 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 de 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 el siguiente paso:
Color de fondo predeterminado
Luego, agregue un color de fondo predeterminado al módulo de Blurb. Este color de fondo es el mismo que hemos usado para la sección. Oculta el fondo degradado de la columna que hemos agregado en la parte anterior de este tutorial.
- Color de fondo: #3a1dad
Color de fondo flotante
Sin embargo, queremos que el fondo degradado de la columna se muestre al pasar el mouse por encima. Es por eso que estamos cambiando 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 haciendo algunos cambios.
- Color del icono: #9d8ad8
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Icono Tamaño de fuente: 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
- Icono Tamaño de fuente: 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 negrita
- 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: 500ms
Clonar el módulo Blurb y colocarlo en columnas desiguales (tanto en la fila n.º 1 como en la n.º 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 ícono 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.
Agregue un 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 de Blurb entre sí. Continúe y agregue uno a la segunda columna de la primera fila.
- Mostrar divisor: Sí
Color del divisor
Cambia el color del divisor a continuación.
- Color: #dddddd
Espaciado
Para alinear el módulo divisor verticalmente, usaremos un margen superior. También aumentaremos el ancho del módulo usando un margen negativo izquierdo y derecho.
- Margen superior: 150px
- Margen izquierdo: -60px
- Derecha: -60px
Clonar divisor horizontal y colocar en columnas pares (ambas filas n.° 1 y n.° 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:
Agregue un divisor vertical a la primera columna de la fila n.º 2
Visibilidad
Necesitaremos un divisor vertical también. 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é deshabilitada.
- Mostrar divisor: No
Color de fondo
Agregue un color de fondo al siguiente módulo.
- Color de fondo: #dddddd
Dimensionamiento
Y cambie la configuración de Tamaño a continuación. Una vez que lo haga, notará 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: 120px
- Relleno inferior: 120px
Clonar el divisor vertical y colocar el duplicado en la columna 5 de la fila n.º 2
Clone el divisor vertical que ha creado y colóquelo en la última columna de la segunda fila.
Agregar módulo de texto de título a la columna 3 de la fila n.º 2
Agregar contenido
El último módulo que necesitaremos es un Módulo de texto de título. Agregue este módulo a la tercera columna de la segunda fila con algún contenido de su elección.
Ajustes de texto de encabezado
Vaya a la configuración del texto del encabezado y realice algunos cambios en la apariencia de su título.
- Encabezado 2 Peso de fuente: Ultra negrita
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: rgba(255,255,255,0.09)
- Título 2 Tamaño del texto: 220 px (escritorio), 150 px (tableta), 100 px (teléfono)
- Encabezado 2 Espaciado entre letras: -50px (Escritorio), -30px (Tableta), -25px (Teléfono)
Espaciado
Por último, agregue algunos valores de espaciado personalizados para permitir que el módulo de texto del título encaje en su lugar.
- Margen superior: 30px
- 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, vamos a crear una alternativa para tamaños de pantalla más pequeños. Continúe y agregue una nueva sección normal con el mismo color de fondo que la anterior.
- Color de fondo: #3a1dad
Espaciado
Agregue algunos valores de relleno superior e inferior personalizados.
- Relleno superior: 170px
- Relleno inferior: 170px
Visibilidad
Y oculta la sección en el escritorio en la configuración de visibilidad.
Añadir Fila #1
Estructura de la columna
En lugar de usar una fila de 6 columnas, como hicimos con la sección de escritorio, estamos usando una sola columna.
Clonar módulo de texto de título de la sección anterior y colocar 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.
Añadir Fila #2
Estructura de la columna
Luego, agregue otra fila con una columna.
Clonar módulo de publicidad de la sección anterior y colocar en la fila n.º 2
Clone uno de los pasos del Módulo Blurb en la sección de escritorio y coloque el duplicado en su nueva fila.
Cambiar el ícono
Cambia el icono por el que apunta hacia abajo.
Cambiar talla
Cambie la configuración de tamaño a continuación.
- 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 n.º 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
- Relleno inferior: 50px
Clona ambos módulos tantas veces como quieras
Puede clonar ambos módulos tantas veces como desee para mostrar todos los pasos del proceso en pantallas más pequeñas.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.
Pensamientos finales
En esta publicación, le mostramos cómo usar de manera creativa 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 sutil efecto de desplazamiento a cada uno de los pasos del proceso que aparece una vez que pasa 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!