---
url: "/de/bannerify/export/preview.md"
description: "Bannerify legt deinen Banner-Exporten als .zip eine HTML-Vorschauseite bei – ideal, um Kunden oder Stakeholdern im Team alle Banner auf einmal zu zeigen."
---

# Die Vorschauseite deiner exportierten HTML-Banner anpassen

> Bannerify legt deinen Banner-Exporten als .zip eine HTML-Vorschauseite bei – ideal, um Kunden oder Stakeholdern im Team alle Banner auf einmal zu zeigen.

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

Wenn du HTML-Banner exportierst, fügt Bannerify automatisch eine HTML-Vorschauseite hinzu. Diese Datei lädt alle exportierten Banner auf derselben Seite und ordnet sie in einem Raster an, sodass du sie alle gleichzeitig siehst.

Standardmäßig ist der Schalter **Generate Preview Page** im Panel mit den HTML-Exporteinstellungen aktiviert. Wenn keine Vorschauseite erzeugt und deinem `.zip`-Paket hinzugefügt werden soll, kannst du diesen Schalter bei Bedarf ausschalten.

## Titel der Vorschauseite {#preview-page-title}

Der Name deines **Figma-Dokuments** wird als ``-Tag der exportierten HTML-Vorschauseite von Bannerify verwendet.

## Reihenfolge der Banner auf der Vorschauseite {#preview-page-banner-order}

Die Banner erscheinen auf der Vorschauseite in derselben Reihenfolge wie die Banner-Frames im Ebenen-Panel von Figma.

## Ein Layout für die Vorschauseite wählen {#selecting-a-layout-for-your-preview-page}

Mit der Auswahlbox **preview page layout** legst du fest, in welchem Raster-Stil deine Banner auf der erzeugten Vorschauseite `index.html` angeordnet werden. Um das zu ändern, wählst du in der Auswahlbox eine andere Option.

### Masonry-Raster {#masonry-layout-grid}

Der Layout-Modus Masonry ermittelt automatisch die beste Anordnung für alle deine Banner. Das ist eine gute Wahl für ein großes Banner-Set.

### Zentriertes Raster {#centered-layout-grid}

Der zentrierte Layout-Modus richtet alle Banner vertikal aus und zentriert sie horizontal. Das ist eine gute Wahl für kleinere Banner-Sets.

## „Dark Mode“ auf der Vorschauseite aktivieren {#enabling-dark-mode-on-your-preview-page}

Wenn du die Einstellung **Use Dark Mode** aktivierst, erhält die erzeugte Vorschauseite `index.html` ein dunkles Theme bzw. einen dunklen Hintergrund. Aktiviere diese Einstellung, wenn deine Banner-Designs vor einem dunkleren Hintergrund besser wirken.

## Einen Header mit deinem Branding zur Vorschauseite hinzufügen {#adding-a-branded-header-to-your-preview-page}

Wenn du deine Vorschauseite `index.html` Kunden oder externen Stakeholdern zeigst, kannst du eigenes HTML und CSS hinzufügen, um die Seite mit deinem Branding oder einem eigenen Header zu versehen. Jedes HTML, das du hinzufügst, wird

### Eigenes HTML {#custom-html}

Code im Feld **Custom HTML** wird direkt nach dem ``-Tag in die erzeugte Seite `index.html` eingefügt. Hier kannst du alles Mögliche hinzufügen, zum Beispiel einen eigenen Header oder ganz einfach ein ``-Tag mit dem Logo deines Unternehmens.

### Eigenes CSS {#custom-css}

Code im Feld **Custom CSS** wird in ein eigenes `style`-Tag auf der Seite `index.html` eingefügt (du musst in deiner Eingabe also kein eigenes `style`-Tag hinzufügen). Damit kannst du das **Custom HTML** gestalten, das du hinzugefügt hast.

## Die Vorschauseite online teilen {#sharing-your-preview-page-online}

Die exportierte `.zip` von Bannerify enthält im Stammverzeichnis eine `index.html`-Datei, die alle exportierten Banner anzeigt. Du kannst dieses Paket entweder über eine der integrierten Schnittstellen direkt aus Bannerify hochladen oder es manuell bei einem Static-Hosting-Dienst hochladen.

### Schneller manueller Upload mit Tiiny Host {#quick-manual-upload-with-tiiny-host}

Für eine schnelle Lösung per Drag-and-drop kannst du die [exportierte Bannerify-`.zip` manuell bei Tiiny Host hochladen](/de/bannerify/export/tiiny-host). Das Paket enthält bereits die nötige `index.html` im Stammverzeichnis, du musst die exportierten Dateien also vorher nicht neu anordnen.

### Integrierte Direkt-Uploads {#built-in-direct-uploads}

Aktiviere im HTML-Export-Panel von Bannerify **Upload Preview Page** und wähle dann einen dieser Hosting-Anbieter:

- **[Netlify](/de/bannerify/export/netlify)** lädt das Vorschaupaket auf eine Netlify-Website hoch.
- **[Cloudflare Pages](/de/bannerify/export/cloudflare-pages)** nutzt ein Cloudflare-API-Token, eine Konto-ID und den Namen eines Pages-Projekts. Bannerify legt das Pages-Projekt automatisch an, falls es noch nicht existiert.
- **[Vercel](/de/bannerify/export/vercel)** nutzt ein Vercel-Zugriffstoken und einen Projektnamen, optional mit einer Team ID. Jeder Export erstellt eine neue URL für ein Preview-Deployment.

Cloudflare Pages bietet einen kostenlosen Plan für statische Websites, für den die aktuellen [Pages-Limits](https://developers.cloudflare.com/pages/platform/limits/) gelten. Auch Vercel hat mit Hobby einen kostenlosen Plan, beschränkt Hobby-Konten aber auf die private, nicht kommerzielle Nutzung; für geschäftliche Projekte und Teamarbeit brauchst du einen passenden kostenpflichtigen Plan.

Für eigene Automatisierungen stehen weiterhin Zapier und Make zur Verfügung. Diese Integrationen senden die exportierte `.zip` an deinen Webhook. Wenn du eine öffentliche Vorschau-URL zurückbekommen willst, braucht dein Zap oder dein Make-Szenario also noch einen nachgelagerten Static-Hosting-Dienst.

### Die Vorschau mit Commentful nutzen {#using-the-preview-with-commentful}

Review-Links von Commentful zeigen derzeit Figma-Frames an und betten keine externe Live-Vorschau in HTML ein. Teile für die Qualitätssicherung deshalb die gehostete Vorschau-URL von Bannerify für Prüfungen von Animation und Interaktion zusammen mit einem Review-Link von Commentful für Kommentare und Freigaben auf Basis der Frames.