Pensando fuera de la caja con Divi Box Shadows

Hay dos formas de acercarse a Divi y sus configuraciones integradas. El primer enfoque, y el más obvio, es usar la configuración dentro de su rango mientras se enfoca en ese elemento particular en su página. El segundo enfoque le permite mirar más allá de lo obvio y usar la configuración de una manera que no hubiera pensado antes. Una de esas configuraciones involucra sombras de cuadro. Normalmente, se usan para crear una cierta profundidad para sus elementos. Ya sea que lo esté agregando a una sección, fila o módulo, su intención más obvia es resaltar .

Pero también puede usar sombras de cuadro para fines generales de diseño en su sitio web. Pueden reemplazar las texturas de fondo y agregar asimetría a su sitio web. En este tutorial, le mostraremos cómo pensar fuera de la caja con sombras de caja utilizando la página de inicio del paquete de diseño de consultor comercial de Divi. Una vez que haya entendido cómo funciona, puede aplicar esta táctica a cualquier página que esté creando, lo que hará que su sitio web se vea un poco más único y bien pensado.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo a los efectos de sombra de cuadro una vez aplicados en una página:

Acercarse

  • Puede aplicar una sombra de cuadro a (casi) cualquier elemento de su página
  • De forma predeterminada, estas sombras de cuadro están vinculadas al elemento y se utilizan para mejorarlo.
  • Sin embargo, también puede usarlos para fines generales de diseño de páginas.
  • Para este tutorial, estamos usando el diseño de la página de destino de Business Consultant de nuestros paquetes de diseño prefabricados
  • Pero puedes usar esta táctica de diseño en cualquier diseño.
  • Use secciones/filas/módulos que aún no tengan aplicada una sombra de caja
  • Use Visual Builder para aplicar estas sombras de cuadro (le permite jugar con la apariencia)
  • Estamos ampliando el rango predeterminado de la posición horizontal y vertical
  • Dependiendo de cómo queramos posicionar esta sombra de cuadro, usaremos valores positivos y negativos.
  • Esto permite que la sombra del cuadro parezca no estar relacionada con la sección/fila/módulo, sino como parte del diseño de la página completa.

Pensando fuera de la caja con Divi Box Shadows

Suscríbete a nuestro canal de Youtube

Cargar el diseño de la página de destino de Business Consultant

Comenzaremos este tutorial creando una nueva página y habilitando Visual Builder. Nos centraremos en las sombras del cuadro y cómo usarlas en su página, es por eso que usaremos un diseño ya existente. Para cargar este diseño, haga clic en el ícono ubicado en la parte inferior de su página, seleccione el ícono más a continuación, desplácese hacia abajo por los diferentes paquetes de diseño hasta que encuentre el Paquete de diseño de Business Consultant y use el diseño de la página de destino.

Secciones

Sombra de caja # 1

Ubicación de la sección en la página

Puede aplicar una sombra de cuadro a casi cualquier elemento de su página. Comenzaremos usando sombras de cuadro de sección. La primera sombra de cuadro que agregaremos es parte de la siguiente sección en su página:

 

Aplicar sombra de caja

Después de abrir la configuración de la sección, aplique la siguiente sombra de cuadro:

  • Posición horizontal de la sombra del cuadro: 1200px
  • Posición vertical de la sombra del cuadro: -520px
  • Color de sombra de cuadro: rgba (198,198,198,0.27)
Esto creará el siguiente efecto en su página:

Caja Sombra #2

Ubicación de la sección en la página

La segunda sección en la que aplicaremos una sombra de cuadro dos es la siguiente:

 

Aplicar sombra de caja

Estamos usando esta sección para agregar una sombra de cuadro gris claro al lado izquierdo de nuestra página:

  • Posición horizontal de la sombra del cuadro: -1000px
  • Posición vertical de la sombra del cuadro: -740px
  • Fuerza de propagación de la sombra del cuadro: -39px
  • Color de sombra de caja: rgba (188,188,188,0.25)

filas

Sombra de caja # 1

Ubicación de la fila en la página

También agregaremos una sombra de cuadro a la siguiente fila en nuestra página:

Aplicar sombra de caja

Estamos agregando una sombra de cuadro naranja (que coincide con todo el paquete de diseño):

  • Posición horizontal de la sombra del cuadro: -700px
  • Posición vertical de la sombra del cuadro: -300px
  • Color de la sombra del cuadro: #edbb5f

Eliminar relleno de fila

Como puede notar en la pantalla de impresión anterior, todavía hay un espacio en blanco en la parte superior e inferior de su fila. Este relleno se superpone a la sombra del cuadro que agregó en el paso anterior. Para deshacerse de este fondo blanco, agregue ‘0px’ al relleno superior e inferior de su fila.

Módulos de texto

Sombra de caja de módulo de texto #1

Ubicación del módulo de texto en la página

Además de secciones y filas, también puede agregar sombras de cuadro a los módulos. Los módulos de texto en su página, por ejemplo. Abra el siguiente módulo de texto:

Aplicar sombra de caja

Y aplique la siguiente sombra de cuadro que agregará una sombra de cuadro en la parte superior derecha de su sección:

  • Posición horizontal de la sombra del cuadro: 600 px
  • Posición vertical de la sombra del cuadro: -368px
  • Fuerza de propagación de la sombra del cuadro: 89px
  • Color de la sombra del cuadro: #2f2f2f

Sombra de cuadro de módulo de texto #2

Ubicación del módulo de texto en la página

Usaremos la segunda sombra del cuadro del módulo de texto para superponer la sombra del cuadro anterior también:

Aplicar sombra de caja

Después de agregar la sombra del cuadro, verá que una sombra del cuadro se superpone a la anterior que agregó a su página:

  • Posición horizontal de la sombra del cuadro: 350 px
  • Posición vertical de la sombra del cuadro: -600px
  • Color de sombra de cuadro: rgba (198,198,198,0.27)

Sombra de caja de módulo de texto #3

Ubicación del módulo de texto en la página

Desplácese hacia abajo en su página hasta que se encuentre con el siguiente módulo de texto a continuación:

 

Aplicar sombra de caja

Estamos creando una sombra de cuadro naranja usando la siguiente configuración:

  • Posición horizontal de la sombra del cuadro: 900 px
  • Posición vertical de la sombra del cuadro: -520px
  • Fuerza de propagación de la sombra del cuadro: 160px
  • Color de la sombra del cuadro: #edbb5f

Sombra de caja de módulo de texto #3

Ubicación del módulo de texto en la página

La última sombra de cuadro que aplicaremos es parte del Módulo de texto justo encima del que usó en el paso anterior de esta publicación: 

Aplicar sombra de caja

Estamos usando el mismo color para esta sombra de cuadro que se usó para el fondo de la sección a continuación. El color de la sombra del cuadro junto con las siguientes configuraciones crearán un resultado sorprendente:

  • Posición horizontal de la sombra del cuadro: -350px
  • Posición vertical de la sombra del cuadro: 500 px
  • Fuerza de propagación de la sombra del cuadro: 200px
  • Color de la sombra del cuadro: #2f2f2f

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final a la página de inicio de Business Consultant después de agregarle varias sombras de cuadro:

Pensamientos finales

En esta publicación, le mostramos cómo pensar fuera de la caja con sombras de caja. Además de usar sombras de cuadro para resaltar una determinada sección, fila o módulo, también puede usarlas para el diseño general de su sitio web. Este enfoque puede ayudarlo a crear páginas únicas que estén a la altura de las tendencias de diseño actuales. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!