Nueva funcionalidad Divi. Efectos de sombras sin código

por | 13 Oct, 2017 | Divi

Nueva funcionalidad Divi

Desde la última actualización de Divi, que ya está disponible, podemos disfrutar de un nueva funcionalidad en los ajustes de nuestros contenidos. Ahora podemos aplicar fácilmente ajustes de sombras en Divi a cualquier elemento, ya sea una sección, una fila o un módulo.

Bajo estas líneas puedes ver el aspecto de la nueva interfaz de efectos de sombra incorporada al Divi builder.

ajustes de sombras en Divi

Los ajustes de sombra en Divi

Para aplicar los efectos solo tienes que hacer clic en el botón de ajustes del contenido que quieras configurar y en la pestaña diseño, abajop del todo, tras los ajustes de animación, está el nuevo panel de configuración de sombras.

En principio sólo verás los ajustes predeterminados (cuadro 1, en la imagen superior), desde donde puedes aplicar efectos ya preestablecidos con un solo clic.

Una vez aplicado cualquier efecto, tienes la posibilidad de hacer un ajuste fino cambiando parámetros desde el configurados (cuadro 2). Estos son los ajustes que puedes hacer desde aquí:

  • Box Shadow Horizontal Position: Ajusta la posición de la sombra horizontalmente. Un valor positivo desplaza la sombra hacia la derecha. Un valor negativo desplaza la sombra hacia la izquierda.
  • Box Shadow Vertical Position: Ajusta la posición de la sombra verticalmente. Un valor positivo desplaza la sombra hacia la arriba. Un valor negativo desplaza la sombra hacia la abajo.
  • Box Shadow Blur Strength: Controla el difuminado de la sombra. A mayor valor, lógicamente, mayor difuminado.
  • Box Shadow Spread Strength: Controla la extensión de la sombra. Un numero mayor resultará en una sombra más extensa.

Verás que cuando cambias cualquier parámetro, se activará un icono de una flecha circular. Haz clic sobre él para volver al valor predeterminado de ese ajuste.

Más controles

Además (cuadro 3), también puedes elegir un color para tu sombra, lo que te permite conseguir efectos más allá de las sombras, como marcos personalizados sobre los contenidos.

El último despegable es para configurar el tipo de sombra como externa (Outer Shadow) o interna (Inner Shadow).

Hemos «tomado prestada» la siguiente animación del blog de Elegant Themes donde puedes ver la funcionalidad en acción.

control-de-sombras-Divi

Si necesitas ver más ejemplos de la aplicación de este nuevo efecto puedes verlo en el post original de los chicos de ET (en inglés).

Experimenta por tí mismo y nos cuentas. Esperamos tus comentarios