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.