El módulo de llamada a la acción de Divi puede ayudarte a:

• Hacer crecer tu lista de correos electrónicos

• Aumentar los envíos de formularios de contacto

• Promocionar un producto

• Y mucho más

---

Cómo agregar el módulo de llamada a la acción de Divi a tu página

1. Agrega una nueva página o edita una existente.
   Por defecto, el editor estándar de Gutenberg se carga cuando se añade una nueva entrada o página en WordPress.

2. Haz clic en el botón morado debajo del título de la página: Usar el Divi Builder.

---

Módulo de llamada a la acción de Divi

Una vez que hagas clic, la página se recargará con el Divi Visual Builder.

Cuando se recargue, verás tres opciones:

• Crear desde cero

• Elegir un diseño predefinido

• Crear con IA

Crear desde cero

Esta opción carga el Divi Builder con una página en blanco. Elígela si deseas comenzar tu diseño desde cero.

Elegir un diseño predefinido

Permite seleccionar un diseño de la biblioteca de plantillas prediseñadas de Divi. Puedes elegir entre diseños de Divi, diseños guardados en tu biblioteca o páginas existentes de tu sitio web para clonarlas.

Crear con IA

Usa Divi AI para generar automáticamente el diseño de una página basado en tus textos e información de tu sitio. Puedes obtener un esquema perfecto de página, construirlo y llenarlo de contenido e imágenes rápidamente.

Agregar el módulo de llamada a la acción de Divi

1. Haz clic en el ícono verde + para insertar una fila (Row).

2. Dentro de la fila, haz clic en el ícono gris + para abrir la Biblioteca de Módulos de Divi.

3. Busca el módulo “Call To Action” y haz clic en él para cargarlo.
   (Puedes escribir el nombre del módulo en la barra de búsqueda.)

Todas las opciones del módulo de llamada a la acción explicadas

Cuando agregas el módulo, se abrirán automáticamente los ajustes. Estos están organizados en tres pestañas:

• Contenido

• Diseño

• Avanzado

---

Pestaña Contenido

Texto

Aquí introduces el contenido del módulo:

• Título – Escribe el encabezado que deseas mostrar.

• Botón – Escribe el texto del botón.

• Cuerpo – Escribe el texto del cuerpo de tu CTA.
  

• Nota: el botón no se mostrará si no tiene un enlace asignado. Ve a Vínculo → URL del enlace del botón.

Enlace

Asignación de enlaces al botón o al módulo completo:

• URL del enlace del botón – Pega el enlace al que deseas dirigir al hacer clic.

• Destino del enlace del botón:

  • En la misma ventana

  • En una nueva pestaña

• URL del enlace del módulo – Para que todo el módulo sea clicable.

• Destino del enlace del módulo – Igual que el botón, puedes elegir si se abre en la misma ventana o en una nueva pestaña.

---

Fondo

Puedes configurar:

• 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 el ícono de balde de pintura.

2. Selecciona Agregar color de fondo y elige uno desde la paleta o con el selector.

Cómo agregar un degradado de fondo

1. Haz clic en el ícono de degradado.

2. Selecciona Agregar degradado de fondo.

3. Cambia los colores haciendo clic en los puntos de degradado.

4. Opciones adicionales:

   • Tipo de degradado

   • Dirección del degradado

   • Repetir degradado

   • Unidad del degradado

   • Colocar el degradado sobre la imagen de fondo

---

 Cómo agregar una imagen de fondo

1. Haz clic en el ícono de imagen.

2. Haz clic en el + gris para subir una imagen o elegir una existente.

Opciones adicionales:

• Usar efecto Parallax

• Tamaño de imagen

• Posición de imagen

• Repetir imagen

• Modo de mezcla

Cómo agregar un video de fondo

1. Haz clic en el ícono de video.

2. Haz clic en el + gris para subir un video.

Recomendaciones:

• Usar MP4 y WebM para compatibilidad con todos los navegadores

