Cómo crear ventanas emergentes en WordPress usando Gutenberg

¿Alguna vez has estado navegando por Internet y de repente te ha aparecido una ventana emergente? Una ventana emergente que aparece con una superposición mientras visitas una página web. 

A veces, estas ventanas emergentes pueden resultar muy útiles y ofrecerle información útil o grandes ofertas, pero también pueden resultar un poco molestas e intrusivas.

Pero desde el punto de vista del propietario de un sitio web, las ventanas emergentes han resultado ser una forma poderosa de captar la atención, promover ofertas y generar clientes potenciales.

Por eso, es fundamental crear ventanas emergentes adecuadas que atraigan al usuario sin molestarlo al mismo tiempo.

Para ayudarte con esto, te guiaremos paso a paso en la configuración de ventanas emergentes efectivas adaptadas a los objetivos de tu sitio web. Al finalizar esta guía, tendrás la forma más sencilla de crear ventanas emergentes que no solo llamen la atención, sino que también mejoren la experiencia del usuario.

¿Qué es una ventana emergente en el sitio web?

Las ventanas emergentes son pequeñas ventanas que aparecen en una página web, generalmente como una superposición, para captar la atención del usuario. Estas ventanas pueden incluir diversos tipos de contenido, como anuncios promocionales, ofertas de suscripción, notificaciones o llamadas a la acción. 

Las ventanas emergentes suelen requerir interacción, como entrar o salir de una página, hacer clic en un botón para cerrarlas o completar un formulario. Están diseñadas para destacarse del resto de la página y generar una interacción inmediata.

¿Cuándo suele utilizar la gente ventanas emergentes en sus sitios web?

Las ventanas emergentes se utilizan con mayor frecuencia para lograr objetivos específicos relacionados con la participación y la conversión de los usuarios. A continuación, se muestran algunos escenarios habituales en los que las personas utilizan ventanas emergentes en sus sitios web:

• A Capturar clientes potenciales o crear una lista de correo electrónico con una suscripción.
• Promociona ofertas exclusivas, descuentos u ofertas por tiempo limitado.
• Anunciar nuevos productos, características o actualizaciones importantes.
• Para proporcionar avisos importantes para alertar a los visitantes. 
• Pedir a los visitantes que Regístrese para obtener una cuenta en el sitio web.
• A Recopilar comentarios o realizar encuestas entre las audiencias.
• Espectáculo consentimiento de cookies o política de privacidad notificación.
• Dirigir a los usuarios a Registrarse para eventos, seminarios web o talleres.

Estos usos estratégicos de las ventanas emergentes ayudan a mejorar la participación y la conversión del usuario, pero es esencial implementarlos de manera cuidadosa para evitar interrumpir la experiencia del usuario.

Cómo crear ventanas emergentes en WordPress con Gutenberg

Pasemos a la parte central de esta guía tutorial sobre cómo agregar una ventana emergente en WordPress usando el editor de bloques Gutenberg.

The default Gutenberg editor doesn’t come with a popup builder. So when you are using Gutenberg you need to pick a WordPress popup plugin for the block editor. For this tutorial, we have used the PopupKit plugin.

PopupKit is one of the best WordPress popup plugin​ for Gutenberg, designed specifically for the Gutenberg. With this WordPress popup maker​, creating popups in Gutenberg is now easier than ever.

Aquí se muestra el proceso paso a paso para crear una ventana emergente de Gutenberg en el editor de WordPress.

Instalar y activar un complemento emergente de WordPress para Gutenberg

To install the PopupKit plugin, you need to have the GutenKit block editor plugin installed on your website. Here are the required plugins and themes to use popup builder seamlessly on your website.

☑️Required Plugins:

• Kit emergente: Download free WordPress popup plugin

☑️ Tema: Tema de Hello Blocks or any WordPress block theme like Twenty Twenty-Five.

Once you’ve installed all the plugins, you’re all set to start building WordPress popups in Gutenberg for your WordPress site. Now you can pop up under Campaña, get through the Abonado information, see the campaign Analytics, get advanced Integración, explore template, and so on.

How to add a popup on WordPress using Gutenberg blocks

Now, we will start creating WordPress popups in Gutenberg. With PopupKit you can design popups from the scratch with any Gutenberg blocks. Or, you can use the pre-designed templates to quickly build high-converting popups.

In this tutorial, we will demonstrate both of the methods of creating WordPress popups in Gutenberg.

