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 los divisores de sección para crear bordes laterales sorprendentes con las nuevas opciones de transformación de Divi y el paquete de diseño Calligrapher. 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 caso de uso lo inspire a combinar los divisores de sección de Divi y las opciones de transformación para crear un diseño web personalizado y personalizado.
¡Hagámoslo!
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
Ejemplo #2
Ejemplo #3
Ejemplo #4
Cargar la página de destino de Calligrapher en una página nueva
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 Calligrapher que puede encontrar en sus diseños prefabricados. ¡Continúe y cree una nueva página en su sitio web para comenzar! Aunque estamos usando 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.
Recrear el ejemplo n.º 1
Agregar nueva sección debajo de la sección de héroe
¡Comencemos a recrear el primer efecto! Agregue una nueva sección regular justo debajo de la sección principal en su nueva página. Estamos usando esta sección solo para su contenedor y divisores de 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 permanecerá es el ancho del contenedor de sección y los divisores de sección que agregamos.
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)
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 de los divisores: en la parte superior del contenido de la sección
Espaciado
Pase a la configuración de espaciado. Aquí, vamos a hacer dos cosas. Lo primero es quitar todo el acolchado superior e inferior personalizado. Lo segundo 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
- Relleno inferior: 0px
Transformar Rotar
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
Transformar Traducir
Después de girar el divisor de sección, debe volver a colocar la sección en el lado izquierdo de la página. Notarás que también estamos usando la unidad de ventana gráfica 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
Recrear el Ejemplo #2
Agregar nueva sección debajo de la sección de héroe
¡Vamos al segundo ejemplo! Nuevamente, agregue una nueva sección regular justo debajo de la sección principal.
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)
Divisor inferior
Pase 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)
- Voltear el divisor: Vertical
- Disposición de los divisores: En la parte superior de la sección Contenido de la sección
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
- Relleno inferior: 0px
Transformar Rotar
Continúe yendo a la configuración de transformación y gire la sección.
- Izquierda: 270 grados
Transformar Traducir
Por último, pero no menos importante, cambie la posición de la sección agregando algunos valores de traducción de transformación personalizados.
- Derecha: -40vw (Escritorio), -54vw (Tableta), -86vw (Teléfono)
- Inferior: 50vw
Recrear el Ejemplo #3
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 normal en la parte inferior.
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)
Divisor inferior
Pase 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 de los divisores: en la parte superior del contenido de la sección
Espaciado
Pase a la configuración de espaciado y agregue algunos márgenes personalizados y valores de relleno.
- Margen izquierdo: 27vw
- Margen Derecho: 27vw
- Relleno superior: 0px
- Relleno inferior: 0px
Transformar Rotar
Continúe rotando la sección 270 grados.
- Izquierda: 270 grados
Transformar Traducir
Por último, pero no menos importante, cambie la posición de la sección cambiando las entradas de transformación y traducción.
- Derecha: -39.7vw
- Inferior: 50vw
Agregue un índice Z más alto a la sección anterior
Para cortar una parte del divisor de sección, nos aseguraremos 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
Recrear el Ejemplo #4
Agregar nueva sección al final de la página
¡Vamos al siguiente y último ejemplo! Nuevamente, agregue una sección regular al final de la página.
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)
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 de los divisores: Debajo del contenido de la sección
Divisor inferior
Agregue un divisor inferior tambié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 de los divisores: en la parte superior del contenido de la sección
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
- Relleno inferior: 0px
Transformar Rotar
Pase a la configuración de transformación y gire la sección en consecuencia:
- Izquierda: 238 grados
Transformar Traducir
Coloque la sección en el lado izquierdo de la página usando los siguientes valores de transformación y traducción:
- Derecha: -36vw (Escritorio), -46vw (Tableta), -53vw (Teléfono)
- Abajo: -44vw
Quitar 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!
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
Ejemplo #2
Ejemplo #3
Ejemplo #4
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 construya. Este enfoque le permite ver las opciones integradas de Divi desde otra perspectiva. Al combinar creativamente varias configuraciones, la necesidad de un 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 tratamos de 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.