Con las ventanas emergentes, puedes aumentar las suscripciones por correo electrónico, promocionar ofertas especiales o guiar a los visitantes hacia una acción específica. Además, WordPress te ofrece la flexibilidad de crear ventanas emergentes mediante diversos métodos.
En esta guía encontrarás tres maneras sencillas de añadir ventanas emergentes a tu sitio de WordPress. También encontrarás una lista de los mejores plugins para ventanas emergentes y pasos claros que seguir, independientemente de tu nivel de experiencia técnica.
1. Usa un plugin de ventanas emergentes para WordPress
Una de las maneras más fáciles y eficientes de añadir ventanas emergentes es utilizar un plugin específico; muchos ofrecen constructores visuales, activadores, segmentación avanzada y análisis.
Ventajas de usar un plugin de ventanas emergentes
- No requiere conocimientos de programación
- Plantillas listas para usar
- Opciones de activación y segmentación
- Integración con servicios de correo electrónico
- Pruebas A/B y seguimiento de conversiones
Plugins populares de ventanas emergentes para WordPress
Estos son algunos ejemplos de plugins que puedes usar para crear y añadir ventanas emergentes a WordPress:
- OptinMonster: Incluye un constructor visual, segmentación basada en el comportamiento y tipos de campañas como caja de luz, barra flotante y ventanas deslizantes
- Popup Maker: Ofrece un control detallado sobre los activadores, las condiciones y las integraciones, y funciona bien en casos de uso avanzados, como el comercio electrónico
- TrustPulse: Aprovecha la prueba social mediante notificaciones emergentes en tiempo real basadas en el comportamiento de los usuarios
Cómo instalar y configurar un plugin de ventanas emergentes
- Ve al panel de administración de tu WordPress
- Haz clic en Plugins → Añadir nuevo
- Busca el plugin de ventanas emergentes que quieras
- Haz clic en Instalar ahora y, después, en Activar
- Abre la configuración del plugin
- Crea tu primera ventana emergente con el creador del plugin
- Configura los activadores de visualización y las condiciones de segmentación
- Obtén una vista previa y publica
La mayoría de los plugins te permiten elegir reglas de visualización como las siguientes:
- Mostrar después de X segundos
- Mostrar al detectar la intención de salida
- Mostrar según el porcentaje de desplazamiento
- Mostrar solo en páginas o entradas específicas
- Mostrar solo a visitantes nuevos o recurrentes
Los plugins son ideales para la mayoría de los usuarios y requieren el menor trabajo manual. Además, suelen seguir siendo compatibles con las actualizaciones del núcleo y los temas de WordPress.
2. Inserta servicios de ventanas emergentes de terceros
Las herramientas externas para ventanas emergentes son otra opción. Estas plataformas suelen ofrecer editores potentes, paneles de análisis y segmentación de audiencias. Son excelentes si quieres ejecutar ventanas emergentes en varias plataformas, no solo en WordPress.
Cómo funcionan los constructores externos de ventanas emergentes
La mayoría de los constructores de ventanas emergentes de terceros funcionan permitiéndote:
- Crear tu ventana emergente dentro de su editor web
- Configurar cuándo y cómo debe aparecer
- Generar un código de inserción de JavaScript
- Pegar ese código en tu sitio de WordPress
Servicios de ventanas emergentes que se integran con WordPress
- Popupsmart: Interfaz fácil de usar y herramientas de segmentación
- Claspo: Plantillas, flexibilidad de diseño y reglas detalladas para los visitantes
- Hello Bar: Barras superiores, deslizadores y ventanas modales
- Sleeknote: Se centra en ventanas emergentes optimizadas para móviles y adaptadas al comercio electrónico
Cómo añadir código de ventanas emergentes de terceros a WordPress
Usar plugins como WPCode es la mejor manera de añadir código de ventanas emergentes de terceros a tu sitio de WordPress, ya que es más seguro para principiantes y no se sobrescribirá al actualizar el tema. A continuación, te explicamos cómo hacerlo:
- Crea tu ventana emergente dentro de la herramienta de terceros
- Copia el código de inserción de JavaScript generado
- Instala el plugin WPCode en tu sitio de WordPress
- En el panel de administración de tu WordPress, ve a Fragmentos de código → Añadir fragmento
- Elige Añadir fragmento personalizado → Fragmento de JavaScript
- Pega el código de tu ventana emergente y configura las opciones que quieras
- Haz clic en Guardar fragmento para publicar tu ventana emergente
3. Programa manualmente una ventana emergente
Si quieres tener un control total o prefieres mantener el sitio ligero, puedes programar directamente tu propia ventana emergente. Este método es el más adecuado para desarrolladores o usuarios avanzados que se sienten cómodos añadiendo y editando código de WordPress.
Lo que necesitas
- HTML para la estructura de la ventana emergente
- CSS para los estilos y la animación
- JavaScript o jQuery para el comportamiento de apertura y cierre
Un ejemplo básico
HTML
<div id="custom-popup" class="popup-hidden">
<div class="popup-content">
<p>Este es el mensaje de tu ventana emergente.</p>
<button id="close-popup">Cerrar</button>
</div>
</div>CSS
.popup-hidden { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.popup-content { background: white; margin: 100px auto; padding: 20px; width: 300px; }JavaScript
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
document.getElementById('custom-popup').style.display = 'block';
}, 3000);
document.getElementById('close-popup').onclick = function () {
document.getElementById('custom-popup').style.display = 'none';
};
});Añadir el código
Puedes colocar este código en el pie de página de tu tema o crear un plugin personalizado. Asegúrate de poner en cola correctamente cualquier elemento de JavaScript o CSS.
Cuándo elegir la programación manual
- Tienes conocimientos de programación
- Quieres evitar la sobrecarga de plugins
- Necesitas una ventana emergente única o ligera
- Solo quieres mostrar una ventana emergente en una página específica
Este enfoque no es ideal para usuarios sin conocimientos técnicos ni para quienes desean opciones sencillas de pruebas A/B o segmentación.
Haz que tu estrategia de ventanas emergentes funcione
Las ventanas emergentes que aparecen en mal momento o que son demasiado agresivas pueden perjudicar la experiencia del usuario, mientras que las ventanas emergentes inteligentes pueden aumentar la interacción y generar conversiones.
Buenas prácticas para usar ventanas emergentes
- Usa la intención de salida para evitar interrumpir la experiencia de los visitantes
- Establece límites de frecuencia para que las personas no vean repetidamente la misma ventana emergente
- Ofrece valor en la ventana emergente (un descuento, contenido adicional, acceso anticipado, etc.)
- Optimiza para dispositivos móviles manteniendo el contenido breve y adaptable
Prueba siempre el rendimiento y la interacción del usuario
Adapta los objetivos de las ventanas emergentes a sus tipos
- Registro por correo electrónico: Usa ventanas modales centradas o paneles deslizables con un formulario
- Anuncio u oferta: Usa barras superiores o cajas de luz
- Encuesta o comentarios: Usa paneles deslizables desde la esquina inferior
- Urgencia: Añade temporizadores de cuenta atrás y lenguaje que genere urgencia
La herramienta que elijas determinará hasta dónde puedes llegar con la segmentación y la personalización. Si tus necesidades son sencillas, utiliza un plugin. Si quieres un control personalizado, hazlo manualmente. Si quieres ampliar la escala en distintas plataformas, utiliza un constructor externo.
Completa tu estrategia de ventanas emergentes con Jetpack Newsletter
Una vez que hayas añadido una ventana emergente bien programada a tu sitio, el siguiente paso es asegurarte de que las direcciones de correo electrónico que recopilas se utilicen eficazmente. La función de una ventana emergente es atraer la atención y recopilar direcciones. Pero el valor a largo plazo proviene de lo que ocurre después de que alguien se suscribe.
Ahí es donde Jetpack Newsletter puede ayudarte.
Jetpack Newsletter está diseñado para usuarios de WordPress que quieren enviar actualizaciones, ofertas o contenido directamente desde su sitio a sus suscriptores. Se conecta perfectamente con tus entradas y páginas de WordPress, lo que te permite crear y enviar boletines por correo electrónico sin salir del escritorio.
Cuando se combina con una ventana emergente que anima a suscribirse, Jetpack Newsletter se convierte en parte de un sistema completo de generación de clientes potenciales:
- Una ventana emergente capta la atención e invita a los visitantes a suscribirse
- Jetpack Newsletter gestiona esos suscriptores y les envía actualizaciones automáticamente o según el calendario que elijas
- Tu contenido llega directamente a más personas, lo que aumenta las visitas recurrentes y la interacción
Como está integrado con tu sitio de WordPress, Jetpack Newsletter te permite centrarte más en crear y menos en configurar herramientas de correo electrónico complicadas. También ofrece a tus visitantes una forma sencilla y familiar de suscribirse en el momento en que están más interesados.
Si te tomas en serio hacer crecer tu audiencia, combinar una ventana emergente bien diseñada con Jetpack Newsletter es una forma sencilla y fiable de empezar. Es una estrategia que sigue funcionando entre bastidores, incluso cuando tu sitio crece.
Jetpack 