Vamos a ver en este post una interesante funcionalidad de la plantilla Divi que permite añadir diferentes efectos de sombreado en wordpress sobre cualquier elemento del divi builder, ya sea una sección, fila o módulo
Este efecto de sombreado lo encontrarás en el blog de Elegant Themes con el nombre de “Box Shadow”
DESCUENTOS DIVI
ÍNDICE DEL POST
- 1.- ¿En qué elementos del Divi Builder podemos añadir este efecto de sombreado?
- 2.- Donde están las opciones de configuración del efecto de sombreado
- 3.- Añadir sobras personalizadas a la web o sombreados predefinidos
- 4.- Efectos de sombreado predefinidos de secciones, filas y módulos de Divi
- 5.- Elementos para personalizar los efectos de sombreado sobre secciones, filas y módulos.
1.- ¿En qué elementos del Divi Builder podemos añadir este efecto de sombreado?
El efecto de sombreado o Box Shadow lo podremos aplicar con el constructor de la plantilla Divi sobre los tres tipos de elementos de creación del Divi Builder.
Es decir, el efecto de sombreado de elementos lo podremos aplicar a Secciones, filas y módulos del Divi Builder.
2.- Donde están las opciones de configuración del efecto de sombreado
Las opciones de configuración de sombreado las encontraremos en el mismo sitio en cualquiera de los tres tipos de elementos del Divi builder (Secciones, filas y módulos).
En concreto estarán en la pestaña “Diseño” de la configuración de secciones, filas o módulos. En el interior de la pestaña “Diseño” veremos un apartado denominado “Box Shadow” en el cual podremos ver las opciones de efectos de sombreado.
Box shadow: efecto sombreado wordpress
3.- Añadir sobras personalizadas a la web o sombreados predefinidos
En las opciones de configuración de sombreado de secciones, filas o módulos podremos elegir entre:
i.- Opciones de sombreado predefinidas: si no nos queremos calentar los cascos en demasía podremos elegir entre uno de los 7 diseños de efectos de sombreado predefinidos de que podremos aplicar a secciones, filas o módulos.
ii.- Personalizar sombreado: si queremos conseguir un efecto de sombreado específico podremos utilizar los diferentes selectores que aparecen debajo de los diseños de sombreado predefinidos. Un poco más adelante veremos cada uno de estos selectores.
Efectos de sombreado predefinidos y personalizados
4.- Efectos de sombreado predefinidos de secciones, filas y módulos de Divi
El Divi Builder nos ofrece hasta 7 diseños predefinidos diferentes de efectos de sombreado sobre wordpress.
En el constructor veremos 4 opciones superiores y cuatro inferiores.
La primera de la izquierda del bloque superior es para no mostrar ningún tipo de efecto de sombreado y el resto son diseños de sombreado predefinidos.
Cada diseño tiene unos parámetros definidos. En el siguiente apartado vamos a ver todos los parámetros que definen un efecto de sombreado y que efecto produce cada uno de ellos.
Efectos de sombras predefinidos con wordpress y Divi
5.- Elementos para personalizar los efectos de sombreado sobre secciones, filas y módulos.
Vamos a ir viendo ahora las funcionalidades de los diferentes selectores de que dispone el divi builder para crear un efecto de sombreado personalizado:
i.- Box Shadow Horizontal Position: con este selector estableceremos el efecto de sombreado horizontal. El valor introducido establecerá la distancia en píxeles sobre la cual se extenderá la sombrar horizontal. Este umbral se moverá entre -80 y 80 px
Si ponemos el selector en “0” no habrá sombra horizontal, si elegimos un número positivo la sobra aparecerá en el lateral derecho del objeto y si elegimos un número negativo la sombra aparecerá en el lateral izquierdo.
Establecer la sombra en el eje horizontal del objeto con WordPress y Divi
ii.- Box Shadow Vertical Position: este selector tiene exactamente las misma características que el anterior, con la única salvedad de que con él estableceremos el efecto de sombreado vertical del elemento en vez del horizontal.
En este caso con los valores positivos produciremos un efecto de sombreado vertical inferior, mientras que con los valores negativos produciremos un efecto de sombreado vertical superior.
Sombreado vertical del objeto con wordpress y divi
iii.- Box Shadow Blur Strength: con este selector estableceremos la nitidez o grado de difuminado de la sombra. Los valores oscilan entre 0 – 80
Con valores inferiores produciremos una sombra más definida y nítida (el valor “0” produce la sombra más nítida) y con valores superiores produciremos una sombra más difuminada.
Observa como varía la nitidez del borde del sombreado modificando este selector
iv.- Box Shadow Spread Strength: con este selector controlaremos la extensión del sombreado. Los valores oscilan entre -80 y 80
Con este selector controlaríamos la distancia que hay entre el objeto y su fondo. A mayor distancia la sombra se expandirá más.
Cuanto mayor sea el valor seleccionado mayor será la extensión o expansión de la sombra, produciendo el efecto de una mayor distancia entre el objeto y el fondo.
Extensión del sombrado (efecto distancia entre objeto y fondo)
v.- Shadow Color: desde este selector estableceremos el color de la sombra.
vi.- Box Shadow Position: Con este selector seleccionaremos si la sombra es interior al objeto o exterior al mismo. Este selector tiene dos opciones: Outer Shadow (Sombra exterior al objeto) e Inner Shadow (sombra interior al objeto)
Sombra exterior o interior al objeto
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
