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 Añadir Máscara de Fondo
3. 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 cuentagotas para seleccionar un color nuevo.

• Transformar Máscara – Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de Aspecto de la Máscara – Establece 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 – Selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto de la máscara. Usa el deslizador o escribe un valor numérico para definirlas.

• Modo de Fusión de la Máscara – Define cómo interactúa la capa de la máscara con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

Etiqueta de Administración

Pestaña Diseño

Configuración de la Pestaña Diseño del Módulo Testimonial Divi

Ícono de Cita

• Color del Ícono de Cita – Elige un color específico para el ícono de cita en la parte superior del testimonio. Selecciona desde la paleta de colores de tu sitio o usa el cuentagotas para un color nuevo. Por defecto, los íconos son grises.

• Color de Fondo del Ícono de Cita – Elige un color de fondo para el ícono de cita. Selecciona desde la paleta o usa el cuentagotas. Por defecto es gris.

• Usar Tamaño Personalizado para el Ícono – Si deseas un tamaño específico, activa esta opción y usa el deslizador para elegir el tamaño o escribe un valor numérico.

Imagen

• Ancho de la Imagen – Define el ancho arrastrando el deslizador o escribiendo un valor numérico.

• Alto de la Imagen – Define la altura con el deslizador o valor numérico.

• Esquinas Redondeadas de la Imagen – Por defecto está en 90px para mostrar una imagen circular. Más alto es más redondeado, más bajo más cuadrado. Los valores están enlazados automáticamente (verás un ícono de cadena azul), pero puedes deshacer el enlace para ajustar cada esquina individualmente.

• Estilos de Borde de la Imagen – Aquí puedes agregar borde a la imagen, ya sea en todos los lados o individualmente (arriba, derecha, abajo, izquierda).

• Ancho del Borde de la Imagen – Define el grosor del borde. Debe ser al menos 1px para mostrarse.

• Color del Borde de la Imagen – Selecciona el color del borde desde la paleta o con el cuentagotas.

• Estilo del Borde de la Imagen – Elige el estilo: sólido, punteado, discontinuo, doble, canaladura, relieve, inserto, saliente o ninguno.

• Sombra de Caja de la Imagen – Selecciona el estilo de sombra para la imagen. Por defecto, no tiene sombra.

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

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

• Fuerza de Desenfoque de la Sombra de Caja – Controla el nivel de desenfoque de la sombra. Más alto es más borroso.

• Fuerza de Expansión de la Sombra de Caja – Controla qué tan dispersa está la sombra.

• Color de la Sombra – Elige el color de la sombra.

• Posición de la Sombra de Caja – Elige si la sombra está dentro o fuera de la imagen.

• Matiz de la Imagen – Ajusta el matiz de la imagen.

• Saturación de la Imagen – Ajusta la saturación.

• Brillo de la Imagen – Ajusta el brillo.

• Contraste de la Imagen – Ajusta el contraste.

• Invertir Imagen – Invierte los colores de la imagen.

• Tono Sepia – Controla el nivel de tono sepia aplicado.

• Opacidad de la Imagen – Controla la transparencia.

• Desenfoque de la Imagen – Controla qué tan borrosa está la imagen.

• Modo de Fusión de la Imagen – Define cómo la imagen se mezcla con las capas debajo. Por defecto es normal.

Texto

• Alineación del Texto – Elige la alineación: izquierda, centro, derecha, justificado.

• Sombra del Texto – Aplica una sombra al texto completo del módulo, tanto números como títulos.

Texto Principal

• Fuente del Texto Principal – Elige la fuente, la predeterminada se selecciona automáticamente pero puedes cambiarla o subir una personalizada.

• Grosor de Fuente – Selecciona el grosor de la fuente.

• Estilo de Fuente – Elige estilo: cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Texto Principal – Alinea específicamente este texto: izquierda, centro, derecha, justificado.

• Color del Texto Principal – Selecciona un color específico desde la paleta o con cuentagotas.

• Tamaño del Texto Principal – Ajusta el tamaño con el deslizador o valor numérico.

