Uso de módulos divisores para crear formularios de fondo con Div

Cada semana, le proporcionamos Divin de diseño y paquetes de diseño gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de apariencia, también compartimos un caso de uso que lo ayudará a llevar el sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa continua de diseño de la Divica, le mostraremos cómo usar los módulos divisores para crear formas de fondo con las opciones de transformación DIV y el paquete de disposición paralelo. Los módulos divisores son muy versátiles y realmente pueden levantar el diseño general de sus páginas. Aunque recrearemos algunos ejemplos que coincidan específicamente con el paquete de diseño paralelo, puede usar esta técnica para cualquier tipo de sitio web que cree con Div.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Cree una nueva página utilizando la página de destino del paquete de diseño paralegal Cree una nueva página y cargue su paquete de diseño paralegal.

Recrear el ejemplo no. 1 Sección de desbordamiento Comencemos a crear el primer ejemplo! Continúe y abra la configuración de la sección Herou y acceda a la pestaña de diseño. Aquí, queremos asegurarnos de que nada vaya más allá del contenedor de la sección. Para esto, agregaremos una sola línea de código CSS al elemento principal.
Desbordamiento: oculto;

Agregue el módulo divisor a la visibilidad de la columna 2, continúe y agregue un módulo divisor a la segunda columna de la sección especializada. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

El color de fondo usaremos un color en la paleta de colores del paquete de diseño como color de fondo.
Color entonces, iremos a la pestaña de diseño y cambiaremos el color del separador.

Color: # F3F1F2
Los estilos van a la configuración de los estilos y cambian el estilo divisor.

Estilo divisor: puntaje
La dimensión está jugando con la configuración del dimensionamiento. Puede hacer que este módulo divisor se vea como desee, pero si desea ver exactamente como se muestra en la vista previa de esta publicación, use la siguiente configuración:

Peso del divisor: 4 PX
Altura: 0px
Espacio ahora, cambiaremos la posición y el tamaño del módulo divisor utilizando algunos márgenes personalizados y valores de llenado. Asegúrese de cambiar los valores de acuerdo con el tamaño diferente de la pantalla para que todo permanezca receptivo.

Margen superior: -30VW (escritorio), -100VW (tableta y teléfono)
Margen izquierdo: -100VW (escritorio), -138VW (tableta), -300VW (teléfono)
SUS Lingo: 0 PX
Bajo revestimiento: 1.3VW (escritorio), 2.2VW (tableta), 3VW (teléfono)
¡Transformación de transformación es el momento de girar el módulo! Lo primero que haremos en la configuración de transformación es el aumento del tamaño del divisor agregando los siguientes valores de la escala de transformación:

ABAJO: 153%
Derecha: 500%
Transformación de rotación también, rotaremos el módulo divisor en la configuración de giro. Como puede ver, el módulo divisor no excede la sección debido a esa línea de código CSS que agregamos al comienzo de este tutorial.

Izquierda: 348 grados
Recrear el ejemplo no. 2 Sección de desbordamiento ¡Pasamos al siguiente ejemplo! Nuevamente, queremos asegurarnos de que nada vaya más allá del contenedor de sección agregando una sola línea de código CSS al elemento principal de la sección. Overflow: Oculto; Agregue una nueva fila al final de la estructura de la columna Continuar agregando una nueva fila al final de la sección utilizando las siguientes columnas:

Espacio para reducir el tamaño tomado, eliminaremos el relleno predeterminado e inferior de la configuración del espacio.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
¡Agregue un módulo divisor de visibilidad es el momento de agregar y modelar el módulo divisor! Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

El color de fondo nuevamente, usamos uno de los colores en la paleta de colores del paquete de diseño como color de fondo.
Color de fondo: # D94144

Interruptor de color a la pestaña de diseño y cambie el color del separador.
Color: # F3F1F2

Dimensión que jugamos con la configuración del tamaño.
Peso del divisor: 10 PX

Altura: 0px

Espacio y crearemos el formulario exacto que queremos usar rellenos personalizados que cambiaremos en diferentes tamaños de pantalla.
Revestimiento superior: 2VW

Bajo forro: 2.5VW (escritorio), 3VW (tableta), 3.9VW (teléfono)
¡Transformación de transformación es el momento de convertirse en usted mismo! Lo primero que haremos es ampliar el módulo divisor. Hacemos esto para asegurarnos de que no haya brecha al principio o al final de la sección. No se preocupe por demasiado escala de su módulo divisor, todo lo que excede la sección no aparecerá en el diseño.
ABAJO: 153%

Derecha: 153% (escritorio), 250% (tableta), 500% (teléfono) transformaciones Entonces, también cambiaremos la posición del módulo divisor para que aparezca en el lado derecho. Asegúrese de que coincida con estos valores con diferentes tamaños de pantalla.
La parte inferior: 25VW (escritorio), 27 VW (tableta y teléfono)
Derecha: 0 PX (escritorio), -32VW (tableta y teléfono)

La transformación de rotación no, no por último, transformaremos el divisor horizontal en un juego vertical con la configuración de giro.
Izquierda: 270 grados
Recrear el ejemplo no. ¡3 Sección de desbordamiento, pasamos al siguiente y último ejemplo! Nuevamente, asegúrese de que nada exceda el contenedor de sección agregando una sola línea de código CSS al elemento principal de la sección.

Desbordamiento: oculto;
Agregue una nueva fila al comienzo de la estructura de sección de la columna Continuar agregando una nueva fila a la parte superior de la sección. Es importante que la fila se coloque en la parte superior, para que no se superponga el contenido debajo de ella más adelante en el tutorial.

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la columna ocupe todo el ancho de la pantalla.
Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Agregue un módulo divisor de visibilidad Agregue el módulo divisor a continuación. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Interruptor de color de fondo a la configuración de fondo y agregue un color de fondo.

Color de fondo: # D94144
El color cambia el color del separador.

Color: # F3F1F2
Estilos y cambiar el estilo divisor en la configuración de los estilos.

Estilo divisor: puntaje
Dimensión Entonces, acceda a la configuración del tamaño y realice algunos cambios. Peso del divisor: 4 PX

Altura: 0px
Espacio y cree la forma deseada utilizando algunos rellenos superior e inferior en la configuración de espaciado.

Revestimiento superior: 3VW
Revestimiento inferior: 3VW
Box Shadow También agregaremos algo de profundidad a nuestra página, dando al separador una sombra sutil de la caja.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Gire una escala de transformación ahora que hemos creado el estilo del divisor, podemos comenzar a transformarlo. Lo primero que haremos es aumentar el tamaño del módulo divisor en la configuración de la escala de transformación.

ABAJO: 140%
Derecha: 140%
Transformar la traducción, entonces iremos a la configuración de traducción y cambiaremos la posición del módulo divisor. Colocar la fila en la parte superior de la sección nos ayuda a mantener un índice más bajo que la fila debajo, lo que crea esta hermosa superposición.

El fondo: 4VW
Derecha: 16VW (escritorio), 26VW (tableta), 35VW (teléfono)
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, le mostré cómo usar el módulo Divider y las nuevas opciones de transformación de Div. Para crear formas de fondo y mejorar la apariencia general de sus páginas. Donde intentamos introducir algo adicional en el conjunto de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.