Cómo agregar una imagen de fondo

• Haz clic en la tercera pestaña, el ícono de Imagen.

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo:

• Usar efecto Parallax – Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido en primer plano, creando una ilusión 3D), activa esta opción. Por defecto, está desactivada.

• Tamaño de imagen de fondo – Elige el tamaño de la imagen de fondo desde el menú desplegable.

• Posición de imagen de fondo – Selecciona la posición de la imagen desde el menú desplegable.

• Repetición de imagen de fondo – Define si y cómo la imagen de fondo se repite usando una opción del menú desplegable.

• Mezcla de imagen de fondo – Define cómo se mezcla la imagen de fondo con otras capas del módulo usando una opción del menú desplegable.

Cómo agregar un video de fondo

• Haz clic en la cuarta pestaña, el ícono de Video.

• Haz clic en el ícono gris + para abrir la biblioteca de medios y seleccionar o subir un video.

Opciones de video de fondo:

• MP4 vs WebM – Se recomienda subir ambos formatos (mp4 y webm) porque no todos los navegadores admiten WebM. Subir ambos garantiza compatibilidad en todos los dispositivos y navegadores.

• Anchura del video de fondo – Establece el ancho del video ingresando un valor numérico.

• Altura del video de fondo – Establece la altura ingresando un valor numérico.

• Pausar video cuando se reproduce otro video – Si deseas que el video de fondo se pause al reproducirse otro, activa esta opción. Por defecto, el video se pausa cuando no está en vista. Si deseas que continúe, desactívala.

Cómo agregar un patrón de fondo

• Haz clic en la quinta pestaña, el ícono de Patrón.

• Haz clic en Agregar patrón de fondo.

• Elige el tipo de patrón que deseas desde el menú desplegable.

Opciones del patrón de fondo:

• Color del patrón – Elige un color desde la paleta del sitio o usa el cuentagotas.

• Transformación del patrón – Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• Tamaño del patrón – Selecciona tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones de ancho y alto del patrón; define los valores usando el control deslizante o ingresando números.

• Origen de repetición del patrón – Define el punto de origen desde el cual se repite el patrón.

• Desplazamiento horizontal y vertical del patrón – Ajusta los desplazamientos horizontal y vertical.

• Repetición del patrón – Define cómo se repite: horizontalmente, verticalmente, etc.

• Modo de mezcla del patrón – Define cómo interactúa la capa del patrón con las capas inferiores. Elige uno de los 16 modos disponibles.

Cómo agregar una máscara de fondo

• Haz clic en la sexta pestaña, el ícono de Máscara.

• Haz clic en Agregar máscara de fondo.

• Selecciona el tipo de máscara deseado desde el menú desplegable.

Opciones de máscara de fondo:

• Color de la máscara – Elige un color desde la paleta o usa el cuentagotas.

• Transformación de la máscara – Transforma horizontal o verticalmente, gírala o inviértela.

• Relación de aspecto de la máscara – Define la proporción entre ancho y alto.

• Tamaño de la máscara – Elige tamaño real, cubrir, ajustar, estirar para llenar o personalizado. Si seleccionas personalizado, aparecen opciones para definir ancho y alto usando el control deslizante o ingresando valores.

• Modo de mezcla de la máscara – Define cómo la capa de la máscara interactúa con las capas debajo; elige uno de los 16 modos disponibles.

Etiqueta de administrador

La Etiqueta de administrador permite asignar un nombre al módulo que solo tú verás, para mantener el backend organizado. Por defecto, el nombre será el del módulo, pero puedes modificarlo según tu preferencia.

Pestaña Diseño

En esta pestaña encontrarás todos los estilos y ajustes de diseño para el Módulo de Imagen de Divi.

Alineación

Alineación de la imagen:

• Izquierda

• Centro

• Derecha

  
  

Dimensiones

• Forzar ancho completo – Al activarlo, la imagen ocupará el 100 % del ancho de la columna.

• Ancho – Define el ancho del módulo.

• Ancho máximo – Establece el valor máximo que puede tener el ancho del módulo.

• Alineación del módulo – Si se define un valor de Ancho o Ancho Máximo, puedes alinear el módulo a la izquierda, centro o derecha.

• Altura mínima – Establece el valor mínimo para la altura del módulo.

• Altura – Define la altura del módulo.

• Altura máxima – Establece la altura máxima que puede tener el módulo.

Espaciado

• Mostrar espacio debajo de la imagen – Por defecto, las imágenes tienen espacio debajo. Desactiva esta opción para eliminarlo.

• Puedes agregar márgenes o rellenos ingresando valores numéricos.

  • El margen añade espacio fuera del módulo.

  • El relleno añade espacio dentro del módulo.

  • Para mantener proporciones iguales, haz clic en el icono de cadena entre los valores que deben ser idénticos (ej. arriba y abajo).

• Valores predeterminados de margen: 0.

• Valores predeterminados de relleno: 0.

Borde

