Ejemplos de diseños de ventanas emergentes que puedes crear con Nelio Popups

Publicada en WordPress.

Cuando las ventanas emergentes se integran totalmente en el diseño de la web en que se muestra, consiguen aumentar la conversión de forma considerable. Si no sabes por dónde empezar, en esta entrada te muestro algunos ejemplos de los popups mostrados en otras webs que te pueden servir de inspiración para crear tus propias ventanas y cómo los podemos crear de forma parecida con nuestro plugin, Nelio Popups.

Para ello, asegúrate primero de haber instalado el plugin Nelio Popups en tu web, descargándolo directamente desde WordPress.org o desde tu propio escritorio de WordPress.

Plugin Nelio Popups en WordPress.org
Plugin Nelio Popups en WordPress.org.

Una vez instalado y activado, ya lo tendrás disponible en tu escritorio y podrás crear tu primer popup con la opción de «Añadir Nuevo» que encontrarás en el menú, y usando el mismo editor de bloques de WordPress que usas para crear cualquier página o entrada.

Añadir una nueva ventana emergente con Nelio Popups
Añadir una nueva ventana emergente con Nelio Popups.

Los ejemplos de ventanas emergentes que muestro a continuación los he ordenado alfabéticamente por el nombre del sitio web que las muestra. El objetivo es que, para cada uno de ellos, veas cómo puedes crearlos con Nelio Popups. Ten en cuenta que los resultados que te muestro aquí podrán diferir un poco de los originales debido a diferencias de estilo del tema, de letra, etc.

#Ejemplo 1: popup de registro

Empecemos con una ventana emergente muy sencilla. La BBC, al cabo de poco tiempo de navegar por su web, te muestra un popup para que te registres a su web. Aunque te permiten cerrarla, está claro que el objetivo de esta ventana es interrumpir tu lectura, que la veas y te suscribas.

Ventana emergente de registro a las noticias de la BBC
Ventana emergente de registro a las noticias de la BBC.

¿Cómo creamos este popup con Nelio Popups? En el editor de bloques podrás crear el contenido del popup de la misma forma con que editas cualquier página o entrada. En este caso, creando un bloque de tipo fondo que incluye un texto en la parte superior izquierda y, luego, un titular, otro texto y un botón centrados.

Creación de un popup como el que se muestra en la BBC
Creación de un popup como el que se muestra en la BBC.

¿Qué propiedades adicionales debemos definir del popup? En la barra lateral derecha podemos indicar un montón de propiedades adicionales: tamaño, posición, animación al aparecer, cuándo, dónde y cómo mostrarlo, etc.

Edición de las propiedades de un popup
Edición de las propiedades de un popup.

Como puedes ver en la imagen anterior, las propiedades definidas del popup son:

  • Tamaño: personalizado de 600 pixels.
  • Posición: en la parte superior de la ventana
  • Margen: a una cierta distancia del extremo superior de la ventana
  • Overlay: se añade un color gris oscuro de superposición detrás del popup para que éste destaque más.
  • Botón de cierre: icono para poder cerrar la ventana con el color que mejor se integra con el popup

Además, hemos indicado que la ventana emergente, no se muestre inmediatamente, si no al cabo de cierto tiempo de estar navegando por la web.

Tiempo de espera por la que mostrar un popup
Tiempo de espera antes de mostrar un popup.

Y ya está, en todo momento puedes previsualizar el popup creado para ver el aspecto que tendrá en tu web.

Previsualización del popup creado
Previsualización del popup creado.

#Ejemplo 2: popup de oferta por primera compra y suscripción a Newsletter

La web de Blue Start Coffe Roasters muestra un popup en la parte inferior derecha de la página que te ofrece suscribirte a su newsletter y recibir un 15% de descuento en la primera compra.

Ventana emergente de subscripción a la newsletter de Blue Star Coffe
Ventana emergente de subscripción a la newsletter de Blue Star Coffe.

Para crear una ventana emergente como esta, al igual que antes, debes crear un bloque de fondo y en este caso, le añades primero la imagen del logo de la tienda, seguido del título, el texto y un formulario de suscripción.

Creación de un popup con Nelio Popups
Creación de un popup con Nelio Popups.

Es este caso, como puedes ver en la imagen anterior, las propiedades definidas del popup son:

  • Tamaño: personalizado de 500 px
  • Posición: en la parte inferior y derecha de la ventana
  • Margen: a una poca distancia del extremo inferior y lateral de la ventana
  • Botón de cierre: icono para poder cerrar la ventana con el color que mejor se integra con el popup
