Cómo agregar sombras de caja de una cara a elementos de diseño en Divi

Agregar sombras de cuadro de un solo lado a varios elementos de diseño en Divi es una forma sutil de agregar un toque creativo sin distraerse del contenido. En este tutorial, le mostraré cómo agregar sombras de cuadro de un solo lado al diseño de la página de preguntas frecuentes de la terapia de Divi. Como consejo adicional, también le mostraré cómo combinar iconos de propaganda como un gráfico centrado verticalmente. Al aprender estas técnicas de diseño Divi, puede agregar sombras de cuadro de un solo lado a cualquier módulo o columna que desee.

Empecemos.

Vistazo

Aquí hay un adelanto del diseño de disposición de las preguntas frecuentes que crearemos utilizando sombras de cuadro de un solo lado.

Empezando

Para comenzar, deberá crear una nueva página. Desde su panel de WordPress, vaya a Páginas> Agregar nuevo. Luego, asigne un título a su página e implemente el constructor visual. Seleccione la opción "Elegir un diseño prefabricado". En la ventana emergente Cargar desde biblioteca, busque y seleccione el paquete de diseño de terapeuta. A continuación, seleccione el diseño de la página de preguntas frecuentes del terapeuta y haga clic en "Usar este diseño".

Ahora está listo para comenzar a diseñar.

Parte 1: Organizar el diseño

En este diseño prediseñado, centraremos nuestra atención en la segunda sección que contiene las preguntas simuladas dentro de múltiples módulos de alternancia. Para empezar, cambiemos el diseño de columna de la fila a tres columnas (1/3 1/3 1/3).

A continuación, mueva todos los módulos de la columna 2 a la columna 3 utilizando la función de selección múltiple de Divi. Para hacer esto, mantenga presionada la tecla Comando (o Control) y haga clic en cada módulo en la columna 2 hasta que todos estén seleccionados. Luego arrástrelos a la columna 3.

Ahora necesitamos darle a nuestra fila un poco más de espacio. Abra la configuración de la fila y actualice lo siguiente:

Ancho: 80%
Ancho de la canaleta: 2
Ecualizar alturas de columna: SÍ

Parte 2: Diseño de módulos de alternancia

Para personalizar el diseño de todos los módulos de alternancia en esta sección a la vez, use la función de selección múltiple para seleccionar cada uno de los módulos de alternancia. Una vez que todos estén seleccionados, abra la configuración de cualquiera de los módulos de alternancia.

Luego actualice lo siguiente:

Abrir alternar color de texto: #ffffff
Abrir alternar color de fondo: rgba (0,0,0,0)
Color de texto de alternancia cerrada: #ffffff
Color de fondo de alternancia cerrada: rgba (0,0,0,0)

Color del texto del cuerpo: #ffffff

Acolchado personalizado: 3vw superior, 3vw inferior, 2vw izquierdo, 2vw derecho

Ahora podemos agregar una sombra de cuadro en el lado izquierdo de nuestro módulo de alternancia actualizando las opciones de sombra de cuadro de la siguiente manera:

Posición horizontal de la sombra del cuadro: -30px
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 40px
Fuerza de propagación de la sombra de caja: -35px
Color de sombra: rgba (0,0,0,0.4)

El truco para colocar la sombra del cuadro correctamente es mover la sombra hacia la izquierda estableciendo la posición horizontal en -30px. Después de eso, debe encontrar el equilibrio correcto entre la fuerza del desenfoque y la fuerza de dispersión para mantener la sombra del cuadro visible a la izquierda sin que se desangre en la parte superior e inferior del módulo.

Guardar ajustes.

Ahora todos sus módulos de alternancia se han actualizado con el nuevo diseño.

Sin embargo, queremos que la sombra del cuadro de los módulos de alternancia en la columna derecha se coloque en el lado derecho (no en el izquierdo). Para cambiar esto, use Multiselect para seleccionar todos los módulos de alternancia en la columna de la derecha y abra la configuración del elemento. Luego cambie la posición horizontal de -30px a 30px de la siguiente manera:

Posición horizontal de la sombra del cuadro: 30px

Luego guarda la configuración.

Eso se encarga de nuestros módulos de alternancia con sus exclusivas sombras de caja de un solo lado. Ahora necesitamos agregar sombras de cuadro de un solo lado similares a nuestras columnas.

