El Módulo de Texto de Divi es uno de los módulos más fundamentales y básicos que usarás en el diseño de tu sitio web.

Es altamente personalizable y puede usarse dentro de todos los elementos del sitio web como encabezados, pies de página, plantillas de página, publicaciones, páginas y más. También puede usarse junto con todos los módulos para crear contenido dinámico.

ejemplo del Módulo de Texto de Divi

Ver una demostración en vivo de este módulo

Cómo agregar el Módulo de Texto de Divi a tu página

• Agrega una página nueva o edita una existente.

• Por defecto, el Editor Estándar de Gutenberg se carga cada vez que se añade una nueva publicación o página en WordPress.

• Haz clic en el botón morado debajo del título de la página. Usa el Constructor Divi.

• Agrega una página y carga el Constructor Visual.

• Al hacer clic, la página se recargará con el Constructor Visual de Divi.

• Construir desde cero

• Elegir un diseño predefinido

• Construir con IA

Construir desde cero

Elegir un diseño predefinido

Construir con IA

Agregar el Módulo de Texto de Divi

• Haz clic en el ícono verde + para insertar una fila.

• Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos Divi, que contiene todos los módulos incluidos con el tema Divi.

• Busca el módulo de Texto y haz clic para cargarlo.

• La biblioteca de módulos también es buscable. Escribe el nombre del módulo que deseas en la barra de búsqueda en la parte superior.

Agregar el Módulo de Texto de Divi

Todas las opciones del Módulo de Texto de Divi explicadas
Una vez agregado, la configuración del módulo aparecerá automáticamente. Aquí es donde se configura el contenido y los estilos de diseño de este módulo. Estas configuraciones están organizadas en tres grupos mediante pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Todas las configuraciones del Módulo de Texto de Divi explicadas

Pestaña Contenido

Texto

• Cuerpo: Escribe tu texto aquí. Puedes usar la barra de formato para estilizar el texto y encontrar más opciones de estilo bajo la pestaña Diseño. Haz clic en la pestaña texto si quieres editar el HTML del texto.

Enlace

• URL del enlace del módulo: Pega la URL del enlace que quieres aplicar a este módulo aquí. Esto hace que todo el módulo sea clickeable y, al hacer clic, dirigirá a los visitantes a la URL pegada aquí.

• Objetivo del enlace del módulo: Definir el objetivo del enlace determina si el enlace, al hacer clic, se abre en una nueva pestaña o en la misma ventana.

  • En la misma ventana: si quieres que el enlace se abra en la misma ventana

  • En una pestaña nueva: si quieres que el enlace se abra en una pestaña nueva.

Fondo

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

1. Haz clic en la primera pestaña, el ícono de cubo de pintura.
   
2. Haz clic en Agregar color de fondo y elige del paleta de colores de tu sitio o usa el ícono cuentagotas para encontrar un color nuevo.
   
3. Configuraciones de color de fondo del Módulo de Texto Divi

Cómo agregar un degradado de fondo

1. Haz clic en la segunda pestaña, el ícono de degradado.
   
2. Haz clic en Agregar degradado de fondo.
   Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color del paleta de colores del sitio o usa el cuentagotas para elegir un color nuevo. Los puntos del degradado permiten añadir más colores. Haz clic en cualquier parte del deslizador para añadir un nuevo punto.

Opciones del degradado de fondo

• Tipo de degradado: puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el que desees.

• Dirección del degradado: puedes cambiar la dirección arrastrando el deslizador o escribiendo un valor numérico.

• Repetir degradado: activa esta opción para que el degradado se repita.

• Unidad del degradado: cambia cómo se calculan los puntos del degradado. Selecciona la unidad en el menú desplegable.

• Colocar degradado sobre imagen de fondo: si se aplica una imagen de fondo, puedes colocar el degradado sobre ella activando esta opción.

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña, el ícono de imagen.
   
2. Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.
   

Opciones de imagen de fondo

• Usar efecto de paralaje: para aplicar un efecto de paralaje 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, está desactivada.

• Tamaño de la imagen de fondo: elige el tamaño desde el menú desplegable.

• Posición de la imagen de fondo: selecciona la posición desde el menú desplegable.

• Repetir imagen de fondo: elige si y cómo se repite la imagen desde el menú desplegable.

• Mezcla de imagen de fondo: elige cómo se mezcla la imagen con otras capas en el módulo desde el menú desplegable.

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña, el ícono de video.
   
2. Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.
   

Opciones de video de fondo

• Mp4 vs WebM: recomendamos subir ambas versiones mp4 y webm porque no todos los navegadores soportan WebM. Subir ambos formatos asegura que el video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo: define el ancho escribiendo un valor numérico.

• Alto del video de fondo: define el alto escribiendo un valor numérico.