• Espaciado entre Letras – Ajusta el espacio entre letras con el deslizador o valor numérico. Más alto es más espacio.

• Altura de Línea – Ajusta el espacio entre líneas con el deslizador o valor numérico. Más alto es más espacio.

• Sombra del Texto Principal – Añade sombra y configura dirección (horizontal y vertical), fuerza del desenfoque y color.

Texto del Autor

• Fuente del Autor – Elige la fuente, predeterminada seleccionada, pero puedes cambiar o subir una personalizada.

• Grosor de Fuente del Autor – Selecciona el grosor.

• Estilo de Fuente del Autor – Elige estilo: cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Texto del Autor – Alinea texto del autor: izquierda, centro, derecha, justificado.

• Color del Texto del Autor – Selecciona color desde la paleta o cuentagotas.

• Tamaño del Texto del Autor – Ajusta tamaño con deslizador o valor numérico.

• Espaciado entre Letras del Autor – Ajusta espacio entre letras.

• Altura de Línea del Autor – Ajusta espacio entre líneas.

• Sombra del Texto del Autor – Añade sombra y configura dirección, fuerza y color.

Posición del Texto

• Fuente del Cargo – Elige la fuente.

• Grosor de Fuente del Cargo – Selecciona grosor.

• Estilo de Fuente del Cargo – Elige estilo: cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Texto del Cargo – Alinea texto: izquierda, centro, derecha, justificado.

• Color del Texto del Cargo – Selecciona color.

• Tamaño del Texto del Cargo – Ajusta tamaño.

• Espaciado entre Letras del Cargo – Ajusta espacio entre letras.

• Altura de Línea del Cargo – Ajusta espacio entre líneas.

• Sombra del Texto del Cargo – Añade sombra y configura dirección, fuerza y color.

Texto de la Empresa

• Fuente de la Empresa – Elige la fuente.

• Grosor de Fuente de la Empresa – Selecciona grosor.

• Estilo de Fuente de la Empresa – Elige estilo: cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Texto de la Empresa – Alinea texto: izquierda, centro, derecha, justificado.

• Color del Texto de la Empresa – Selecciona color.

• Tamaño del Texto de la Empresa – Ajusta tamaño.

• Espaciado entre Letras de la Empresa – Ajusta espacio entre letras.

• Altura de Línea de la Empresa – Ajusta espacio entre líneas.

• Sombra del Texto de la Empresa – Añade sombra y configura dirección, fuerza y color.

Dimensionamiento

• 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.

• Alineación del Módulo – Si se establece un ancho o ancho máximo, la alineación puede ser:

  • Alineado a la Izquierda

  • Centrado

  • Alineado a la Derecha

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

• Altura – Define la altura del módulo.

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

Espaciado

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo. Para mantener proporciones y que los valores sean iguales, haz clic en el ícono de cadena entre los valores que deseas sincronizar (ejemplo, arriba y abajo).

• Los valores predeterminados de margen son 0.

• Los valores predeterminados de relleno son 0.
  

Borde

Agrega un borde al módulo. Puedes añadir un borde completo o solo a un lado del módulo. Ajusta el ancho mediante el deslizador y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se muestra en el ícono de cadena azul resaltado en el medio); sin embargo, si deseas valores diferentes para cada esquina, simplemente haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados automáticamente, siempre tendrán el mismo valor y se actualizarán automáticamente si se cambia uno.

Estilos de borde – Añade un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo e izquierda).

Ancho del borde – Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que sea visible.

Color del borde – Elige el color del borde. Puedes seleccionar un color del paleta de colores predeterminada del sitio o hacer clic en el icono cuentagotas para encontrar un color nuevo.

Estilo del borde – Selecciona el estilo del borde que desees: sólido, punteado, discontinuo, doble, ranura, relieve, embutido, sobresaliente o ninguno.

---

Sombra de caja

Agrega una sombra al módulo completo. 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 de desenfoque de la sombra – Define la intensidad del desenfoque. Mientras mayor sea el valor, mayor será el desenfoque y la sombra será más amplia y ligera.

• Fuerza de expansión de la sombra – Define la intensidad de la expansión del desenfoque. Al aumentar esta fuerza, la densidad de la sombra también aumenta, haciendo la 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

