Creación de una sección “Nuestro proceso” con las nuevas estructuras de columnas de la divina

Las nuevas estructuras de las columnas de la Divica, sin duda, han agregado muchas posibilidades de diseño incorporadas al Div. Para mostrarle lo único que puede obtener con las estructuras versátiles de las columnas de la Divica, le mostraremos cómo crear una sección de “proceso” única utilizando solo el div. Además, también agregaremos un efecto flotante sutil que aparece cuando coloca uno de los pasos del proceso. Estas secciones son excelentes para explicar cómo hace lo que hace a sus clientes o clientes potenciales. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado que puede esperar de este tutorial.

Agregue una nueva sección de 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

El espacio ir a la siguiente configuración de espaciado y agregue algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 170 PX
Revestimiento inferior: 170 PX

Visibilidad creamos una alternativa a las dimensiones de pantalla más pequeñas, pero comenzaremos a crear la versión de escritorio. Por lo tanto, deshabilitamos esta sección en el teléfono y la tableta en la configuración de visibilidad.

Agregue la estructura de la columna de la fila # 1 Después de haber terminado de cambiar la configuración de la sección, continúe agregando una nueva línea utilizando la siguiente estructura de columna:

Agregue el fondo de gradiente en las columnas 1, 3 y 5 para crear un hermoso efecto flotante, agregaremos un fondo de gradiente en las columnas 1, 3 y 5. Estas son las columnas que contendrán cada una una paso de proceso. Utilizaremos las dos columnas restantes para conectar los pasos entre sí. Cada una de las tres columnas mencionadas necesitará el mismo fondo de gradiente: Color 1: # 580CF2
Color 2: RGBA (41.196.169.0)
Columna 1 tipo de gradiente: radial
Columna 1 Posición de inicio: 38%
Columna 1 Posición final: 38%
Dimensión Después de haber terminado de agregar las bases de gradiente, vaya a la configuración del tamaño y active la opción de ancho completo.

Haga esta fila ancho completo: sí
Espacio también, necesitaremos algunos valores de llenado personalizados para toda la fila y la columna que se dedican a mantener las etapas del proceso.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 1 revestimiento superior: 20 px
Columna 1 revestimiento inferior: 20 px
Columna 3 revestimiento superior: 20 px
Columna 3 Reinicio inferior: 20 PX
Columna 5 revestimiento superior: 20 px
Columna 5 Reinicio inferior: 20 PX
Clon giro # 1 dos veces antes de agregar módulos, clonaremos el giro dos veces. Esto nos ayudará a ahorrar tiempo en los próximos pasos.

Cambie el primer duplicado Retire los fondos de gradiente de la columna abrir la segunda fila desde su sección (primer duplicado) y elimine todos los fondos de gradiente de columna. No los necesitaremos, porque la segunda fila no contendrá ningún proceso de proceso, sino solo un título vertical y separadores que conectarán los pasos.

Elimine la distancia entre las columnas de manera similar, elimine todos los rellenos personalizados de la columna que se han aplicado a las columnas 1, 3 y 5. La parte superior de la parte superior: 0 PX

Finamiento inferior: 0 PX
¡Agregue el módulo de la propaganda a la primera línea Colum # 1 Agregar contenido es hora de comenzar a agregar módulos! Comenzaremos con un módulo de propaganda en la columna 1 de la primera fila. Este módulo de propaganda contendrá el contenido de nuestro primer paso, así que continúe y agregue un texto a su elección.
Elija el icono, también usamos el siguiente icono para indicar dónde buscar el siguiente paso:

Color de fondo predeterminado y luego, agregue un color de fondo implícito al módulo de la propaganda. Este color de fondo es el mismo que utilicé para la sección. Ocultar el fondo de gradiente de la columna que agregué en la parte anterior de este tutorial.

Color de fondo: # 3A1Dad

Coloque el cursor en el color de fondo, sin embargo, queremos que el fondo de gradiente de la columna aparezca en la carrera. Por lo tanto, cambiamos el color de fondo a flotar a uno completamente transparente.
Color de fondo: RGBA (255,255,255.0)

Configuración predeterminada para los íconos Continúe accediendo a la configuración del icono y haciendo algunos cambios.
Icono de color: # 9d8ad8

Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 80 PX
Coloque el cursor en la configuración del icono Aplique un color diferente del icono y un tamaño de fuente en el mouse.
Icono de color: #ffffff

Icono de tamaño de fuente: 120 PX
Configuración de texto Entonces, acceda a la configuración del texto y realice algunos cambios.
Orientación de texto: centro

Color de texto: Abierto
Configuración de texto de título La configuración para el texto del título debe modificarse también.
Estilo de fuente de título: mayúscula

