Cuando exportas cualquier banner HTML, Bannerify incluye automáticamente una página de vista previa HTML. Este archivo carga todos tus banners exportados en la misma página y los distribuye en una cuadrícula para que puedas verlos todos a la vez.
De forma predeterminada, el interruptor Generate Preview Page está activado en el panel de ajustes de exportación HTML, pero si prefieres que no se genere una página de vista previa ni se añada a tu paquete .zip, puedes desactivar este interruptor si lo necesitas.
Título de la página de vista previa
El nombre de tu documento de Figma se usará como etiqueta <title></title> de la página de vista previa HTML que exporta Bannerify.
Orden de los banners en la página de vista previa
Los banners se ordenan en la página de vista previa según el orden de sus frames en el panel de capas de Figma.
Elegir un diseño para tu página de vista previa
La opción que elijas en el selector diseño de la página de vista previa define el estilo de cuadrícula con el que se colocan tus banners en la página de vista previa index.html generada. Puedes cambiarlo seleccionando otra opción en el selector.
Cuadrícula de diseño masonry
El modo de diseño masonry calcula automáticamente la mejor distribución para que quepan todos tus banners. Puede ser una buena opción para un conjunto grande de banners.
Cuadrícula de diseño centrado
El modo de diseño centrado alinea verticalmente y centra en horizontal todos los banners. Puede ser una buena opción para conjuntos de banners más pequeños.
Activar el "modo oscuro" en tu página de vista previa
Si activas el ajuste Use Dark Mode, la página de vista previa index.html generada tendrá un tema o fondo oscuro. Puedes activar este ajuste si tus diseños de banner quedan mejor sobre un fondo más oscuro.
Añadir una cabecera con tu marca a la página de vista previa
Si vas a enseñar tu página de vista previa index.html a clientes o a stakeholders externos, puedes añadir HTML y CSS personalizados para aplicar tu propia marca o una cabecera personalizada a la página.
HTML personalizado
Todo el código que añadas en el campo Custom HTML se inyectará justo después de la etiqueta <body></body> en la página index.html generada. Puedes añadir cualquier cosa, como una cabecera personalizada o algo tan sencillo como una etiqueta <img> que enlace al logotipo de tu empresa.
CSS personalizado
Todo el código que añadas en el campo Custom CSS se inyectará en una etiqueta style personalizada de la página index.html (así que no hace falta que añadas tu propia etiqueta style). Puedes usarlo para dar estilo al Custom HTML que hayas añadido.
Compartir tu página de vista previa en línea
El .zip que exporta Bannerify incluye en la raíz un archivo index.html que muestra todos los banners exportados. Puedes subir este paquete desde Bannerify con una de las integraciones incorporadas o subirlo a mano a un servicio de alojamiento estático.
Subida manual rápida con Tiiny Host
Si quieres una opción rápida de arrastrar y soltar, puedes subir a mano el .zip exportado de Bannerify a Tiiny Host. El paquete ya contiene el index.html necesario en la raíz, así que no tienes que reorganizar antes los archivos exportados.
Subidas directas incorporadas
Activa Upload Preview Page en el panel de exportación HTML de Bannerify y selecciona uno de estos proveedores de alojamiento:
- Netlify sube el paquete de vista previa a un sitio de Netlify.
- Cloudflare Pages usa un token de API de Cloudflare, un ID de cuenta y el nombre de un proyecto de Pages. Bannerify crea el proyecto de Pages automáticamente si todavía no existe.
- Vercel usa un token de acceso de Vercel y el nombre de un proyecto, con un Team ID opcional. Cada exportación crea una nueva URL de despliegue de vista previa.
Cloudflare Pages tiene un plan gratuito para sitios estáticos, sujeto a sus límites de Pages actuales. Vercel también tiene un plan Hobby gratuito, pero Vercel limita las cuentas Hobby al uso personal y no comercial; el trabajo para empresas y equipos requiere un plan de pago que cumpla los requisitos.
Zapier y Make siguen disponibles para automatizaciones personalizadas. Esas integraciones envían el .zip exportado a tu webhook, así que tu Zap o tu escenario de Make sigue necesitando un alojamiento estático posterior si quieres que devuelva una URL de vista previa pública.
Usar la vista previa con Commentful
Por ahora, los enlaces de revisión de Commentful muestran frames de Figma en lugar de incrustar una vista previa HTML externa en directo. Para el control de calidad, comparte la URL de vista previa alojada de Bannerify para revisar la animación y la interacción, junto con un enlace de revisión de Commentful para los comentarios y aprobaciones sobre los frames.