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


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo usar los módulos divisores para crear formas de fondo con las opciones de transformación de Divi y el Paquete de diseño paralelo. Los módulos divisores son muy versátiles y realmente pueden mejorar el diseño general de sus páginas. Aunque recrearemos algunos ejemplos que coinciden específicamente con el paquete de diseño Paralegal, puede usar esta técnica para cualquier tipo de sitio web que cree con Divi.

¡Hagámoslo!

Avance

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

Escritorio

formas de fondo

Móvil

formas de fondo

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

Cree una nueva página y cargue el Paquete de diseño paraleloLa página de destino.

formas de fondo

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 la sección contenedor. Para hacer eso, agregaremos una sola línea de código CSS al elemento principal.

overflow: hidden;

formas de fondo

Agregar 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í

formas de fondo

Color de fondo

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

  • Color de fondo: # d94144

formas de fondo

Color

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

  • Color: # f3f1f2

formas de fondo

Estilos

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

  • Estilo del divisor: punteado

formas de fondo

Dimensionamiento

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

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

formas de fondo

Espaciado

Ahora, vamos a cambiar la posición y el tamaño del Módulo Divisor usando algunos valores de margen y relleno personalizados. 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)

formas de fondo

Transformar

Transformar escala

¡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:

  • Inferior: 153%
  • Derecha: 500%

formas de fondo

Transformar Girar

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

  • Izquierda: 348 grados

formas de fondo

Recrear el ejemplo 2

Desbordamiento de sección

¡Pasemos 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.

overflow: hidden;

formas de fondo

Agregar nueva fila al final de la sección

Estructura de columna

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

formas de fondo

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
  • Acolchado inferior: 0px

formas de fondo

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í

formas de fondo

Color de fondo

De nuevo, estamos usando uno de los colores de la paleta de colores del paquete de diseño como color de fondo.

  • Color de fondo: # d94144

formas de fondo

Color

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

  • Color: # f3f1f2

formas de fondo

Dimensionamiento

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

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

formas de fondo

Espaciado

Y crearemos la forma exacta que queramos 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)

formas de fondo

Transformar

Transformar escala

¡Hora de transformarse! Lo primero que haremos es escalar el módulo divisor. Estamos haciendo esto para asegurarnos de que no haya ningún espacio 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 se mostrará en su diseño.

  • Inferior: 153%
  • Derecha: 153% (escritorio), 250% (tableta), 500% (teléfono)

formas de fondo

Transformar Traducir

Luego, también vamos a cambiar la posición del Módulo Divisor para que aparezca 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)

formas de fondo

Transformar Girar

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

formas de fondo

Recrear el ejemplo n. ° 3

Desbordamiento de sección

¡Pasemos 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.

overflow: hidden;

formas de fondo

Agregar nueva fila al comienzo de la sección

Estructura de 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 al contenido debajo de ella más adelante en el tutorial.

formas de fondo

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de 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 de la canaleta: 1

formas de fondo

Agregar módulo divisor

Visibilidad

A continuación, agregue su módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

formas de fondo

Color de fondo

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

  • Color de fondo: # d94144

formas de fondo

Color

Modifique también el color del divisor.

  • Color: # f3f1f2

formas de fondo

Estilos

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

  • Estilo del divisor: punteado

formas de fondo

Dimensionamiento

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

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

formas de fondo

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

formas de fondo

Sombra de la caja

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

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

formas de fondo

Transformar

Transformar escala

Ahora que hemos diseñado el divisor, podemos empezar a transformarlo. Lo primero que haremos es aumentar el tamaño del módulo divisor en la configuración de escala de transformación.

  • Inferior: 140%
  • Derecha: 140%

formas de fondo

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 viene debajo, lo que crea esta hermosa superposición.

  • Abajo: 4vw
  • Derecha: 16vw (escritorio), 26vw (tableta), 35vw (teléfono)

formas de fondo

Avance

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

Escritorio

formas de fondo

Móvil

formas de fondo

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 el aspecto general de sus páginas. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde intentamos 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!