Divi Lightbox Anypage Module es un complemento de terceros que crea ventanas emergentes desde cualquier página, construida con cualquier tipo de contenido, desde cualquier dominio. Cree páginas con Divi Builder , abra imágenes individuales o abra cualquier página web externa. Cualquier cosa, como texto, botones o imágenes, se puede usar como disparador, o puede configurarlo para que se abra según el tiempo o el porcentaje de la página web a la que se ha desplazado el visitante.
En este punto destacado del complemento Divi, echaré un vistazo al módulo Divi Lightbox Anypage de los constructores frontend y backend, y veré cómo se ven las ventanas emergentes en los dispositivos móviles y dentro de Extra. Estoy probando Divi Lightbox Anypage Module versión 1.9 con Divi 3.2 y WordPress 4.9 .5.
Se agrega un nuevo módulo a Divi Builder llamado Anypage Lightbox.
La pestaña Contenido incluye un mensaje para ignorar las pestañas Diseño y Avanzado. La configuración de Lightbox incluye ID de Lightbox (utilizado como una clase para etiquetas HTML para crear botones, etc.), tipo de contenido (cualquier página, imagen, misma página de dominio; veremos un ejemplo de cada uno), enlace de página emergente (la URL del página que desea mostrar en la ventana emergente) y la configuración de fondo.
Auto Trigger determina cuándo se muestra la ventana emergente. Incluye la página abierta al cargar, el porcentaje aleatorio de carga de la página (activa el cuadro de luz en función del porcentaje de probabilidad), la intención de salida, el porcentaje de desplazamiento de la página o un tiempo específico después de la carga de la página. Limitar a mostrar una vez le permite establecer la cantidad de días que caducará la cookie.
Ejemplo de Divi Lightbox Anypage – Mismo dominio
Mismo dominio abre cualquier página del mismo sitio web. La ventaja de esto es que puedes construir las páginas usando Divi Builder. También puede abrir páginas HTML estándar. Para este ejemplo, quiero agregar un cuestionario emergente al paquete de diseño de Business Consultant. Quiero que se abra cuando alguien haga clic en el botón Comenzar.
Primero, necesito crear la página que mostrará la ventana emergente. Estoy creando un formulario de contacto con algunas preguntas de muestra. Estoy usando una plantilla de página en blanco para crear esta página. Si uso una plantilla estándar, incluiría los menús de navegación en la ventana emergente. El uso de la plantilla de página en blanco creará una ventana emergente más limpia.
Estoy usando el estilo del paquete de diseño Business Consultant. Usaré el enlace para esta página en la configuración de Lightbox Anypage.
Agregué un módulo Anypage Lightbox al diseño (sucedió que tenía un lugar abierto conveniente al lado del módulo CTA, pero no importa dónde se coloque dentro del diseño). Le asigné una ID llamada questionpopup, cambié el Tipo de contenido a Mismo dominio y agregué la URL para la página del cuestionario.
Puedo hacer que cualquier elemento de la página sea un disparador, incluidas imágenes, botones, texto, etc. Quiero que la ventana emergente se active cuando alguien haga clic en Comenzar en el módulo Llamado a la acción. Abrí la pestaña Avanzado del módulo CTA e ingresé el ID de Lightbox en el campo Clase CSS. Usé un hashtag para la URL del botón. De esta manera, el botón se mostrará pero no se vinculará a nada diferente a la ventana emergente.
Esto abre la ventana emergente y muestra el formulario que creé anteriormente. Este es el estilo predeterminado. El botón de cerrar es blanco, por lo que no está visible en este momento. Quiero agregar algo de estilo al módulo.
He hecho que el fondo del módulo sea negro. Dejé la opacidad predeterminada del 80%. Cambié el color de la sombra del cuadro del formulario a blanco. Para que se muestre el fondo, tuve que ir a la sección del formulario y hacer que el fondo sea transparente. Además, puedo cambiar la posición del botón de salida pero no el color ni el tamaño. Sin embargo, puedo crear el mío propio.
Agregué un botón sobre el formulario, lo alineé a la derecha, diseñé los colores para que coincidieran con el diseño y agregué el cuadro de luz de cierre de Clase CSS.
El botón de cerrar ahora se agrega a la ventana emergente y se elimina el ícono de salida original. En lugar de un botón podría usar una imagen, texto, icono, etc.
Ejemplo de Divi Lightbox Anypage – Imagen
La opción Imagen le permite mostrar una imagen de su biblioteca de medios como ventana emergente. Para este, utilicé el paquete de diseño Author. Agregué un módulo Anypage Lightbox, creé una ID de Lightbox, elegí Imagen como Tipo de contenido y agregué la imagen que quiero que se abra en la ventana emergente.
Agregué el ID de Lightbox al campo Clase CSS de la imagen del libro.
La imagen se abrió al primer intento. Dado que este no abre una página, no puedo crear mi propio botón de cierre. Sin embargo, las mismas características de estilo están disponibles, por lo que puedo cambiar el fondo y el tamaño si lo deseo.
Ejemplo de Divi Lightbox Anypage – Anypage
Anypage le permite ingresar cualquier URL que desee y la ventana emergente muestra esa página web. Para este ejemplo, estoy usando el paquete de diseño de gestión de aprendizaje. Copié el CTA y creé un mensaje sobre el uso de Divi y agregué el botón que abrirá la página de Divi en una ventana emergente. Le di al botón la clase CSS que voy a usar como ID de la ventana emergente.
Agregué el módulo Anypage Lightbox, le di la ID de Lightbox, seleccioné Anypage, ingresé la URL y configuré el color de fondo.
Ahora abre la página Divi en el sitio web de Elegant Themes en la ventana emergente cuando se hace clic en el botón. Por supuesto, podríamos hacer la ventana emergente más grande o más pequeña si quisiéramos. Al igual que el ejemplo de la imagen, no puede crear su propio botón de salida, pero este botón es más grande que los otros dos modos. Me gusta que esto abrirá cualquier página. No he probado los enlaces de afiliados para las URL. Me interesaría saber si los enlaces de afiliado se realizaron.
Uso de Divi Lightbox Anypage en dispositivos móviles
Aquí está la ventana emergente en el iPhone X en modo horizontal.
Aquí hay un vistazo a la página en modo vertical.
Aquí hay un Nexus 10 en modo vertical.
Aquí hay un iPad Mini en modo horizontal.
Usando Divi Lightbox Anypage con Extra
Aquí está el ejemplo de Anypage con Extra . No vi diferencias al usar Lightbox Anypage con Divi o Extra.
Licencia y Documentación
El módulo Divi Lightbox Anypage cuesta $ 35 e incluye actualizaciones de por vida y uso ilimitado.
La documentación se proporciona en el sitio web del desarrollador e incluye un video corto.
pensamientos finales
En general, encontré Divi Lightbox Anypage Module fácil de usar. Me tomó algunos intentos averiguar por qué los fondos no se mostraban cuando usaba el mismo dominio. Terminé haciendo transparente el fondo de la sección. Los otros dos modos funcionaron como se esperaba, lo cual tiene sentido porque no se muestran de la misma manera. Los botones no querían abrir la ventana emergente al principio, pero una vez que seleccioné abrir en la misma ventana, funcionaron siempre.
Las animaciones de carga y los ajustes de fondo brindan muchas opciones de diseño. Los activadores le brindan muchas opciones sobre cómo se usa la ventana emergente. Me gusta especialmente que puedas desactivar la ventana emergente si alguien tiene la cookie de tu sitio web. De esta forma, no molestará a los visitantes habituales con una oferta que ya han aceptado o que ya han decidido que no quieren.
Creo que los controles de color y tamaño deberían estar en la pestaña Diseño solo por coherencia. Además, me gustaría ver personalizaciones para el botón de salida. Me gusta la capacidad de crear el tuyo usando cualquier elemento con Divi Builder, pero eso es solo cuando estás usando el mismo dominio.
Las ventanas emergentes que cargan archivos desde su sitio web se cargan con AJAX. Se cargan rápido y sin problemas. Divi Lightbox Anypage se puede usar para mucho más de lo que he mostrado aquí, como formularios de registro de correo electrónico, video incrustado, mapas con direcciones, galerías, carteras, etc. Si está interesado en crear ventanas emergentes con Divi, este complemento es vale la pena considerarlo.
Queremos escuchar de ti. ¿Has probado el módulo Divi Lightbox Anypage? Háganos saber acerca de su experiencia en los comentarios a continuación.
Imagen destacada a través de Gal Csilla / shutterstock.com