--- url: "/es/bannerify/export/preview.md" description: "Bannerify incluye una página de vista previa HTML en el .zip exportado, ideal para compartir tus banners con un cliente o un stakeholder." --- # Personalizar la página de vista previa de tus banners HTML > Bannerify incluye una página de vista previa HTML en el .zip exportado, ideal para compartir tus banners con un cliente o un stakeholder. [Video](/assets/videos/bannerify/export/customize-preview-page.mp4) 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 {#preview-page-title} El nombre de tu **documento de Figma** se usará como etiqueta `` de la página de vista previa HTML que exporta Bannerify. ## Orden de los banners en la página de vista previa {#preview-page-banner-order} 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 {#selecting-a-layout-for-your-preview-page} 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 {#masonry-layout-grid} 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 {#centered-layout-grid} 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 {#enabling-dark-mode-on-your-preview-page} 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 {#adding-a-branded-header-to-your-preview-page} 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 {#custom-html} Todo el código que añadas en el campo **Custom HTML** se inyectará justo después de la etiqueta `` en la página `index.html` generada. Puedes añadir cualquier cosa, como una cabecera personalizada o algo tan sencillo como una etiqueta `` que enlace al logotipo de tu empresa. ### CSS personalizado {#custom-css} 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 {#sharing-your-preview-page-online} 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 {#quick-manual-upload-with-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](/es/bannerify/export/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 {#built-in-direct-uploads} Activa **Upload Preview Page** en el panel de exportación HTML de Bannerify y selecciona uno de estos proveedores de alojamiento: - **[Netlify](/es/bannerify/export/netlify)** sube el paquete de vista previa a un sitio de Netlify. - **[Cloudflare Pages](/es/bannerify/export/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](/es/bannerify/export/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](https://developers.cloudflare.com/pages/platform/limits/) 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 {#using-the-preview-with-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.