Cómo crear una ventana emergente o popup en WordPress
Categoría:
Desarrollo web para WordPress,
WordPress,
Plugins para WordPress
Fecha:
16/05/2022
Creo que este es uno de los posts más difíciles que he escrito en mucho tiempo, ya que he querido ser lo más neutro posible.
Normalmente, los popups o ventanas emergentes en WordPress los creo con Elementor Pro, ya que utilizo Elementor como pagebuilder en mis sitios web. Pero en este post voy a intentar ser lo más claro posible y hablar desde un punto de vista neutro. Lo ideal es que, si utilizas un pagebuilder en tu WordPress y este tiene la funcionalidad de crear popups o ventanas emergentes, las utilices en lugar de cargar scripts Javascript extra.![wordpress popup](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popup-wordpress.jpg)
¿Qué es un popup o ventana emergente?
Antes de nada, quiero explicarte con mis palabras lo que son los popups. Las ventanas emergentes que cargan en sitios web están mal vistos en algunos ámbitos y no se debe abusar mucho de este recurso. En ciertos sectores se utilizan de una forma errónea, dificultando el UX (experiencia de usuario) y dañando completamente la opinión del usuario de nuestro sitio web. Una ventana emergente o popup nunca debe ser invasiva y debe dejar navegar al usuario por el sitio web en cuestión.![pop ups página web](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress2-1024x701.png)
Existe una regla no escrita: que solo salte una única ventana emergente al mismo tiempo a los visitantes.Otro tema es cómo afectan las ventanas emergentes al WPO y a la velocidad de carga de la web. Como siempre digo, si nos fiamos de lo que nos dice Google PageSpeed o Core Web Vitals, el primer elemento que sacamos de la web son los popups, porque su javascript suele impactar bastante en el rendimiento.
Tipos de popups o ventanas emergentes
Los popups son utilizados para múltiples cosas dentro del UX de un sitio web, pero existen muchos tipos de ventanas emergentes. Podemos clasificar los tipos de popups en función de cómo saltan:- Popups que saltan al entrar.
- Popups que saltan al salir.
- Popups que saltan después de un determinado tiempo o cuando el usuario realiza una acción.
- Barra superior.
- Barra inferior.
- Ventana emergente central.
- Ventana emergente lateral inferior.
- Ventana emergente a tamaño completo.
Mejores plugins de popups en WordPress
A lo largo de los años, han existido muchísimos plugins para crear y administrar popups en un sitio web WordPress. En el terreno de los popups ha pasado como en el de los sliders, en 10 años hemos visto plugins de "todos los colores". He visto plugins buenos como Popup Maker u OptinMonster y he visto plugins muy malos como Thrive Leads. De hecho, no existe el plugin de pop ups perfecto, sino que debes utilizar el que más se ajuste a tus necesidades. Si solo necesitas un popup simple, como te he dicho antes, puedes utilizar la funcionalidad de tu pagebuilder. En caso de que tu pagebuilder o theme no tenga esta funcionalidad, ahora vamos a hablar de algunos plugins de ventanas emergentes para WordPress.Popup Maker para WordPress
Popup Maker es uno de los mejores plugins de popups para WordPress y también de los más utilizados. Aunque personalmente no es de los que más me gustan, soy consciente de que es de los que más ofrecen de forma gratuita.![popups wordpress sitio web](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress3-1024x765.png)
![popups wordpress](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress4-1024x631.png)
![popups wordpress condicionales visitantes](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress5-1024x631.png)
![popups wordpress](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress6-1024x696.png)
OptinMonster para WordPress
No podemos hablar de los mejores plugins de popups para WordPress y no mencionar a OptinMonster, ya que es uno de los plugins más conocidos para captar leads y para implementar lead magnets. La versión de pago de OptinMonster tiene muchísimas funcionalidades y es una verdadera suite de implementación de lead magnets. La versión gratuita que hay en el repositorio nos permite crear popups o ventanas emergentes con muy buenos resultados. Uno de los problemas de OptinMonster es que debemos crear una cuenta, aunque sea gratuita, ya que parte del servicio es un SaaS:![pop ups wordpress visitantes](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress11-1024x635.png)
![pop ups wordpress optin monster](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress12-1024x918.png)
![pop ups wordpress correo electronico](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress13-1024x918.png)
![pop ups visitantes optin monster](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress14-1024x806.png)
Popups de Elementor
Como he dicho al principio del post, soy usuario intensivo de Elementor Pro. Al utilizar Elementor Pro, siempre uso los popups de Elementor, pero llevo muchos años en esto y por eso también estoy acostumbrado a utilizar otras soluciones (plugins). Lo bueno de Elementor, en lo que toca a dar forma a los popups o ventanas emergentes, es que puedes usar el pagebuilder para la apariencia:![ventana emergente elementor pro](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress7-1024x650.png)
![ventana emergente wordpress](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress8-1024x650.png)
![pop ups wordpress elementor](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress9-1024x650.png)
![pop ups wordpress elementor](https://cdn.raiolanetworks.com/blog/wp-content/uploads/popupswordpress10-1024x650.png)