Method 1: Create Gutenberg popups for WordPress with pre-designed templates

Mientras creating a professional WordPress website with Gutenberg, you can save time and effort by using the ready designs rather than starting from scratch.  With 55+ templates available in PopupKit’s Template Library, you can quickly create professional-looking popups in just minutes.

First, let’s see how to use the ready templates to build popups. Go through the following steps to create WordPress popup in Gutenberg:

1. Ir a PopupKit > Templates
2. Clickea en el "Choose From the Template" botón.
3. Set the campaign type to: Surgir
4. Entonces browse through the template library and import one.

You can easily narrow down your search in the PopupKit template library by using the built-in filters. Here’s a quick look at what you can sort by:

☑️ Tipo:

• Todo: Browse both free and pro templates.
• Gratis: Show only the free ones.
• Pro: See the premium templates.

☑️ Seasonal:

Filter the templates by seasonal events like Black Friday, New Year, summer sales, and more to match your campaign’s vibe.

☑️ Goal:

Find templates that can help you achieve specific campaign goals, such as growing your email list, making time-sensitive offers, reducing bounce rate, etc.

☑️ Industry:

Use templates tailored for your niche, whether you’re Blogger/ Publisher, running an eCommerce, working with a Local Business, Marketing Agency, Non-profit or SaaS brands.

☑️ Feature:

Choose templates with specific built-in features like Countdown Timers, Coupon wheels, Gamification, Multi-step campaigns, Exit intent, and Video support.

Method 2: Design WordPress popups from scratch using any Gutenberg block

Alternatively, if you want a fully custom-designed WordPress popup, you can build one entirely from scratch using any Gutenberg blocks (default ones and third-party add-ons) directly in the block editor. Follow the steps bellow:

1. Navegar a PopupKit > Campaigns from your WordPress dashboard. Here you will see the popups you have created for your website.
2. Luego haga clic en el Create Black to open the popup editor. In the editor you have a blank canvas to create popup with blocks.

Now in the block editor, use various Gutenberg blocks to deisgn the kind of you popup you want for your WordPress website.

PopupKit initially have a set of essential blocks for creating WordPress popups. Beyond that, you can use block editor plugins like GutenKit to design popups with a more varsatile collection of blocks.

Con GutenKit page builder for Gutenberg, you can use 74+ blocks and 18+ modules to design a modern and sophisticated popup for your site. This includes blocks like headings, paragraphs, buttons, images, and even videos to your popup, making it highly customizable.

Here are some basic examples of creating a WordPress popups in Gutenberg.

Utilice condiciones inteligentes para mostrar ventanas emergentes de Gutenberg en su sitio web

With PopupKit, you have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

Desde allí, simplemente haga clic en el  + Agregar condición y establece las reglas sobre dónde quieres que se muestre tu ventana emergente. ¡Así de fácil!

Con el generador de ventanas emergentes GutenKit, puede establecer las condiciones de inclusión y exclusión.

• Incluir condición: Con las condiciones Incluir, puedes agregar ventanas emergentes a todo el sitio web, páginas específicas o páginas de archivo.
• Condición de exclusión: Puedes decidir dónde no mostrar las ventanas emergentes en tu sitio con las condiciones de exclusión.

A continuación te mostramos cómo puedes mostrar ventanas emergentes en tu sitio web usando condiciones inteligentes:

Mostrar ventanas emergentes de Gutenberg en todo el sitio web

Para mostrar la ventana emergente en todas las páginas de su sitio web, 

👉 Paso 1: Añadir una nueva condición para las ventanas emergentes.

👉 Paso 2: Seleccione la condición “Incluir”.

👉Paso 3: Seleccione “Todo el sitio” para mostrar una ventana emergente en cada página.

Cómo excluir páginas específicas de la visualización de ventanas emergentes

Puede haber ocasiones en las que no desee que aparezcan ventanas emergentes en determinadas páginas. Puede hacerlo con Excluir condiciones. 

👉Paso 1: Añadir una nueva condición para las ventanas emergentes.

👉Paso 2: Seleccione la condición “Excluir”.

👉Paso 3: Seleccione “Singular”.

👉Paso 4: Seleccione una página para excluir la aparición de ventanas emergentes.

Mostrar ventanas emergentes solo en páginas específicas

Si buscas campañas más específicas, es posible que quieras mostrar ventanas emergentes en determinadas páginas de tu sitio web.

👉Paso 1: Añadir una nueva condición para las ventanas emergentes.

