Cómo añadir 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 cargada o subir una nueva.

Opciones de imagen de fondo

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

• Tamaño de la imagen de fondo – Elige el tamaño de tu imagen de fondo seleccionando una opción del menú desplegable.

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

• Repetición de la imagen de fondo – Elige si y cómo se repite la imagen de fondo usando el menú desplegable.

• Fusión de imagen de fondo – Elige cómo se fusiona la imagen de fondo con otras capas del módulo mediante las opciones del menú desplegable.

Cómo añadir 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, donde puedes seleccionar un video ya cargado o subir uno nuevo.

Opciones de video de fondo

• Mp4 vs WebM – Se recomienda subir ambas versiones, mp4 y webm, ya que no todos los navegadores soportan el formato WebM. Subir ambos tipos garantiza que el video se reproduzca en todos los dispositivos y navegadores.

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

• Alto del video de fondo – Establece el alto del video ingresando un valor numérico.

• Pausar video cuando otro video se reproduzca – Si deseas que el video de fondo se pause al reproducirse otro video, activa esta opción. Por defecto, el video se pausará cuando no esté visible. Si deseas que continúe, desactiva esta opción.

Cómo añadir un patrón de fondo

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

Haz clic en Añadir patrón de fondo.

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

Opciones de patrón de fondo

• Color del patrón – Selecciona el color del patrón desde la paleta de colores de tu sitio o usa el cuentagotas para elegir uno nuevo.

• Transformación del patrón – Aquí puedes transformar el patrón horizontal y verticalmente, rotarlo o invertirlo.

• Tamaño del patrón – Puedes seleccionar: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las siguientes opciones: ancho del patrón y alto del patrón. Usa el control deslizante o introduce un valor numérico para definir estas opciones.

• Origen de repetición del patrón – Elige el punto de origen desde el cual se repetirá el patrón.

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

• Repetición del patrón – Elige cómo se repetirá el patrón: horizontal, vertical, etc.

• Modo de fusión del patrón – Define cómo se comporta la capa del patrón respecto a las capas inferiores. Elige entre uno de los 16 modos de fusión disponibles.

Cómo añadir una máscara de fondo

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

Haz clic en Añadir máscara de fondo.

Selecciona el tipo de máscara que deseas usando el menú desplegable.

Opciones de máscara de fondo

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

• Transformación de la máscara – Aquí puedes transformar la máscara horizontal o verticalmente, rotarla o invertirla.

• Relación de aspecto de la máscara – Establece la relación de aspecto (proporción entre ancho y alto).

• Tamaño de la máscara – Puedes elegir: tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las opciones de ancho y alto de la máscara.

• Modo de fusión de la máscara – Define cómo interactúa la capa de máscara con las inferiores. Elige entre 16 modos de fusión disponibles.

Etiqueta de administración

La Etiqueta de administración es donde puedes dar un nombre al módulo, visible solo para ti, para mantener todo organizado y comprensible en el back-end.
Por defecto, la etiqueta es el nombre del módulo, pero puedes cambiarla por cualquier texto que desees.

Pestaña de Diseño

Todos los estilos y opciones de diseño del módulo de menú de ancho completo están en esta pestaña.

Diseño

Aquí puedes elegir el diseño del menú y la alineación del logo y el texto del menú.

• Estilo – Elige el estilo de diseño del menú:

  • Alineado a la izquierda

  • Centrado

  • Logo centrado en línea

• Dirección del menú desplegable – Cuando se haga clic, elige la dirección en la que se desplegará el submenú:

  • Hacia abajo

  • Hacia arriba

• Hacer que los enlaces del menú ocupen todo el ancho – Si deseas que los enlaces del menú usen todo el ancho de la ventana del navegador, activa esta opción. El ancho del menú está determinado por el ancho de contenido de tu sitio, que puedes definir en el Personalizador de WordPress.

Texto del menú

Personaliza el texto del menú aquí.

• Color del enlace activo – Un enlace activo es el que apunta a la página actual. Elige un color para distinguirlo de los demás.

• Fuente del menú – Selecciona la fuente del texto del menú. Puedes elegir una predeterminada o subir una personalizada.

• Grosor de la fuente del menú – Selecciona qué tan gruesa será la fuente.

