Cómo rotar divisores de sección para crear impresionantes bordes laterales 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 Divi en curso, le mostraremos cómo rotar divisores de sección para crear bordes laterales impresionantes con las nuevas opciones de transformación de Divi y el paquete de diseño de calígrafo. Esta es una excelente manera de modificar cualquier diseño de página en el que esté trabajando sin tener que crear ilustraciones personalizadas con un software de edición de imágenes. Esperamos que este tutorial de casos de uso lo inspire a combinar los divisores de sección de Divi y transformar las opciones para crear un diseño web personalizado y personalizado.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los cuatro ejemplos diferentes que recrearemos en diferentes tamaños de pantalla.

Ejemplo 1

fronteras laterales

Ejemplo # 2

fronteras laterales

Ejemplo # 3

fronteras laterales

Ejemplo # 4

fronteras laterales

Subir la página de destino del calígrafo a una nueva página

Vamos a agregar los bordes laterales del divisor de sección al diseño de la página de destino del paquete de diseño de calígrafo que puede encontrar en sus diseños predefinidos. ¡Continúe y cree una nueva página en su sitio web para comenzar! Aunque usamos este diseño específico, tenga en cuenta que puede usar esta técnica para cualquier tipo de sitio web en el que esté trabajando.

fronteras laterales

Recrear el ejemplo n. ° 1

fronteras laterales

Agregar nueva sección debajo de la sección Hero

¡Comencemos a recrear el primer efecto! Agrega una nueva sección regular justo debajo de la sección de héroe en tu nueva página. Utilizamos esta sección solo para sus divisores de contenedor y sección. Eso significa que no le agregaremos filas ni módulos. De hecho, nos aseguraremos de que la sección no ocupe ningún espacio vertical eliminando todo el relleno predeterminado más adelante en esta publicación. Lo único que quedará es el ancho del contenedor de sección y los divisores de sección que agregamos.

fronteras laterales

Color de fondo

Después de agregar la sección, abra la configuración de la sección y cambie el fondo a un color completamente transparente.

  • Color de fondo: rgba (255,255,255,0)

fronteras laterales

Divisor inferior

Continúe yendo a la pestaña de diseño y agregando un divisor inferior a su sección usando la siguiente configuración:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: # f2264c
  • Altura del divisor: 700 px (escritorio), 300 px (tableta), 200 px (teléfono)
  • Disposición del divisor: encima del contenido de la sección

fronteras laterales

Espaciado

Continúe con la configuración de espaciado. Aquí, vamos a hacer dos cosas. Lo primero es eliminar todo el acolchado superior e inferior personalizado. La segunda cosa es reducir el tamaño del contenedor de secciones en el escritorio y aumentarlo en el móvil.

  • Margen izquierdo: 11vw (escritorio), 0vw (tableta), -35vw (teléfono)
  • Margen derecho: 11vw (escritorio), 0vw (tableta), -35vw (teléfono)
  • Relleno superior: 0px
  • Acolchado inferior: 0px

fronteras laterales

Transformar Girar

Una vez que haya terminado de personalizar la configuración de espaciado, vaya a la configuración de transformación y gire toda la sección. En lugar de tener un divisor de sección horizontal, ahora tendrá uno vertical.

  • Izquierda: 90 grados

fronteras laterales

Transformar Traducir

Después de girar el divisor de sección, debe reposicionar la sección al lado izquierdo de la página. Notarás que también estamos usando la unidad de ventana de ancho para asegurarnos de que todo siga respondiendo en todos los tamaños de pantalla.

  • Derecha: -40vw (escritorio), -54vw (tableta), -86vw (teléfono)
  • Abajo: -52vw

fronteras laterales

Recrear el ejemplo 2

fronteras laterales

Agregar nueva sección debajo de la sección Hero

¡Pasemos al segundo ejemplo! Nuevamente, agregue una nueva sección regular justo debajo de la sección de héroe.

fronteras laterales

Color de fondo

Abra la configuración de la sección y cambie el color de fondo a un color completamente transparente.

  • Color de fondo: rgba (255,255,255,0)

fronteras laterales

Divisor inferior

Vaya a la configuración del divisor y agregue un divisor inferior usando la siguiente configuración:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: # ffdc00
  • Altura del divisor: 700 px (escritorio), 300 px (tableta y teléfono)
  • Flip divisor: Vertical
  • Disposición del divisor: encima del contenido de la sección

fronteras laterales

Espaciado

Luego, vaya a la configuración de espaciado y comience quitando el relleno superior e inferior de la sección. Lo segundo que debe hacer en la configuración de espaciado es reducir el tamaño del contenedor de sección en el escritorio y aumentarlo en el dispositivo móvil utilizando valores de margen personalizados.

  • Margen izquierdo: 11vw (escritorio), 0vw (tableta), -35vw (teléfono)
  • Derecha: 11vw (escritorio), 0vw (tableta), -35vw (teléfono)
  • Relleno superior: 0px
  • Acolchado inferior: 0px

