Uso de bordes de módulo de índice Z bajo como fondos con Divi
Publicado: 2019-09-23Cuando intentas crear un diseño único para tu sitio web, pensar de manera innovadora puede ayudarte 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 lo desea en diferentes tamaños de pantalla. En el tutorial de 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.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue GRATIS el diseño de bordes del módulo de índice Z bajo
Para tener en sus manos el diseño gratuito de los bordes del módulo de índice z bajo, primero deberá descargarlo 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.
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.
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!
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
- Acolchado inferior: 0px
Desbordes
Vaya 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
Vaya 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 de la canaleta: 1
- Ecualizar 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
- Acolchado 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
Agrega también una sombra de caja.
- Fuerza de desenfoque de sombra de caja: 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
Vaya a 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)
Frontera
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 n. ° 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 de degradado de la columna.
- Color de fondo: # 2e2d3c
Configuración de texto
Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Montserrat
- Peso de la fuente del texto: negrita
- Estilo de fuente de texto: mayúsculas
- Alineación de texto: centro
- Color del texto: # f3f3e6
- Tamaño del texto: 4vw
- Espaciado de letras de texto: -0.2vw
Dimensionamiento
Cambie 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 Girar
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. Sube una imagen semitransparente de tu elección.
Dimensionamiento
Vaya a la pestaña de diseño y habilite la opción 'Forzar ancho completo'. Esto nos ayudará a 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 los filtros.
- Saturación: 43%
Agregue el módulo de texto n. ° 2 a la columna 2
Agregar contenido
¡A la siguiente columna! Ingrese algún contenido de su elección.
Configuración de texto
Vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: Montserrat
- Alineación del texto: justificar
- Color del texto: # 2e2d3c
- Tamaño del texto: 0.9vw (escritorio), 2.2vw (tableta), 2.5vw (teléfono)
- Altura de la línea de texto: 2.5em
Espaciado
A continuación, agregue algunos valores de espaciado personalizados.
- Margen superior: 10vw (escritorio), 15vw (tableta y teléfono)
- Acolchado izquierdo: 8vw
- Acolchado derecho: 8vw
Módulo de clonación de texto
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 de texto: Montserrat
- Peso de la fuente del 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.4em
Espaciado
Cambie también los valores de relleno.
- 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 módulo de botones a la columna 2
Agregar copia
Pasemos al siguiente y último módulo de botones. Inserte alguna copia de su elección.
Configuración de botones
Vaya a la pestaña de diseño y cambie la configuración de los botones.
- 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)
- Acolchado 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 una copia rotada 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.