Menú Desplegable

• Color de fondo del menú desplegable – Elige el color de fondo para el menú desplegable. Puedes seleccionar un color de la paleta de colores de tu sitio o hacer clic en el icono del gotero para encontrar un color nuevo.

• Color de línea del menú desplegable – Elige el color de la línea divisoria entre los enlaces del menú desplegable. Puedes seleccionar un color de la paleta de colores de tu sitio o hacer clic en el gotero para un color nuevo.

• Color del texto del menú desplegable – Elige un color para el texto del menú. Puedes seleccionar un color de la paleta de colores de tu sitio o hacer clic en el gotero para un color nuevo.

• Color del enlace activo del menú desplegable – Elige el color de los enlaces activos aquí. Un enlace activo es el enlace a la página que se está viendo actualmente. Selecciona un color de la paleta de colores de tu sitio o usa el gotero para un color nuevo.

• Color de fondo del menú móvil – Elige un color único para el menú móvil cuando se visualiza en un dispositivo móvil.

• Color del texto del menú móvil – Elige un color único para el texto del menú móvil. Puedes seleccionar un color de la paleta de colores de tu sitio o usar el gotero para un color nuevo.

Iconos

• Color del icono del carrito de compras – Selecciona el color del icono del carrito de compras. Puedes elegir un color de la paleta de colores de tu sitio o usar el gotero para un color nuevo.

• Color del icono de búsqueda – Selecciona un color para el icono de búsqueda. Puedes elegir un color de la paleta de colores de tu sitio o usar el gotero para un color nuevo.

• Color del icono de menú hamburguesa – Selecciona un color para el icono del menú hamburguesa, que es el icono de tres líneas apiladas en dispositivos móviles. Puedes elegir un color de la paleta de colores de tu sitio o usar el gotero para un color nuevo.

• Tamaño de fuente del icono del carrito de compras – Selecciona el tamaño del icono del carrito de compras arrastrando el control deslizante o escribiendo un valor numérico. Cuanto mayor sea el número, más grande será el icono.

• Tamaño de fuente del icono de búsqueda – Selecciona el tamaño del icono de búsqueda arrastrando el control deslizante o escribiendo un valor numérico. Cuanto mayor sea el número, más grande será el icono.

• Tamaño de fuente del icono de menú hamburguesa – Selecciona el tamaño del icono del menú hamburguesa arrastrando el control deslizante o escribiendo un valor numérico. Cuanto mayor sea el número, más grande será el icono.

Logo

• Esquinas redondeadas del logo – Si deseas redondear las esquinas de la imagen del logo, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como indica el ícono de cadena azul resaltada en el medio); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si los valores están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si uno cambia.

• Estilos de borde del logo – Aquí puedes agregar un borde a la imagen del logo. Puedes agregar el borde en todos los lados o en lados individuales (arriba, derecha, abajo e izquierda).

• Ancho del borde del logo – Aquí defines el ancho del borde. Incrementa el número para hacer el borde más grueso. El borde debe tener al menos 1px para ser visible.

• Color del borde del logo – Elige el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada del sitio o usar el gotero para un color nuevo.

• Estilo del borde del logo – Selecciona el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, ranurado, en relieve, interno, externo o ninguno.

• Sombra de caja del logo – Elige el estilo de sombra que quieres aplicar a la imagen del logo. Por defecto, no se aplica sombra.

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

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

• Fuerza de desenfoque de la sombra – Controla la fuerza del desenfoque de la sombra. Cuanto mayor sea el número, más difusa será.

• Fuerza de propagación de la sombra – Controla la extensión de la sombra sobre el logo.

• Color de la sombra – Elige el color de la sombra de la imagen del logo.

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

• Matiz de la imagen – Ajusta el matiz de la imagen del logo.

• Saturación de la imagen – Ajusta la saturación de la imagen del logo.

• Brillo de la imagen – Ajusta el brillo de la imagen del logo.

• Contraste de la imagen – Ajusta el contraste de la imagen del logo.

• Invertir imagen – Invierte los colores de la imagen del logo.

• Sepia – Controla el nivel de tono sepia aplicado a la imagen del logo.

