El módulo de suscripción por correo electrónico de Divi simplifica el proceso de aumentar tus suscriptores de correo electrónico al ofrecer formularios de registro atractivos e integración sencilla con 21 proveedores de software de correo electrónico conocidos. Puedes incorporar este módulo en cualquier parte del diseño de tu sitio web, como encabezados y pies de página.
Ejemplo del módulo de suscripción por correo electrónico de Divi
Ver una demostración en vivo de este módulo
Agrega una nueva página o edita una página existente.
Por defecto, se carga el editor estándar de Gutenberg cuando se agrega una nueva entrada o página en WordPress.
Haz clic en el botón morado debajo del título de la página: Usar el Divi Builder.
Agrega una página y carga el Constructor Visual.
Verás tres opciones:
Construir desde cero
Elegir un diseño prediseñado
Construir con IA
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 de Divi.
Busca el módulo Email Optin y haz clic para cargarlo.
La biblioteca de módulos también es buscable desde la barra superior.
Al agregar el módulo, se abrirán automáticamente sus ajustes. Están organizados en tres pestañas: Contenido, Diseño y Avanzado.
Aquí encontrarás las opciones de contenido del módulo.
Título: Escribe el título del módulo aquí. Si se deja vacío, no se mostrará.
Botón: Texto del botón (por defecto dice “Suscribirse”).
Cuerpo: Escribe el texto principal. Puedes agregar una imagen desde la biblioteca o subir una nueva.
Pie de página: Texto que se muestra debajo del botón. También puedes añadir una imagen aquí.
Conecta tu proveedor de correo electrónico aquí:
Proveedor de servicio: Elige entre 21 servicios disponibles (requiere cuenta activa).
Lista: Selecciona la lista de suscriptores a usar.
Agregar: Una vez que selecciones el proveedor y lista, haz clic en Agregar. Luego, deberás ingresar:
Nombre de la cuenta
API Key
API Secret
ActiveCampaign
Aweber
CampaignMonitor
ConstantContact
ConvertKit
Emma
Feedblitz
FeedBurner
FluentCRM
GetResponse
HubSpot
iContact
Infusionsoft (Keap)
MadMimi
MailChimp
MailerLite
MailPoet
Mailster
Ontraport
SalesForce
SendinBlue
Nombre:
Activa esta opción si deseas incluir un campo para el nombre en el formulario.
Acción: Elige entre mostrar un mensaje de éxito o redirigir a una URL personalizada tras la suscripción.
Mensaje: Escribe aquí el mensaje personalizado. Por defecto dice “¡Éxito!”.
Activa esta opción para evitar envíos falsos. Puedes usar un captcha matemático o integrar Google reCAPTCHA.
Usar un servicio de protección contra spam: Actívalo para usar reCAPTCHA.
Proveedor de servicio: Selecciona “ReCaptcha”.
Cuenta reCAPTCHA v3: Agrega una cuenta con el nombre, la clave del sitio y la clave secreta.
Puntaje mínimo: Define el nivel mínimo para determinar si es un humano o un bot (por defecto: 0.5).
Aplica un enlace clicable al módulo completo:
URL del enlace: Pega aquí la URL.
Destino del enlace:
En la misma ventana
En una nueva pestaña
Opciones disponibles:
Color de fondo
Degradado de fondo
Imagen de fondo
Video de fondo
Patrón de fondo
Máscara de fondo
Haz clic en el ícono del balde de pintura.
Selecciona un color o usa el selector de color.
Haz clic en el ícono de degradado.
Agrega colores a los puntos de parada del degradado.
Puedes:
Cambiar el tipo de degradado
Cambiar la dirección
Repetir el degradado
Cambiar la unidad del degradado
Colocar el degradado sobre la imagen de fondo (si existe)
Haz clic en la tercera pestaña (ícono de imagen).
Haz clic en el ícono gris “+” para abrir la biblioteca multimedia y selecciona o sube una imagen nueva.
Opciones de imagen de fondo:
Usar efecto parallax: Activa esta opción si deseas que la imagen de fondo se desplace más rápido que el contenido (efecto 3D).
Tamaño de la imagen: Elige el tamaño desde el menú desplegable.
Posición de la imagen: Define su posición (centro, izquierda, derecha, etc.).
Repetición de imagen: Elige si la imagen se repetirá o no.
Fusión de imagen: Controla cómo la imagen de fondo se mezcla con otros elementos.
Haz clic en la cuarta pestaña (ícono de video).
Haz clic en el ícono gris “+” para subir un video o elegir uno de la biblioteca.
Recomendaciones y opciones:
Formatos MP4 y WebM: Sube ambos para máxima compatibilidad entre navegadores.
Ancho y alto del video: Ingresa valores numéricos para definir dimensiones.
Pausar cuando otro video se reproduzca: Activa si deseas pausar el fondo al reproducir otros videos.
Haz clic en la quinta pestaña (ícono de patrón).
Haz clic en “Agregar patrón de fondo” y selecciona el tipo.
Opciones de patrón:
Color del patrón: Usa la paleta o el gotero para elegir color.
Transformación: Cambia orientación, invierte o rota el patrón.
Tamaño del patrón: Escoge tamaño real, cubrir, ajustar o personalizado.
Origen de repetición: Define desde dónde comienza a repetirse.
Desplazamiento horizontal/vertical: Ajusta la posición del patrón.
Modo de fusión: Cómo interactúa con otras capas (16 modos disponibles).
Haz clic en la sexta pestaña (ícono de máscara).
Haz clic en “Agregar máscara de fondo” y selecciona el tipo.
Opciones de máscara:
Color: Usa la paleta o gotero.
Transformación: Rota, invierte u orienta horizontal o verticalmente.
Relación de aspecto: Define proporciones (ancho/alto).
Tamaño: Real, cubrir, ajustar o personalizado.
Modo de fusión: Cómo se mezcla con capas inferiores.
Esta opción te permite nombrar el módulo con una etiqueta visible solo para ti, para mantener el orden en el back-end. Por defecto, se asigna el nombre del módulo, pero puedes cambiarlo.
Aquí puedes controlar todo el estilo visual del módulo.
Diseño del formulario: Elige la disposición desde el menú desplegable.
Ancho completo (nombre, apellido, email): Activa si deseas que cada campo use el ancho completo. Si no, se mostrarán en línea con mitad de ancho.
Color de fondo y texto: Define colores normales y en foco (cuando se escribe).
Márgenes y relleno (padding): Ajusta el espacio interno y externo.
Fuente y estilo del texto: Define fuente, peso, estilo (cursiva, mayúsculas, subrayado, etc.).
Alineación: Izquierda, centro, derecha o justificado.
Tamaño, espaciado y altura de línea: Ajusta con el control deslizante o numéricamente.
Sombra de texto: Aplica sombra al texto del campo.
Esquinas redondeadas: Establece valores para redondear bordes.
Bordes: Ancho, color, estilo (sólido, punteado, doble, etc.).
Sombra del contenedor: Personaliza la sombra exterior o interior de los campos.
Ajustes para todo el texto del módulo, incluyendo:
Alineación, color, sombra, etc.
Estas son las configuraciones para el estilo y la configuración específicos del Texto del Título.
Nivel de encabezado de texto – Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.
Fuente del título – Elige la fuente que deseas usar para el texto del título. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.
Grosor de la fuente del título – Selecciona el grosor de la fuente del texto del título.
Estilo de fuente del título – Elige el estilo de la fuente del texto del título:
Cursiva
Mayúscula inicial
Versalitas
Subrayado
Tachado
Alineación del texto del título – Elige la alineación del texto solo para el texto del título:
Izquierda
Centro
Derecha
Justificado
Color del texto del título – Elige un color específico para el texto del título. Selecciona del paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un color nuevo.
Tamaño del texto del título – Elige el tamaño de la fuente del texto del título arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre letras del título – Elige el espaciado entre letras del texto del título arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Cuanto mayor sea el número, mayor será el espacio.
Altura de línea del título – Elige la altura de línea del texto del título arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es la cantidad de espacio entre cada línea de texto. Cuanto mayor sea el número, mayor será el espacio.
Estas son las configuraciones para el estilo y la configuración específicos del Texto del Cuerpo.
Fuente del cuerpo – Elige la fuente que deseas para el texto del cuerpo. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.
Grosor de la fuente del cuerpo – Selecciona el grosor de la fuente del texto del cuerpo.
Estilo de fuente del cuerpo – Elige el estilo de la fuente del texto del cuerpo:
Cursiva
Mayúscula inicial
Versalitas
Subrayado
Tachado
Alineación del texto del cuerpo – Elige la alineación del texto solo para el texto del cuerpo:
Izquierda
Centro
Derecha
Justificado
Color del texto del cuerpo – Elige un color específico para el texto del cuerpo. Selecciona de la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un color nuevo.
Tamaño del texto del cuerpo – Elige el tamaño de la fuente del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre letras del cuerpo – Elige el espaciado entre letras del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Cuanto mayor sea el número, mayor será el espacio.
Altura de línea del cuerpo – Elige la altura de línea del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es la cantidad de espacio entre cada línea de texto. Cuanto mayor sea el número, mayor será el espacio.
Estas son las configuraciones específicas de estilo y configuración para el Texto del Mensaje de Resultados.
Fuente del mensaje de resultados – Elige la fuente que deseas usar para el Texto del Mensaje de Resultados. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.
Grosor de la fuente del mensaje de resultados – Selecciona el grosor de la fuente del Texto del Mensaje de Resultados.
Estilo de fuente del mensaje de resultados – Elige el estilo de la fuente del Texto del Mensaje de Resultados:
Cursiva
Mayúscula inicial
Versalitas
Subrayado
Tachado
Alineación del texto del mensaje de resultados – Elige la alineación del texto solo para el Texto del Mensaje de Resultados:
Izquierda
Centro
Derecha
Justificado
Color del texto del mensaje de resultados – Elige un color específico para el Texto del Mensaje de Resultados. Selecciona de la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un color nuevo.
Tamaño del texto del mensaje de resultados – Elige el tamaño de la fuente del Texto del Mensaje de Resultados arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre letras del mensaje de resultados – Elige el espaciado entre letras del Texto del Mensaje de Resultados arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Cuanto mayor sea el número, mayor será el espacio.
Altura de línea del mensaje de resultados – Elige la altura de línea del Texto del Mensaje de Resultados arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es la cantidad de espacio entre cada línea de texto. Cuanto mayor sea el número, mayor será el espacio.
Sombra del texto del mensaje de resultados – Agrega una sombra al Texto del Mensaje de Resultados. Una vez que se seleccione un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.
Por defecto, hereda los estilos globales. Para personalizar:
Activa “Usar estilos personalizados para el botón”.
Opciones disponibles:
Tamaño, color de texto, fondo, ancho y color de borde.
Radio del borde: Para esquinas redondeadas.
Espaciado entre letras.
Fuente y estilo del botón (cursiva, mayúsculas, etc.).
Ícono en el botón: Mostrar/ocultar, color, posición y si solo aparece al pasar el mouse.
Sombra del texto del botón: Ajustes de dirección, desenfoque y color.
Alineado a la izquierda
Centrado
Alineado a la derecha
Altura Mínima - Define el valor mínimo de la altura del módulo.
Altura - Define la altura del módulo.
Altura Máxima - Define el valor máximo de altura que puede tener el módulo.
Sólido
Punteado
Rayado
Doble
Surco
Cresta
Insertado
Saliente
Ninguno
Posición horizontal
Posición vertical
Intensidad del desenfoque
Intensidad del esparcimiento
Color de la sombra
Posición de la sombra (dentro o fuera del módulo)
Matiz (Hue)
Saturación
Brillo
Contraste
Invertir
Sepia
Opacidad
Desenfoque (Blur)
Modo de mezcla - Define cómo el módulo se mezcla con las capas inferiores (por defecto: normal)
Escalar
Trasladar
Rotar
Inclinar
Puntos de origen
Accede a cada opción mediante pestañas y ajusta con valores numéricos o arrastrando los controles. Puedes bloquear valores iguales con el ícono de cadena.
Duración - Tiempo que tarda la animación
Retraso - Cuándo empieza la animación
Opacidad inicial
Curva de velocidad - Controla la suavidad del movimiento
Repetición - Por defecto, solo se ejecuta una vez. Activa "bucle" para repetir.
Aplicar CSS personalizado
Asignar clases e ID CSS para usar en tu tema hijo o código personalizado
CSS libre - Usa selector
para aplicar reglas
Elementos del módulo - Agrega CSS a secciones específicas dentro del módulo
Usuario que visita la página
Cliente que ya ha comprado
Navegador u OS que utiliza
Puedes añadir una o varias condiciones.
Deshabilitar en: Oculta el módulo en Teléfonos, Tablets o Escritorio
Desbordamiento horizontal y vertical:
Visible
Desplazamiento (Scroll)
Oculto
Automático (según el navegador)
Duración de transición
Retraso de transición
Curva de velocidad de transición
Relativa (por defecto)
Absoluta
Fija (ideal para crear módulos pegajosos o "sticky")
Opciones adicionales:
Desplazamiento vertical y horizontal
Z-index (determina qué módulos se superponen)
Hacerlo fijo en la parte superior, inferior o ambas
Habilitar movimiento vertical (ajusta velocidad sin afectar otros elementos)
Activador de movimiento: Elige cuándo se activa el efecto (cuando la parte superior, media o inferior del elemento está visible)
Mac: CMD + S
PC: CTRL + S
También puedes usar el botón verde de Guardar en la barra inferior de Divi.
Cómo configurar tu cuenta de correo en el módulo Email Optin
Cómo usar servicios de protección contra spam
Cómo redirigir tras completar un formulario
Cómo crear un formulario fijo (sticky)
Cómo incluirlo en el pie de página
Cómo agregar un efecto de deslizamiento con scroll
Cómo insertarlo en publicaciones de blog con Gutenberg
Cómo activarlo tras visitas específicas a páginas