Cómo redirigir después de completar un formulario de suscripción de correo electrónico en Divi

Redirigir a una URL personalizada

Comencemos por ver cómo realizar la redirección dentro del módulo de suscripción de correo electrónico de Divi. Para mis ejemplos, estoy usando el diseño gratuito de Print Shop que está disponible en Divi.

Primero, abra la configuración del módulo de suscripción de correo electrónico haciendo clic en el ícono de ajustes que aparece cuando pasa el mouse sobre el módulo.

La pestaña Contenido tiene la configuración que necesitaremos ajustar. Esta pestaña incluye configuraciones para Texto, Cuenta de correo electrónico, Campos, Acción exitosa, Protección contra correo no deseado, Enlace, Fondo y Etiqueta de administrador.

Desplácese hacia abajo hasta la sección denominada Acción de éxito . Verá un cuadro desplegable debajo de Acción.

Haga clic en el cuadro para ver sus opciones. Seleccione Redirigir a una URL personalizada .

Esto abre un nuevo conjunto de opciones que incluye un campo para la URL y una lista de consultas que agregarán argumentos de consulta a la URL.

La URL que agregue será la ubicación a la que se redirigirá al usuario cuando envíe el formulario de correo electrónico. La consulta de redirección de URL le permite seleccionar los datos que desea pasar a esa página con la URL. Estos datos se pueden usar con otros sistemas en esa página que usan el argumento de consulta de URL.

Elegir dónde redirigir

Elegir a dónde redirigir al usuario te brinda muchas oportunidades y opciones. Puede redirigir a cualquier URL que desee. No tiene que ser una página en su sitio web. Puede ser un video en YouTube, una página de grupo en Facebook, etc. Si usa una página en su sitio web, puede ser una página de ventas, una página con una descarga gratuita, una página para agradecerles por suscribirse y proporcionar información. , y más.

Creación de la página de redirección

Creemos una página de redireccionamiento que agradezca al usuario por suscribirse y le brinde información sobre qué esperar a continuación. Esta página incluirá un título, una descripción y un botón que lleva de regreso a la página de inicio. Usaremos el estilo del paquete de diseño de la tienda de impresión.

Para comenzar, cree su página y habilite Visual Builder .

Estilo de la sección

Pasa el cursor sobre la sección y haz clic en el ícono de ajustes para abrir su configuración.

Desplácese hacia abajo hasta Fondo y seleccione la pestaña Imagen . Haga clic en Agregar imagen de fondo y elija su imagen de la biblioteca de medios. Estoy agregando la imagen de fondo del patrón de puntos de la tienda de impresión 1 del diseño de la página de inicio de la tienda de impresión.

• Imagen: Imprenta Patrón de puntos 1

Establezca el Tamaño de la imagen en el tamaño real, la Posición en el centro, la Repetición para repetir y la Mezcla de imagen en Normal.

• Tamaño: tamaño real
• Posición: Centro
• Repetir: Repetir
• Fusión de imagen: Normal

A continuación, seleccione la pestaña Diseño . Seleccione el divisor Inferior y elija la primera opción en Estilo de divisor. Cambie el color a #4cdcfc, la Altura a 80% y seleccione el ícono Horizontal para Divider Flip.

• Divisores: Inferior
• Estilo: en ángulo
• Color: #4cdcfc
• Altura: 80%
• Flip horizontal

Desplácese hacia abajo hasta Espaciado y agregue 25vh para el Relleno superior e inferior. Cierra la configuración de la sección.

• Acolchado: 25vh arriba, abajo

Agregar una fila de una sola columna

A continuación, seleccione el ícono verde más y agregue una fila de una sola columna . No necesitaremos hacer ajustes a la fila.

Agregar y diseñar el título

A continuación, agregue un módulo de texto a la fila.

Abra la configuración del módulo de texto y cambie el texto a Título 2. Agregue el título al área de contenido.

• Texto: Título 2
• Contenido: ¡Gracias por suscribirte!

A continuación, seleccione la pestaña Diseño y seleccione H2 para el Nivel de título. Cambie la Fuente a Oswald, el estilo a TT y el color a #000645.

