Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cómo crear un popup de salida con el plugin Layered Popup Plugin for WordPress

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los "popups" o ventanas emergentes de salida son mensajes que se muestran a los visitantes cuando están a punto de salir de un sitio web. Se utilizan principalmente para alentar a los visitantes a completar su compra o hacer que uno de ellos se suscriba a una lista de correo electrónico, o simplemente hacer que permanezcan durante más tiempo en el sitio sugiriéndoles productos o contenido que pueda interesarles. También pueden utilizarse para solicitar opiniones o feedback sobre tu sitio.

La ventaja de los popups de salida es que no distraen al usuario mientras está interactuando con tu contenido o haciendo compras en tu sitio web. Sólo aparecen cuando los visitantes están a punto de abandonarlo.

Los popups de salida funcionan mediante el seguimiento del movimiento del cursor; esto significa que cada vez que el cursor se mueva fuera del área de contenido del navegador, se activa un popup que aparece de inmediato.

Cómo crear una campaña de popup de éxito

Vamos a explorar algunas de las cosas que debes tener en cuenta al crear popups con el fin de garantizar una mejor experiencia a tus usuarios y resultados garantizados para tus campañas.

Mantener el número de popups a un mínimo

Estoy seguro de que has visitado un sitio donde surgían tantos popups que terminaste saliendo del sitio. No te conviertas en esa persona que bombardea a los usuarios con popups innecesarios.

Asegurate que los popups tengan un objetivo

Establece siempre una razón de ser para cada popup que actives.

Asegúrate de que los popups se muestren al público adecuado

En un sitio de comercio electrónico o eCommerce, los compradores podrían apreciar un primer popup que les ofrezca un descuento, pero esto podría no ser igualmente aplicable a los clientes frecuentes. Por ejemplo, un usuario que ya haya iniciado sesión en su cuenta no apreciará un popup que le anime a registrarse.

Usar solo un popup en cualquier página única

Es aconsejable tener un único popup activo por página. Demasiados popups en una misma página distraerán por completo a tus visitantes.

Ten preparada una oferta irresistible

La oferta debe ser lo suficientemente tentadora como para que que los usuarios sigan la acción que les sugieres en el popup. Podrías, por ejemplo, ofrecerles un descuento especial o proponerles el envío de contenido gratuito a cambio de su suscripción.

Crea popups atractivos

Siempre es bueno asegurarse de que tu popup está en la misma línea estética que el tema que uses en tu sitio. También debe resultar visualmente atractivo en términos de imágenes, lenguaje empleado y diseño.

Introducción al plugin Layered Popups Plugin

Usaremos Layered Popup Plugin para crear algunas ventanas emergentes en un sitio WordPress.

El primer paso será descargar el plugin desde el Envato Market. Si todavía no tienes una cuenta, dirígete a la página de registro y creala. Una vez hayas iniciado sesión, podrás adquirir el plugin desde su página de producto.

A continuación, obtendrás un enlace de descarga de los archivos, y también puedes dirigirte a la sección de descargas de tu cuenta para descargar los archivos comprimidos.

Ahora inicia sesión en tu instalación de WordPress. Ve a Plugins > Añadir nuevo y carga los archivos zip. A continuación, haz clic en Instalar ahora y cuando concluya el proceso de instalación haz clic en Activar. Ahora estás preparado para empezar a crear tus popups.

Ahora deberías ver una nueva etiqueta Layered Popups en el menú de la izquierda. Para empezar a usar el plugin, simplemente pasa el cursor sobre el enlace de esta etiqueta y verás todas las opciones disponibles para los popups.

Layered Popups dashboardLayered Popups dashboardLayered Popups dashboard

Todo sobre Layered Popups

Layered Popups viene con más de 200 plantillas prefabricadas. Sólo tienes que elegir un diseño, editar el contenido, y podrás tener funcionando en cuestión de minutos tus propios popups. También tienes la opción de crear tus popups personalizados desde cero, algo que es realmente fácil.

Además, las capas de Layered Popups están completamente animadas y viene con la capacidad de integrar botones para compartir en varias redes sociales como Facebook, Twitter, LinkedIn y Google +.

En esta sección, vamos a ver cómo crear un popup de salida que garantice las conversiones. Empecemos.

Layered Popups viene con más de 30 popups de demostración con los que puedes empezar. Los encontrarás a través de Layered Popups > Popups. Para activar cualquiera de ellos, simplemente haz clic sobre el botón + y tu popup se pondrá en marcha.

Layered Popups demo popup listLayered Popups demo popup listLayered Popups demo popup list

Puedes encontrar el resto de popups en el submenú Popups Library.

Layered Popups popups libraryLayered Popups popups libraryLayered Popups popups library

Como puedes ver arriba, hay multitud de popups prediseñados de todo tipo, incluidos los popups para formularios de contacto, formularios de suscripción y para compartir en redes sociales. No necesitas ser un experto en diseño, sólo tienes que importar y ajustar los popups que te gusten.

Crear un popup personalizado

En algunos casos, es posible que simplemente desees crear tu propio popup. Por suerte, puedes hacerlo a través de la opción Create Popup (crear popup). Para empezar, haz clic en Create Popup.

Lo primero que hay que hacer es establecer el título del popup. Debería ser lo más descriptivo posible para que más adelante no te cueste recordar para qué propósito es cada uno. Nuestro popup se llamará New Users (Nuevos usuarios).

A continuación, querrás establecer el tamaño del popup en píxeles. No te preocupes demasiado por esto, ya que es probable que lo modifiques cuando veas el resultado final.

