Cuando intenta crear un diseño único para su sitio web, pensar fuera de la caja puede ayudarlo a lograrlo. En tutoriales anteriores, a menudo usamos un elemento de diseño para sus opciones integradas. No solo lo ayuda a mantener una vista en tiempo real del diseño que está creando, sino que también lo ayuda a que se vea exactamente como desea en diferentes tamaños de pantalla. En el tutorial Divi de hoy , le mostraremos cómo usar los bordes de índice z bajo de un módulo para crear un diseño impresionante y que se puede usar para múltiples propósitos. ¡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.
Escritorio
Móvil
Descargue el diseño de bordes del módulo de índice Z bajo GRATIS
Para poner sus manos en el diseño de bordes del módulo de índice z bajo 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!
Suscríbete a nuestro canal de Youtube
¡Empecemos a Recrear!
Agregar nueva sección
Espaciado
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y elimine el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
Pase a la pestaña avanzada y cambie los desbordamientos.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: #f3f3e6
Dimensionamiento
Pase a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine el relleno superior e inferior predeterminado de la fila siguiente.
- Relleno superior: 0px
- Relleno inferior: 0px
Configuración de la columna 1
Una vez que haya completado la configuración de la fila, puede abrir la configuración de la primera columna y realizar algunos cambios.
Fondo degradado
Agregue un fondo degradado usando la siguiente configuración:
- Color 1: rgba(0,0,0,0)
- Color 2: #2e2d3c
- Dirección del gradiente: 90 grados
- Posición inicial: 54%
- Posición final: 54%
Sombra de la caja
Agregue una sombra de cuadro también.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
Agregue el módulo de texto n.º 1 a la columna 1
Dejar el cuadro de contenido vacío
¡Es hora de comenzar a agregar módulos! Inserte un módulo de texto en la primera columna y deje el cuadro de contenido vacío. Usaremos este módulo solo para su configuración integrada. Debido a su posición (primer módulo en la primera columna), el módulo tiene un índice z bajo y aparecerá debajo de todo lo que sigue.
Dimensionamiento
Muévase en la pestaña de diseño y cambie el ancho en diferentes tamaños de pantalla.
- Ancho: 24vw (escritorio), 50vw (tableta y teléfono)
Espaciado
Vaya a la configuración de espaciado a continuación y cambie los valores de la siguiente manera:
- Margen superior: 15vw
- Margen izquierdo: 12vw (escritorio), 30vw (tableta y teléfono)
- Acolchado superior: 32vw (escritorio), 67vw (tableta), 60vw (teléfono)
Borde
Complete el diseño del módulo agregando un borde.
- Ancho del borde: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
- Color del borde: #00ffb2
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
Agregue otro módulo de texto a la columna 1 e ingrese algún contenido de su elección.
Color de fondo
Haga coincidir el color de fondo con el segundo color degradado de la columna.
- Color de fondo: #2e2d3c
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Mayúsculas
- Alineación de texto: Centro
- Color del texto: #f3f3e6
- Tamaño del texto: 4vw
- Espaciado entre letras de texto: -0.2vw
Dimensionamiento
Cambia el ancho también.
- Ancho: 27vw
Espaciado
Luego, vaya a la configuración de espaciado y juegue con los valores en diferentes tamaños de pantalla.
- Margen superior: -23.2vw (escritorio), -46vw (tableta y teléfono)
- Margen izquierdo: 21,5vw (escritorio), 64,5vw (tableta), 64vw (teléfono)
- Acolchado superior: 4vw
- Acolchado inferior: 4vw
- Acolchado izquierdo: 2vw
- Acolchado derecho: 2vw
Transformar Rotar
Complete la configuración del módulo girando el módulo en la configuración de transformación.
- Izquierda: 270 grados
Agregar módulo de imagen a la columna
Cargar imagen
El siguiente y último módulo que necesitamos en la columna 1 es un módulo de imagen. Cargue una imagen semitransparente de su elección.
Dimensionamiento
Vaya a la pestaña de diseño y habilite la opción ‘Forzar ancho completo’. Esto nos ayudará a hacer que la imagen responda en diferentes tamaños de pantalla.
- Forzar ancho completo: Sí
Espaciado
Abra la configuración de espaciado a continuación y cambie los valores de la siguiente manera:
- Mostrar espacio debajo de la imagen: No
- Margen superior: -6vw
- Margen izquierdo: 3vw
- Relleno derecho: 22vw (escritorio), 47vw (tableta y teléfono)
filtros
También estamos disminuyendo la saturación de la imagen en la configuración de filtros.
- Saturación: 43%
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
¡A la siguiente columna! Introduzca algún contenido de su elección.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Fuente del texto: Montserrat
- Alineación de texto: Justificar
- Color del texto: #2e2d3c
- Tamaño del texto: 0,9 vw (escritorio), 2,2 vw (tableta), 2,5 vw (teléfono)
- Altura de la línea de texto: 2,5 em
Espaciado
Agregue algunos valores de espaciado personalizados a continuación.
- Margen superior: 10vw (escritorio), 15vw (tableta y teléfono)
- Acolchado izquierdo: 8vw
- Acolchado derecho: 8vw
Módulo de texto clonado
Una vez que haya completado el módulo de texto, clónelo una vez.
Eliminar margen superior
Elimina el margen superior del duplicado.
Coloque un nuevo módulo de texto entre ambos módulos de texto en la columna 2
Agregar contenido
Agregue otro módulo de texto justo entre los dos módulos de texto existentes en la columna e ingrese algún contenido de su elección.
Configuración de texto
Cambie la configuración de texto de la siguiente manera:
- Fuente del texto: Montserrat
- Peso de fuente de texto: semi negrita
- Color del texto: #2e2d3c
- Tamaño del texto: 2vw (escritorio), 5vw (tableta y teléfono)
- Altura de la línea de texto: 1,4 em
Espaciado
Cambie los valores de relleno también.
- Acolchado superior: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Acolchado inferior: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Acolchado izquierdo: 4vw
- Acolchado Derecho: 4vw
Agregar copia
En el siguiente y último módulo de botones. Inserte alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño y cambie 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), 3vw (teléfono)
- Color del texto del botón: #f3f3e6
- Color de fondo del botón: #2e2d3c
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Fuente del botón: Montserrat
Espaciado
Complete el diseño del módulo de botones agregando algunos valores de espaciado personalizados y ¡listo!
- Margen superior: 2vw (escritorio), 8vw (tableta y teléfono)
- Margen inferior: 10vw (escritorio), 15vw (tableta y teléfono)
- Margen izquierdo: 8vw
- Acolchado superior: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Relleno derecho: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo usar creativamente la configuración de borde de índice z bajo de un módulo vacío para crear un resultado sorprendente. También hemos incluido alguna copia girada en nuestro diseño. Este tutorial muestra cuán versátiles son las opciones integradas de Divi y cómo puede modificar la configuración de cada elemento para que coincida con diferentes tamaños de pantalla. 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.