• Ajustes de ancho y alto del video

• Pausar cuando otro video esté en reproducción

• Pausar al salir de la vista

Cómo agregar un patrón de fondo

1. Haz clic en el quinto ícono (patrón).

2. Haz clic en Agregar patrón de fondo.

3. Elige el tipo de patrón desde el menú desplegable.

Opciones adicionales:

• Color del patrón

• Transformación del patrón (horizontal, vertical, rotar, invertir)

• Tamaño del patrón (real, cubrir, ajustar, estirar o tamaño personalizado)

• Origen de repetición del patrón

• Desplazamiento horizontal y vertical

• Modo de mezcla del patrón

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña (ícono de máscara).

2. Haz clic en Agregar máscara de fondo.

3. Selecciona el tipo de máscara desde el menú desplegable.

---

Opciones de máscara de fondo

• Color de la máscara – Elige un color desde la paleta de tu sitio o usa el cuentagotas para seleccionar uno nuevo.

• Transformación de la máscara – Puedes transformar la máscara horizontal o verticalmente, rotarla o invertirla.

• Proporción de aspecto de la máscara – Define la relación entre el ancho y la altura de la máscara.

• Tamaño de la máscara – Elige entre tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si seleccionas tamaño personalizado, puedes definir:

  • Ancho de la máscara

  • Altura de la máscara

• Modo de mezcla de la máscara – Define cómo interactúa la máscara con las capas inferiores. Hay 16 modos de mezcla disponibles en el menú desplegable.

---

Etiqueta de administración

La Etiqueta de administración permite asignar un nombre al módulo solo visible para ti en el backend, para mantener tu diseño organizado.
Por defecto, se usa el nombre del módulo. Puedes cambiarlo por algo más representativo si lo deseas.

Pestaña de diseño

Aquí encuentras todos los estilos y opciones de diseño para el módulo de llamada a la acción.

---

Texto

• Alineación del texto – Izquierda, centro, derecha o justificado.

• Color del texto – Paleta clara u oscura (configurable en las Opciones del tema Divi).

• Sombra del texto – Puedes aplicar sombra a todo el contenido textual.

---

Texto del título

• Nivel del encabezado – h1, h2, h3, h4, h5 o h6.

• Fuente – Elige o sube una fuente personalizada.

• Peso de la fuente – Define el grosor del texto.

• Estilo de fuente – Cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación – Izquierda, centro, derecha o justificado.

• Color del texto del título

• Tamaño del texto

• Espaciado entre letras

• Altura de línea

• Sombra del texto – Incluye opciones de dirección, desenfoque y color.

---

Texto del cuerpo

• Fuente – Igual que el título.

• Peso de la fuente

• Estilo de fuente – Cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del cuerpo – Izquierda, centro, derecha o justificado.

• Color del texto

• Tamaño del texto

• Espaciado entre letras

• Altura de línea

• Sombra del texto – Igual que en el título.

---

Botón

Por defecto, los botones usan el estilo global del personalizador de WordPress. Puedes aplicar estilos personalizados desde aquí.

Activar estilos personalizados:

• Usar estilos personalizados para el botón – Actívalo para mostrar todas las opciones siguientes:

---

Opciones de estilo del botón:

• Tamaño del texto

• Color del texto

• Color de fondo

• Ancho del borde

• Color del borde

• Radio del borde – Define el nivel de redondez.

• Espaciado entre letras

• Fuente – Puedes subir una personalizada.

• Peso y estilo de la fuente

• Mostrar ícono en el botón – Sí o no

• Ícono del botón – Elige el ícono si está activado

• Color del ícono

• Posición del ícono – Izquierda o derecha del texto

• Mostrar ícono solo al pasar el cursor – Activado por defecto

• Alineación del botón – Izquierda, centro o derecha

---

Sombra del texto del botón

• Longitud horizontal

• Longitud vertical

• Intensidad del desenfoque

• Color de la sombra

