Cómo agregar una sombra de caja suave a su módulo deslizante Divi

Una de las formas más fáciles y efectivas de agregar profundidad a un diseño es agregar una sombra de cuadro. En el tutorial de hoy, le mostraremos cómo diseñar un cuadro deslizante elegante con una sombra de cuadro suave. El truco consiste en agregar un borde grueso y claro para llamar la atención sobre los bordes. Este diseño es sutil pero elegante y se puede modificar fácilmente para adaptarse a casi cualquier tipo de sitio web.

¡Vamos a sumergirnos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

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!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Crear un diseño de control deslizante único con una sombra de caja suave en Divi

Parte 1: diseñar la sección y la fila para el control deslizante

Diseño de la sección

  • Agregar imagen de fondo (alrededor de 1920 px por 1080 px)
  • Acolchado: 18vh arriba, 18vh abajo

Diseñando la fila

Una vez que la sección esté lista, agregue una fila de una columna a la sección.

Luego actualice el relleno de fila de la siguiente manera:

  • Relleno: 0px arriba, 0px abajo

Parte 2: diseñar el control deslizante con una sombra de caja suave

Ahora que nuestra fila está en su lugar, estamos listos para comenzar a diseñar el control deslizante.

Agregue un nuevo módulo deslizante a la fila.

El fondo del control deslizante

Luego actualice el fondo con un color blanco semitransparente.

  • Color de fondo: rgba(255,255,255,0.75)

Configuración de navegación y diseño de títulos

En la pestaña de diseño, actualice lo siguiente:

  • Color de flecha: #776cb1
  • Color de navegación de puntos: #776cb1
  • Fuente del título: Raleway
  • Peso de la fuente del título: ultra negrita
  • Color del texto del título: #000
  • Tamaño del texto del título: 65 px (escritorio), 38 px (tableta), 28 px (teléfono)
  • Altura de la línea del título: 1,2 em
  • Sombra del texto del título: ver captura de pantalla
  • Color de la sombra del texto del título: transparente

Diseño de cuerpo de texto

  • Peso de la fuente del cuerpo: Negrita
  • Color del texto del cuerpo: #666
  • Tamaño del texto del cuerpo: 18 px (escritorio), 16 px (tableta), 14 px (teléfono)
  • Altura de la línea del cuerpo: 1,8 em
  • Sombra corporal: Ver captura de pantalla
  • Sombra del texto del cuerpo: transparente

Diseño de botones

A continuación, actualice el diseño del botón de la siguiente manera:

  • Tamaño del texto del botón: 20 px (escritorio), 18 px (tableta), 16 px (teléfono)
  • Color del texto del botón: #776cb1
  • Degradado de fondo del botón Color izquierdo: #776cb1
  • Degradado de fondo del botón Color derecho: rgba(255,255,255,0.7)
  • Dirección del gradiente: 90 grados
  • Posición inicial: 7%
  • Posición final: 0%
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
  • Espaciado entre letras de botones: 3px
  • Peso de la fuente del botón: Negrita
  • Estilo de fuente del botón: TT
  • Margen de botón: 10%
  • Relleno de botones: 1em (superior e inferior)
  • Sombra de caja de botones: ver captura de pantalla
  • Color de sombra: rgba(0,0,0,0.11)

Relleno y Borde

  • Relleno (computadora de escritorio y tableta): 8vh arriba, 8vh abajo, 5% izquierda, 5% derecha
  • Relleno (teléfono): 8 % arriba, 8 % abajo, 5 % a la izquierda, 5 % a la derecha
  • Ancho del borde: 15px
  • Color del borde: #fff

Sombra de la caja

Ahora es el momento de agregar una sombra de cuadro suave a nuestro control deslizante. Esto le dará una sutil profundidad al diseño.

  • Sombra de caja: ver captura de pantalla
  • Posición vertical de la sombra del cuadro: 0px
  • Posición horizontal de la sombra del cuadro: 78px
  • Fuerza de propagación de la sombra del cuadro: -20px
  • Color de sombra: rgba(0,0,0,0.5)

Resultado final

Ahora veamos el resultado final.

Pensamientos finales

¡Bueno, eso es todo! Ahora ya sabe cómo crear un control deslizante elegante con una sombra de cuadro suave. ¡Espero que puedas hacer un gran uso de este tutorial, y no dudes en publicar tus usos en los comentarios!

Espero escuchar de usted en los comentarios.

¡Salud!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}