Lorsque vous exportez des bannières HTML, Bannerify inclut automatiquement une page d’aperçu HTML. Ce fichier charge toutes vos bannières exportées sur une même page et les dispose en grille pour que vous puissiez les voir toutes en même temps.
Par défaut, l’option Generate Preview Page est activée dans le panneau de réglages de l’export HTML. Si vous préférez ne pas générer de page d’aperçu ni l’ajouter à votre paquet .zip, vous pouvez désactiver cette option.
Titre de la page d’aperçu
Le nom de votre document Figma sert de balise <title></title> à la page d’aperçu HTML exportée par Bannerify.
Ordre des bannières dans la page d’aperçu
L’ordre de vos frames de bannière dans le panneau des calques de Figma détermine l’ordre des bannières dans la page d’aperçu.
Choisir une mise en page pour la page d’aperçu
L’option choisie dans la liste déroulante preview page layout définit le style de grille utilisé pour placer vos bannières dans la page d’aperçu index.html générée. Pour la modifier, sélectionnez une autre option dans la liste.
Grille en mosaïque
Le mode de mise en page en mosaïque (masonry) détermine automatiquement la meilleure disposition pour faire tenir toutes vos bannières. C’est une bonne option pour un grand ensemble de bannières.
Grille centrée
Le mode de mise en page centré aligne verticalement et centre horizontalement toutes les bannières. C’est une bonne option pour les petits ensembles de bannières.
Activer le « mode sombre » sur votre page d’aperçu
Le réglage Use Dark Mode applique un thème et un fond sombres à la page d’aperçu index.html générée. Activez-le si vos bannières ressortent mieux sur un fond sombre.
Ajouter un en-tête à votre image de marque sur la page d’aperçu
Si vous montrez votre page d’aperçu index.html à des clients ou à des parties prenantes externes, vous pouvez ajouter du HTML et du CSS personnalisés pour appliquer votre propre image de marque ou un en-tête personnalisé à la page. Tout le HTML que vous ajoutez sera
HTML personnalisé
Tout code ajouté dans le champ Custom HTML est injecté directement après la balise <body></body> dans la page index.html générée. Vous pouvez y ajouter ce que vous voulez, comme un en-tête personnalisé, ou simplement une balise <img> pointant vers le logo de votre entreprise.
CSS personnalisé
Tout code ajouté dans le champ Custom CSS est injecté dans une balise style dédiée de la page index.html (inutile donc d’ajouter votre propre balise style). Vous pouvez l’utiliser pour styliser le Custom HTML que vous avez ajouté.
Partager votre page d’aperçu en ligne
Le fichier .zip exporté par Bannerify contient à sa racine un fichier index.html qui affiche toutes les bannières exportées. Vous pouvez mettre en ligne ce paquet depuis Bannerify avec l’une des intégrations intégrées, ou le mettre en ligne manuellement sur un service d’hébergement statique.
Mise en ligne manuelle rapide avec Tiiny Host
Pour une solution rapide par glisser-déposer, vous pouvez mettre en ligne manuellement le .zip exporté par Bannerify sur Tiiny Host. Le paquet contient déjà le fichier index.html requis à la racine : vous n’avez donc pas besoin de réorganiser d’abord les fichiers exportés.
Mises en ligne directes intégrées
Activez Upload Preview Page dans le panneau d’export HTML de Bannerify, puis sélectionnez l’un de ces hébergeurs :
- Netlify met en ligne le paquet d’aperçu sur un site Netlify.
- Cloudflare Pages utilise un jeton d’API Cloudflare, un ID de compte et un nom de projet Pages. Bannerify crée automatiquement le projet Pages s’il n’existe pas encore.
- Vercel utilise un jeton d’accès Vercel et un nom de projet, avec un Team ID facultatif. Chaque export crée une nouvelle URL de déploiement d’aperçu.
Cloudflare Pages propose une offre gratuite pour les sites statiques, dans le respect de ses limites Pages actuelles. Vercel propose aussi une offre Hobby gratuite, mais la réserve à un usage personnel et non commercial ; le travail professionnel et en équipe nécessite une offre payante éligible.
Zapier et Make restent disponibles pour les automatisations personnalisées. Ces intégrations envoient le .zip exporté à votre webhook : votre Zap ou votre scénario Make doit donc toujours s’appuyer sur un hébergeur statique en aval si vous voulez qu’il renvoie une URL d’aperçu publique.
Utiliser l’aperçu avec Commentful
Les liens de revue Commentful affichent pour l’instant des frames Figma et n’intègrent pas d’aperçu HTML externe en direct. Pour la recette, partagez l’URL d’aperçu Bannerify hébergée pour vérifier les animations et les interactions, en parallèle d’un lien de revue Commentful pour les commentaires et les validations sur les frames.