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.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

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

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

¿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.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

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.

El editor Gutenberg predeterminado no incluye un generador de ventanas emergentes, por lo que deberá elegir un complemento de ventanas emergentes de WordPress para el editor de bloques. Para este tutorial, hemos utilizado el complemento GutenKit.

GutenKit es un complemento de edición de bloques que incluye un generador de ventanas emergentes diseñado específicamente para Gutenberg. Con este generador de ventanas emergentes, crear ventanas emergentes en Gutenberg ahora es más fácil que nunca.

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

Para instalar el generador de ventanas emergentes GutenKit, debe tener instalado en su sitio web el complemento del editor de bloques GutenKit. Estos son los complementos y temas necesarios para usar el generador de ventanas emergentes sin problemas en su sitio web.

☑️Complementos necesarios:

• GutenKit Versión gratuita
• o, Versión Pro de GutenKit

☑️ Tema: Tema de Hello Blocks o cualquier tema de bloque de WordPress.

Una vez que haya instalado el complemento GutenKit, vaya a GutenKit > MódulosEncuentra el Generador de ventanas emergentes y haga clic en el Instalar button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

Diseña ventanas emergentes para WordPress usando cualquier bloque de Gutenberg

Ahora navega hasta GutenKit > Ventana emergente y haga clic Crear nueva ventana emergente para abrir el editor donde crearás la ventana emergente.

Luego puedes usar el bloque para crear la ventana emergente en el editor.

Con el generador de ventanas emergentes GutenKit, puedes usar cualquier bloque de Gutenberg para diseñar tu ventana emergente. 

Puede utilizar más de 65 bloques GutenKit y más de 18 módulos para diseñar una ventana emergente moderna y sofisticada para su sitio.

Esto incluye bloques como encabezados, párrafos, botones, imágenes e incluso videos en su ventana emergente, lo que la hace altamente personalizable. 

Crea ventanas emergentes de Gutenberg con plantillas prediseñadas

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

Para importar los diseños ya confeccionados

1. Editor de creación de ventanas emergentes para Gutenberg.
2. Clickea en el biblioteca de plantillas botón.
3. Elige un patrón De la biblioteca.

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

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

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 button and set the rules for where you want your popup to be displayed. It’s that easy!

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

There might be times when you don’t want popups to appear on certain pages. You can do it with 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

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉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 cómo y cuándo activar las ventanas emergentes de Gutenberg

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.

En el generador de ventanas emergentes GutenKit, puede seleccionar cómo se activarán las ventanas emergentes en su sitio web desde 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 En Gutenberg puedes diseñar con GutenKit 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 is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ 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.