• Opacidad de la imagen – Controla el nivel de opacidad (transparencia) de la imagen del logo.

• Desenfoque de la imagen – Controla el nivel de desenfoque de la imagen del logo.

• Modo de mezcla de la imagen – Define cómo se mezcla la imagen del módulo con las capas inferiores. Por defecto está en “normal”.

Texto de cantidad en el carrito

• Fuente del texto de cantidad – Elige la fuente para el texto de cantidad.

• Peso de fuente del texto de cantidad – Elige el peso de la fuente del texto de cantidad.

• Estilo de fuente del texto de cantidad – Elige el estilo de fuente para el texto de cantidad:

  • Cursiva

  • En mayúsculas

  • Mayúsculas pequeñas

  • Subrayado

  • Tachado

• Color del texto de cantidad – Elige el color del texto de cantidad.

• Tamaño del texto de cantidad – Elige el tamaño del texto de cantidad.

• Espaciado entre letras del texto de cantidad – Define el espaciado entre letras.

• Altura de línea del texto de cantidad – Define la altura de línea del texto de cantidad.

• Sombra del texto de cantidad – Elige estilos de sombra para el texto de cantidad.

Tamaño

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

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

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

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

• Ancho – Define el ancho del módulo. Para más información, revisa la documentación oficial.

• Ancho máximo – Define el ancho máximo del módulo. Para más información, revisa la documentación oficial.

• Alineación del módulo – Si defines un ancho o ancho máximo, la alineación del módulo puede configurarse con estas opciones:

  • Alineado a la izquierda

  • Centrado

  • Alineado a la derecha

• Altura mínima – Define el valor mínimo para la altura del módulo. Consulta la documentación oficial para más detalles.

• Altura – Define la altura del módulo. Consulta la documentación oficial para más detalles.

• Altura máxima – Define la altura máxima que el módulo puede tener. Consulta la documentación oficial para más detalles.

Espaciado

• El margen añade espacio fuera del módulo, y el relleno añade espacio dentro del módulo.

• Para bloquear proporciones y mantener los valores iguales, haz clic en el icono de cadena entre los valores que quieras que siempre sean idénticos (por ejemplo, arriba y abajo).

• Los valores predeterminados de margen para el módulo son 0.

• Los valores predeterminados de relleno para el módulo son 0.

Borde

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas. Cuanto mayor sea el número, más redondeadas serán. Los valores están vinculados automáticamente, pero puedes desvincularlos si quieres valores diferentes para cada esquina.

• Estilos de borde – Puedes agregar borde a todos los lados o lados individuales (arriba, derecha, abajo, izquierda).

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

• Color del borde – Selecciona el color del borde de la paleta o con el gotero.

• Estilo del borde – Elige entre sólido, discontinuo, punteado, doble, ranurado, en relieve, interno, externo o ninguno.

• Una vez que selecciones un estilo de sombra, puedes configurar:

  • Posición horizontal de la sombra

  • Posición vertical de la sombra

  • Fuerza del desenfoque (más valor = sombra más grande y difusa)

  • Fuerza de propagación (más valor = sombra más densa e intensa)

  • Color de la sombra

  • Posición de la sombra (interna o externa)

Filtros

• Matiz – Define el ángulo del matiz del color.

• Saturación – Define la intensidad de la saturación del color.

• Brillo – Define qué tan brillante debe ser el color.

• Contraste – Define qué tan distinto debe ser el contraste entre zonas claras y oscuras.

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

• Sepia – Aplica un tono sepia más cálido, amarillento/marrón.

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

• Desenfoque – Aplica un desenfoque gaussiano al módulo.

• Modo de mezcla – Define cómo se mezcla el módulo con las capas debajo. Por defecto es “normal”.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Puedes usar tabulador para acceder a cada opción, configurarlas ingresando valores numéricos o arrastrando la caja o círculo.

Para bloquear los valores iguales siempre, haz clic en el icono de cadena abajo a la derecha.

Animación

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

• Retraso de animación – Tiempo que espera antes de iniciar la animación. Puede iniciar después, inmediatamente o parte por parte.

• Opacidad inicial de la animación – Valor de opacidad al inicio.

