Creación de una estructura de diseño diagonal con las opciones de transformación de Divi (¡Descarga gratuita!)

Siempre estamos buscando formas de expandir las posibilidades de diseño que tiene Divi. Y desde que salió la actualización de las opciones de transformación, se han hecho posibles muchas técnicas nuevas, sin la necesidad de conocimientos de codificación personalizada.

En esta publicación, le mostraremos cómo crear una impresionante estructura de diseño diagonal. El diseño que recrearemos funciona muy bien para la sección de héroes y coincide con cualquier tipo de sitio web que desee configurar. Al final del tutorial, también podrá descargar el archivo JSON de forma gratuita.

¡Hagámoslo!

Avance

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

¡Empecemos a recrear!

Agregar nueva sección

Fondo degradado

Comience creando una nueva página o abriendo una existente y agregue una sección regular. Abra la configuración de la sección y agregue un fondo degradado usando la siguiente configuración:

• Color 1: # ffd633
• Color 2: #efefef
• Dirección del gradiente: 217 grados
• Posición inicial: 45%
• Posición final: 45%

Espaciado

Luego, vaya a la pestaña de diseño y agregue un poco de relleno superior e inferior personalizado.

• Acolchado superior: 4vw
• Acolchado inferior: 12vw

Desbordamiento

Necesitamos asegurarnos de que las opciones de transformación no superen el contenedor de la sección. Para lograr eso, agregaremos una sola línea de código CSS al elemento principal de la sección.

overflow: hidden;

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando la primera fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla. En el siguiente paso de esta publicación, reemplazaremos el espacio que acabamos de eliminar agregando algunos valores de relleno izquierdo y derecho personalizados usando una unidad de ventana gráfica. Esto asegurará que el diseño siga respondiendo en todos los tamaños de pantalla.

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

Espaciado

Continúe y agregue algunos valores de relleno personalizados a la configuración de espaciado a continuación.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Acolchado izquierdo: 25vw (escritorio), 16vw (tableta), 7vw (teléfono)
• Relleno derecho: 25vw (escritorio y tableta), 27vw (teléfono)

Monitor

También nos aseguramos de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo Blurb a la columna 1

Añadir título

¡Es hora de comenzar a agregar módulos! Agregue un módulo Blurb a la columna 1 e ingrese un título de su elección.

Cargar ilustración

Continúe cargando una ilustración de su elección. Los que usaremos a lo largo de este tutorial son parte del paquete de diseño de desarrollador de aplicaciones. Puede descargar las ilustraciones de forma gratuita yendo a la publicación y descargándolas al final.

Fondo

Luego, agregue un color de fondo completamente blanco al módulo Blurb.

• Color de fondo: #ffffff

Configuración del texto del título

Vaya a la pestaña de diseño y modifique la configuración del texto del título en consecuencia:

• Fuente del título: Poppins
• Peso de la fuente del título: Semi negrita
• Estilo de fuente del título: mayúsculas
• Alineación del texto del título: centro
• Tamaño del texto del título: 0.5vw (escritorio), 1.6vw (tableta), 2.4vw (teléfono)
• Espaciado de letras de título: 1px
• Altura de la línea de título: 1.6em

Espaciado

A continuación, modifique la configuración de espaciado.

• Acolchado superior: 1.3vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Acolchado inferior: 1.3vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Acolchado izquierdo: 1vw (escritorio), 7vw (tableta y teléfono)
• Relleno derecho: 1vw (escritorio), 7vw (tableta y teléfono)

Frontera

Continúe agregando '1vw' a las esquinas superior izquierda y superior derecha del módulo Blurb.

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro al módulo utilizando la siguiente configuración:

• Posición vertical de la sombra del cuadro: 10px
• Fuerza de desenfoque de sombra de caja: 60px
• Color de sombra: rgba (39,39,52,0.37)

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya personalizado el módulo Blurb, puede continuar y clonarlo dos veces. Coloque los duplicados en las dos columnas restantes de la fila.

Cambiar el duplicado n. ° 1

Cambiar copia e ilustración

Cambie la copia y la ilustración del primer duplicado.

Cambiar espaciado

Junto con la configuración de espaciado.

• Margen superior: -3vw
• Acolchado superior: 2.7vw (escritorio), 8vw (tableta), 11vw (teléfono)
• Acolchado inferior: 2.7vw (escritorio), 8vw (tableta), 11vw (teléfono)

Cambiar el duplicado n. ° 2

Cambiar copia e ilustración

Modifique también la copia y la ilustración del segundo duplicado.

