En ocasiones es interesante crear una ventana del tipo “pop-up” o “lightbox” para destacar una promoción o un evento en nuestra web. El término “pop-up” proviene del inglés, y hace referencia a aquellas ventanas que aparecen de forma inesperada en la pantalla de tu navegador. Su función es captar la atención del usuario sobre una información que se considera relevante y con la intención de generar una conversión.
El uso de los pop up se debe realizar con sumo cuidado ya que al ser una acción invasiva si se abusa de esta herramienta puede resultar molesta y derivando en que el usuario abandone la página web. Es recomendable hacer uso de ella de forma moderada.
También hay que tener en cuenta que Google penaliza a las páginas webs que hacen uso excesivo de pop ups en dispositivos móviles. Una vez nos pongamos en materia explicaremos como deshabilitar los popups en tablet y moviles.
Como hemos comentado, hacer un mal uso de los pop ups puede ser contraproducente, por lo que antes de ponernos a crear nuestro popup os dejamos algunas buenas prácticas que deberías tener en cuenta.
Facilitar el cierre de la ventana emergente con un click, da visibilidad a la cruz de cierre.
Procurar que si el usuario ha descartado el popup no cargue de neuvo si cambia de página.
Procurar que el popup no aparezca cuando acaba de cargar la web pero tampoco esperar tanto como para que el usuario abandone la web sin verlo.
Trabajar un diseño y un contenido llamativo.
Crear un popup o ventana “lighbox”
En nuestro caso, lo que realizaremos es un sencillo pop up en el que invitamos a los usuarios a suscribirse a nuestra newsletter.
Desde el administrador de nuestro WordPress accedemos a plantillas/añadir nueva y una vez aparezca la ventana en que nos permite seleccionar que tipo de plantilla queremos realizar seleccionamos popup, le damos un título y crear plantilla.
Crear la plantilla del popup
La versión pro de Elementor instalada en las webs de net2rent viene con unos popups predefinidos, por lo que si alguno se adapta a vuestro diseño simplemente tenéis que insertarlo y personalizarlo al gusto. Nosotros crearemos un diseño propio y diseñaremos un formulario de suscripción.
Para acceder a los ajustes del popup vamos a clickear sobre la rueda de engranajes que aparece en la esquina inferior derecha (recuadro rojo de la imagen) y al ahcerlo encontraremos las siguientes opciones.
ANCHO: definiremos el ancho del popup.
ALTURA: definiremos el alto del popup, permitiendonos ajustarlo al contenido, a la pantalla o definir un alto personalizado.
Posición del contenido: definiremos la posición del contenido en relación al popup.
Position horizontal: define la posición horizontal del popup respecto al ancho del la pantalla.
Posición vertical: define la posición vertical del popup respecto al alto de la pantalla.
Overlay: Nos permite habilitar el color de fondo que no forma parte del popup. En nuestro caso sería la zona de color negro transparente.
Close button: Nos permite habilitar el botón para cerrar el popup. En nuestro ejemplo es la X que aparece en la esquina superior derecha que aparece en el contenedor del popup.
Entrance animation y exit animation: Definiremos el tipo de entrada y salida del popup.
Animation duration: Definimos la duración de la animación.
Opciones de la plantilla de popup
Después de crear la estructura del popup pasaremos a personalizar el aspecto visual del popup. Para ello, desde los mismos ajustes del popup clicaremos en el apartado estilos. El siguiente paso será crear el diseño del contenido del popup que cada uno necesite usando los widgets de Elementor tal y como se hace en la edición de una página o una entrada normal.
Una vez tengamos definido el diseño de nuestro pop up clicaremos en la flecha que hay al lado del botón de publicar para crear las condiciones de visualización.
Condiciones de Visualización
En este punto definiremos que condiciones se deben cumplir o no cumplir para que se visualice el pop up. Elementor permite crear más de una condición para la visualización del pop up. Primero definimos donde se visualizará.
En el primer selector definiremos si la condición debe incluir o excluir.
El segundo selector define donde se debe incluir: En toda la web, en páginas de archivo o en páginas únicas.
El tercer selector variara en función de lo definido en el segundo selector. En nuestro caso definiremos que el pop up solo aparezca en la página principal de nuestra web. Una vez indicado hacemos click en “Next”
Condiciones de Visualización
Clickamos sobre siguiente y en “Triggers” definiremos cuando se visualizará (los eventos que “disparan” la parición del popup). Tenemos las siguientes opciones:
On page load: Se muestra nada más cargar la página o creando un delay definido por segundos.
On scroll: se muestra después de que el usuario haga scroll hacía arriba o abajo. Definiremos en porcentaje a la altura que se debe mostrar.
On Scroll To Element: en cuando el usuario se desplaza a un elemento específico. Un buen ejemplo seria mostrar el pop up cuando llegan a los comentarios del blog.
On click: se muestra después de que un usuario haga clic un número determinado de veces.
After inactivity: se muestra después de que el usuario haya estado inactivo durante X segundos.
On page exit intent: Para mostrar el pop up antes de que el usuario abandone nuestra página.
Para nuestro ejemplo definiremos que sea en la carga de la página pasados 10 segundos. Para ello marcamos “On Page Load” e indicamos 10 segundos en el retardo. Hacemos click en “Next”
Condiciones de Visualización
En advanced rules añadiremos algunas restricciones a cuándo o con qué frecuencia se muestran los pop ups.
Show after x pages views: El pop up se mostrará después x páginas vistas.
Show after x sessions: El pop up se mostrará después de que el usuario visite la página x veces.
Show after x times: abrirá el pop up solo X cantidad de tiempo para ese visitante específico.
When arriving from specific URL: Si el usuario llega a una URL especifica
Show when arriving from: Mostrara el pop up cuando una o varias de las opciones disposibles esten configuradas.
Hide for logged users: Ocultar pop up para usuarios logueados.
Show on devices: Definiremos en que soportes se verá el pop up, escritorio, tablet o móvil.
Para nuestro ejemplo pondremos la regla de que el pop up no se vea en teléfonos móviles ni tablets, solo en escritorio. Guardamos (Save&Close) y ya tendremos nuestro pop up funcionando.
Condiciones de Visualización
A continuación les ofrecemos un vídeo de utilización de los popups de Elementor. (Inglés)