Uso de bordes de módulo de índice Z bajo como fondos con Divi


Cuando intentas crear un diseño único para tu sitio web, pensar de forma innovadora puede ayudarte a lograrlo. En tutoriales anteriores, a menudo hemos utilizado 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 hacer que se vea exactamente de la manera que desea en diferentes tamaños de pantalla. En el tutorial Divi de hoy, le mostraremos cómo usar los bordes de bajo índice z de un módulo para crear un diseño sorprendente y que se pueda usar para múltiples propósitos. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

bordes del módulo

Móvil

bordes del módulo

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 libre, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=es0lurYYTII (/ incrustar)

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

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 predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

bordes del módulo

Desbordamientos

Pase a la pestaña avanzada y cambie los desbordamientos.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

bordes del módulo

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

bordes del módulo

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

bordes del módulo

Dimensionamiento

Pase a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

bordes del módulo

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila siguiente.

  • Relleno superior: 0px
  • Relleno inferior: 0px

bordes del módulo

Configuración de columna 1

Una vez que haya completado la configuración de la fila, puede abrir la configuración de la primera columna y hacer algunos cambios.

bordes del módulo

Fondo degradado

Agregue un fondo degradado con la siguiente configuración:

  • Color 1: rgba (0,0,0,0)
  • Color 2: # 2e2d3c
  • Dirección de degradado: 90 grados
  • Posición de inicio: 54%
  • Posición final: 54%

bordes del módulo

Sombra de la caja

Agregue una caja de sombra también.

  • Fuerza de desenfoque de sombra de caja: 80 px
  • Color de sombra: rgba (0,0,0,0.3)

bordes del módulo

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

Deje 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. Utilizaremos 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.

bordes del módulo

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)

bordes del módulo

Espaciado

Vaya a la configuración de espaciado siguiente y cambie los valores de la siguiente manera:

  • Margen superior: 15vw
  • Margen izquierdo: 12vw (escritorio), 30vw (tableta y teléfono)
  • Relleno superior: 32vw (escritorio), 67vw (tableta), 60vw (teléfono)

bordes del módulo

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

bordes del módulo

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 degradado de la columna.

  • Color de fondo: # 2e2d3c

bordes del módulo

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Montserrat
  • Peso de fuente de texto: negrita
  • Estilo de fuente de texto: mayúscula
  • Alineación de texto: centro
  • Color del texto: # f3f3e6
  • Tamaño del texto: 4vw
  • Espacio entre letras de texto: -0.2vw

bordes del módulo

Dimensionamiento

Cambia el ancho también.

  • Ancho: 27vw

bordes del módulo

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)
  • Relleno superior: 4vw
  • Relleno inferior: 4vw
  • Relleno izquierdo: 2vw
  • Relleno derecho: 2vw

bordes del módulo

Transformar Rotar

Complete la configuración del módulo girando el módulo en la configuración de transformación.

  • Izquierda: 270 grados

bordes del módulo

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.

bordes del módulo

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í

bordes del módulo

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)

bordes del módulo

Filtros

También estamos disminuyendo la saturación de la imagen en la configuración de los filtros.

  • Saturación: 43%

bordes del módulo

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.

bordes del módulo

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto de la siguiente manera:

  • Fuente de texto: Montserrat
  • Alineación de 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.5 em

bordes del módulo

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

  • Margen superior: 10vw (escritorio), 15vw (tableta y teléfono)
  • Relleno izquierdo: 8vw
  • Relleno derecho: 8vw

bordes del módulo

Módulo de texto clonado

Una vez que haya completado el Módulo de texto, clónelo una vez.

bordes del módulo

Eliminar margen superior

Elimine el margen superior del duplicado.

bordes del módulo

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 el contenido de su elección.

bordes del módulo

Configuraciones 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

bordes del módulo

Espaciado

Cambie los valores de relleno también.

  • Relleno superior: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
  • Relleno inferior: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
  • Relleno izquierdo: 4vw
  • Relleno derecho: 4vw

bordes del módulo

Agregar módulo de botón a la columna 2

Agregar copia

En el siguiente y último módulo de botones. Inserte una copia de su elección.

bordes del módulo

Configuraciones 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

bordes del módulo

bordes del módulo

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
  • Relleno 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)

bordes del módulo

Avance

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

Escritorio

bordes del módulo

Móvil

bordes del módulo

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 rotada en nuestro diseño. Este tutorial muestra cuán versátiles son las opciones integradas de Divi y cómo puede ajustar 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 Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.