Agregar fila n. ° 2

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado.

• Color 1: # fff20a
• Color 2: # ffb200
• Dirección del gradiente: 165 grados

Dimensionamiento

Luego, vaya a la pestaña de diseño y habilite la opción 'Hacer esta fila de ancho completo'.

• Hacer esta fila de ancho completo: Sí

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro a la fila.

• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 100px
• Color de sombra: rgba (0,0,0,0.39)

Agregar módulo divisor

Visibilidad

Solo usamos esta fila con fines de diseño, no para mostrar ningún módulo. Pero para asegurarnos de saber exactamente cómo se ve la fila, necesitaremos agregarle un módulo divisor. No queremos que aparezca el módulo, así que asegúrese de que la opción 'Mostrar divisor' esté desactivada.

• Mostrar divisor: No

Aplicar opciones de transformación a filas

Fila # 1

Transformar Traducir

Ahora que hemos completado las dos primeras filas, las transformaremos para que encajen en la estructura de diseño diagonal que pretendemos crear. Comience abriendo la configuración de la primera fila y modifique los valores de conversión de transformación.

• Abajo: 30vw
• Derecha: 6vw

Transformar Girar

Luego, cambie el valor de rotación de transformación izquierda.

• Izquierda: 37 grados

Fila # 2

Transformar escala

Continúe abriendo la configuración de la segunda fila y modifique los valores de escala de transformación.

• Abajo: 133% (escritorio), 171% (tableta), 176% (teléfono)
• Derecha: 133% (escritorio), 171% (tableta), 176% (teléfono)

Transformar Traducir

Junto con la transformación traducir valores.

• Abajo: 12vw (escritorio), 1vw (tableta), 3vw (teléfono)
• Derecha: -2vw (escritorio), -6vw (tableta), -4vw (teléfono)

Transformar Girar

Y gire la fila en la configuración de rotación de transformación también.

• Izquierda: 37 grados

Agregar fila n. ° 3

Estructura de la columna

¡A la siguiente y última fila! Puede utilizar esta fila y sus columnas para compartir cualquier tipo de información que desee. Para recrear el diseño exacto que ha visto en la vista previa de esta publicación, seleccione la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila 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

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H1

¡Es hora de comenzar a agregar módulos! Comenzaremos con un título Módulo de texto. Ingrese algún contenido H1 de su elección.

Configuración de texto H1

Luego, vaya a la pestaña de diseño y modifique la configuración de texto H1.

• Fuente de encabezado: Poppins
• Tamaño del texto del encabezado: 3vw (escritorio), 5vw (tableta), 6vw (teléfono)
• Espaciado entre letras del encabezado: -2px

Espaciado

A continuación, agregue algunos valores de espaciado personalizados.

• Margen superior: -6vw (escritorio y tableta), 11vw (teléfono)
• Margen izquierdo: 10vw

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

El segundo módulo que necesitamos es otro módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Luego, vaya a la pestaña de diseño y modifique la configuración del texto.

• Fuente de texto: Open Sans
• Tamaño del texto: 0.8vw (escritorio), 1.5vw (tableta), 2.2vw (teléfono)
• Altura de la línea de texto: 2.6em

Espaciado

Cambie también los valores de espaciado.

• Margen superior: 3vw (teléfono), 5vw (teléfono)
• Margen izquierdo: 10vw
• Margen derecho: 28vw (tableta), 20vw (teléfono)

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente y último módulo que necesitamos es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Luego, vaya a la pestaña de diseño y modifique la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.9vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
• Color del texto del botón: # 000000
• Ancho del borde del botón: 1 px
• Color del borde del botón: # 000000
• Radio del borde del botón: 1 px
• Fuente del botón: Poppins
• Peso de fuente: Ligero

Espaciado

Por último, pero no menos importante, dé forma a su módulo utilizando algunos valores de espaciado personalizados y ¡listo!

• Margen superior: 2vw (escritorio), 5vw (tableta y teléfono)
• Margen izquierdo: 10vw
• Acolchado superior: 1vw
• Acolchado inferior: 1vw
• Acolchado izquierdo: 3vw
• Acolchado derecho: 3vw

Descargue la sección de diseño diagonal GRATIS

Para poner sus manos en la sección de diseño diagonal gratuito, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Avance

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

Pensamientos finales

En esta publicación, le mostramos cómo crear una impresionante estructura de diseño diagonal utilizando solo las opciones integradas de Divi. Esperamos que este tutorial le ayude a familiarizarse con las nuevas opciones de transformación de Divi. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!