Mostrando un popup creado con Nelio Popups
Previsualización del poup creado.

Aquí, no hemos añadido ningún tipo de superposición y se muestra en todo momento desde el inicio.

#Ejemplo 3: popup de suscripción a Newsletter

Cuando entras por primera vez en la web de Armani y tras estar navegando por la misma un rato, te aparecerá un popup centrado en la página para que te suscribas a su newsletter.

Ventana emergente de subscripción a la newsletter de Emporio Armani
Ventana emergente de subscripción a la newsletter de Emporio Armani.

En este caso, el popup lo creamos en el editor de bloques mediante un bloque de medios y texto en la que en la parte del texto, añadimos el texto y formulario de suscripción a la newsletter.

Con el bloque de medios y texto, dependiendo de los tamaños de la imagen y del texto, puede ocurrir que la imagen no se vea ocupando toda la altura del popup. Para evitar que esto ocurra, se ha añadido un nuevo estilo del bloque medios y texto, «Imagen Fondo (Nelio Popups)». De esta forma, independientemente del tamaño de la imagen o el texto, con este estilo, la imagen se adaptará para tener la misma altura que el popup.

Estilo imagen de fondo de Nelio Popups para el bloque de tipo medios y texto
Estilo imagen de fondo de Nelio Popups para el bloque de tipo medios y texto.

Es este caso, como puedes ver en la siguiente imagen, las propiedades definidas del popup son:

  • Tamaño: hemos indicado un tamaño personalizado de 900 px.
  • Posición: centrado en el medio
  • Overlay: se añade un color gris claro de superposición detrás del popup para que éste destaque más.
  • Botón de cierre: icono para poder cerrar la ventana con el color que mejor se integra con el popup
Creación de un popup parecido al mostrado en la web de Armani
Creación de un popup parecido al mostrado en la web de Armani.

Adicionalmente, también hemos indicado que la ventana emergente, no se muestre inmediatamente, si no al cabo de cierto tiempo de estar navegando por la web. En este caso, también debería indicarse que el visitante sólo lo vea una vez o que no lo vuelva a ver hasta al cabo de unos días.

Propiedades adicionales de Nelio Popups
Propiedades adicionales de Nelio Popups.

Estas dos propiedades son funcionalidades de la versión Premium de Nelio Popups que, en el momento de escribir esta entrada, está todavía en desarrollo.

Popup creado copiando el mostrado en la web de Armani
Popup creado copiando el mostrado en la web de Armani.

#Ejemplo 4:popup de oferta por primera compra y suscripción a Newsletter

La web ETQ muestra un popup en el centro de la página con una oferta de un 10% por primera compra, al suscribirte a su newsletter. Este popup es mostrado tras hacer scroll en la página de aterrizaje.

Ventana emergente de subscripción a la newsletter de ETQ
Ventana emergente de subscripción a la newsletter de ETQ.

Para crear el contenido de este popup, en el editor de bloques sólo debes añadir la imagen, el texto y el formulario de suscripción.

Creando un popup como el que se muestra en la web de ETQ
Creando un popup como el que se muestra en la web de ETQ.

Es este caso, como puedes ver en la imagen anterior, las propiedades definidas del popup son:

  • Tamaño: hemos indicado un tamaño prederminado
  • Posición: centrado en el medio
  • Padding: se ha añadido un padding para que se muestre enmarcado como el poup original
  • Overlay: se añade un color gris claro de superposición detrás del popup para que éste destaque más.
  • Botón de cierre: icono para poder cerrar la ventana con el color que mejor se integra con el popup.

Adicionalmente, también hemos indicado que el popup aparezca tras haber realizado un desplazamiento hacia abajo con el ratón.

Condición de activación del popup tras desplazarse con el ratón
Condición de activación del popup tras desplazarse con el ratón.

Y ya está, ya tienes el popup que queríamos creado.

Previsualización del popup creado parecido al mostrado en la web ETQ
Previsualización del popup creado parecido al mostrado en la web ETQ.

Conclusión

Hemos visto cuatro ejemplos distintos de creación de popups en WordPress con Nelio Popups. La gran ventaja de este plugin es que usas exclusivamente el editor que bloques de Gutenberg en el que ya dispones de un gran conjunto de bloques, patrones, y todos los estilos predefinidos de tu tema. De esta forma, el resultado final es una ventana emergente totalmente integrada con el diseño de tu web.

¡Anímate a probarlo! ¡Es gratis! Y si tienes cualquier sugerencia de mejora o comentario, no dudes en compartirla que la analizaremos con mucho cariño.

Imagen destacada de Ilona Bellotto en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.