Texto – Opciones de estilo para el texto del módulo

Esta sección define los estilos generales del texto para todo el módulo, aunque puedes configurar estilos específicos para textos concretos en otras opciones, como Título y Subtítulo.

Alineación del texto 

• Elige cómo se alinea el texto: a la izquierda, centrado, a la derecha o justificado.

Color del texto 

• Selecciona la paleta de colores por defecto para el texto en este módulo: claro u oscuro.

• Los colores predeterminados para estas paletas se configuran en las Opciones del Tema Divi.

Sombra del texto 

• Aplica una sombra al texto dentro del módulo.

• Al seleccionar un tipo de sombra, esta se aplicará a todo el contenido, tanto al número como al texto del título.
  

Texto del Título – Configuraciones específicas para el estilo del texto del título

Nivel de encabezado

• Elige el nivel de encabezado asignado al título: h1, h2, h3, h4, h5 o h6.

Fuente del título 

• Selecciona la fuente para el texto del título.

• La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada desde el menú desplegable.

Grosor de la fuente 

• Selecciona el grosor o negrita del texto del título desde el menú desplegable.

Estilo de la fuente 

• Elige el estilo del texto del título:

  • Cursiva 

  • Mayúscula inicial 

  • Versales o pequeñas mayúsculas 

  • Subrayado 

  • Tachado

Alineación del texto del título 

• Elige la alineación del texto solo para el título:

  • Izquierda Centro 

  • Derecha 

  • Justificado

Color del texto del título 

• Selecciona un color específico para el texto del título desde la paleta de colores del sitio o usa el cuentagotas para elegir un color nuevo.

Tamaño del texto del título 

• Ajusta el tamaño de la fuente del título moviendo el deslizador o escribiendo un valor numérico.

Espaciado entre letras del título 

• Ajusta el espacio entre letras del título.

• Mayor número = más espacio.

Altura de línea del título

• Ajusta el espacio entre líneas de texto en el título.

• Mayor número = más espacio entre líneas.

Sombra del texto del título 

• Añade sombra al texto del título.

• Puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

Texto del Pie de Foto – Configuraciones específicas para el estilo del texto de la leyenda, que muestra el nombre del artista y el nombre del álbum

Fuente del pie de foto 

• Elige la fuente para el texto de la leyenda.

• La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada desde el menú desplegable.

Grosor de la fuente 

• Selecciona el grosor o negrita del texto de la leyenda desde el menú desplegable.

Estilo de la fuente 

• Escoge el estilo para el texto de la leyenda:

  • Cursiva 

  • Mayúscula inicial 

  • Versales o pequeñas mayúsculas 

  • Subrayado 

  • Tachado (Strike-through)

Alineación del texto del pie de foto

• Elige la alineación del texto solo para la leyenda:

  • Izquierda (Left)

  • Centro (Center)

  • Derecha (Right)

  • Justificado (Justify)

Color del texto del pie de foto 

• Selecciona un color específico para el texto de la leyenda desde la paleta de colores del sitio o usa el cuentagotas para elegir un color nuevo.

Tamaño del texto del pie de foto

• Ajusta el tamaño de la fuente de la leyenda moviendo el deslizador o escribiendo un valor numérico.

Espaciado entre letras del pie de foto 

• Ajusta el espacio entre letras del texto de la leyenda.

• Mayor número = más espacio.

Altura de línea del pie de foto 

• Ajusta el espacio entre líneas de texto en la leyenda.

• Mayor número = más espacio entre líneas.

Sombra del texto del pie de foto

• Añade sombra al texto de la leyenda.

• Puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
  

Tamaño  – Opciones para definir el tamaño del módulo de audio

Esta sección permite configurar el ancho y alto del módulo de audio, así como establecer valores máximos y mínimos para estas dimensiones.

Alineación del módulo 

• Usa las flechas para elegir la alineación del módulo: izquierda, centrado o derecha.

• Por defecto, el módulo de audio está alineado a la izquierda.