• Pausar video cuando otro video se reproduce: si quieres que el video de fondo se pause cuando otro video está reproduciéndose, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que continúe, desactiva esta opción.

Cómo agregar un patrón de fondo

1. Haz clic en la quinta pestaña, el ícono de patrón.
   
2. Haz clic en Agregar patrón de fondo.
   Elige el tipo de patrón que quieres desde el menú desplegable.

Opciones del patrón de fondo

• Color del patrón: selecciona el color desde la paleta del sitio o usa el cuentagotas.

• Transformación del patrón: transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• Tamaño del patrón: elige tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones de ancho y alto del patrón que puedes definir con el deslizador o valor numérico.

• Origen de repetición del patrón: selecciona el origen desde donde se repite el patrón.

• Desplazamiento horizontal y vertical del patrón: ajusta los desplazamientos horizontal y vertical.

• Repetición del patrón: elige cómo se repite (horizontal, vertical, etc.)

• Modo de mezcla del patrón: define cómo interactúa el patrón con las capas inferiores. Selecciona uno de los 16 modos de mezcla disponibles.

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 quieres mediante el menú desplegable.

Opciones de máscara de fondo

• Color de la máscara: elige un color de la paleta o usa el cuentagotas.

• Transformación de la máscara: transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de aspecto de la máscara: define la relación entre ancho y alto de la máscara.

• Tamaño de la máscara: selecciona tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, define ancho y alto con el deslizador o valor numérico.

• Modo de mezcla de la máscara: define cómo interactúa la máscara con las capas inferiores. Selecciona uno de los 16 modos de mezcla disponibles.

Etiqueta de administrador

Pestaña Diseño

Texto

• Fuente del texto: elige la fuente para el texto. Por defecto está seleccionada automáticamente, pero puedes elegir otra fuente o subir una personalizada desde el menú desplegable.

• Grosor de la fuente: selecciona el grosor de la fuente.

• Estilo de fuente: elige entre:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto: selecciona un color específico para el texto, desde la paleta del sitio o usando el cuentagotas.

• Tamaño del texto: define el tamaño de la fuente arrastrando el deslizador o con un valor numérico.

• Espaciado entre letras: define el espacio entre letras arrastrando el deslizador o con un valor numérico. Cuanto mayor sea el número, más espacio habrá.

• Altura de línea: define el espacio entre líneas de texto con el deslizador o valor numérico. Más alto, más espacio.

• Sombra de texto: añade una sombra al texto. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

• Alineación del texto: elige cómo se alinea el texto: izquierda, centro, derecha o justificado.

• Color predeterminado del texto: selecciona la paleta de color predeterminada para el texto del módulo, claro u oscuro. Las paletas predeterminadas se configuran en las Opciones del Tema Divi.

Texto del Encabezado

Estos son los ajustes para el estilo y configuración específicos solo para el texto del encabezado.

• Nivel del Encabezado – Elige el nivel que deseas asignar al texto del encabezado: h1, h2, h3, h4, h5 o h6.

• Fuente del Encabezado – Selecciona la fuente que deseas usar para el texto del encabezado. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

• Grosor de Fuente del Encabezado – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto del encabezado.

• Estilo de Fuente del Encabezado – Elige el estilo de la fuente del texto del encabezado:

  • Cursiva

  • Mayúsculas

  • Versales

  • Subrayado

  • Tachado

• Alineación del Texto del Encabezado – Elige la alineación específica para el texto del encabezado únicamente:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto del Encabezado – Elige un color específico para el texto del encabezado. Selecciona del paleta de colores de tu sitio o haz clic en el icono del cuentagotas para encontrar un color nuevo.

• Tamaño del Texto del Encabezado – Elige el tamaño de la fuente del texto del encabezado arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre Letras del Título – Elige el espacio entre letras del texto del encabezado arrastrando el control deslizante o escribiendo un valor numérico. El espaciado es el espacio entre cada letra. Mientras mayor es el número, mayor es el espacio.

• Altura de Línea del Título – Elige la altura de línea del texto del encabezado arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. Mientras mayor es el número, mayor es el espacio.

• Sombra del Texto del Encabezado – Añade una sombra al texto del encabezado. Una vez que selecciones un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

---

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 define un ancho o un ancho máximo, la alineación del módulo se puede ajustar con las siguientes 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 la altura máxima que puede tener el módulo. Para más información, consulta la documentación oficial.

---

Espaciado

Puedes agregar márgenes o relleno (espacio interno) al 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 icono de cadena entre los valores que quieres que 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

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

• Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Mientras más alto sea el número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (indicado por la cadena azul destacada); si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos.

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

• Ancho del Borde – Define el grosor del borde. Para un borde más grueso, aumenta el número. El borde debe ser al menos 1px para mostrarse.

• Color del Borde – Elige el color del borde desde la paleta predeterminada de tu sitio o usa el cuentagotas para seleccionar un color nuevo.