• Nivel de título: H2
• Fuente: Osvaldo
• Estilo: TT
• Color: #000645

Para el Tamaño , seleccione el icono del teléfono y cambie el Tamaño del escritorio a 46 px, Tableta a 32 px y Teléfono a 20 px. Cambie el Interlineado a 1 px, la Altura de línea a 1,3 em y cierre la configuración del módulo.

• Tamaño: 46px (Escritorio), 32px (Tableta), 20px (Teléfono)
• Espaciado: 1px
• Altura de la línea: 1,3 em

Agregar y diseñar la descripción

A continuación, haga clic en el ícono gris más y agregue otro módulo de texto . Este incluirá una descripción para informar al usuario qué esperar a continuación.

Agregue su descripción en el área de contenido. Esto puede incluir información como revisar su correo electrónico, incluir el correo electrónico en la lista blanca, con qué frecuencia esperar un correo electrónico, los tipos de correos electrónicos que envía, etc. Para mi ejemplo, dejaré el texto ficticio.

A continuación, seleccione la pestaña Diseño . Seleccione Roboto Mono para la fuente. Cambie el tamaño del escritorio a 16 px, la tableta a 15 px y el teléfono a 14 px. Establezca la Altura de la línea en 1,8 em.

• Fuente: Roboto Mono
• Tamaño: 16px (Escritorio), 15px (Tableta), 14px (Teléfono)
• Altura de la línea: 1,8 em

Finalmente, desplácese hacia abajo hasta Espaciado y agregue 20px al Relleno superior e inferior. Cierra el módulo.

• Relleno: 20px arriba, abajo

Agregar y diseñar el botón de la página de inicio

Ahora, agreguemos un botón para devolver al usuario a la página de inicio. Haga clic en el icono gris debajo del segundo módulo de texto y agregue un módulo de botón.

Cambie el texto del botón a Volver a la página de inicio y agregue la URL de la página de inicio al enlace del botón. Deje el objetivo en el valor predeterminado para que se abra en la misma ventana.

• Botón: Volver a la página de inicio
• URL del enlace del botón: enlace
• Objetivo: en la misma ventana

Seleccione la pestaña Diseño y cambie la Alineación del botón al Centro.

• Alineación de botones: Centro

A continuación, habilite Usar estilos personalizados para el botón . Establezca el Tamaño del texto en 14 px y seleccione blanco para el Color. Cambie el color de fondo a #000645.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto: 14px
• Color del texto: #ffffff
• Color de fondo: #000645

Cambie el Ancho del borde a 0px, el Radio del borde a 0px y el Espaciado entre letras a 1px. Elija Oswald para la fuente y establezca el estilo en TT.

• Ancho del borde: 0px
• Radio del borde: 0px
• Espaciado entre letras: 1px
• Fuente: Osvaldo
• Estilo: TT

Finalmente, desplácese hacia abajo hasta Espaciado y agregue 18 px al Relleno superior e inferior y 30 px al Relleno izquierdo y derecho. Cierre la configuración del módulo de botones, publique la página y salga de Visual Builder.

• Relleno: 18 px (arriba, abajo), 30 px (izquierda, derecha)

Pegue la URL de redirección

Finalmente, copie y pegue la URL de esta página en el campo URL de redirección en el módulo de suscripción de correo electrónico.

Ahora, cuando alguien se registra para recibir el correo electrónico y hace clic en el botón de enviar, se lo lleva automáticamente a la nueva página para ver el mensaje de bienvenida.

pensamientos finales

Ese es nuestro vistazo a cómo redirigir después de completar un formulario de suscripción de correo electrónico en Divi. Configurar la redirección dentro del módulo es simple. Incluso los argumentos de URL son solo cuestión de seleccionarlos. La URL en sí puede ser lo que quieras, incluida una página de bienvenida, una página de ventas y más. Una de las opciones más simples es crear una página como la que creamos en este tutorial para dar la bienvenida a sus suscriptores y hacerles saber qué esperar a continuación.

Queremos escuchar de ti. ¿Utiliza la opción de redirección de URL para su formulario de suscripción de correo electrónico Divi? Cuéntanos tu experiencia en los comentarios.