A subscription popup triggered by a click can effectively increase your website’s email sign-up rate while enhancing user experience. Elementor offers powerful tools for creating and customizing popups, making it easy to set up a “click-to-open” ventana emergente de suscripción. Este tutorial le guiará paso a paso para crear una ventana emergente de suscripción que sólo aparezca cuando los usuarios hagan clic en un enlace o botón específico.
Introducción
Subscription popups can be a great way to engage visitors and encourage them to sign up for your newsletter, promotions, or updates. Unlike auto-triggered popups, which may interrupt the user experience, a click-triggered popup opens only when the user is ready to see it, making it more user-friendly and likely to convert. Let’s explore how you can create a subscription popup in Elementor that opens upon clicking a link or button.
Paso 1: Crear la plantilla de ventana emergente de suscripción
- Elemento de acceso o plantillas emergentes
- Acceda a su panel de control de WordPress y navegue hasta Templates > Popups.
- Haga clic en Añadir nueva ventana emergente para crear una nueva plantilla emergente.
- Nombre y cree su plantilla de ventanas emergentes
- Give your popup a relevant name, such as “Ventana emergente de suscripción” then click Crear plantilla.
- Elija o diseñe el diseño de su ventana emergente
- Elementor le mostrará una gran variedad de plantillas de ventanas emergentes prediseñadas. Seleccione una que se adapte a sus necesidades, o comience con una plantilla en blanco.
- Haga clic en Inserte para abrir la plantilla seleccionada en el editor de Elementor. Al hacer clic en el icono "x" le lleva a la página de la plantilla en blanco.
- Añadir un formulario de suscripción
- Arrastre el Formulario widget en la ventana emergente para añadir un formulario de suscripción.
- Configure los campos del formulario para capturar la información necesaria, normalmente:
- Nombre (opcional) - para una experiencia más personalizada.
- Correo electrónico (obligatorio) - como información principal para una suscripción.
- Manténgalo sencillo con sólo un campo de correo electrónico para aumentar la probabilidad de inscripción.
- Configurar las acciones de envío de formularios
- Update the form’s submit button text to something engaging, like “Subscribe Now” or “Get Updates.”
- En el Acciones tras el envío seleccione Correo electrónico o MailChimp (if you’re using MailChimp for email marketing).
- Personalice las acciones posteriores al envío, como enviar un mensaje de agradecimiento o añadir un notificación de éxito.
- Estilice su ventana emergente
- Use Elementor’s styling options to customize the form’s colors, fuentesy espaciado to match your website’s branding.
- To draw attention, add a headline such as “Stay Updated!” or “Suscríbase a las últimas noticias. “
- Guardar y publicar la ventana emergente
- Once you’re happy with the design, click Publique. You’ll now be prompted to configure the popup’s display settings.
Paso 2: Configure los ajustes de visualización y activación de la ventana emergente
- Establecer las condiciones de visualización
- Haga clic en Añadir condición y elija Todo el sitio o una página específica en la que desee que se pueda acceder a la ventana emergente.
- Configurar activadores
- Turn off any automatic triggers (like “On Page Load” or “On Scroll”). This step ensures that the popup only appears when the user clicks a designated link or button.
- Guardar ajustes de pantalla
- Confirme sus ajustes pulsando Guardar y cerrar.
Paso 3: Crear el enlace o botón para activar la ventana emergente
- Edite la página o el post donde desea el enlace
- Abra la página o la entrada en la que desea añadir el enlace o botón activador en Elementor.
- Añadir un enlace o botón para el activador de la ventana emergente
- Inserte un Botón or a text link widget to serve as the popup trigger. Use engaging text like “Sign Up Now” or “Subscribe for Updates.”
- Puede adjuntar el activador de la ventana emergente a una imagen, un icono u otro elemento en el que se pueda hacer clic para conseguir un aspecto personalizado.
- Establezca la acción desencadenante para abrir la ventana emergente
- Seleccione el enlace o el botón y vaya a Ajustes de enlace en el editor de Elementor.
- Establezca el tipo de enlace en Etiquetas dinámicasy seleccione Actions > Popup de la lista desplegable.
- Elija la acción y el nombre de la ventana emergente
- Elija Abrir ventana emergente como acción y seleccione el nombre de la ventana emergente de suscripción que creó anteriormente.
- También puede establecer una acción de cierre de la ventana emergente si desea que los usuarios puedan cerrarla manualmente.
- Guarde sus cambios
- Haga clic en Actualización para guardar sus cambios en la página.
Paso 4: Probar la ventana emergente
- Vista previa de la página
- Visite la página en la que añadió el activador de la ventana emergente, haga clic en el enlace o botón y asegúrese de que la ventana emergente de suscripción se muestra correctamente.
- Presentación del formulario de control
- Envíe una entrada de prueba para asegurarse de que el formulario funciona como se espera. Si ha configurado el formulario para que envíe una notificación por correo electrónico, compruebe que se recibe el mensaje.
- Si está conectado a una herramienta como MailChimp, compruebe que la suscripción de prueba se ha añadido a la lista correcta.
Consejos y recomendaciones adicionales
- Añadir animación: In the popup’s advanced settings, you can add entrance and exit animations (such as fade-in or slide-in) to make the popup appear smoother and more engaging.
- Optimizar para móviles: Switch to mobile view in the Elementor editor and adjust the popup’s design for mobile screens to ensure a seamless experience for mobile users.
- Control de frecuencia: Si planea tener varias ventanas emergentes, limite su frecuencia para evitar abrumar a los usuarios.
- Declaración de privacidad: Utilice la Texto widget para añadir un breve descargo de responsabilidad sobre la privacidad en la parte inferior del formulario para garantizar a los usuarios que la información de su correo electrónico se mantendrá segura.
Conclusión
La creación de una ventana emergente de suscripción activada por clic en Elementor aumenta eficazmente la tasa de suscripción por correo electrónico de su sitio web al tiempo que garantiza una experiencia de usuario positiva. A diferencia de las ventanas emergentes activadas automáticamente, este enfoque sólo muestra la ventana emergente cuando el usuario está listo para participar, lo que la hace menos intrusiva y más propensa a la conversión. Siguiendo estos pasos, puede diseñar, personalizar y configurar fácilmente una ventana emergente de suscripción que se alinee con su marca y fomente la interacción del usuario. Una ventana emergente bien elaborada y colocada estratégicamente puede ser valiosa para construir su lista de correo electrónico y permanecer conectado con su audiencia.