Espaciado

Puedes agregar márgenes o relleno (padding) al módulo escribiendo valores numéricos.

• Margen: Agrega espacio fuera del módulo.

• Relleno: Agrega espacio dentro del módulo.

Para mantener los valores iguales (por ejemplo, arriba y abajo), haz clic en el ícono de cadena entre los valores que deseas vincular.

Los valores predeterminados de margen y relleno para el módulo de código son 0.

Borde

Puedes agregar un borde completo o solo a uno de los lados del módulo. Ajusta el ancho con el control deslizante y selecciona un color y estilo desde el menú desplegable.

• Esquinas redondeadas: Para bordes redondeados, escribe un valor numérico. Cuanto mayor sea el número, más redondeada será la esquina.

  • Los valores están vinculados por defecto (ícono de cadena azul).

  • Para usarlos de forma independiente, haz clic en el ícono de cadena para desvincularlos.

• Estilos de borde: Aplica un borde a todos los lados o a lados específicos (arriba, derecha, abajo, izquierda).

• Ancho del borde: Define el grosor. Debe tener al menos 1px para ser visible.

• Color del borde: Elige de la paleta del sitio o usa el cuentagotas.

• Estilo de borde: Selecciona entre sólido, punteado, rayado, doble, surco, relieve, inset, outset, o ninguno.

Sombra de Caja 

Puedes agregar una sombra al módulo.

Una vez aplicada, puedes ajustar:

• Posición horizontal

• Posición vertical

• Intensidad del desenfoque

• Intensidad de propagación

• Color de la sombra

• Posición: Dentro o fuera del módulo

Filtros

Ajusta los filtros visuales del módulo:

• Matiz (Hue) – Ángulo de tono del color.

• Saturación – Intensidad del color.

• Brillo (Brightness) – Claridad general.

• Contraste – Diferencia entre zonas claras y oscuras.

• Invertir – Invierte color, saturación y brillo.

• Sepia – Aplica un tono cálido.

• Opacidad – Nivel de transparencia.

• Desenfoque (Blur) – Aplicación de desenfoque gaussiano.

Modo de fusión (Blend Mode): Define cómo se mezcla el módulo con las capas debajo. Por defecto es normal.

Transformar

Opciones para transformar el módulo:

• Escalar

• Trasladar

• Rotar

• Inclinar (Skew)

• Puntos de origen

Puedes configurar cada opción escribiendo valores o arrastrando las cajas/círculos.
Haz clic en el ícono de cadena para mantener los valores sincronizados.

Animación

Permite aplicar animaciones al módulo.

Opciones configurables:

• Duración – Tiempo total de la animación.

• Retraso – Tiempo antes de que comience.

• Opacidad inicial

• Curva de velocidad – Define la fluidez de la animación.

• Repetición – Por defecto, la animación se reproduce una vez. Puedes activarla en bucle.

Pestaña Avanzado

Diseñada para usuarios con más experiencia técnica.

CSS ID y Clases

Asigna un ID o clase CSS específica al módulo.

Esto es útil para aplicar estilos personalizados desde el archivo style.css de tu tema hijo o para identificar elementos con JavaScript.

CSS Personalizado

Puedes escribir CSS libre usando el selector selector.

Ejemplo:

selector h1 {
  color: red;
}

Dentro de la sección Elementos del Módulo, puedes aplicar estilos CSS directamente en bloques específicos.

Condiciones

Permite definir cuándo se muestra el módulo, según condiciones como:

• Estado del usuario (por ejemplo, si ha comprado antes)

• Navegador o sistema operativo

• Dispositivo utilizado, entre otros

Puedes establecer una o varias condiciones.

---

Visibilidad

Define en qué dispositivos se muestra el módulo:

• Desactivar en: Teléfono, tableta o escritorio.

Desbordamiento horizontal / vertical:

• Visible – Se muestra todo el contenido, incluso si se desborda.

• Scroll – Se agrega una barra de desplazamiento.

• Oculto – El contenido que se desborde será ocultado.

• Auto – El navegador decide.

Transiciones

Controla las transiciones al pasar el mouse:

• Duración

• Retraso

• Curva de velocidad

Posición

Configura la posición del módulo:

• Relativa (por defecto) – Basada en el flujo del documento.

• Absoluta – Se posiciona en relación con su contenedor más cercano.

• Fija – Se mantiene en una posición fija del navegador.

Ajustes adicionales:

• Desplazamiento vertical y horizontal

• Z-index – Prioridad de apilamiento del módulo.

Efectos de desplazamiento 

Define cómo se comporta el módulo al hacer scroll:

• Fijo (sticky) – Puedes fijarlo al inicio, al final o a ambos.

• Movimiento vertical – Cambia la velocidad de desplazamiento del módulo sin afectar a otros.

• Disparador de movimiento – Elige cuándo se activa el efecto: al ver el inicio, mitad o final del módulo.

Guardar tu diseño

Haz clic en el ícono de flecha verde en la esquina inferior derecha del módulo para guardar los cambios.

Si cierras sin guardar, perderás el trabajo.

Guardar el diseño de la página

• Presiona CMD + S (Mac) o CTRL + S (PC),
  o bien

• Haz clic en el botón morado con los tres puntos ..., y luego en el botón verde de Guardar.

Salir del Visual Builder

Una vez que hayas guardado, haz clic en Salir del Visual Builder desde la barra de administración.

Recursos del Módulo de Código de Divi

• Cómo agregar una tarjeta flotante de presentación a tu sitio Divi

• Cómo crear una barra superior deslizante con anuncio usando el Módulo de Código

• Cómo agregar un botón de acción flotante a tu sitio con el Módulo de Código