---

Margen y relleno del botón

• Margen – Espacio externo. Puedes mantener proporciones con el ícono de cadena.

• Relleno (padding) – Espacio interno. También puedes vincular valores.

---

Sombra de caja del botón

• Longitud horizontal y vertical

• Fuerza del desenfoque

• Color de la sombra

---

Tamaño 

Este grupo de opciones define el tamaño (ancho y alto) del módulo de llamada a la acción. También puedes establecer un ancho máximo, alto máximo y altura mínima.

• Ancho – Define el ancho del módulo.

• Ancho máximo – Limita el ancho máximo que puede alcanzar el módulo.

• Alineación del módulo – Si defines un ancho o ancho máximo, puedes alinear el módulo a la:

  • Izquierda

  • Centro

  • Derecha

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

• Altura – Define la altura exacta del módulo.

• Altura máxima – Limita la altura máxima del módulo.

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

Espaciado 

Aquí puedes añadir márgenes o relleno (padding) escribiendo valores numéricos:

• Margen – Añade espacio fuera del módulo.

• Relleno (Padding) – Añade espacio dentro del módulo.

 Puedes usar el ícono de cadena para mantener proporciones iguales (por ejemplo, arriba y abajo).

Valores predeterminados de relleno del módulo de llamada a la acción:

• Con color de fondo:

  • Superior e inferior: 40px

  • Izquierda y derecha: 60px

• Sin color de fondo:

  • Todo en 0px

---

Borde 

Puedes añadir bordes completos o solo a lados específicos:

• Esquinas redondeadas – Especifica un valor numérico. Cuanto mayor sea, más redondeadas serán las esquinas.
   Puedes desvincular los valores para cada esquina haciendo clic en el ícono de cadena.

• Estilos de borde disponibles:

  • Completo o individual (superior, derecho, inferior, izquierdo)

  • Ancho del borde – Debe ser de al menos 1px para que se vea.

  • Color del borde

  • Estilo del borde – Sólido, discontinuo, punteado, doble, surco, relieve, insertado, sobresalido o ninguno.

---

Sombra de caja 

Aplica una sombra al módulo completo. Una vez elegida, puedes ajustar:

• Posición horizontal de la sombra

• Posición vertical de la sombra

• Intensidad del desenfoque

• Intensidad del esparcimiento

• Color de la sombra

• Posición de la sombra – Dentro o fuera del módulo

---

Filtros 

Modifica visualmente el módulo con estos filtros:

• Matiz (Hue) – Ajusta el ángulo del color.

• Saturación – Controla la intensidad del color.

• Brillo (Brightness) – Ajusta la luminosidad.

• Contraste – Aumenta o reduce la diferencia entre áreas claras y oscuras.

• Invertir – Invierte los valores de color.

• Sepia – Añade un tono cálido marrón/amarillo.

• Opacidad – Ajusta la transparencia del fondo.

• Desenfoque (Blur) – Aplica desenfoque gaussiano.

Modo de mezcla (Blend Mode) – Define cómo se mezcla el módulo con las capas debajo. Por defecto está en "normal".

---

Transformaciones 

Controla las transformaciones visuales del módulo:

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Sesgar (Skew)

• Punto de origen (Origin)

Puedes configurar estas opciones manualmente con valores numéricos o ajustarlas visualmente arrastrando elementos.
Haz clic en el ícono de cadena para bloquear los valores y mantener proporciones.

Animación

Puedes aplicar animaciones al módulo y personalizar su comportamiento:

• Duración de la animación – Tiempo total de ejecución.

• Retraso – Tiempo antes de que comience la animación.

• Opacidad inicial – Define la opacidad al comenzar.

• Curva de velocidad – Define el tipo de movimiento (por ejemplo: lineal, entrada/salida suave).

• Repetición – Por defecto, la animación se ejecuta una sola vez. Activa "loop" para que se repita infinitamente.
  

Pestaña Avanzado 

