Cómo Agregar una Máscara de Fondo

1. Haz clic en la sexta pestaña, el ícono de Máscara.
2. Haz clic en Agregar Máscara de Fondo.

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

Opciones de Máscara de Fondo

• Color de la Máscara - Elige el color de la máscara desde la paleta de colores de tu sitio, o usa el ícono del cuentagotas para encontrar un color nuevo.

• Transformar Máscara - Aquí puedes transformar la máscara horizontal o verticalmente, rotarla o invertirla.

• Relación de Aspecto de la Máscara - Aquí puedes establecer la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción entre su ancho y su alto.

• Tamaño de la Máscara - Puedes seleccionar el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las siguientes opciones: ancho de la máscara y alto de la máscara. Arrastra el deslizador o escribe un valor numérico para definir esas opciones.

• Modo de Mezcla de la Máscara - Esto define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Etiqueta de Administración

Pestaña Diseño

Controles

• Zoom con Rueda del Ratón - Activa esta opción para controlar el nivel de zoom del mapa con la rueda del ratón, o desactívala para deshabilitar esta funcionalidad.

• Arrastrable en Móvil - Activa o desactiva si quieres que el mapa sea arrastrable en dispositivos móviles.

Mapa

• Tono: Define el ángulo del tono de un color.

• Saturación: Define qué tan intensa debe ser la saturación del color.

• Brillo: Define qué tan brillante deben ser los colores.

• Contraste: Define qué tan distintas deben ser las áreas claras y oscuras.

• Invertir: Invierte el tono, saturación y brillo según el valor especificado.

• Sepia: Define una apariencia más cálida, amarilla/marrón.

• Opacidad: Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque: Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Mezcla se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, se selecciona "normal".

Tamaño

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

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

• Alineación del Módulo - Si se establece un valor de Ancho o Ancho Máximo, la alineación del módulo puede configurarse usando las tres opciones:

  • Alineado a la Izquierda

  • Alineado al Centro

  • Alineado a la Derecha

• Altura Mínima - Define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

• Altura - Define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura Máxima - Define el valor máximo para la altura del módulo. Para más información, consulta la documentación oficial.

Espaciado

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo.

• Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieres 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 si quieres bordes redondeados. Mientras 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 resaltado en el medio); sin embargo, si quieres valores diferentes para cada esquina, haz clic en el ícono para desvincularlos.

• Estilos de Borde – Aquí puedes agregar un borde a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del Borde - Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho mínimo es 1px para que se muestre.

• Color del Borde – Aquí eliges el color del borde. Puedes seleccionar un color de la paleta de tu sitio o usar el cuentagotas para elegir un color nuevo.

• Estilo del Borde – Aquí seleccionas el estilo: sólido, punteado, discontinuo, doble, surco, relieve, interno, externo o ninguno.

Sombra de Caja

Una vez que seleccionas 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.

• Fuerza del Desenfoque de la Sombra - Define la fuerza del desenfoque de la sombra. Mientras más alto el valor, mayor será el desenfoque y más amplia y clara será la sombra.

• Fuerza de Extensión de la Sombra - Define la fuerza de expansión del desenfoque. Aumentar este valor aumenta la densidad de la sombra. Mayor densidad da una sombra más intensa.

• Color de la Sombra - Define el color de la sombra.

• Posición de la Sombra - Define si la sombra está dentro o fuera del módulo.

Filtros

• Tono - Define el ángulo del tono de un color.

• Saturación - Define qué tan intensa debe ser la saturación del color.

• Brillo - Define qué tan brillante deben ser los colores.

• Contraste - Define qué tan distintas deben ser las áreas claras y oscuras.

• Invertir - Invierte el tono, saturación y brillo según el valor especificado.

• Sepia - Define una apariencia más cálida, amarilla/marrón.

• Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque - Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Mezcla se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, se selecciona "normal".

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega entre las opciones para configurarlas ingresando valores numéricos o arrastrando y expandiendo las cajas o círculos.

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

Animación

• Duración de la Animación - Define cuánto tiempo tarda la animación en completar un ciclo.

• Retraso de la Animación - Define el tiempo de espera antes de que la animación comience después de aplicarla al elemento. La animación puede empezar más tarde, inmediatamente o en medio del ciclo.

• Opacidad Inicial de la Animación - Define el valor de opacidad al inicio.

• Curva de Velocidad de la Animación - Define el método de aceleración de la animación. Una aceleración suave crea un efecto más fluido que una velocidad lineal.

• Repetición de la Animación - 

• Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, selecciona la opción de bucle.

Configuración de Animaciones del Módulo Divi Fullwidth Map



Pestaña Avanzada


En la pestaña Avanzada encontrarás opciones que diseñadores web más experimentados podrían encontrar útiles, como CSS personalizado.

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



---

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



---

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 pegándolo en esta pestaña. Al hacer clic en Elementos del Módulo verás secciones individuales donde puedes agregar propiedades CSS personalizadas.