Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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”

 

 

 

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.

 

Aprende a realizar efectos de animación con WordPress y Divi: Efectos animados wordpress

 

 

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.

 

efecto sombreado con wordpress y divi

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 sombra predefinidos con divi y wordpress

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 sombreado predefinidos con wordpress y divi

Efectos de sombras predefinidos con wordpress y Divi

 

Aprende a exportar e importar diseños creados con el Divi builder de una web a otra: Exportar diseños Divi builder

 

 

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.

 

sombreado horizontal del objeto web

Establecer la sombra en el eje horizontal del objeto con WordPress y Divi

 

¿Conoces el plugin Divi Booster?, amplía las funcionalidades de la plantilla Divi con este increible plugin con más de 90 funcionalidades: Divi Booster

 

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.

 

establecer sombra vertical arriba y abajo

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.

 

cambiar nitidez de sombra con wordpres y divi

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.

 

longitud abarcada por la sombra del objeto web

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 con Divi

Sombra exterior o interior al objeto

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies