Schritt-für-Schritt-Anleitung, wie du mit dem Webflow-Code-Embed-Element ein Flipbook auf jeder Seite platzierst. Mit iFrame-Code, Größenregeln, responsiven Einstellungen, häufigen Fehlern und einem Vergleich der Einbettungsmethoden, damit dein PDF auf jedem Bildschirm scharf aussieht.
Du hast ein sauberes PDF, eine Webflow-Website, die genau so aussieht, wie du sie willst, und eine lästige Lücke dazwischen. Ein Download-Link wirkt flach, und ein Haufen statischer Bilder wirkt unbeholfen. Die sauberste Art, diese Lücke zu schließen, ist das Code-Embed-Element. Damit setzt du mit wenigen Zeilen HTML ein Flipbook mit Seitenumblättern direkt auf jede Webflow-Seite. Erstelle das Flipbook mit Flipbooks AI, kopiere den Einbettungscode, füge ihn ein und veröffentliche. Das ist die ganze Idee. Der Rest dieses Artikels geht jedes Detail durch, damit dich am Starttag nichts überrascht.
Webflow ist großartig bei Layout, Interaktionen und CMS-Inhalten. Was es nativ nicht kann, ist ein mehrseitiges Dokument so darzustellen, wie Leser es erwarten: mit Seitenumblättern, Zoom, Inhaltsverzeichnis und Teilen-Button. Dafür springt ein Flipbook ein.
Ein Besucher landet auf deiner Seite, sieht eine buchähnliche Publikation und blättert mit einem Klick, einer Wischbewegung oder einem Druck auf die Pfeiltaste durch. Es gibt keinen Download, kein PDF-Viewer-Plugin und kein Warten, bis eine 40-MB-Datei fertig geladen ist. Für Kataloge, Lookbooks, Geschäftsberichte und Restaurantkarten fühlt sich das deutlich näher am gedruckten Original an.
Du behältst das Dokument in deinem eigenen Design. Dein Header, dein Footer und deine Analyse-Skripte bleiben um das Flipbook herum erhalten. Und weil das Flipbook unter einer eigenen gehosteten URL liegt, kannst du das PDF später aktualisieren, ohne den Webflow Designer erneut anzufassen.
💡 Profi-Tipp: Behandle das Flipbook wie jeden anderen Abschnitt der Seite. Gib ihm eine Überschrift, einen kurzen Einleitungsabsatz und darunter einen Call to Action. Ein nacktes Embed ohne Kontext wird öfter übersprungen, als du erwarten würdest.
| Anwendungsfall | Typische Seite | Warum ein Flipbook hilft |
|---|---|---|
| Produktkatalog | Shop- oder Ressourcenseite | Besucher stöbern, ohne die Website zu verlassen |
| Restaurantkarte | Seite mit der Karte | Mobilfreundlich, leicht saisonal zu aktualisieren |
| Portfolio | Arbeiten- oder Fallstudienseite | Behält den visuellen Rhythmus des Originallayouts |
| Geschäftsbericht | Investoren- oder Über-uns-Seite | Auf jedem Gerät lesbar, kein Download nötig |
| Lookbook | Landingpage einer Kollektion | Fühlt sich an wie echtes Umblättern |
Das Code-Embed-Element ist eine Webflow-Komponente, die du im Add-Panel unter Components findest. Es nimmt rohes HTML, CSS und JavaScript entgegen und zeigt das Ergebnis auf der veröffentlichten Seite an. Im Designer siehst du meist nur einen Platzhalter, deshalb brauchst du zur Vorschau eine Veröffentlichung oder den Vorschaumodus.
Diese beiden werden oft verwechselt. Das Code-Embed-Element sitzt an einer genau bestimmten Stelle in deinem Layout. Custom Code in den Seiten- oder Website-Einstellungen fügt Skripte in den Head oder vor dem schließenden Body-Tag ein und hat keine sichtbare Position. Ein Flipbook ist sichtbarer Inhalt, also brauchst du das Element.
Webflow begrenzt jedes Code-Embed auf 50.000 Zeichen. Ein iFrame umfasst etwa 300 Zeichen, das Limit spielt hier also nie eine Rolle. Es wird nur relevant, wenn du versuchst, ein ganzes eingebettetes Dokument einzufügen, und das solltest du nicht tun.
Code Embed ist in allen Webflow-Site-Tarifen verfügbar, auch im kostenlosen Starter-Tarif für Testumgebungen. Die Veröffentlichung auf einer eigenen Domain erfordert einen kostenpflichtigen Site-Tarif. Das Embed selbst funktioniert auf der Staging-Subdomain aber genauso, du kannst also testen, bevor du dich festlegst.
Bevor du Webflow öffnest, erstelle das Flipbook selbst. Das dauert ein paar Minuten, und die Qualität der Quelldatei ist wichtiger als jede Embed-Einstellung.
Exportiere dein PDF in der endgültigen Seitengröße, mit Bildern in einer sinnvollen Auflösung. Ein Export mit 150 dpi reicht für Bildschirme und hält die Ladezeiten kurz. Prüfe, ob die Schriften eingebettet sind und keine Seite einen ungewollten Rand hat.
✅ Bewährte Methode: Passe den Hintergrund des Flipbooks an den Hintergrund deines Webflow-Abschnitts an. Der Betrachter verschmilzt dann mit der Seite, statt wie eine Box zu wirken, die oben draufgesetzt wurde.
Viele Konverter drucken ein Logo in die Ecke jeder Seite. Flipbooks AI fügt nie ein Wasserzeichen hinzu, was viel ausmacht, wenn das Flipbook auf der Website eines Kunden oder einem gebrandeten Shop liegt. Unter Tarife siehst du, wie unbegrenzte Flipbooks und Passwortschutz zu jedem Tarif passen.
Hier ist der komplette Ablauf in Webflow. Lass den Designer in einem Tab offen und das Freigabe-Panel deines Flipbooks in einem anderen.
Füge deinen Einbettungscode ein. Ein typisches iFrame sieht so aus:
<iframe
src="https://your-flipbook-url-here"
width="100%"
height="700"
frameborder="0"
allowfullscreen
loading="lazy"
title="Product catalog flipbook">
</iframe>
Ersetze das src durch den genauen Link aus deinem Freigabe-Panel. Klicke auf Save & Close.
Veröffentliche zuerst auf deiner Staging-Domain. Öffne die Seite auf einem Laptop und dann auf einem Telefon. Klicke ein paar Seiten durch, probiere den Vollbild-Button und prüfe, ob der Ton läuft, falls du Audio hinzugefügt hast.
⚠️ Warnung: Wenn das Embed nach der Veröffentlichung nichts zeigt, liegt die Ursache fast immer an einem Tippfehler im
srcoder an einem iFrame, das durch eine Sicherheitseinstellung für Inhalte blockiert wird. Prüfe die Browser-Konsole, bevor du Webflow die Schuld gibst.
Ein iFrame weiß nicht, wie viel Platz auf der Seite noch frei ist. Du musst es ihm sagen, und du musst es bei jedem Breakpoint unterschiedlich sagen.
Eine Flipbook-Doppelseite ist breiter als hoch, deshalb funktioniert eine Höhe von 600 bis 750 Pixeln gut auf dem Desktop. Darüber entsteht viel leerer Raum oberhalb und unterhalb der Seiten.
Verwende immer width="100%" und lass den übergeordneten Container die tatsächliche Breite bestimmen. Setze den Container auf eine maximale Breite, etwa 1100 Pixel, damit der Text auf großen Monitoren gut lesbar bleibt.
Damit ein Flipbook sauber skaliert, umschließe das iFrame mit einem Div, das das Seitenverhältnis hält:
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://your-flipbook-url-here"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen
title="Flipbook">
</iframe>
</div>
Das padding-top von 56,25 % ergibt eine 16:9-Box, die auf Tablets und Telefonen sanft schrumpft. Bei Hochformat-Dokumenten wie Restaurantkarten probierst du stattdessen 75 % oder sogar 100 % aus.
| Breakpoint | Containerbreite | iFrame-Höhe | Hinweise |
|---|---|---|---|
| Desktop (1280+) | maximal 1100 px | 700 px | Zeigt die Doppelseite |
| Tablet (768 bis 991) | 90 % | 600 px | Doppelseite bleibt lesbar |
| Mobil quer | 100 % | 450 px | Oft greift hier die Einzelseitenansicht |
| Mobil hochkant | 100 % | 420 px | Füge darüber eine kurze Bildunterschrift hinzu |
💡 Wenn du den Seitenverhältnis-Wrapper verwendest, brauchst du für jeden Breakpoint keine eigene Höhe. Die Box skaliert von selbst.
Der Weg über das Code-Embed ist nicht der einzige, um ein Dokument auf einer Webflow-Seite zu zeigen. Hier siehst du, wie er gegenüber den gängigen Alternativen abschneidet.
| Methode | Seitenumblätter-Effekt | Mobilfreundlich | Ohne neue Veröffentlichung bearbeitbar | Analyse |
|---|---|---|---|---|
| Flipbook über Code Embed | Ja | Ja | Ja | Ja (Professional-Tarif) |
| Direkter PDF-Link | Nein | Je nach Gerät | Ja | Eingeschränkt |
| PDF-Viewer-iFrame | Nein | Gemischt | Ja | Eingeschränkt |
| Bilder in einem Slider | Teilweise | Ja | Nein | Eingeschränkt |
| Rich Text mit Bildern | Nein | Ja | Nein | Keine |
Wenn das Dokument eine einseitige Rechnung oder ein Datenblatt ist, das Leute ausdrucken, reicht ein einfacher Link. Bau nicht mehr als nötig.
Bei allem mit mehr als einer Handvoll Seiten, bei allem Visuellen und bei allem, was du verfolgen willst. Ein Katalog mit 60 Seiten in einem Slider ist mühsam zu bauen und mühsam zu pflegen. Ein Flipbook tauscht einfach ein neues PDF ein, und die Seite ist schon aktualisiert.
Das Muster im Kontext zu sehen, erleichtert die Planung des Aufbaus.
Ein kleiner Modeladen veröffentlicht ein saisonales Lookbook. Mit dem Lookbook-Flipbook-Ersteller lädt die Inhaberin jede Saison das neue PDF hoch. Die Webflow-Seite ändert sich nie, weil das Embed immer auf denselben Flipbook-Link zeigt. Die Aktualisierung dauert Minuten statt einer Designsitzung.
Ein Café hält seine Karte in einem Flipbook, das mit dem Restaurantkarten-Flipbook-Ersteller erstellt wurde. Die Preise ändern sich monatlich. Das Team tauscht die Datei aus, und die Karte auf der Website stimmt, bevor der Mittagsansturm beginnt.
Eine Freelancerin baut Kunden-Websites in Webflow und nutzt den Report-Flipbook-Ersteller für Quartalsübersichten. Jeder Kunde bekommt eine private Seite mit einem passwortgeschützten Flipbook. Die Freelancerin schickt einen Link statt eines Anhangs.
Mit dem Werkzeug Fotografie-Portfolio veröffentlicht eine Fotografin ein kuratiertes Buch mit ihren neuesten Shootings. Große Bilder bleiben scharf, und das Embed sitzt unter einer kurzen Biografie auf der Über-mich-Seite.
Die meisten Probleme sind klein und vorhersehbar. Geh diese Liste durch, bevor du irgendetwas neu schreibst.
src-URL allein in einem neuen Browser-Tab öffnet.Erhöhe die Höhe oder wechsle zum Seitenverhältnis-Wrapper. Abgeschnittene Seiten bedeuten fast immer, dass das iFrame kürzer ist, als der Betrachter braucht.
Browser blockieren das automatische Abspielen mit Ton. Besucher müssen zuerst einmal klicken. Füge in der Nähe des Embeds eine kurze Zeile hinzu, etwa "Drücke auf Play, um das Audio zu hören".
Füge dem iFrame loading="lazy" hinzu, damit es erst lädt, wenn der Besucher in seine Nähe scrollt. Platziere das Flipbook nach Möglichkeit unterhalb des ersten Bildschirms und halte den ersten Bildschirm der Seite leicht.
| Symptom | Wahrscheinliche Ursache | Lösung |
|---|---|---|
| Es wird nichts angezeigt | Tippfehler in src | Link erneut aus dem Freigabe-Panel kopieren |
| Graue Box im Designer | Normales Verhalten | Veröffentlichen und live ansehen |
| Seite scrollt innerhalb der Box | Höhe zu klein | Höhenwert erhöhen |
| Vollbild-Button fehlt | allowfullscreen entfernt | Attribut wieder hinzufügen |
| Langsame erste Darstellung | Embed lädt sofort | loading="lazy" hinzufügen |
Sobald die Grundlagen funktionieren, wirken kleine Feinheiten so, als wäre der Abschnitt bewusst gestaltet.
Schreibe eine Überschrift, ein oder zwei Sätze darüber, was drinsteckt, und einen Button für alle, die lieber herunterladen. Offline-Downloads gibt es als Option, du kannst also beide Wege anbieten.
Wenn du wissen willst, wie viele Leute das Flipbook öffnen und welche Seiten sie lesen, bietet der Professional-Tarif Analysen und Lead-Generierung. Vergleiche die Optionen auf der Preisseite. Für einen tieferen Blick auf genau diesen Aufbau siehe das Werkzeug Flipbook auf Website einbetten.
Sensibles Material wie Preislisten für Wiederverkäufer kann hinter einem Passwort liegen. Die Webflow-Seite bleibt öffentlich, und das Flipbook selbst fragt vor dem Öffnen nach dem Passwort.
✅ Abschluss-Checkliste: richtiger
src,width="100%", eine sinnvolle Höhe,allowfullscreen,loading="lazy", ein aussagekräftigertitleund ein Test auf einem echten Telefon.
Du hast jetzt alles, was du brauchst: ein sauberes PDF, ein Flipbook, ein iFrame und Größenregeln, die über alle Breakpoints hinweg halten. Der gesamte Ablauf dauert beim ersten Mal etwa fünfzehn Minuten und danach für jede Aktualisierung ein paar Minuten.
Bereit, eines zu erstellen? Kostenlos loslegen bei Flipbooks AI und dann alle verfügbaren Werkzeuge und Vorlagen durchstöbern, um das passende Layout für deine Inhalte zu finden. Wenn du Analysen, Passwörter und unbegrenzte Flipbooks willst, vergleiche die Preispläne und wähle, was zu deiner Website passt.
Wähle deine Sprache