fronteras laterales

Transformar Girar

Continúe yendo a la configuración de transformación y gire la sección.

  • Izquierda: 270 grados

fronteras laterales

Transformar Traducir

Por último, pero no menos importante, reposicione la sección agregando algunos valores de conversión de transformación personalizados.

  • Derecha: -40vw (escritorio), -54vw (tableta), -86vw (teléfono)
  • Abajo: 50vw

fronteras laterales

Recrear el ejemplo n. ° 3

fronteras laterales

Agregar nueva sección al final de la página

¡Vamos al tercer ejemplo! Desplácese hacia abajo en la página y agregue una nueva sección regular al final.

fronteras laterales

Color de fondo

Abra la configuración de la sección y agregue un color de fondo completamente transparente.

  • Color de fondo: rgba (255,255,255,0)

fronteras laterales

Divisor inferior

Vaya a la pestaña de diseño y agregue un divisor inferior usando la siguiente configuración:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: # 2bffe9
  • Altura del divisor: 700 px (escritorio), 300 px (tableta y teléfono)
  • Disposición del divisor: encima del contenido de la sección

fronteras laterales

Espaciado

Pase a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados.

  • Margen izquierdo: 27vw
  • Margen derecho: 27vw
  • Relleno superior: 0px
  • Acolchado inferior: 0px

fronteras laterales

Transformar Girar

Continúe girando la sección 270 grados.

  • Izquierda: 270 grados

fronteras laterales

Transformar Traducir

Por último, pero no menos importante, cambie la posición de la sección cambiando las entradas de conversión de transformación.

  • Derecha: -39.7vw
  • Abajo: 50vw

fronteras laterales

Agregue un índice Z más alto a la sección anterior

Para cortar una parte del divisor de sección, vamos a asegurarnos de que la sección anterior se coloque encima de ambas secciones aumentando el índice Z en la configuración de visibilidad de la sección anterior.

  • Índice Z: 1

fronteras laterales

fronteras laterales

Recrear el ejemplo # 4

fronteras laterales

Agregar nueva sección al final de la página

¡Pasemos al siguiente y último ejemplo! Nuevamente, agregue una sección regular al final de la página.

fronteras laterales

Color de fondo

Abra la configuración de la sección y agregue un color de fondo transparente.

  • Color de fondo: rgba (255,255,255,0)

fronteras laterales

Divisor superior

Vaya a la pestaña de diseño a continuación y agregue un divisor superior usando la siguiente configuración:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: # 28b0ef
  • Altura del divisor: 700 px (escritorio), 300 px (tableta y teléfono)
  • Disposición del divisor: contenido de la sección inferior

fronteras laterales

Divisor inferior

Agrega también un divisor inferior.

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: # 28b0ef
  • Altura del divisor: 700 px (escritorio), 300 px (tableta y teléfono)
  • Disposición del divisor: encima del contenido de la sección

fronteras laterales

Espaciado

Continúe cambiando los valores de margen y relleno en la configuración de espaciado de la sección.

  • Izquierda: 23vw
  • Derecha: 23vw
  • Relleno superior: 0px
  • Acolchado inferior: 0px

fronteras laterales

Transformar Girar

Continúe con la configuración de transformación y gire la sección en consecuencia:

  • Izquierda: 238 grados

fronteras laterales

Transformar Traducir

Coloque la sección en el lado izquierdo de la página utilizando los siguientes valores de conversión de transformación:

  • Derecha: -36vw (escritorio), -46vw (tableta), -53vw (teléfono)
  • Abajo: -44vw

fronteras laterales

Eliminar el fondo degradado del módulo de texto

Por último, pero no menos importante, elimine el fondo degradado del módulo de texto marcado en la pantalla de impresión a continuación y ¡listo!

fronteras laterales

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final a los cuatro ejemplos que hemos recreado y cómo se ven en diferentes tamaños de pantalla.

Ejemplo 1

fronteras laterales

Ejemplo # 2

fronteras laterales

Ejemplo # 3

fronteras laterales

Ejemplo # 4

fronteras laterales

Pensamientos finales

En esta publicación, le mostramos cómo rotar los divisores de sección para crear bordes laterales impresionantes para cualquier tipo de sitio web que cree. Este enfoque le permite ver las opciones integradas de Divi desde otra perspectiva. Por creativamente combinando varias configuraciones, la necesidad de software de edición de imágenes se vuelve casi inexistente. 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, todas y cada una de las semanas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.