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

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.

Avance

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 módulo de botones a la columna 2

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.