• Agrega un borde completo o solo en uno de los lados del módulo; ajusta el ancho, color y estilo desde los controles correspondientes.

• Esquinas redondeadas – Ingresa un valor numérico para redondearlas; mayores valores = mayor redondez. Para definir valores distintos en cada esquina, desactiva el vínculo (icono de cadena).

• Estilos de borde – Puedes aplicar el borde en todos los lados o solo en uno (arriba, derecha, abajo o izquierda).

• Ancho del borde – Define el grosor del borde (mínimo 1 px).

• Color del borde – Elige desde la paleta o usa el cuentagotas.

• Estilo del borde – Elige entre sólido, discontinuo, punteado, doble, ranura, relieve, embutido, sobresaliente o ninguno.

Sombra de caja

• Permite agregar una sombra proyectada a todo el módulo.

  • Posición horizontal – Ubicación de la sombra en el eje horizontal.

  • Posición vertical – Ubicación en el eje vertical.

  • Desenfoque – A mayor valor, mayor desenfoque.

  • Expansión – A mayor valor, mayor densidad de la sombra.

  • Color – Color de la sombra.

  • Posición de la sombra – Puede ser interna o externa.

Filtros

Permiten ajustar propiedades visuales del módulo: tono, saturación, brillo, contraste, invertir, sepia, opacidad y desenfoque, además del modo de mezcla (por defecto: normal).

Transformar

Permite aplicar transformaciones como escala, traslación, rotación y sesgado, definiendo el punto de origen. Puedes ingresar valores numéricos o usar los controles visuales. Usa el icono de cadena para mantener proporciones.

Animación

• Duración – Tiempo que dura un ciclo de animación.

• Retraso – Tiempo de espera antes de que comience la animación.

• Opacidad inicial – Valor de opacidad al inicio.

• Curva de velocidad – Método de easing para suavizar la animación.

• Repetición – Por defecto, la animación solo se reproduce una vez. Usa “Loop” para repetirla continuamente.

Pestaña Avanzada

Dentro de la pestaña Avanzada, encontrarás opciones que pueden resultar útiles para diseñadores web más experimentados, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizadas al módulo, que pueden usarse para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

ID y Clases CSS

CSS Personalizado

• CSS Libre: Escribe CSS libre usando el selector keyword para dirigirte a este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del Módulo: También puedes aplicar CSS personalizado a este módulo pegándolo en esta pestaña. Al hacer clic en Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Atributos

• Texto Alternativo de la Imagen: El texto alt de la imagen es el texto que se muestra si la imagen no puede cargarse. Añadir texto alt ayuda a optimizar tu sitio para motores de búsqueda.

• Texto del Título de la Imagen: Si deseas agregar un título a la imagen, escríbelo aquí.

Condiciones

Puedes añadir una o varias condiciones.

---

Visibilidad

• Desactivar en: Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la pantalla sea un teléfono, tableta o escritorio, marcando la casilla correspondiente.

• Desbordamiento Horizontal: Define qué mostrar cuando el contenido sobrepasa los bordes izquierdo o derecho del elemento:

  • Visible: El contenido se muestra si sobrepasa la altura del módulo.

  • Scroll: Aparece una barra de desplazamiento vertical para navegar el contenido.

  • Oculto: La parte del contenido que sobrepasa se oculta.

  • Automático: El navegador decide si muestra la barra de desplazamiento.

• Desbordamiento Vertical: Igual que el desbordamiento horizontal, pero para los bordes superior e inferior.

Transiciones

• Duración de la transición: Duración en milisegundos de la transición de la animación hover.

• Retraso de la transición: Tiempo en milisegundos que espera antes de iniciar la animación.

• Curva de velocidad de la transición: Define la suavidad de la animación.

Posición

• Relativa (valor por defecto): El módulo se posiciona según el flujo normal del documento y las compensaciones vertical y horizontal son relativas a sí mismo. No afecta la posición de otros elementos.

• Absoluta: El módulo se elimina del flujo normal y se posiciona relativo a su ancestro más cercano con posición definida o al bloque contenedor inicial.

• Fija: El módulo se elimina del flujo y se posiciona en relación con la ventana del navegador, útil para crear módulos “sticky” (pegajosos).

Opciones adicionales:

• Compensación vertical: Define la posición vertical.

• Compensación horizontal: Define la posición horizontal.

• Z-index: Define el orden de superposición. Módulos con z-index más alto se muestran por encima de los demás.

Efectos de Desplazamiento 

También puedes habilitar movimiento vertical para ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos vecinos.

El “Trigger Effect” define cuándo se activa el efecto: cuando la parte superior, media o inferior del elemento está visible.

Guardar tu Diseño

Guardar el Diseño de la Página

Salir del Visual Builder

Recursos del Módulo de Imagen Divi

• Cómo cambiar una imagen al pasar el cursor con Divi

• Cómo usar módulos de imagen posicionados absolutamente como fondos con efecto parallax de zoom con Divi