Hola chicos,
En este vídeo veremos como podemos crear un Popup o ventana emergente con Elementor y con el plugin premium JetPopup de Crocoblock para tu web.
En este otro artículo explico como crear un Popup con Elementor Pro.
Para seguir este tutorial necesitas:
Elementor gratuito: Descargar Elementor
JetPopup de la suite Crocoblock: Descargar Crocoblock
Jetpopup es un plugin de pago que lo puedes comprar por 22$ de forma separada:
Tutorial en vídeo
Suscríbete a mi canal:
o si accedes a la membresía de Crocoblock tienes todos por 130$.
Me encanta la filosofía de Crocoblock ya que en vez de hacer un plugin enorme y pesado divide las funcionalidades en plugins pequeños y de cada una de ellas hace un plugin separado. Me parece muy acertado.
Una vez instalado el plugin nos aparecerá un nuevo elemento en el menú de WordPress llamado JetPopup.
Ojo
Para algunos PopUps más avanzados pueden hacernos falta otros plugins de la suite de Crocoblocks.
En mi caso tengo instados los plugins JetPopup, JetEngine y JetElementos For Elementor.
Si vamos a JetPopup —> Preset Library nos encontramos con una librería enorme de Popups predefinidos:
Como vemos en la imagen anterior, podemos encontrar el popup que más se adecue a nuestras necesidades gracias a los filtros que tiene.
Además en cada popup nos dice que plugins necesitaría para su funcionamiento. En el de la imagen sería el plugin Jet Elements.
Instalar una plantilla de Popup
No tiene ningún misterio, hacemos click en install en la plantilla que nos gusta.
Una vez instalado nos lleva a una página de Elementor con la plantilla añadida
Ahora podemos añadir, modificar y quitar elementos igual que haríamos en cualquier página con Elementor.
Configuración del Popup
Las opciones propias del Popup, tales como efectos de entrada o salida y en que momentos mostrar el popup, las tenemos en settings, situado abajo a la izquierda:
Y al hacer click nos encontramos con todas estas opciones:
Animation: Es el efecto que va a tener el popup al entrar
Open Event: Cuando queremos que aparezca el Popup
Podemos hacer que el Popup aparezca a los x segundos de cargar la página, después de un tiempo de inactividad, al hacer scroll en la página un %, al salir de la página, una fecha determinada, tiempo determinado y al hacer click en un elemento de la web.
Display Conditions aquí es donde le indicamos en que lugar de la web queremos que aparezca:
Podemos indicarle en qué páginas lo queremos incluir o en que páginas lo queremos excluir.
Una vez publicado nuestro popup ya aparecería en nuestra web 😉
Hacer que el Popup salte al hacer click en un enlace
Una opción que me gusta especialmente es hacer saltar un popup cuando se hace click en un enlace o botón.
Me gusta especialmente que podemos hacer que salte un Popup un enlace dentro de una página que no hace falta que esté hecha con Popup. Esto me gusta mucho.
Añadir identificador al botón
Lo primero que tenemos que hacer es añadir un ID o una clase al botón que queremos que sea el trigger o disparador del popup:
Ahora que ya tenemos el identificador del botón nos volvemos al Popup que estamos creando.
Si recordais, más arriba, veíamos que entre los eventos que podemos elegir para que se dispare el popup está Custom Selector Click
Si todo ha ido bien, ahora el popup saltará cuando alguien haga click en el botón que hemos configurado.
Enviar Leads a nuestra herramienta de Email Marketing con Webhooks
JetPopup tiene integración directa con Mailchimp. La integración se realiza a través del API Key de forma rápida y sencilla.
Dentro del menú Crocoblock —> JetPlugins Settings —> Integrations podemos conectarlo:
¿Pero como lo haríamos con otra herramienta que no fuera Mailchimp?
Lo haríamos gracias a los Webhooks.
Los Webhooks me encantan porque nos permiten conectar herramientas aunque no haya una integración directa con ellas.
En mi ejemplo lo voy a integrar con Encharge, pero ser haría de forma muy parecida con cualquier herramienta que acepte webhooks.
Importante
Para poder hacerlo necesitaremos el componente JetEngine.
JetEngine nos permite crear formularios y además nos permite añadir webhooks por lo que es justo lo que necesitamos 😉
Una vez instalado JetEngine podemos encontrar Forms:
Creamos un formulario con los campos que necesitemos, en mi caso
En la parte de Fields Settings añadimos los campos que necesitemos en nuestro formulario.
La parte importante, donde sucede la magia, es en Post-submit Actions/ Notifications Settings, es decir, que sucede una vez rellenado el formulario.
Tenemos que hacer click en Add Notification y añadimos una notificación del tipo Call a Webhook
¿De dónde sacamos la Webhook URL?
Esta información la tenemos que sacar de la herramienta que queremos conectar, en nuestro caso queremos enviar los prospectos a Encharge.
Dentro de Encharge, cuando creamos un Flow y añadimos un formulario. Nos encontramos con la URL del Webhook que tenemos que añadir en JetEngine:
Una vez configurado el formulario tan solo lo tenemos que añadir en nuestro popup de JetPopup:
Guardamos nuestro popup y ahora cada vez que alguien añade sus datos se irán directamente a Encharge gracias al Webhooks.
Para seguir este tutorial necesitas:
Elementor gratuito: Descargar Elementor
JetPopup de la suite Crocoblock: Descargar Crocoblock
¿No me digáis que no es maravilloso? 😉
Nos vemos en el siguiente tutorial