• Estilo de la fuente del menú:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto del menú – Elige un color específico para el texto del menú.

• Tamaño del texto del menú – Ajusta el tamaño con el control deslizante o un valor numérico.

• Espaciado entre letras – Ajusta el espacio entre caracteres.

• Altura de línea – Ajusta el espacio entre líneas de texto.

• Sombra del texto del menú – Añade una sombra al texto. Puedes configurar dirección, desenfoque e intensidad.

• Alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto – Selecciona la paleta de color por defecto del texto del módulo: clara u oscura. Puedes configurar estas paletas en las Opciones del tema Divi.

Menú desplegable

Los menús desplegables aparecen al pasar el cursor sobre enlaces principales con subenlaces. Se gestionan desde Apariencia → Menús en WordPress.

• Color de fondo del menú desplegable

• Color de la línea divisoria del menú desplegable

• Color del texto del menú desplegable

• Color del enlace activo del menú desplegable

• Color de fondo del menú móvil

• Color del texto del menú móvil

Íconos

• Color del ícono del carrito de compras – Elige un color desde la paleta de tu sitio o usa el cuentagotas.
• 
  

• Color del ícono de búsqueda – Igual que arriba.

• Color del ícono de menú hamburguesa – Este ícono de tres líneas se muestra en móviles.

• Tamaño del ícono del carrito – Usa el control deslizante o introduce un valor.

• Tamaño del ícono de búsqueda

• Tamaño del ícono de menú hamburguesa
  

 

Logo

Aquí puedes estilizar la imagen del logo.

• Esquinas redondeadas del logo – Si deseas redondear las esquinas de la imagen del logo, introduce un valor numérico. A mayor valor, más redondas serán las esquinas. Los valores de esquina están vinculados automáticamente (como muestra el icono de eslabón azul); si quieres valores diferentes para cada esquina, haz clic en el eslabón para desvincularlos. Si están vinculados, se actualizarán conjuntamente al cambiar uno.

• Estilos de borde del logo – Aquí puedes agregar un borde a la imagen del logo. Puedes aplicarlo a todos los lados o a lados individuales (superior, derecho, inferior e izquierdo).

• Ancho del borde del logo – Define el grosor del borde. Para un borde más grueso, aumenta el valor. Debe ser de al menos 1 px para que sea visible.

• Color del borde del logo – Selecciona el color del borde desde la paleta de colores predeterminada o usa el cuentagotas.

• Estilo de borde del logo – Elige entre: sólido, discontinuo, punteado, doble, contorneado (groove), en relieve (ridge), embutido (inset), sobresaliente (outset) o ninguno.

• Sombra de la caja del logo – Elige el estilo de sombra para la imagen del logo. Por defecto no tiene sombra.

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

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

  • Intensidad de desenfoque – Controla el desenfoque de la sombra. A mayor valor, más borrosa.

  • Fuerza de expansión – Controla qué tanto se expande la sombra.

  • Color de la sombra – Define el color.

  • Posición de la sombra – Elige si es interna o externa.

• Matices de la imagen:

  • Matiz – Ajusta el tono de la imagen.

  • Saturación – Controla la intensidad del color.

  • Brillo – Ajusta el nivel de brillo.

  • Contraste – Ajusta la distinción entre zonas claras y oscuras.

  • Invertir – Invierte los colores.

  • Sepia – Añade un tono sepia según nivel.

  • Opacidad – Controla la transparencia.

  • Desenfoque (Blur) – Controla el nivel de desenfoque.

  • Modo de fusión – Define cómo se mezcla con las capas inferiores. Por defecto, “normal”.

---

Tamaño 

• Ancho del logo – Define el ancho de la imagen del logo.

• Ancho máximo del logo – Define el ancho máximo.

• Altura del logo – Define la altura de la imagen.

• Altura máxima del logo – Define la altura máxima.

• Ancho (módulo) – Define el ancho del módulo (consulta la documentación oficial).

• Ancho máximo (módulo) – Define el ancho máximo del módulo.

• Alineación del módulo – Si estableces un ancho o ancho máximo, puedes alinearlo:

  • Izquierda

  • Centrado

  • Derecha

• Altura mínima – Define la altura mínima del módulo.

• Altura – Define la altura del módulo.

• Altura máxima – Define la altura máxima del módulo.

