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
Der Name deines Figma-Dokuments wird als <title></title>-Tag der exportierten HTML-Vorschauseite von Bannerify verwendet.
Reihenfolge der Banner auf der Vorschauseite
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
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
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
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
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
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
Code im Feld Custom HTML wird direkt nach dem <body></body>-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 <img>-Tag mit dem Logo deines Unternehmens.
Eigenes 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
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
Für eine schnelle Lösung per Drag-and-drop kannst du die exportierte Bannerify-.zip manuell bei Tiiny Host hochladen. 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
Aktiviere im HTML-Export-Panel von Bannerify Upload Preview Page und wähle dann einen dieser Hosting-Anbieter:
- Netlify lädt das Vorschaupaket auf eine Netlify-Website hoch.
- 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 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 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
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.