Ajusta los filtros del módulo:

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

• Saturación – Define qué tan intensa será la saturación del color.

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

• Contraste – Define la diferencia entre las áreas claras y oscuras.

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

• Sepia – Define un tono más cálido, amarillo/marrón.

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

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

El modo de fusión se refiere a cómo el módulo se mezcla con las capas que están debajo. Por defecto, estará seleccionado “normal”.

---

Transformar

Opciones disponibles:

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega entre cada opción usando tabulador. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

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

---

Animación

Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

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

• Retraso de la animación – Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza. La animación puede comenzar más tarde, inmediatamente o en medio de la animación.

• 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 suavizado para que la animación sea más fluida que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones se reproducen una sola vez. Para que se repita continuamente, selecciona la opción “Bucle”.

---

Pestaña Avanzada

Dentro de la pestaña avanzada encontrarás opciones útiles para diseñadores web con más experiencia, como CSS personalizado.

Aquí puedes aplicar CSS personalizado al módulo. También puedes añadir clases e identificadores CSS personalizados, que pueden usarse para personalizar el estilo del módulo con propiedades CSS más avanzadas o aplicar código CSS usando la clase CSS 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 de palabra clave para apuntar a este módulo. Ejemplo: selector h1 {color: red;}

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

---

Condiciones

Las condiciones de visualización te permiten elegir cuándo mostrar este módulo basándote en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado antes, qué navegador o sistema operativo usa, y más.

Puedes añadir una o varias condiciones.

---

Visibilidad

• Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea teléfono, tableta o escritorio, marcando la casilla correspondiente.

• Desbordamiento horizontal – Define qué mostrar cuando el contenido se desborda a los lados izquierdo y derecho. Puede ser:

  • Visible – El contenido se mostrará si se desborda.

  • Desplazar – Aparecerá una barra de desplazamiento vertical para recorrer el contenido.

  • Oculto – La parte que se desborda no se mostrará.

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

• Desbordamiento vertical – Define qué mostrar cuando el contenido se desborda arriba o abajo. Opciones 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 – Duración (en milisegundos) de la transición de la animación al pasar el cursor.

• Retraso de la transición – Retraso (en milisegundos) antes de que comience la transición al pasar el cursor.

• Curva de velocidad de la transición – Define la curva de velocidad de la animación al pasar el cursor.

---

Posición

Define la posición del módulo:

• Relativa (valor por defecto) – El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento son relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta – El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona relativo a su ancestro más cercano posicionado o al bloque contenedor inicial.

• Fija – El módulo se elimina del flujo normal y se posiciona en relación con la ventana del navegador. Puede usarse para crear un módulo fijo o “sticky”.

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

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

• Índice Z – Define el orden del módulo en el diseño. Los módulos con un índice Z más alto se superponen a los de índice menor.

---

Efectos de desplazamiento

Define el comportamiento del módulo cuando el usuario hace scroll en la página. Puedes hacer que el módulo sea fijo en la parte superior, inferior o ambos, y decidir si el módulo debe transformarse mientras se desplaza.

También puedes activar el movimiento vertical del módulo, permitiendo ajustar la velocidad del desplazamiento sin afectar a los elementos circundantes.

La función “Disparador de efecto de movimiento” te permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está visible.

---

Guardar tu diseño

Una vez que termines de diseñar 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, se perderá tu trabajo.

---

Guardar el diseño de la página

Para guardar el diseño de la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas inferior de Divi, haciendo clic en el icono púrpura circular con tres puntos para expandir la barra, y luego en el botón verde de guardar en la esquina inferior derecha.

---

Salir del constructor visual

Una vez guardados los cambios, haz clic en “Salir del constructor visual” en la barra de administración superior para salir del constructor.

---

Seguir aprendiendo

• 8 combinaciones de visualización de elementos en el módulo de testimonios de Divi

• Cómo crear un diseño de cuadrícula de testimonios con el módulo de testimonios de Divi

• 5 maneras fantásticas de estilizar el módulo de testimonios de Divi