Cómo abrir una ventana emergente al hacer clic en el botón (con Elementor)

Trabajar con el elemento del generador de páginas popular y ¿le gustaría abrir una ventana emergente con un clic en el botón? Elementor se ha convertido en una de las páginas más populares del mercado. Es fácil de instalar, intuitivo y no requiere habilidades de codificación para funcionar. También viene con un generador emergente que ayuda a los nuevos vendedores y propietarios de negocios a desarrollar su lista de correo electrónico. Y uno de los tipos más efectivos de ventanas emergentes son las que se abren con un clic en el botón. Es por eso que, en el tutorial de hoy, presentaremos 2 métodos para crear una ventana emergente que se pueda hacer clic en el elemento.
Usando el generador emergente nativo de Elementer
Usando optinmonster
Al final de este artículo, tendrá 2 estrategias de actuación para abrir una ventana emergente en un botón en el elemento. Y, como beneficio adicional, compartiremos cómo puede aumentar instantáneamente el número de personas que se hacen el tiempo para hacer clic en ese botón para múltiples conversiones. Si lo desea, puede saltar directamente a esa sección haciendo clic aquí. ¿Estas listo para empezar? Vamos directamente al tutorial. Método 1: Usando el generador emergente para el primer método, utilizaremos el generador emergente nativo para crear la ventana emergente que se puede hacer clic.
Deberá tener el complemento Elementor Pro para esto. Una vez que se active en su sitio web de WordPress, estará listo para crear su ventana emergente. Paso 1) Cree su ventana emergente desde el tablero de WordPress, Access Temp-Ups ‘Plantillas:

Se le pedirá que nombre la plantilla emergente y haga clic en Crear plantilla:

A continuación, seleccionará la plantilla emergente:

Elementor viene con muchas plantillas que puede usar con su versión Pro. Puede seleccionar cualquiera de las ventanas emergentes que funcionen para sus necesidades específicas. Hoy, utilizaremos uno que brinde a los visitantes a nuestro sitio un descuento del 10%. Después de seleccionar la plantilla correcta para usted, haga clic en Insertar desde la esquina superior derecha para comenzar a construir su ventana emergente:
Y su ventana emergente ahora estará en su editor elemental:

Paso 2: Personalice su ventana emergente en este momento, puede hacer cambios en la ventana emergente elemental. Si bien el generador de páginas en elemento es increíblemente intuitivo y fácil de usar, el generador emergente puede sentirse más desagradable si recién está comenzando. Todavía tiene todas las opciones de edición que puede extraer en el lado izquierdo haciendo clic en el elemento que desea cambiar:

También puede agregar nuevas características con su generador de deslizamiento y colocación:

Esto le permite agregar las mismas funciones a las ventanas emergentes que en una página elemental, como:

titulares
Texto
Video
Botón
Espaciador
Y mucho más …
También querrá hacer clic en el campo de correo electrónico para configurar lo que sucede cuando las personas agregan su dirección de correo electrónico:
Por defecto, enviará automáticamente un correo electrónico a los nuevos suscriptores. Puede cambiar el mensaje en el menú izquierdo en la pestaña Correo electrónico:

También puede acceder a la pestaña Acciones después de enviar para definir otra acción o sincronizar las ventanas emergentes con algunos proveedores de servicios de correo electrónico (ESP):

Elementor se conecta de forma nativa con algunos espes emergentes como:

Mailchimp
SendInblue
Asombro
Soltar
Y otros…
También puede usar Webhoks para iniciar sesión en cualquier ESP si no se ve en la lista. Dicho esto, sus integraciones nativas son más limitadas que otras herramientas, incluida OptinMonster (que continuaremos mirando). Por el momento, puede personalizar el estilo emergente para que coincida con su voz, estilo y mensajes cuando haya terminado, haga clic en Publicar en el menú inferior izquierdo: se le pedirá que seleccione los desencadenantes y las condiciones para aparecer. Pero debido a que creamos una ventana emergente que abre un botón en el elemento, puede omitir estas opciones.
Ahora está listo para incorporar la ventana emergente en una página que creó con Elementor. Paso 3) Incorpore la ventana emergente en la que puede hacer clic cuando abra una página que creó con Elementor, haga clic en cualquier botón que desee activar la ventana emergente para que las herramientas de edición aparezcan en el lado de la izquierda. En el cuadro de campo de enlace, haga clic en el icono de la etiqueta dinámica:

Luego seleccione Windows emergente de las acciones etiquetadas de categoría:
Haga clic en PopUp y seleccione Pop-Up en el menú desplegable:

Haga clic en Publicar en el menú inferior izquierdo cuando termine de editar la página:

¡Y eso es! La ventana emergente Elementer en la que se puede hacer clic aparecerá ahora que las personas hacen clic en el botón en la página de su sitio:

Nuevamente, Elementor tiene un generador emergente fácil de usar, que puede ser un buen comienzo para los principiantes. Pero al final del día, es limitado en términos de opciones de plantilla y funcionalidad. Si habla en serio para aumentar su lista rápidamente, entonces querrá pasar a una herramienta potencial de generación de clientes que le brinda más control sobre las ventanas emergentes. Veamos cómo puede crear un elemento emergente elemental y de manera más eficiente con OptinMonster. MUNTA 2: Uso de OptinMonster OptinMonster es la generación número 1 de clientes potenciales en el mercado y el mejor complemento para crear ventana pop: Up con WordPress:

OptinMonster no solo es la herramienta más poderosa para clientes potenciales, sino que también es una de las opciones más fáciles de usar. Esto se debe al hecho de que OptinMonster también viene con un generador intuitivo de deslizamiento y colocación, por lo que no requiere codificación o “habilidades técnicas” para crear ventanas emergentes profesionales. Además, con OptinMonster, no solo se limitará a ventanas emergentes en su sitio. En cambio, tendrá acceso completo a 9 tipos diferentes de campañas que incluyen:

Barras flotantes
Bienvenidas alfombras con pantalla completa

Casetes de desplazamiento deslizante
Ruedas gampadas para ganar
Campañas en línea
Y mucho más …
Esto le ayuda a abordar a los clientes de nuevas maneras para evitar algo llamado “fatiga emergente”. Esto sucede cuando los visitantes ven las mismas ventanas emergentes genéricas aparecen una y otra vez en su sitio web, capacita a sus visitantes para que dejen de interactuar con los formularios de inscripción de su sitio y perderá conversiones. Si bien las ventanas emergentes que se pueden hacer clic en el elemento no se verán afectadas en gran medida (porque el comportamiento del usuario desencadenará la aparición de la ventana emergente), los otros esfuerzos potenciales de generación de clientes pueden sufrir si se queda solo con Un tipo de campaña. Y con OptinMonster, puede personalizar aún más las otras campañas de Optin con reglas avanzadas de dirección. Algunas de las reglas más populares incluyen:
Tecnología de intención de salida: recupere los visitantes que lo abandonen porque los usuarios abandonan activamente su sitio.
Retensorización en el sitio: evite la “fatiga emergente” mostrando nuevas ofertas a los usuarios.
Geolocalización: personalice el viaje del usuario mostrando las campañas de las personas en función de sus ubicaciones físicas.
Monsterlinks: aumenta la participación con ventanas emergentes en las que se puede hacer clic, como las que trabajamos en el tutorial de hoy.
Estos son solo algunos ejemplos de reglas de dirección que puede usar para aumentar su lista y aumentar las conversiones, aunque hay muchas más. Y estas también son las mismas estrategias utilizadas por las empresas que usted, con un éxito masivo. Por ejemplo, Fatrastk recupera el 53% de los visitantes que han abandonado una ventana emergente simple. O cómo Kinoby convierte el 73% de los visitantes en su sitio web con una ventana emergente que se puede hacer clic en MonsterLinks. ¿Quieres verlo en acción por ti? ¡Comience con su cuenta 100% OptInmonster sin riesgos hoy! Una vez que se registre, estará listo para seguir el tutorial. Paso 1) Descargue e instale OptInmonster Lo primero que querrá hacer es descargar el complemento OptinMonster. Puede encontrar esto mirando a través de la lista de complementos desde el tablero de WordPress. Cuando encuentre el complemento, haga clic en Instalar ahora: luego haga clic en:
Si ya se ha registrado para OptInmonster, asegúrese de que esté abierto en otra pestaña. Luego, cuando activa el complemento OptInmonster, se le pedirá que conecte su cuenta. Haga clic en Iniciar sesión en WordPress:
Y aun así, su cuenta OptinMonster se conectará a su sitio de WordPress. ¿Todavía necesitas un poco de ayuda? Consulte esta guía detallada sobre cómo integrar OptInmonster en WordPress. Ahora está listo para crear y diseñar su ventana emergente. Paso 2) Cree ventana emergente desde el tablero de WordPress OptInmonster, verá una lista de campañas que puede crear. Para el tutorial de hoy, haga clic en PopUp:
Luego deberá seleccionar una de las más de 50 plantillas prefabricadas de OptinMonster para comenzar:
Estas plantillas son totalmente receptivas y se ven geniales en todos los dispositivos, incluidos los dispositivos móviles, la tableta y el escritorio. Además, como verá, soy increíblemente fácil de cambiar. Seleccione plantilla para sus objetivos de marketing específicos. Luego, dé un nombre a su campaña y haga clic en Iniciar edificación: esto traerá la plantilla al editor, donde puede personalizar rápidamente su campaña. Nuevamente, Optinmonster da este paso increíblemente fácil. No entraremos en detalles sobre todo lo que puede cambiar en el editor de OptinMonster en el tutorial de hoy. Pero sepa que tiene un control total sobre cómo se ve su campaña, qué dice y dónde aparece en su sitio web de OptinMonster es muy fácil de usar, porque viene con un editor de texto en línea que le permite personalizar sus mensajes en unos segundos:

También tiene un editor de deslizamiento y colocación que le permite agregar nuevas características como:

videos

Imágenes


Texto

Chatbots

Html personalizado

Espaciador
Y otra…
Estas opciones de personalización le permiten personalizar sus ventanas emergentes para conectarse mejor con su público objetivo. Y, debido a que todo se puede hacer con el editor de texto en línea o el generador de deslizamiento y colocación, no necesita ninguna experiencia de codificación para crear altas campañas de conversión en unos minutos. Cuando haya creado la ventana emergente perfecta para su oferta, querrá integrar OptinMonster con el proveedor de servicios de correo electrónico (ESP). Paso 3) Integrar ESP Una de las mejores partes sobre OptinMonster es que está integrado de forma nativa con más de 30 mercados populares en el mercado. Esto le permite automatizar su estrategia de marketing por correo electrónico. Puede crear listas de contactos organizados en ESP y crear secuencias automáticas para impulsar nuevos suscriptores en su embudo de ventas. Y con OptinMonster, puede agregar nuevos clientes potenciales a la lista correcta para personalizar el viaje del cliente. Para conectar OptinMonster con ESP, haga clic en la pestaña Integración en la parte superior del editor: luego haga clic en Agregar una nueva integración al menú izquierdo:
Y seleccione ESP de la lista de caída:
Siga las instrucciones en la pantalla para configurar la integración. En la mayoría de los casos, esto simplemente requiere que obtenga la clave API del tablero de cuenta ESP. Y con esto, sus nuevos clientes potenciales irán directamente a su proveedor de correo electrónico. Ahora es el momento de hacer que su Monsterlink incorpore su campaña en la página Elementor. Paso 4) Incorpore su ventana emergente con un Monsterlink primero, deberá ir a las reglas de visualización en la parte superior del editor OptInmonster:
Haga clic en la primera regla que se establece de forma predeterminada (hora en la página) para mostrar opciones para las reglas de visualización. Escriba “Monsterlink” en la barra de búsqueda y seleccione Monsterink entre opciones: haga clic en Copiar el código Monsterink:
Esto le brinda un HTML incorporable que se ve así: <a href="https://app.monstercampaigns.com/c/lxefnymh0ugfyvsxa8wu/ "Target="_blank" rel= "noreferrer Pero para hacer algo Una ventana emergente en la que se puede hacer clic, no necesitará los elementos HTML. En su lugar, simplemente necesitará el enlace, que puede encontrar después de "a href =". Del ejemplo anterior, el enlace de Windows emergente sería: https://app.montercampaigns.com/c/ lxefnymh0ugfyvsxa8wu/Copiar url En su código Monsterink. Asegúrese de publicar y guardar la campaña antes de continuar. También puede obtener una vista previa de la campaña en la pantalla Publicar para asegurarse de que se vea exactamente como desee:
Haga clic en el elemento del botón para agregar la URL de Monsterink:

Luego haga clic en Actualizar en el menú inferior izquierdo para ponerse en vida en su sitio web:

Y su campaña ahora estará en vivo en su página de primaria:

¿No ves tu campaña? Asegúrese de que el estado de su campaña esté configurado en el tablero de su complemento OptinMonster de WordPress:

Como puede ver, OptinMonster facilita la creación de una ventana emergente que se puede hacer clic para sus páginas de elementos. Además, tendrá varios tipos de campañas y desencadenantes para personalizar su experiencia de usuario (UX), estimular las conversiones y aumentar las ventas. ¿Pero por qué no intentar solo? ¡Comience con una suscripción al 100% de OptinMonster sin riesgos hoy! Pero antes de completar este tutorial, queríamos enseñarle cómo optimizar instantáneamente sus páginas, para que más personas hagan clic en la ventana Pop-Up CTA. Mejore instantáneamente las conversiones con prueba social uno de los mejores factores que ayudan a las personas a interactuar con su sitio. La “prueba social” es un término general que se refiere a diferentes aspectos de su sitio que crea confianza con el público objetivo. Estas pueden ser cosas como: testimonios

Reseñas

Evaluaciones de 5 estrellas

Insignias de pago seguras

Y otra…

Pero el tipo más efectivo viene en forma de una notificación de prueba social. Muestran actividad en tiempo real en su sitio. Cuando alguien está haciendo la acción que desea, puede mostrarla a los visitantes de su sitio. Aquí hay un ejemplo de cómo una notificación de evidencia social puede mostrar una tienda electrónica:

Esto funciona porque causa un efecto conocido como “fomo” (miedo a perder). FOMO ocurre cuando los consumidores en línea ven que otros están experimentando beneficios. Luego tienen el impulso de involucrarse con su marca para obtener esos beneficios positivos directamente. Y más que cualquier otro factor en su sitio, FOMO tiene un gran impacto en las conversiones. La mejor manera de agregar notificaciones de evidencia social a su sitio es con una herramienta como Trustulse: Trustulse facilita agregar evidencia social en solo unos pocos clics. Además, no son solo notificaciones para el comercio electrónico. De hecho, puede crear muchos tipos de notificaciones sociales no

Actividad reciente: Muestre un flujo en vivo de actividades del sitio web, como compras, registros, registros y más.

En el fuego: Muestre el número de personas que toman medidas en su sitio web en un período determinado.
Análisis de visitantes: resalte el interés activo en su sitio mostrando las visitas reales de las páginas a lo largo del tiempo.
Mensajes de acción: Muestre una sola notificación estática para ayudar a los visitantes a tomar medidas o resaltar la información.
Pero podría preguntarse “¿Cómo ayudará esto a que más personas hagan clic en mi ventana emergente de elementos?” Puede hacerlo fácilmente con una campaña para los visitantes. Esto importa y muestra la cantidad de personas que han visitado una de las publicaciones o páginas de su sitio para asumir, por ejemplo, que realiza un concurso en línea. Y para registrarse, las personas deben hacer clic en un botón para aparecer una ventana emergente para una suscripción. En la página de destino de destino a su concurso, puede mostrar una notificación que se ve así: al mostrar el número total de visitantes en esa página, mostrará cuán popular es la oferta. Esto aumentará el entusiasmo por lo que promueve y hará que más personas interactúen con su botón de urgencia. Esta es solo una de las muchas formas en que puede usar la prueba social para obtener más participación de la ventana emergente que puede hacer clic. Pero la mejor parte es que Trustulse no requiere habilidades técnicas para comenzar. De hecho, se necesita codificación cero. Y aquí hay otras funciones que sabemos que le gustarán en Trustulse:
Control 100% sobre su apariencia y mensajes de su campaña
Notificaciones que pueden hacer clic con sus propios enlaces personalizados
Reglas de dirección para viajeros de clientes más personalizados

Prueba social para cualquier etapa de negocios

Seguimiento analítico preciso y confiable
Y mucho más …
Finalmente, Trustulse funciona con cualquier constructor de sitios web, incluido WordPress.Esto lo convierte en una de las herramientas más potentes, flexibles y accesibles del mercado.¡Comience con su cuenta de confianza al 100% sin riesgos hoy!¡Y eso es todo por hoy!Esperamos que te haya gustado este tutorial.Si lo ha hecho, ciertamente desea consultar los siguientes recursos: cómo agregar notificaciones de prueba social a su sitio web
11 Herramientas de optimización de tasa de conversión para convertir a los clientes potenciales más rápido
Los mejores complementos de marketing digital de 2021 (en realidad funciona)

Estos artículos tendrán más herramientas y trucos para aumentar las conversiones y las ventas en su sitio web de WordPress.