• Curva de velocidad de animación – Método de suavizado para que la animación no sea lineal sino más fluida.

• Repetición de animación – Por defecto la animación se reproduce una vez; si quieres que se repita continuamente, selecciona “Bucle”.

Pestaña Avanzada

• Puedes aplicar CSS personalizado al módulo.

• También puedes añadir clases e IDs personalizados para estilizar el módulo con propiedades CSS avanzadas o aplicar código CSS personalizado mediante la clase CSS del módulo.
  

CSS ID y Clases

Asigna un ID CSS específico o una Clase a este módulo. Esto es útil para aplicar CSS personalizado a un módulo usando la hoja de estilos de tu tema hijo.

Configuración de CSS ID y Clases del Módulo Divi Menu
⚠️ Notas:

• El CSS ID debe ser una cadena única. Si tienes varios módulos de menú en tu página, cada instancia debe tener un CSS ID único.

• La Clase CSS puede contener múltiples clases, separadas por comas. Por ejemplo: my-class-1, my-class-2, my-class-3

---

CSS Personalizado

• CSS de forma libre - Escribe CSS libre usando el selector keyword para apuntar 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 la pestaña de Elementos del Módulo, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.

---

Atributos

• Texto ALT del Logo - Escribe aquí el texto de la etiqueta ALT que deseas aplicar al logo.

---

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como si un usuario está visitando la página, si ya ha comprado anteriormente, qué navegador usa, qué sistema operativo utiliza, y más.

• Puedes agregar una o varias condiciones.

---

Visibilidad

• Deshabilitar en - Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tablet o Escritorio marcando la casilla correspondiente.

• Desbordamiento Horizontal - Define qué se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Las opciones son:

  • Visible - El contenido se mostrará si desborda la altura del módulo.

  • Scroll - Si el contenido desborda la altura del módulo, aparecerá una barra de desplazamiento vertical para navegar por el contenido.

  • Oculto - El contenido que desborde la altura del módulo estará oculto.

  • Automático - El navegador decidirá si mostrar una barra de desplazamiento.

• Desbordamiento Vertical - Define qué se muestra cuando el contenido desborda los bordes superior e inferior del elemento a nivel de bloque. Las opciones son iguales a las del desbordamiento horizontal.

---

Transiciones

Controla la duración, retraso y curva de velocidad de la animación al pasar el cursor.

• Duración de la Transición - Define la duración (en milisegundos) de la transición de la animación hover.

• Retraso de la Transición - Define el retraso de la transición de la animación hover (en milisegundos).

• Curva de Velocidad de la Transición - Define la curva de velocidad de la transición de la animación hover.

Posición

Define la posición del módulo:

• Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento vertical y horizontal son relativos a sí mismo. Este desplazamiento no afecta la posición de otros elementos, por lo que el espacio que ocupa es el mismo que si la posición fuera estática.

• Absoluta - El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona en relación a su ancestro posicionado más cercano o el contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija - El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona en relación a la ventana del navegador, útil para crear módulos "sticky" (fijos).

• Desplazamiento Vertical - Define la posición vertical del módulo.

• Desplazamiento Horizontal - Define la posición horizontal del módulo.

• Z-index - Define el orden del módulo en el diseño. Los módulos con un valor z-index más alto se superponen a los de menor valor.

---

Efectos de Desplazamiento 

Define cómo se comporta el módulo al desplazarse. Puedes hacer que el módulo sea fijo (sticky) en la parte superior, inferior o ambos, y elegir si el módulo se transforma al desplazarse.

• También puedes habilitar el movimiento vertical en este módulo para ajustar la velocidad a la que se desplaza (más rápido o más lento) sin afectar otros elementos.

• El efecto disparador de movimiento te permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento está en vista.

---

Guardar tu Diseño

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

---

Guardar el Diseño de la Página

Para guardar el diseño de la página, puedes usar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas inferior de Divi haciendo clic en el ícono morado circular con tres puntos (…) para expandir la barr

a, y luego hacer clic en el botón verde Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en "Salir del Constructor Visual" en la barra de administración superior para salir del Constructor Visual.