Ancho 

• Define el ancho del módulo.

• Para más detalles, puedes consultar la documentación oficial de Divi.

Ancho máximo 

• Establece el ancho máximo que puede tener el módulo.

• Para más información, revisa la documentación oficial.

Alineación del módulo 

• Si se establece un ancho o un ancho máximo, puedes elegir la alineación del módulo entre:

  • Izquierda (Left Aligned)

  • Centrado (Center Aligned)

  • Derecha (Right Aligned)

Altura mínima

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

• Más información en la documentación oficial.

Altura 

• Define la altura del módulo.

• Consulta la documentación oficial para más detalles.

Altura máxima

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

• Para más detalles, consulta la documentación oficial.
  

Espaciado

Puedes agregar márgenes o espacios a este módulo escribiendo valores numéricos.

El margen añade espacio fuera del módulo, y el relleno añade 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 quieras que siempre sean idénticos (por ejemplo, arriba y abajo).

1. Los valores predeterminados de margen para el módulo de audio son 0.
2. Los valores predeterminados de relleno para el módulo de audio son 0.
   

Borde

1. Agrega un borde al módulo. Puedes agregar un borde completo o solo en un lado del módulo. Ajusta el ancho mediante el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.
   
2. 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 indica el ícono de cadena azul resaltado); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, todos los valores serán iguales y se actualizarán automáticamente al cambiar uno.
3. Estilos de borde – Aquí puedes añadir un borde a todos los lados del módulo o solo a lados individuales (arriba, derecha, abajo o izquierda).
4. Ancho del borde – Aquí defines el grosor del borde. Para un borde más grueso, aumenta el número. El ancho debe ser al menos 1 px para que se muestre.
5. Color del borde – Aquí puedes elegir el color del borde. Puedes seleccionar un color del catálogo de colores predeterminado de tu sitio o usar el ícono de cuentagotas para elegir un color nuevo.
6. Estilo del borde – Aquí puedes seleccionar el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, relieve, biselado, interno, externo o ninguno.
   

Sombra de Caja

Aquí puedes agregar una sombra proyectada a todo el módulo.

1. Una vez que selecciones un estilo de sombra, puedes personalizar las siguientes opciones:
2. Posición Horizontal de la Sombra – Define la posición horizontal de la sombra.
3. Posición Vertical de la Sombra – Define la posición vertical de la sombra.
4. Fuerza de Desenfoque de la Sombra – Define la intensidad del desenfoque de la sombra. Mientras mayor sea el valor, más grande y difusa será la sombra, volviéndose más amplia y clara.
5. Fuerza de Expansión de la Sombra – Define qué tan extendida está la sombra. Aumentar esta fuerza incrementa la densidad de la sombra, haciendo que se vea más intensa.
6. Color de la Sombra – Define el color de la sombra.
7. Posición de la Sombra – Define si la sombra está dentro o fuera del módulo.
   

Filtros

Ajusta los filtros del módulo:

1. Tono – Define el ángulo del tono de un color.
2. Saturación – Define qué tan intensa debe ser la saturación del color.
3. Brillo – Define qué tan brillantes deben ser los colores.
4. Contraste – Define qué tan marcadas deben ser las áreas claras y oscuras.
5. Invertir – Invierte el tono, la saturación y el brillo según el valor especificado.
6. Sepia – Define una apariencia más cálida, con tonos amarillos/marrones.
7. Opacidad – Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).
8. 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 debajo de él. Por defecto, está seleccionado normal.

Transformar

1. Escalar
   
2. Trasladar
3. Rotar
4. Sesgar
5. Puntos de origen

Navega entre las opciones con la tecla Tab. 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 elijas un estilo, puedes ajustar las siguientes opciones:

1. Duración de la animación - Define el tiempo que tarda una animación en completar un ciclo.
2. Retraso de la animación - Define el tiempo que se espera desde que se aplica la animación a un elemento hasta que comienza a ejecutarse. La animación puede comenzar más tarde, inmediatamente desde el inicio, o inmediatamente y a mitad de la animación.
3. Opacidad inicial de la animación - Define el valor de opacidad al inicio.
4. Curva de velocidad de la animación - Define el método de suavizado de la animación. Suavizar la entrada y salida de la animación crea un efecto más fluido que una velocidad lineal.
5. Repetición de la animación - Por defecto, las animaciones se reproducen una sola vez. Si quieres que la animación se repita continuamente, elige la opción de bucle (Loop) aquí.
   

Pestaña Avanzada

En la pestaña Avanzada encontrarás opciones que los diseñadores web con más experiencia pueden considerar útiles, 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

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

CSS libre

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

Condiciones

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

Puedes agregar una o varias condiciones.

Visibilidad

Desactivar en
Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio, marcando la casilla correspondiente.

Desbordamiento horizontal
Define qué se muestra cuando el contenido se desborda por los bordes izquierdo y derecho de un elemento de bloque. Las opciones pueden ser:

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

• Scroll: Si el contenido se desborda, se usará una barra de desplazamiento vertical para recorrerlo.

• Oculto: Si el contenido se desborda, la parte que sobrepasa se ocultará.

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

Desbordamiento vertical
Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior de un elemento de bloque. Las opciones son iguales a las de desbordamiento horizontal:

• Visible

• Scroll

• Oculto

• Automático
  

Transiciones

Esto controla la duración, el retardo y la curva de velocidad de la animación al pasar el cursor.

1. Duración de la transición
   Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.
2. Retardo de la transición
   Define el retardo de la transición de la animación al pasar el cursor (en milisegundos).
3. Curva de velocidad de la transición
   Define la curva de velocidad de la transición de la animación al pasar el cursor.

Posición

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 son relativos a sí mismo según los valores de Desplazamiento Vertical y Desplazamiento Horizontal. El desplazamiento no afecta la posición de otros elementos; por lo tanto, el espacio asignado al módulo en el diseño de la página es el mismo que si la posición fuera estática.

• Absoluta - El módulo se elimina del flujo normal del documento y no se crea espacio para el elemento en el diseño de la página. El módulo se posiciona en relación con su ancestro posicionado más cercano (si existe) o el bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija - El elemento se elimina del flujo normal del documento y no se crea espacio para el elemento en el diseño de la página. El módulo se posiciona según las opciones de ubicación en relación con la ventana del navegador. Esto puede usarse para crear un módulo fijo o “sticky”.

1. Desplazamiento vertical - Define la posición vertical del módulo.
2. Desplazamiento horizontal - Define la posición horizontal del módulo.
3. Índice Z - Define el orden del módulo en el diseño de la página. Los módulos con un índice Z más alto se superponen a los módulos con un índice Z más bajo.
   

Efectos de desplazamiento

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

También puedes activar el movimiento vertical en este módulo, lo que te permite ajustar la velocidad con la que este elemento se desplaza (más rápido o más lento) sin afectar a los elementos circundantes.

El efecto disparador de movimiento te permite elegir cuándo se activa el efecto de desplazamiento que aplicaste: cuando la parte superior del elemento está visible, el centro o la parte inferior.

Guardar tu diseño

Una vez que hayas terminado de diseñar y configurar el módulo, haz clic en la flecha verde en la parte inferior derecha del módulo 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 de Divi en la parte inferior, haciendo clic en el ícono circular morado con tres puntos para expandir la barra, y luego clic en el botón verde Guardar en la esquina inferior derecha.

Salir del Visual Builder

Una vez que todos tus cambios estén guardados, haz clic en “Salir del Visual Builder” en la barra de administración en la parte superior para salir del Visual Builder.

Recursos del Módulo de Audio Divi

• Cómo crear una barra de contenido de audio fija en Divi

• Cómo añadir una barra fija con el último episodio de audio en tu encabezado Divi

• Cómo diseñar tu módulo de audio Divi como reproductor de podcasts

• Cómo crear una página para podcasts de sermones