Uso de módulos divisores para crear formas de fondo con las opciones de transformación de Divi

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Crear una nueva página usando la página de inicio del paquete de diseño Paralegal

Cree una nueva página y cargue en ella la página de inicio del paquete de diseño de asistente legal .

Recrear el ejemplo n.º 1

Desbordamiento de sección

¡Comencemos a crear el primer ejemplo! Continúe y abra la configuración de la sección de héroe y vaya a la pestaña de diseño. Aquí, queremos asegurarnos de que nada supere el contenedor de la sección. Para hacer eso, agregaremos una sola línea de código CSS al elemento principal.

Agregue el módulo divisor a la columna 2

Visibilidad

Luego, continúe y agregue un módulo divisor a la segunda columna de la sección de especialidad. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

• Mostrar divisor: Sí

Color de fondo

Vamos a utilizar un color de la paleta de colores del paquete de diseño como color de fondo para el divisor.

• Color de fondo: #d94144

Color

Luego, iremos a la pestaña de diseño y también cambiaremos el color del divisor.

• Color: #f3f1f2

Estilos

Pase a la configuración de estilos y modifique el estilo del divisor.

• Estilo del divisor: Punteado

Dimensionamiento

Juega con la configuración de tamaño también. Puede hacer que este Módulo divisor se vea como desee, pero si desea que se vea exactamente como se muestra en la vista previa de esta publicación, use la siguiente configuración:

• Peso del divisor: 4px
• Altura: 0px

Espaciado

Ahora, vamos a cambiar la posición y el tamaño del módulo divisor utilizando algunos márgenes personalizados y valores de relleno. Asegúrese de modificar los valores de acuerdo con los diferentes tamaños de pantalla para que todo siga respondiendo.

• Margen superior: -30vw (escritorio), -100vw (tableta y teléfono)
• Margen izquierdo: -100vw (escritorio), -138vw (tableta), -300vw (teléfono)
• Relleno superior: 0px
• Acolchado inferior: 1.3vw (escritorio), 2.2vw (tableta), 3vw (teléfono)

Transformar

Escala de transformación

¡Es hora de transformar el módulo! Lo primero que haremos en la configuración de transformación es aumentar el tamaño del divisor agregando los siguientes valores de escala de transformación:

• Fondo: 153%
• Derecha: 500%

Transformar Rotar

También rotaremos el módulo divisor en la configuración de rotación de transformación. Como puede notar, el Módulo divisor no supera la sección gracias a esa línea de código CSS que agregamos al comienzo de este tutorial.

• Izquierda: 348 grados

Recrear el Ejemplo #2

Desbordamiento de sección

¡Vamos al siguiente ejemplo! Nuevamente, queremos asegurarnos de que nada supere el contenedor de la sección agregando una sola línea de código CSS al elemento principal de la sección.

Agregar nueva fila al final de la sección

Estructura de la columna

Continúe agregando una nueva fila al final de la sección utilizando la siguiente estructura de columnas:

Espaciado

Para disminuir el tamaño que ocupa la fila, vamos a eliminar el relleno superior e inferior predeterminado en la configuración de espaciado.

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

Agregar módulo divisor

Visibilidad

¡Es hora de agregar y diseñar el módulo divisor! Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

• Mostrar divisor: Sí

Color de fondo

Estamos, nuevamente, usando uno de los colores en la paleta de colores del paquete de diseño como color de fondo.

• Color de fondo: #d94144

Color

Pase a la pestaña de diseño y cambie también el color del divisor.

• Color: #f3f1f2

Dimensionamiento

También estamos jugando con la configuración de tamaño.

• Peso del divisor: 10px
• Altura: 0px

Espaciado

Y crearemos la forma exacta que queremos usando un relleno personalizado que modificaremos en diferentes tamaños de pantalla.

• Acolchado superior: 2vw
• Acolchado inferior: 2.5vw (escritorio), 3vw (tableta), 3.9vw (teléfono)

Transformar

Escala de transformación

¡Hora de transformarse! Lo primero que haremos será escalar el módulo divisor. Estamos haciendo esto para asegurarnos de que no haya espacios al principio o al final de la sección. No se preocupe por escalar demasiado su Módulo divisor, todo lo que exceda la sección no aparecerá en su diseño.

• Fondo: 153%
• Derecha: 153% (Escritorio), 250% (Tableta), 500% (Teléfono)

Transformar Traducir

Luego, también vamos a cambiar la posición del Módulo divisor para que se muestre en el lado derecho. Asegúrese de hacer coincidir estos valores con los diferentes tamaños de pantalla.

• Abajo: 25vw (escritorio), 27vw (tableta y teléfono)
• Derecha: 0px (escritorio), -32vw (tableta y teléfono)

Transformar Rotar

Por último, pero no menos importante, vamos a convertir el divisor horizontal en uno vertical jugando con la configuración de rotación de transformación.

• Izquierda: 270 grados

Recrear el Ejemplo #3

Desbordamiento de sección

¡Vamos al siguiente y último ejemplo! Nuevamente, asegúrese de que nada supere el contenedor de la sección agregando una sola línea de código CSS al elemento principal de la sección.

Agregar nueva fila al comienzo de la sección

Estructura de la columna

Continúe agregando una nueva fila en la parte superior de la sección. Es importante que la fila se coloque en la parte superior para que no se superponga con el contenido debajo de ella más adelante en el tutorial.

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la columna ocupe todo el ancho de la pantalla.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1

Agregar módulo divisor

Visibilidad

Agregue su módulo divisor a continuación. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

• Mostrar divisor: Sí

Color de fondo

Pase a la configuración de fondo y agregue un color de fondo de su elección.

• Color de fondo: #d94144

Color

Modifique el color del divisor también.

• Color: #f3f1f2

Estilos

Y cambie el estilo del divisor en la configuración de estilos.

• Estilo del divisor: Punteado

Dimensionamiento

Luego, vaya a la configuración de tamaño y realice algunos cambios.

• Peso del divisor: 4px
• Altura: 0px

Espaciado

Y cree la forma que desee utilizando un relleno superior e inferior en la configuración de espaciado.

• Acolchado superior: 3vw
• Acolchado inferior: 3vw

Sombra de la caja

También agregaremos algo de profundidad a nuestra página al darle al divisor una sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de cuadro: 80px
• Color de sombra: rgba(0,0,0,0.3)

Transformar

Escala de transformación

Ahora que hemos diseñado el 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.

• Fondo: 140%
• Derecha: 140%

Transformar Traducir

Luego, iremos a la configuración de traducción de transformació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 z más bajo que la fila que está debajo, ¡lo que crea esta hermosa superposición!

• Abajo: 4vw
• Derecha: 16vw (Escritorio), 26vw (Tableta), 35vw (Teléfono)

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo usar el Módulo divisor y las nuevas opciones de transformación de Divi para crear formas de fondo y mejorar la apariencia general de sus páginas. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja 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!