Parte 3: Agregar sombras de cuadro de una cara a las columnas

Para agregar sombras de cuadro de un solo lado a las columnas, necesitaremos agregar algunos fragmentos de CSS en la pestaña avanzada de la configuración de fila.

Abra la configuración de la fila y haga clic en la pestaña avanzada. Dentro del elemento principal de la columna 1, agregue el siguiente CSS:

sombra de caja: 30px 0px 70px -45px rgba (0,0,0,0.4)

Si no está familiarizado con CSS, debería poder reconocer la similitud del código con la configuración del módulo de sombra de cuadro disponible en el constructor Divi. En el código anterior ...

30px es el valor de la posición horizontal
0px es el valor de la posición vertical
70px es el valor de la intensidad del desenfoque
-45px es el valor de la fuerza de propagación
rgba (0,0,0,0.4) es el color de la sombra

Le di a la sombra del cuadro de la columna una fuerza de desenfoque mayor que los módulos de alternancia para crear una profundidad ligeramente mayor.

Para agregar una sombra del cuadro de la izquierda a la Columna 3, deberá agregar el siguiente CSS al Elemento principal de la Columna 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Nuevamente, la única diferencia entre este CSS y el usado para la columna 1 es la posición horizontal negativa.

Parte 4: Agregar iconos de Blurb a la columna 2

Ahora que nuestras sombras de cuadro de un solo lado están completas, tenemos una columna central vacía donde podemos combinar algunos iconos de módulo de propaganda para crear un diseño gráfico simple. Para hacer esto, primero agregue un módulo de propaganda y elimine el título y el contenido. Luego haga clic para usar un icono y seleccione el siguiente icono de chat.

Luego actualice la configuración de diseño de la siguiente manera:

Color del icono: rgba (203,241,252,0.37)
Tamaño de fuente del icono: 20vw
Margen personalizado: 0px inferior

A continuación, duplique el módulo de propaganda para crear uno adicional debajo.

Luego, actualice la propaganda superior con un icono de signo de interrogación y actualice la siguiente configuración de diseño:

Tamaño de fuente del icono: 9vw
Ancho: 40%
Alineación del módulo: derecha
Margen personalizado: -2vw

Finalmente, copie el módulo de propaganda del signo de interrogación que acaba de diseñar y péguelo debajo del módulo de propaganda del icono de chat grande. Luego actualice la configuración de diseño para ese módulo de propaganda de la siguiente manera:

Parte 5: Centrado vertical de los módulos en la columna 2

Para terminar el diseño, necesitamos centrar verticalmente los íconos de propaganda en la columna 2 para que sigan siendo un elemento de diseño centrado para nuestro diseño. Para lograr esto, vamos a capitalizar el uso de flex de Divi. Debido a que seleccionamos igualar las alturas de columna para nuestra fila, podemos usar un fragmento simple de CSS para centrar todos los módulos dentro de la columna 2. Siempre puede obtener más información sobre cómo alinear verticalmente el contenido en Divi a su conveniencia. Pero por ahora, abra la configuración de la fila y haga clic en la pestaña avanzada. Luego ingrese el siguiente CSS dentro del Elemento principal de la Columna 2:

margin: auto

Ahora todos los módulos de propaganda estarán centrados verticalmente dentro de la columna 2.

Para facilitar las cosas a la vista, siga adelante y centre el texto en cada uno de los módulos de texto que se encuentran en la parte superior de la columna 1 y la columna 2. Luego, agregue un degradado de fondo a la sección de la siguiente manera:

Color de degradado de fondo a la izquierda: # 616ce1
Gradiente de fondo Color derecho: # 3846e0

Eso es todo. Ahora el diseño está completo.

Mira el resultado final.

Y observe cómo la sombra de la caja se expande y contrae al abrir y cerrar los conmutadores.

Pensamientos finales

Agregar sombras de cuadro de un solo lado a módulos y columnas puede darle profundidad a su contenido de maneras creativas. El truco consiste en saber cómo ajustar la configuración del diseño de la sombra de la caja de Divi de manera efectiva. Este diseño de página de preguntas frecuentes es solo uno de los muchos ejemplos que puede incorporar este diseño. Pero el proceso general es bastante simple y debería ser una buena técnica que puede guardar en su caja de herramientas de diseño para proyectos futuros.

Espero tener noticias tuyas en los comentarios.

¡Salud!