👉Paso 2: Seleccione la condición “Incluir”.

👉Paso 3: Seleccione “Singular”.

👉Paso 4: Seleccione una página para mostrar una ventana emergente.

Además, para asegurarse de que la ventana emergente no aparezca en otras páginas, puede agregar un condición de exclusióny seleccione todo el sitio para restringir que la ventana emergente se muestre en todo el sitio web.

Ventanas emergentes de WordPress en las páginas de archivo

También puedes mostrar ventanas emergentes en cualquier página de archivo de WordPress estableciendo una condición. Para ello, Agregar condición > Incluir > Archivar > Seleccionar archivo página.

Por otro lado, si desea evitar que aparezcan ventanas emergentes en una página de archivo en particular, puede configurar una condición de exclusión. Simplemente siga los mismos pasos: Para eso, Agregar condición > Excluir > Archivar > Seleccionar archivo página.

Decide how and when to trigger the WordPress popups

Tienes control total sobre cómo aparecen las ventanas emergentes en las páginas de tu sitio web. Puedes decidir si las ventanas emergentes aparecerán al cargar la página, al salir de la página o después de una interacción.

With this popup maker for WordPress, you can select how the popups will trigger on your website from Contenido > Eventos abiertos en el editor de bloques.

Esto te ayuda a desarrollar distintos tipos de ventanas emergentes en Gutenberg. Aquí están las tipos de ventanas emergentes de WordPress on Gutenberg you can design with Popup Builder.

1. Ventanas emergentes de entrada

• Desencadenar: Se activa instantáneamente cuando la página se carga en el navegador del usuario.
• Objetivo: Atrae a los usuarios tan pronto como llegan al sitio web.
• Caso de uso: Da la bienvenida a los usuarios con un descuento, un anuncio de evento o solicita una suscripción de inmediato.

💡 ¿Cómo activarlo? Seleccione el evento abierto como “Al cargar la página"

2. Ventanas emergentes con intención de salida

• Desencadenar: Se activa cuando el usuario desea cerrar la pestaña o el navegador.
• Objetivo: Captura a los usuarios antes de que abandonen el sitio.
• Caso de uso: Ofrece un descuento, suscripción a un boletín o una oferta especial.

💡 ¿Cómo activarlo? Seleccione el evento abierto como “Intención de salida de la página"

3. Ventanas emergentes de activación por desplazamiento

• Desencadenar: Se activa cuando el usuario se desplaza hacia abajo en una página.
• Objetivo: Ofrece una oferta promocional o solicita comentarios después de que el usuario haya explorado una determinada parte de la página.
• Caso de uso: Promociona contenido adicional, un formulario de registro o una oferta por tiempo limitado.

💡 ¿Cómo activarlo? Seleccione el evento abierto como “Página desplazada”.

Después de eso, configure el “Progreso del desplazamiento de la página para decidir en qué punto aparecerá la ventana emergente mientras el usuario se desplaza hacia abajo en la página.

4. Ventanas emergentes de inactividad del usuario

• Desencadenar: Cuando el usuario está inactivo durante un tiempo determinado.
• Objetivo: Vuelva a involucrar a los usuarios que han estado inactivos durante un cierto período de tiempo en el sitio.
• Caso de uso: Recuerda a los usuarios sobre ofertas especiales, los incita a realizar acciones o les sugiere artículos que podrían haber dejado en su carrito.

💡 ¿Cómo activarlo? Seleccione el evento abierto como “Después de la inactividad”.

Ahora configura el Tiempo de inactividad del usuario en segundos para decidir cuándo aparecerá la ventana emergente después de que el usuario haya quedado inactivo.

5. Ventanas emergentes al hacer clic

• Desencadenar: Se activa mediante la interacción del usuario con una sección de la página.
• Objetivo: Muestra contenido cuando el usuario hace clic en un elemento específico de la página (por ejemplo, un botón o una imagen).
• Caso de uso: A menudo se utiliza para detalles de productos, envíos de formularios adicionales o reproducciones de videos.

💡 ¿Cómo activarlo? Seleccione el evento abierto como “Selector personalizado Haga clic”.

Ahora agrega Clase selectora para la sección. 

Con estos distintos tipos de ventanas emergentes de WordPress disponibles en Gutenberg, tiene la flexibilidad de elegir el mejor formato que se alinee con sus objetivos y mejore la experiencia del usuario, haciendo que su sitio web sea más atractivo y efectivo para captar la atención y generar conversiones.

