Los popups son un recurso que se usa con frecuencia para atraer la atención de tus visitas con información de su interés o para conseguir conectar con ellos a través de, por ejemplo, suscripciones a tu lista de correo.
Aprovechando que la semana pasada publicamos una entrada con 75 webs de famosos creadas en WordPress, en esta entrada queremos mostrate cuatro ejemplos completos de cómo podemos crear algunos de los diseños de popups utilizados precisamente en webs de famosos. Para ello, utilizamos nuestros plugins Nelio Popups con el que puedes crear una gran variedad de ventanas emergentes y Nelio Forms para añadir los formularios de contacto que se muestran en algunos de ellos.
Tabla de contenidos
Popup mostrado en la web de George Michael
Si eras un gran fan de George Michael, puedes seguir disfrutando de su música y conocer más detalles sobre su vida en su web. Al entrar en ella, lo primero que te aparece es un gran popup que te invita a que hagas clic al botón de suscripción que te lleva a la página en la que debes rellenar los datos para suscribirte a su newsletter.
Crear el aspecto y comportamiento de este popup con Nelio Popups es muy sencillo. El editor de Nelio popups para crear cualquier ventana emergente es como el editor de bloques: sólo debes añadir un bloque de texto y medios en donde podrás añadir la foto en el lado izquierdo y, en el derecho, el logo, el texto y un par de botones.
En el primer botón, el de suscripción, deberás añadir el enlace a la página donde se encuentra el formulario para suscribirse y, en las propiedades del segundo botón, deberás indicar que se cierre la ventana tras hacer clic en el mismo.
Asegúrate de haber indicado que la ventana está posicionada en el centro, no tiene ni relleno ni márgenes y también has añadido un icono para cerrar el popup (éste, al ya tener el botón de cierre, podrías omitirlo).
Además, para que la imagen ocupe toda la parte izquierda del popup, debes asegurarte de haber indicado que la imagen tiene una alineación de ancho amplio y un estilo tipo fondo.
En este caso, el popup se muestra inmediatamente al entrar en la página. Para ello, en las propiedades del popup puedes indicar que se abra en cualquier página en el momento de visualización de la misma.
Finalmente, en la web original vemos que una vez cerrado el popup, éste no se vuelve a mostrar al volver a acceder a la web. Para replicar este comportamiento, en las propiedades avanzadas del popup puedes limitar el número de veces que un popup se muestra a un visitante y si quieres volverlo a mostrar al cabo de cierto tiempo.
Y ya está, ya tienes creado el popup con el mismo aspecto y comportamiento.
Por supuesto, puedes tunear el estilo de letra o añadir algo de márgenes para que sea idéntico al original. Y como puedes ver en la imagen anterior, el botón de cierre de la ventana, en este caso está dentro de la misma.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
Popup mostrado en la web de Tom Jones
Veamos un segundo ejemplo. En la web de Tom Jones, tras aceptar el banner de cookies, en la parte inferior derecha de la web, aparece un sencillo popup para que te suscribas a su lista de correo.
En este caso, en vez de tener un botón que te redirige a una página de suscripción, el propio popup ya incluye el campo en el que debes introducir una dirección de correo y el botón de suscripción.
¿Cómo creamos esta ventana emergente con Nelio Popups? Simplemente creamos un grupo con color de fondo marrón claro que incluya un título, un texto y un formulario (nosotros lo hemos creado con Nelio Forms, pero podrías haberlo creado con otro plugin). En el grupo también le habremos añadido un poco de relleno para que tenga un aspecto más parecido al original.
El popup tendrá un ancho reducido y se mostrará en la parte inferior derecha de la página en el que habremos añadido cierto margen para que no se muestre pegado al borde de la página.
Sobre el comportamiento, en este caso no se muestra el popup immediatamente al entrar en la página principal, sino que aparece pasado un pequeño intervalo de tiempo. Para ello, en las propiedades del popup, puedes indicar que hay un tiempo de espera hasta que aparece el popup:
E igual que antes, también nos aseguramos que una vez cerrado el popup, éste no se vuelve a mostrar al volver a acceder a la web. Y ya está, ya tienes el nuevo popup creado.
Como puedes ver en la imagen anterior, en este caso, para que fuera más parecido al original nos faltaría instalar en el tema el tipo de letra usada en la web.
Ten en cuenta que cuando creas un formulario con Nelio Forms, tienes diversas opciones de envío, así como de integración con Akismet para controlar el spam.
Popup mostrado en la web de Kim Kardashian
La web de Kim Kardashian vende productos de belleza para el cuidado de la piel. La primera vez que entras, y al cabo de unos pocos segundos, aparece el siguiente popup en el centro de la pantalla.
Como ya habrás intuido, crear este popup es «como una mezcla» de los dos anteriores. Creamos un bloque de medios y texto en el que añadimos la imagen en la parte izquierda y, al igual que antes, nos aseguramos de que ocupe el espacio completo y es de tipo fondo en el popup. En la parte derecha, añadimos el título, texto, el formulario y otro texto.
En este caso, hemos seleccionado como botón de cierre un icono redondo y gris con la cruz en medio. Y el comportamiento es igual que antes: es decir, hay un tiempo de espera antes de mostralo y, una vez cerrada la ventana, no se vuelve a mostrar al usuario hasta al cabo de cierto tiempo.
Popup mostrado en la web de Selena Gomez
La web de Selena Gomez también muestra un popup centrado en la página para suscribirse.
El formulario en este caso no solo pide una dirección de correo sino también que se seleccione el país y un conjunto de casillas de verificación donde especificamos dónde suscribirnos exactamente. Nelio Forms te permite añadir distintos tipos de campos, entre ellos, el selector de país y un grupo de casillas de verificación.
Además, en las propiedades avanzadas, puedes indicar cómo quieres que se almacene la información del formulario o si quieres que se guarde en Mailchimp.
Una vez creado el formulario, crear el popup es bien sencillo. Sólo tenemos que crear un grupo con fondo negro en el que añadimos un título, una línea de separación y el formulario creado.
No te olvides de añadir el icono de cerrar ventana y las propiedades de comportamiento del popup y ya está, ya tienes tu nuevo popup creado.
Resumen
Si quieres quieres conseguir que más visitantes se suscriban a tu lista de correo, puedes crear popups para invitarles a ello. Con los plugins de Nelio Popups y Nelio Forms, perfectamente integrados con WordPress, verás cuán fácil es replicar algunos de los popups que se muestran en webs de famosos.
La gran ventaja de usar estos plugins es que no vas a usar ninguna herramienta externa a tu WordPress y podrás usar el editor de bloques que ya conoces con los estilos y apariencia de tu tema. Te animo a que los pruebes y, si tienes cualquier duda o comentario, no dudes en contactarnos.
Imagen destacada de Pablo Heimplatz en Unsplash.
Deja una respuesta