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.
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.
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.
¿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.
¿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.
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.
Y ya está, en todo momento puedes previsualizar el popup creado para ver el aspecto que tendrá en tu web.
#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.
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.
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
Aquí, no hemos añadido ningún tipo de superposición y se muestra en todo momento desde el inicio.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
#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.
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.
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
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.
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.
#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.
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.
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.
Y ya está, ya tienes el popup que queríamos creado.
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