Programe la activación de ventanas emergentes para su campaña

En ocasiones, utilizarás las ventanas emergentes para promocionar campañas en tu sitio web. Ahora bien, estas campañas tienen una fecha y hora de lanzamiento determinadas, por lo que debes hacer coincidir ese momento exacto para activar la ventana emergente.

Puedes hacer eso con el Reglas avanzadas. 

➡️ Paso 1: Activa el botón para “Fecha y hora programadas”.

➡️ Paso 2: Selecciona el Tiempo cuando quieras activar la ventana emergente.

➡️ Paso 3: Elegir el Fecha del lanzamiento de la campaña emergente.

¿Por qué elegir el constructor de ventanas emergentes GutenKit para WordPress?

El Generador de ventanas emergentes GutenKit destaca como una excelente opción para crear ventanas emergentes en WordPress debido a su integración perfecta con el editor de bloques Gutenberg, lo que ofrece una experiencia intuitiva y altamente personalizable para los usuarios. A continuación, se explica por qué es una excelente solución para sitios de WordPress:

✅ Integración perfecta con Gutenberg:

GutenKit está diseñado específicamente para Gutenberg, lo que significa que puedes diseñar y administrar ventanas emergentes utilizando la misma interfaz basada en bloques con la que ya estás familiarizado. Esto elimina la necesidad de usar desarrolladores de ventanas emergentes externos o codificación, lo que agiliza todo el proceso y permite una experiencia cohesiva.

✅ Plantillas prediseñadas para una configuración rápida:  

   GutenKit incluye una variedad de plantillas de ventanas emergentes diseñadas profesionalmente que se pueden personalizar fácilmente para adaptarse al estilo de su marca. Estas plantillas ahorran tiempo y esfuerzo, y ofrecen un punto de partida para quienes no desean crear ventanas emergentes desde cero, pero desean un diseño moderno y refinado.

✅ Reglas de visualización avanzadas: 

Con GutenKit, tienes control total sobre cuándo y dónde aparecen tus ventanas emergentes. Puedes establecer condiciones de visualización precisas según las páginas en las que quieras que aparezcan. 

Esto garantiza que sus ventanas emergentes se muestren en los momentos más óptimos, mejorando la participación sin ser intrusivo.

✅ Múltiples opciones de activación:

GutenKit ofrece múltiples opciones de activación para mostrar ventanas emergentes, como al cargar la página, después de un retraso temporal, al desplazarse o cuando el usuario está a punto de salir de la página. 

También puede activar ventanas emergentes cuando los usuarios interactúan con elementos específicos, lo que le otorga un control total sobre la experiencia del usuario.

✅ Personalización flexible

El generador de ventanas emergentes GutenKit permite una amplia personalización de sus ventanas emergentes, desde animaciones y estilos hasta tipografía y colores. 

Incluso puedes agregar CSS personalizado para un estilo más avanzado, garantizando que tus ventanas emergentes coincidan con el diseño y la marca únicos de tu sitio web.

✅ Responsivo y optimizado para dispositivos móviles 

Las ventanas emergentes creadas con GutenKit son totalmente adaptables y compatibles con dispositivos móviles, lo que garantiza que se vean bien en cualquier dispositivo. Puede personalizar la apariencia con animaciones de entrada y salida, estilos de fondo, colores de superposición y más.

✅ Ligero y orientado al rendimiento. 

A diferencia de muchos otros complementos emergentes, GutenKit está diseñado para ser liviano y con rendimiento optimizado. 

Esto significa que no tendrá que preocuparse de que las ventanas emergentes ralenticen su sitio, lo cual es crucial tanto para la experiencia del usuario como para el SEO.

Terminando

Si sigue estos pasos, podrá crear y mostrar ventanas emergentes en sus sitios de WordPress fácilmente. Con el generador de ventanas emergentes de GutenKit, puede integrar fácilmente ventanas emergentes dinámicas en su sitio de WordPress, lo que le permitirá comunicarse de manera eficaz con su audiencia. 

¡Tome los conocimientos de esta guía y comience a experimentar con diferentes estrategias emergentes para maximizar el potencial de su sitio!

Al igual que Popup Builder, GutenKit incluye más de 65 bloques, más de 18 módulos y más de 500 diseños listos para usar para brindarte una experiencia avanzada de creación de páginas en el editor de bloques de Gutenberg. Así que instala GutenKit hoy y comienza a crear el sitio web de tus sueños en WordPress.