Lo siguiente será seleccionar la posición del popup respecto a la ventana del navegador. Dependiendo de tus necesidades, es posible que quieras ubicarlo en el centro, en los lados, en la parte inferior o en la parte superior.

Avanza marcando el botón display overlay (superposición de pantalla) si deseas que el popup tenga una superposición sobre el contenido del sitio, a continuación, rellena el resto de detalles sobre la superposición, como la opacidad, el color y la animación.

New users popup optionsNew users popup optionsNew users popup options

Diseñar un popup con el constructor

Pasemos a la parte más importante del nuevo proceso de creación de popups: el constructor. Aquí es donde diseñas cómo quieres que se vea tu popup. Algo a tener en cuenta antes de diseñarlo es asegurarse de que los colores que elijas estén en concordancia con los del tema de tu sitio web.

Cada elemento del popup se conoce como una capa. así que simplemente haz clic en Add Layer (añadir capa) y elige el tipo de contenido que deseas incluir en tu popup.

Add Layer dialoglayer typesAdd Layer dialoglayer typesAdd Layer dialoglayer types

Ahora sólo tienes que añadir todo el contenido de tu popup.

En nuestro caso, por ejemplo, vamos a añadir una imagen de fondo, un título de encabezado, un campo de texto que describe la oferta al visitante y un botón de suscripción. Por último, pero por supuesto no menos importante, es colocar el botón de cierre para la ventana emergente.

Designing the popupDesigning the popupDesigning the popup

Como puedes ver arriba, puedes editar cualquier atributo de una capa, como su tamaño, su posición, su estilo e incluso la animación.

Añadir elementos de formulario al popup

Ahora que nuestro popup está completo, pasamos a especificar qué elementos del formulario se mostrarán al usuario. Por ejemplo, queremos que los visitantes rellenen su dirección de correo electrónico, por tanto, este campo será obligatorio.

Form Elements ParametersForm Elements ParametersForm Elements Parameters

Definir los elementos del formulario y guardar el popup.

Opciones de envío

Esta sección contiene parámetros de doble opt-in y notificación de administrador

El doble opt-in o "suscripción doble" es un paso adicional en el proceso de suscripción en el cual se le requiere al usuario que verifique su dirección de correo electrónico. Aquí escribimos el mensaje que deseas que tu usuario reciba tras suscribirse.

Double opt-in optionsDouble opt-in optionsDouble opt-in options

El crecimiento de tus suscriptores debe estar siempre basado en la calidad y no en la cantidad. Esto garantiza que todas las personas de tu lista estén realmente interesadas y contribuyan al crecimiento exponencial de tu sitio web.

La Admin Notification (notificación de administración) te permiten especificar si deseas recibir por correo electrónico un aviso con los datos de contacto cada vez que tengas un nuevo suscriptor.

Admin notification optionsAdmin notification optionsAdmin notification options

Integración

Esta opción te permite integrar popups con tu proveedor de marketing para obtener un mejor análisis de datos. Deberías tener una clave de API que te permitirá la integración tal y como se muestra a continuación.

Integration options including MailChimp API keyIntegration options including MailChimp API keyIntegration options including MailChimp API key

Campañas

Crear campañas es un paso esencial para hacer crecer cualquier negocio online. Para ello, debes llevar a cabo campañas con popups emergentes. Por ejemplo, una campaña destinada a adquirir nuevos usuarios en tu sitio implicará la crear y mostrar popups destinados a educar, atraer y ofrecer ofertas interesantes solo a los nuevos visitantes.

Popups from a campaignPopups from a campaignPopups from a campaign

Para crear una campaña, dirígete a A/B Campaigns > Create New Campaign (Campañas A/B > Crear nueva campaña). Introduce el título de la campaña y selecciona los popups que quieras para esa campaña en particular y guarda los cambios.

Create a new campaignCreate a new campaignCreate a new campaign

Segmentación del popup

Hemos configurado el popup, pero hasta ahora, no lo hemos activado en el sitio. Para activarlo, simplemente dirígete a Layered Popups > Targeting (Ventanas emergentes en capas > Segmentación). Aunque antes de eso, tienes que saber lo siguiente:

  • cómo se muestra el popup: esto determina qué evento desencadenará la aparición de la ventana emergente. En nuestro caso, será OnExit (al salir).
  • cuándo se muestra el popup: especifica las fechas en las que se mostrará la ventana emergente
  • dónde se muestra el popup: esto especifica dónde aparecerá el popup. Puede ser en la página de inicio, en entradas concretas o en cualquier otro lugar.

También te ayuda a especificar qué ventanas emergentes se mostrarán en qué tipos de dispositivos. Esto significa que puedes elegir diferentes popups para equipos de escritorio y para dispositivos móviles o el mismo para ambos.

Nuestro objetivo será OnExit Popup, solo para equipos de escritorio y debe mostrarse una vez por sesión a usuarios no registrados.

Configure the popup targetConfigure the popup targetConfigure the popup target

Ahora que tu popup está activo, puedes ver cuántas personas han visto tu popup a través de las estadísticas de la campaña.

Popup campaign statisticsPopup campaign statisticsPopup campaign statistics

Conclusión

Tener popups en tu sitio es una increíble manera de aumentar la conversión y posiblemente ganar clientes potenciales. Sin embargo, eso sólo sucederá si los usas correctamente, el número excesivo de popups o aquellos intrusivos sólo consiguen alienar a tus visitantes.

Mientras estás aquí, echa un vistazo a algunos de los otros plugins para popups disponibles en CodeCanyon.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.