Dentro de la pestaña Avanzado, encontrarás opciones útiles para diseñadores web con experiencia, como la aplicación de CSS personalizado.

Aquí puedes aplicar estilos avanzados al módulo mediante CSS, así como establecer IDs y clases personalizadas para adaptar los estilos mediante hojas de estilo externas o código personalizado.

---

ID y Clases CSS

Puedes asignar un ID o una clase CSS específica al módulo. Esto es útil para aplicar estilos desde tu archivo de estilos del tema hijo o desde el personalizador.

---

CSS Personalizado

• CSS Libre – Puedes escribir código CSS libremente usando el selector selector para apuntar al módulo.
  Ejemplo: selector h1 {color: red;}

• Elementos del módulo – Puedes añadir CSS personalizado a secciones específicas del módulo (como botón, título, cuerpo, etc.) en el subapartado Elementos del módulo.

---

Atributos

• Relación del botón (Button Relationship) – Define la relación del enlace entre la fuente (página actual) y el destino (página de destino).
  Por ejemplo: noopener, noreferrer, nofollow.

---

Condiciones

Esta pestaña permite mostrar el módulo solo bajo ciertas condiciones. Ejemplos de condiciones:

• Cuando un usuario está conectado o no

• Si ya ha realizado una compra

• Según el navegador, sistema operativo, etc.

📌 Puedes añadir una o múltiples condiciones para mostrar u ocultar el módulo dinámicamente.

---

Visibilidad

Define cuándo y cómo se muestra el módulo:

• Desactivar en – Oculta el módulo en ciertos dispositivos (Teléfono, Tableta o Escritorio).

• Desbordamiento horizontal (Horizontal Overflow):

  • Visible, Scroll, Oculto, Auto

• Desbordamiento vertical (Vertical Overflow):

  • Visible, Scroll, Oculto, Auto

---

Transiciones

Controla el comportamiento de las animaciones al pasar el cursor (hover):

• Duración de transición – Tiempo que tarda la animación (en milisegundos).

• Retardo de transición – Tiempo de espera antes de comenzar la animación.

• Curva de velocidad – Define cómo se acelera o desacelera la animación. Ejemplo: ease, linear, ease-in-out.

---

Posición

Define cómo se posiciona el módulo en la página:

• Relativo (valor predeterminado) – Sigue el flujo normal del documento, y los desplazamientos se aplican sobre sí mismo.

• Absoluto – Sale del flujo del documento y se posiciona respecto al contenedor más cercano.

• Fijo – Similar al absoluto, pero fijo en relación a la ventana del navegador.

Opciones adicionales:

• Desplazamiento vertical

• Desplazamiento horizontal

• Z-index – Controla la superposición del módulo. Números más altos lo colocan encima de otros elementos.

---

Efectos de Desplazamiento 

Controla cómo se comporta el módulo al hacer scroll:

• Sticky – Puedes hacer que el módulo se quede fijo en:

  • Parte superior

  • Parte inferior

  • Ambas

• Movimiento vertical – Ajusta la velocidad de desplazamiento del módulo independientemente del resto del contenido.

• Disparador de movimiento – Define cuándo comienza el efecto (cuando la parte superior, media o inferior del módulo aparece en pantalla).

---

Guardar tu diseño

Una vez que termines de personalizar el módulo:

 Haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar.

---

Guardar el diseño de la página

• En Mac: CMD + S

• En PC: CTRL + S

• O usa la barra inferior de Divi: haz clic en el icono morado de tres puntos (…) y luego en el botón verde Guardar.

---

Salir del Constructor Visual

Haz clic en "Exit Visual Builder" en la barra de administración superior para salir del editor visual y ver tu página como visitante.

---

Continúa aprendiendo

• Cómo añadir un CTA diferente por categoría usando el Theme Builder de Divi.

• Cómo añadir un llamado a la acción deslizante y cerrable en cualquier esquina de tu página.