Siempre estamos buscando formas de expandir las posibilidades de diseño que tienes con Divi . Y desde que salió la actualización de las opciones de transformación, se han hecho posibles muchas técnicas nuevas, sin necesidad de conocimientos de codificación personalizados.
En esta publicación, le mostraremos cómo crear una estructura de diseño diagonal impresionante. El diseño que recrearemos funciona muy bien para la sección principal y se adapta a cualquier tipo de sitio web que desee configurar. ¡Al final del tutorial, también podrá descargar el archivo JSON de forma gratuita!
¡Hagámoslo!
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 agréguele una sección regular. Abra la configuración de la sección y agréguele 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 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.
|
01
|
overflow: hidden; |
Añadir Fila #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 próximo 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 del canalón: 1
Espaciado
Continúe y agregue algunos valores de relleno personalizados a la configuración de espaciado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno izquierdo: 25vw (escritorio), 16vw (tableta), 7vw (teléfono)
- Relleno derecho: 25vw (computadora de escritorio y tableta), 27vw (teléfono)
Mostrar
También nos estamos asegurando 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.
|
01
|
display: flex; |
Agregue el módulo Blurb a la columna 1
Añadir título
¡Es hora de comenzar a agregar módulos! Agregue un módulo de Blurb a la columna 1 e ingrese un título de su elección.
Subir 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 para desarrolladores de aplicaciones. Puedes descargar las ilustraciones gratis yendo a la publicación y descargándolas al final.
Fondo
Luego, agregue un color de fondo completamente blanco al módulo de Blurb.
- Color de fondo: #ffffff
Configuración del texto del título
Pase 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 entre letras del título: 1px
- Altura de la línea de título: 1,6 em
Espaciado
Modifique la configuración de espaciado a continuación.
- Acolchado superior: 1.3vw (escritorio), 4vw (tableta), 6vw (teléfono)
- Acolchado inferior: 1.3vw (escritorio), 4vw (tableta), 6vw (teléfono)
- Relleno izquierdo: 1vw (escritorio), 7vw (tableta y teléfono)
- Relleno derecho: 1vw (escritorio), 7vw (tableta y teléfono)
Borde
Continúe agregando ‘1vw’ en las esquinas superior izquierda y derecha del módulo de Blurb.
Sombra de la caja
Por último, pero no menos importante, agregue una sombra de cuadro al módulo usando la siguiente configuración:
- Posición vertical de la sombra del cuadro: 10px
- Fuerza de desenfoque de sombra de cuadro: 60px
- Color de sombra: rgba (39,39,52,0.37)
Clonar módulo Blurb dos veces y colocar duplicados en las columnas restantes
Una vez que haya personalizado el módulo de Blurb, puede continuar y clonarlo dos veces. Coloque los duplicados en las dos columnas restantes de la fila.
Cambiar duplicado #1
Cambiar copia e ilustración
Cambia 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 Duplicado #2
Cambiar copia e ilustración
Modifique también la copia y la ilustración del segundo duplicado.
Añadir Fila #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 cuadro: 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 se muestre el módulo, así que asegúrese de que la opción ‘Mostrar divisor’ esté deshabilitada.
- Mostrar divisor: No
Aplicar opciones de transformación a filas
Fila #1
Transformar Traducir
Ahora que hemos completado las dos primeras filas, vamos a transformarlas 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 traducción de transformación.
- Inferior: 30vw
- Derecha: 6vw
Transformar Rotar
Luego, cambie el valor de rotación de transformación izquierda.
- Izquierda: 37 grados
Fila #2
Escala de transformación
Continúe abriendo la configuración de la segunda fila y modifique los valores de la escala de transformación.
- Abajo: 133% (Escritorio), 171% (Tableta), 176% (Teléfono)
- Derecha: 133% (Escritorio), 171% (Tableta), 176% (Teléfono)
Transformar Traducir
Junto con los valores de traducción de transformación.
- Abajo: 12vw (Escritorio), 1vw (Tableta), 3vw (Teléfono)
- Derecha: -2vw (Escritorio), -6vw (Tableta), -4vw (Teléfono)
Transformar Rotar
Y gire la fila en la configuración de rotación de transformación también.
- Izquierda: 37 grados
Añadir Fila #3
Estructura de la columna
¡A la siguiente y última fila! Puede usar 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 del canalón: 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 módulo de texto de título. 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 del título: Poppins
- Tamaño del texto del encabezado: 3vw (escritorio), 5vw (tableta), 6vw (teléfono)
- Espaciado entre letras de encabezado: -2px
Espaciado
Agregue algunos valores de espaciado personalizados a continuación.
- Margen superior: -6vw (computadora de escritorio y tableta), 11vw (teléfono)
- Margen izquierdo: 10vw
Agregue el Módulo de Texto #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,8 vw (escritorio), 1,5 vw (tableta), 2,2 vw (teléfono)
- Altura de línea de texto: 2,6 em
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 copia
El siguiente y último módulo que necesitamos es un módulo de botones. Agregue alguna 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: 1px
- Color del borde del botón: #000000
- Radio del borde del botón: 1px
- Fuente del botón: Poppins
- Peso de fuente: ligero
Espaciado
Por último, pero no menos importante, dé forma a su módulo usando 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
Descarga GRATIS la Sección Diseño Diagonal
Para poner sus manos en la sección de diseño diagonal gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 estructura de diseño diagonal impresionante utilizando solo las opciones integradas de Divi. Esperamos que este tutorial lo 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!