Sombra de Caja 

Agrega una sombra al módulo completo. Una vez que hagas clic en un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición horizontal de la sombra – Define la posición horizontal de la sombra.

• Posición vertical de la sombra – Define la posición vertical de la sombra.

• Intensidad del desenfoque de la sombra – Define qué tan difusa será la sombra. A mayor valor, más desenfocada y amplia será la sombra.

• Intensidad de expansión de la sombra – Define cuánto se expande la sombra. Un valor más alto hará la sombra más densa.

• Color de la sombra – Define el color de la sombra.

• Posición de la sombra – Define si la sombra estará dentro o fuera del módulo.

Filtros

Ajusta los filtros del módulo:

• Matiz (Hue) – Define el ángulo de matiz del color.

• Saturación – Define cuán intensa debe ser la saturación del color.

• Brillo – Define cuán brillantes deben ser los colores.

• Contraste – Define cuán diferenciadas son las áreas claras y oscuras.

• Invertir – Invierte matiz, saturación y brillo según el valor indicado.

• Sepia – Aplica una apariencia más cálida (tonos amarillos/marrones).

• Opacidad – Define cuán transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque (Blur) – Define la cantidad de desenfoque gaussiano aplicado al módulo.

Modo de fusión (Blend Mode) – Define cómo se mezcla el módulo con las capas inferiores. Por defecto se selecciona "normal".

Transformación

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Inclinar (Skew)

• Puntos de origen

Navega por cada opción mediante pestañas. Configura cada una ingresando valores numéricos o arrastrando y ampliando el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina inferior derecha.

Animación

Configura la animación del módulo. Una vez que selecciones un estilo, puedes ajustar las siguientes opciones:

• Duración de la animación – Define cuánto tiempo tarda en completarse un ciclo de animación.

• Retraso de la animación – Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse. Puede comenzar más tarde, de inmediato o a mitad del efecto.

• Opacidad inicial de la animación – Define el valor de opacidad desde el cual comienza la animación.

• Curva de velocidad de la animación – Define el método de suavizado de la animación. Las curvas de entrada y salida crean un efecto más fluido que una velocidad lineal.

• Repetición de la animación – Por defecto, la animación se reproduce solo una vez. Si deseas que se repita en bucle, selecciona la opción "Loop".

Pestaña Avanzado 

Dentro de la pestaña Avanzado encontrarás opciones útiles para diseñadores web con experiencia, como CSS personalizado.

Aquí puedes aplicar CSS personalizado al módulo. También puedes asignar clases e ID personalizados para personalizar estilos avanzados mediante propiedades CSS o aplicarlos desde tu hoja de estilos.

ID y Clases CSS

Asigna un ID o Clase CSS específicos al módulo. Esto es útil cuando deseas aplicar CSS personalizado desde la hoja de estilo de tu tema hijo.

CSS Personalizado

• CSS libre (Free-Form CSS) – Escribe CSS libre utilizando el selector selector. Ejemplo: selector h1 {color: red;}

• Elementos del módulo – También puedes aplicar CSS personalizado en esta pestaña. Al hacer clic en la pestaña de elementos del módulo, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.

Condiciones

Las condiciones de visualización permiten elegir cuándo mostrar el módulo según ciertos criterios, como:

• Si el usuario está visitando la página,

• Si ya ha realizado una compra,

• El navegador que usa,

• El sistema operativo que utiliza,

• Y más.

Puedes agregar una o múltiples condiciones.

Visibilidad

• Desactivar en – Define la visibilidad del módulo en distintos dispositivos (teléfono, tableta, escritorio) marcando la casilla correspondiente.

• Desbordamiento horizontal – Define qué ocurre cuando el contenido se desborda hacia los lados del módulo:

  • Visible – El contenido se mostrará si sobrepasa el ancho.

  • Scroll – Aparece una barra de desplazamiento horizontal.

  • Oculto (Hidden) – El contenido que sobresale se oculta.

  • Auto – El navegador decide si mostrar una barra de desplazamiento.

• Desbordamiento vertical – Define qué ocurre cuando el contenido se desborda hacia arriba o abajo:

  • Visible

  • Scroll

  • Oculto

  • Auto

Transiciones

Controla la duración, el retardo y la curva de velocidad de las animaciones al pasar el cursor (hover):

• Duración de la transición – Define cuánto dura (en milisegundos).

• Retraso de la transición – Define el retardo antes de iniciar (en milisegundos).

• Curva de velocidad de la transición – Define el tipo de curva de velocidad.

Posición

• Posición – Define la posición del módulo:

  • Relativa (valor por defecto) – El módulo sigue el flujo normal del documento, con valores de desplazamiento vertical y horizontal.

  • Absoluta – El módulo se saca del flujo normal y se posiciona respecto a su contenedor más cercano.

  • Fija – El módulo se posiciona en relación a la ventana del navegador. Ideal para módulos “pegajosos”.

• Desplazamiento vertical – Define la posición vertical.

• Desplazamiento horizontal – Define la posición horizontal.

• Z-index – Define el orden de apilamiento. Un número mayor hace que el módulo se superponga sobre otros con menor z-index.

Efectos de Desplazamiento 

Define cómo se comporta el módulo al desplazarse por la página:

• Puedes hacer que el módulo sea pegajoso (sticky) arriba, abajo o ambos.

• Puedes activar el movimiento vertical, ajustando la velocidad de desplazamiento sin afectar a otros elementos.

• Activador del efecto de movimiento – Elige si el efecto se activa cuando el superior, centro o inferior del módulo entra en vista.

Guardar tu diseño

Una vez que hayas terminado de configurar y estilizar el módulo, haz clic en la flecha verde en la parte inferior derecha para guardar el diseño. Si cierras el módulo sin guardar, perderás los cambios.

Guardar el diseño de la página

Para guardar la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes hacer clic en el icono morado con tres puntos para abrir la barra inferior de Divi y luego hacer clic en el botón verde de guardar en la parte inferior derecha.

Salir del Constructor Visual

Una vez guardados todos los cambios, haz clic en Salir del Constructor Visual desde la barra de administración en la parte superior para salir del editor.

Continúa Aprendiendo

• Cómo apilar elementos del portafolio con las opciones de transformación de Divi

• Cómo crear una plantilla dinámica de proyecto de portafolio con Divi y ACF

• Crear una lista de navegación de portafolio desplazable con los efectos de desplazamiento de Divi