---

Espaciado

Puedes añadir márgenes o relleno escribiendo valores numéricos.

• Márgenes (Margin) – Agrega espacio fuera del módulo.

• Relleno interior (Padding) – Agrega espacio dentro del módulo.

• Para vincular valores y mantener proporciones (por ejemplo, top y bottom), haz clic en el icono de cadena.

Valores predeterminados:

• Márgenes: 0

• Relleno: 0

---

Borde

Añade un borde al módulo. Puedes aplicarlo a todos los lados o solo a uno. Ajusta ancho, color y estilo:

• Esquinas redondeadas – Introduce un valor numérico. Igual que con el logo.

• Estilos de borde – Aplica borde a todos o algunos lados.

• Ancho – Mínimo 1 px.

• Color – Desde la paleta o con cuentagotas.

• Estilo – Sólido, discontinuo, punteado, doble, groove, ridge, inset, outset o ninguno.

---

Sombra de caja 

Aplica sombra al módulo completo:

• Posición horizontal

• Posición vertical

• Intensidad de desenfoque

• Fuerza de expansión

• Color de la sombra

• Posición – Interna o externa

---

Filtros

Ajusta filtros del módulo:

• Matiz (Hue)

• Saturación

• Brillo

• Contraste

• Invertir

• Sepia

• Opacidad

• Desenfoque (Blur)

Modo de fusión (Blend Mode): define cómo se mezcla el módulo con capas debajo. Por defecto, “normal”.

---

Transformar 

Opciones:

• Escala (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Sesgar (Skew)

• Punto de origen (Origin)

Navega por las opciones y ajusta valores numéricos o con controles. Usa el icono de cadena para bloquear valores idénticos.

---

Animación 

Aplica animación al módulo:

• Duración – Tiempo para completar un ciclo.

• Retardo (Delay) – Tiempo de espera antes de iniciar.

• Opacidad inicial – Valor de opacidad al inicio.

• Curva de velocidad (Easing) – Método de transición.

• Repetición – Por defecto juega una vez; activa “Loop” para repetir.

---

Pestaña Avanzado 

Ofrece opciones para diseñadores experimentados, como CSS personalizado:

• CSS ID & Clases – Asigna ID o clases para usar en tu hoja de estilo.
  

• CSS personalizado –

  • CSS Free‑Form – Escribe CSS libremente.

  • Elementos del módulo – Aplica CSS a secciones específicas del módulo.
    

• Atributos

  • Texto ALT del logo – Pega aquí el texto ALT deseado.
    

• Condiciones – Define cuándo mostrar el módulo:

  • Ejemplos: si el usuario ha comprado antes, según navegador, sistema operativo, etc. Puedes añadir una o varias condiciones.
    

• Visibilidad

  • Desactivar en – Oculta el módulo en Teléfono, Tablet o Escritorio.

  • Desbordamiento horizontal (Horizontal Overflow): Visible, Scroll, Hidden o Auto.

  • Desbordamiento vertical (Vertical Overflow): Visible, Scroll, Hidden o Auto.
    

• Transiciones

  • Duración, retardo y curva de velocidad de animaciones hover.
    

• Posición
  

• Relative (por defecto), Absolute, Fixed
  

  • Offset vertical/horizontal

  • Z‑index – Define el orden de apilamiento.
    

• Efectos al desplazarsePuedes hacer que el módulo sea fijo (sticky) arriba, abajo o ambos.

  • Efecto de movimiento vertical según velocidad.

  • Disparador (Motion Trigger) – Decide cuándo iniciar el efecto: al visualizar la parte superior, media o inferior del elemento.

    
    

---

Guardar tu diseño

Haz clic en la flecha verde abajo a la derecha del módulo. Si cierras sin guardar, perderás los cambios.

---

Guardar el diseño de la página

Presiona CMD + S (Mac) o CTRL + S (PC) o usa la barra de herramientas de Divi: expándela con el icono morado (…), luego haz clic en Guardar (verde).

---

Salir del Visual Builder

Haz clic en Salir del Visual Builder en la barra superior del administrador para salir.

---

Continuar aprendiendo

• Cómo crear un botón de menú desplegable con el módulo de menú de ancho completo de Divi

• Cómo reemplazar la barra del menú principal con este módulo