---
url: "/fr/bannerify/export/preview.md"
description: "Bannerify inclut une page d’aperçu HTML dans vos exports .zip de bannières, idéale pour partager toutes vos bannières avec un client ou un collègue."
---

# Personnaliser la page d’aperçu de vos bannières HTML exportées

> Bannerify inclut une page d’aperçu HTML dans vos exports .zip de bannières, idéale pour partager toutes vos bannières avec un client ou un collègue.

[Video](/assets/videos/bannerify/export/customize-preview-page.mp4)

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 {#preview-page-title}

Le nom de votre **document Figma** sert de balise `` à la page d’aperçu HTML exportée par Bannerify.

## Ordre des bannières dans la page d’aperçu {#preview-page-banner-order}

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 {#selecting-a-layout-for-your-preview-page}

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 {#masonry-layout-grid}

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 {#centered-layout-grid}

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 {#enabling-dark-mode-on-your-preview-page}

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 {#adding-a-branded-header-to-your-preview-page}

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é {#custom-html}

Tout code ajouté dans le champ **Custom HTML** est injecté directement après la balise `` 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 `` pointant vers le logo de votre entreprise.

### CSS personnalisé {#custom-css}

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 {#sharing-your-preview-page-online}

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 {#quick-manual-upload-with-tiiny-host}

Pour une solution rapide par glisser-déposer, vous pouvez [mettre en ligne manuellement le `.zip` exporté par Bannerify sur Tiiny Host](/fr/bannerify/export/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 {#built-in-direct-uploads}

Activez **Upload Preview Page** dans le panneau d’export HTML de Bannerify, puis sélectionnez l’un de ces hébergeurs :

- **[Netlify](/fr/bannerify/export/netlify)** met en ligne le paquet d’aperçu sur un site Netlify.
- **[Cloudflare Pages](/fr/bannerify/export/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](/fr/bannerify/export/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](https://developers.cloudflare.com/pages/platform/limits/) 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 {#using-the-preview-with-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.