Transiciones para crear una transición suave, aumentaremos la duración de la transición.
Duración de la transición: 500 ms
Clone el módulo de la propaganda y colóquelo en columnas desiguales (ambas filas # 1 y # 3) Ahora que hemos creado los módulos de primer paso, podemos clonar 5 veces y colocar los duplicados en las columnas marcadas en la pantalla de impresión a continuación.

Cambie el contenido y el icono de cada duplicado, por supuesto, deberá cambiar el contenido de cada duplicado junto con el icono para asegurarse de que el proceso tenga significado.
Agregue el divisor horizontal a la segunda columna de la visibilidad de la fila # 1 El segundo modo que tendremos que agregar es un módulo divisor. Utilizamos este módulo para conectar todos los pasos del módulo de propaganda. Continúe y agregue uno a la segunda columna de la primera fila.

Divisor del espectáculo: si

Color divisor y luego cambie el color del separador.

Color: #dddddd

Espacio para alinear el módulo divisor verticalmente, usaremos un borde superior. También aumentaremos el ancho del módulo usando algunos bordes negativos a la izquierda y a la derecha.

Margen superior: 150 PX
Margen izquierdo: -60px

Derecha: -60px
Clone la división horizontal y colóquela en columnas (ambas filas # 1 y # 3) Clon el módulo divisor y colóquelo en las columnas marcadas en la pantalla de impresión a continuación:
Agregue el separador vertical a la primera columna de la visibilidad de la fila # 2. También necesitaremos un separador vertical. Para crear uno, agregaremos un nuevo módulo divisor en la columna 1 de la segunda fila, pero nos aseguraremos de que la opción “Muestra el divisor” esté desactivada.
Show Divider: Wallpaper Agregue un color de fondo al siguiente módulo.

Color de fondo: #dddddd

Dimensión y luego cambie la configuración de tamaño. Una vez que haya hecho esto, notará que está en su lugar un separador vertical.
Ancho: 0.5%

Alineación del módulo: centro
Espacio para aumentar la altura del separador vertical, utilizaremos algunos valores de espaciado personalizados.

Margen superior: 20 PX
Revestimiento superior: 120 PX
Finamiento inferior: 120 PX

Clonar el divisor vertical y colocar el duplicado en la columna 5 en la fila 2 Clon el divisor vertical que creó y colóquelo en la última columna de la segunda fila.
Agregue el módulo de texto de título a la columna 3 de la fila 2 Agregar contenido El último módulo que necesitamos es un título de título. Agregue este módulo a la tercera columna de la segunda fila con un cierto contenido de su elección.
Configuración de texto Acceda a la configuración para el texto del encabezado y realice algunos cambios en el aspecto del título.
Título 2 Fuente de peso: Ultra Bold

Título 2 Alineación de texto: Centro

Rúbrica 2 Color de texto: RGBA (255.255.255,0.09)

Título 2 Dimensión de texto: 220 PX (escritorio), 150 PX (tableta), 100 PX (teléfono)
Lubricación 2 Especivación de litros: -50 PX (escritorio), -30 PX (tableta), -25 PX (teléfono)
Finalmente, espaciado, agregue algunos valores de espaciado personalizados para permitir que el modo de texto se ajuste.
Margen superior: 30 PX
Margen izquierdo: -800px
Margen derecho: -800px

Cree una alternativa a la tableta y el teléfono agregue un nuevo color de fondo como se menciona al comienzo de esta publicación, crearemos una alternativa para dimensiones de pantalla más pequeñas. Continúe y agregue una nueva sección habitual utilizando el mismo color de fondo que el anterior. Wallpaper: # 3A1Dad
Espacio agregue algunos valores de llenado personalizados de arriba e inferior.
Revestimiento superior: 170 PX
Revestimiento inferior: 170 PX

Visibilidad y oculte la sección en el escritorio en la configuración de visibilidad.
Agregue la estructura de la fila # 1 de la columna en lugar de usar una fila con 6 columnas, como lo hicimos para la sección de escritorio, usamos una sola columna.

Clone el módulo de texto del título de sección anterior y colóquelo entre no. 1 Clon el modo de texto de título de la sección de escritorio y coloque el duplicado en la nueva fila.
Elimine el espacio continúe eliminando la configuración de espaciado de este módulo.
Agregue la estructura de la fila # 2 de la columna y luego, agregue otra fila con una columna.

Clonar el módulo de propaganda en la sección anterior y ubicar entre no. 2 Clone uno de los módulos de la propaganda en la sección de escritorio y coloque el duplicado en su nueva fila.

Cambie el icono para cambiar el icono al que mira hacia abajo.

Cambie el tamaño Cambie la configuración de tamaño adicional.

Ancho: 39% (tableta), 59% (teléfono)

Alineación del módulo: centro

Clon el divisor vertical de la sección anterior y el lugar entre no. 2 También usamos el separador vertical de la sección anterior. Continúe y clone y coloque el duplicado justo debajo del módulo de propaganda.

Cambie el espacio Cambie la configuración de espaciado de este módulo para que su altura disminuya.

Revestimiento superior: 50 pxcatuse inferior: 50 px
Clone ambos módulos tantas veces como desee, puede clonar ambos módulos tantas veces como desee presentar todos los pasos en las dimensiones de pantalla más pequeñas.
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado.

Pensamientos finales En esta publicación, le mostré cómo usar creativamente estructuras de columnas de la Divica para crear una sección de proceso sorprendente y única.Además, también agregué un efecto flotante sutil a cada uno de los pasos del proceso que aparecen una vez que coloca 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.