• Estilo del Borde – Selecciona el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, ranurado, en relieve, hundido, sobresaliente o ninguno.

---

Sombra de Caja

Añade una sombra a todo el módulo. Una vez seleccionado un estilo de sombra, puedes configurar lo siguiente:

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

• Intensidad del Desenfoque de la Sombra – Define qué tan borrosa es la sombra. Mientras mayor sea el valor, más grande y más difusa será la sombra, y más clara se verá.

• Intensidad de la Expansión de la Sombra – Define qué tan densa es la sombra. A mayor densidad, más intensa será la sombra.

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

• Tono – Define el ángulo del tono de color.

• Saturación – Define la intensidad del color.

• Brillo – Define cuán brillantes deben ser los colores.

• Contraste – Define la distinción entre áreas claras y oscuras.

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

• Sepia – Da una apariencia más cálida, amarilla o marrón.

• Opacidad – Define cuán 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 define cómo el módulo se fusiona con las capas debajo. Por defecto está seleccionado “normal”.

---

Transformar

Opciones para transformar el módulo:

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega entre las opciones y configúralas ingresando valores numéricos o arrastrando. Puedes bloquear estos valores para que siempre sean iguales haciendo clic en el icono de cadena.

---

Animación

Aquí puedes aplicar animación al módulo. Al elegir un estilo, puedes ajustar:

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

• Retardo de la animación – Tiempo que se espera antes de que comience la animación.

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

• Curva de velocidad de la animación – Define el método de aceleración para que la animación sea más suave que una curva lineal.

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

---

Pestaña Avanzada

En esta pestaña se encuentran opciones para usuarios con más experiencia, como CSS personalizado.

• Puedes aplicar CSS personalizado al módulo. También puedes añadir clases e IDs personalizadas para usar en la hoja de estilos del tema hijo y personalizar el módulo con CSS más avanzado.

---

ID y Clases CSS

Asigna un ID o una clase CSS específica al módulo para facilitar la aplicación de estilos personalizados.

---

CSS Personalizado

• CSS Libre – Escribe CSS libre usando el selector keyword para apuntar a este módulo (ejemplo: selector h1 {color: red;}).

• Elementos del Módulo – Aplica CSS personalizado a secciones individuales del módulo en esta pestaña.

---

Condiciones

Las condiciones de visualización permiten elegir cuándo mostrar el módulo según criterios como: si un usuario ha comprado antes, navegador, sistema operativo, y más.

Puedes añadir una o varias condiciones.

---

Visibilidad

• Deshabilitar en – Define en qué dispositivos se oculta el módulo: teléfono, tableta o escritorio.

• Desbordamiento Horizontal – Define qué pasa cuando el contenido excede los bordes horizontales:

  • Visible

  • Barra de desplazamiento

  • Oculto

  • Automático (el navegador decide)

• Desbordamiento Vertical – Igual que el horizontal, pero para bordes verticales.

---

Transiciones

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

---

Posición

Define la posición del módulo:

• Relativa (por defecto) – Posicionado según el flujo normal del documento, con desplazamientos relativos. No afecta la posición de otros elementos.

• Absoluta – El módulo se elimina del flujo normal y se posiciona relativo al antecesor más cercano con posición. No deja espacio en el diseño.

• Fija – El módulo se posiciona relativo a la ventana del navegador, útil para crear módulos pegajosos.

• Desplazamiento Vertical y Horizontal – Define la posición vertical y horizontal del módulo.

• Índice Z – Define el orden de apilamiento. Módulos con mayor índice se superponen a los de menor índice.

---

Efectos de Desplazamiento

Define el comportamiento del módulo al hacer scroll:

• Puedes hacer el módulo “pegajoso” arriba, abajo o ambos.

• Decide si el módulo se transforma al hacer scroll.

• Habilita movimiento vertical para ajustar la velocidad de desplazamiento sin afectar otros elementos.

• El disparador del efecto permite elegir cuándo se activa el efecto: cuando la parte superior, media o inferior del elemento está visible.

---

Guardar Diseño

Al terminar de configurar el módulo, haz clic en la flecha verde abajo a la derecha para guardar el diseño. Si cierras sin guardar, perderás los cambios.

---

Guardar Diseño de Página

Guarda el diseño de la página con CMD + S en Mac o CTRL + S en PC. También puedes usar la barra herramientas de Divi haciendo clic en el icono morado con tres puntos y luego en el botón verde “Guardar”.

---

Salir del Constructor Visual

Después de guardar los cambios, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir.

---

Recursos del Módulo de Texto Divi

• Uso del Módulo de Texto de Divi para crear elementos en bloque en el diseño de tu página Divi.

• Cómo envolver texto alrededor de imágenes en Divi (3 formas).

• Uso de texto lateral y vertical para crear una página de destino única con Divi.