WebflowEinbettenFlipbookWebdesignAgenturen

Webflow-Flipbook-Einbettung

Setze mit einem einzigen HTML-Embed-Element ein umblätterbares Flipbook in eine Webflow-Site. Lade das PDF hoch, kopiere den Codeschnipsel, setze ihn in ein Wrapper-Div und passe ihn bei jedem Breakpoint an wie alles andere im Projekt. Das Dokument liest sich auf der Seite selbst, statt heruntergeladen zu werden, und behält deine Schriftskala und deine Farben um sich herum. Gemacht für Designerinnen und Agenturen, die das gesamte Frontend besitzen. Kostenlos nutzbar, ohne Wasserzeichen, ohne Abonnement, das man beim Start übergeben muss, und ohne Marke, die man einer Kundin erklären muss.

Digitale Broschüre für einen Sportwagen als Flipbook aufgeschlagen auf der Titelseite

Ein Flipbook in Webflow einbetten, Schritt für Schritt

1

Das PDF hochladen und gestalten

Lade das exportierte PDF bei Flipbooks AI hoch. Stelle das Umblättern ein, füge das Logo hinzu, passe die Farben der Bedienelemente an die Projektpalette an und füge alle Links hinzu, die die Seiten brauchen. Die Vorschau zeigt genau, was eine Besucherin lesen wird.

2

Den Embed Codeschnipsel kopieren

Öffne die Freigabeoptionen und kopiere den Codeschnipsel. Es ist ein kurzer HTML-Block, weit innerhalb des Zeichenlimits, das ein Webflow-Embed-Element akzeptiert, und nichts darin musst du von Hand bearbeiten.

3

Platzieren und den Wrapper anpassen

Füge ein HTML-Embed in einen Div-Block ein, füge den Codeschnipsel ein und gib dem Wrapper eine Klasse mit maximaler Breite und Höhe. Prüfe es in der Vorschau, passe die Höhe bei Tablet und Mobil an, dann veröffentliche.

So bettest du ein Flipbook mit Code in Webflow ein

So bettest du ein Flipbook mit Code in Webflow ein

Beginne mit dem PDF, das das Design bereits erzeugt hat. Lade es bei Flipbooks AI hoch, und sofort erscheint eine interaktive Vorschau, sodass du das Dokument so lesen kannst, wie es eine Besucherin tun wird, bevor es ins Projekt kommt. Wähle den Umblätterstil, füge ein Logo hinzu, setze die Farben der Bedienelemente aus deiner Palette und füge Links innerhalb der Seiten hinzu. Entscheide, ob das Flipbook öffentlich oder passwortgeschützt ist. Öffne dann die Freigabeoptionen und kopiere den Embed-Codeschnipsel. Es ist ein kurzer HTML-Block, weit unter dem Limit von fünfzigtausend Zeichen, das ein Embed-Element akzeptiert, und du musst ihn nie von Hand bearbeiten.

Was ist eine Webflow-Flipbook-Einbettung?

Eine Webflow-Flipbook-Einbettung ist ein gehosteter Umblätter-Reader, der über ein HTML-Embed-Element in dein eigenes Layout eingesetzt wird. Du lädst ein PDF bei Flipbooks AI hoch, es hostet den Reader und gibt dir einen kurzen Codeschnipsel. Diesen fügst du in ein Embed-Element ein, umgibst ihn mit einem gestaltbaren Div, und von da an lebt das Dokument in deinen Sektionen, mit deiner Navigation darüber und deinem Footer darunter. Lesende bewegen sich durch die Doppelseiten, ohne die Seite zu verlassen, und die Datei berührt nie deine Webflow-Assets, sodass ein hundertseitiger Katalog nicht im Projekt liegt und jede Veröffentlichung ausbremst.

Was ist eine Webflow-Flipbook-Einbettung?
Was ist eine Webflow-Flipbook-Einbettung?
Was ist eine Webflow-Flipbook-Einbettung?
Was ist eine Webflow-Flipbook-Einbettung?

Wo das HTML-Embed-Element hingehört

Füge im Designer über das Add-Panel ein HTML-Embed hinzu und setze es in einen Div-Block, statt es direkt in eine Sektion fallen zu lassen. Füge den Codeschnipsel in den Code-Editor ein und speichere. Gib dem Wrapper eine Klasse, damit die Größe in deinem Stylesheet lebt statt am Element, und setze den Wrapper in einen normalen Inhaltscontainer, damit er den Abstand erbt, den der Rest der Seite nutzt. Genau diese eine Gewohnheit macht den Unterschied zwischen einem Embed, das ein Redesign übersteht, und einem, das bei jeder Änderung der Sektion drumherum neu positioniert werden muss.

Wo das HTML-Embed-Element hingehört

Vertraut von Fortune-500-Unternehmen

Den Wrapper für ein sauberes Layout einrichten

Den Wrapper für ein sauberes Layout einrichten

Gib dem Wrapper eine Klasse wie embed-wrapper, setze die Breite auf hundert Prozent, füge eine maximale Breite hinzu, die zu deiner Inhaltsspalte passt, und zentriere ihn mit automatischen Rändern. Die Höhe ist der einzige Wert, den der Reader nicht für dich entscheiden kann, also setze einen, der zur Seitenform passt: ein Querformat-Katalog will einen breiten, flacheren Rahmen und ein Hochformat-Heft einen höheren. Halte die Werte in der Klasse statt am Element, dann übernimmt jedes zweite Flipbook auf der Site dieselbe Größe. Füge etwas vertikalen Abstand um den Wrapper hinzu, damit das Buch nicht mit der Sektion darüber kämpft.

Warum ein Embed besser ist als eine verlinkte PDF-Datei
Warum ein Embed besser ist als eine verlinkte PDF-Datei
Warum ein Embed besser ist als eine verlinkte PDF-Datei
Warum ein Embed besser ist als eine verlinkte PDF-Datei

Warum ein Embed besser ist als eine verlinkte PDF-Datei

Das PDF in die Webflow-Assets hochzuladen und zu verlinken geht schnell, und genau dort hört das Dokument auf, Teil der Site zu sein. Der Browser übergibt die Datei an einen Viewer mit eigener Oberfläche, die Schrift ist nicht deine, die Navigation ist weg, und auf iOS kehrt ein guter Teil der Lesenden nie zurück. Ein eingebetteter Reader hält die Besucherin im von dir gebauten Layout, lässt die Links innerhalb der Seiten weiter funktionieren und meldet zurück, wie weit die Leute gekommen sind. Wenn eine Kundin fragt, was die Fallstudienseite gebracht hat, gibt eine verlinkte Datei dir nichts zu sagen. Das Embed liefert Lesedaten Seite für Seite.

Die Höhe über die Breakpoints hinweg einstellen

Bei der Höhe geht bei den meisten Embeds etwas schief, und Webflow macht es leicht zu beheben, weil geerbte Werte nach unten durchgereicht werden. Setze zuerst die Basishöhe, dann gehe zu Tablet und verringere sie, dann zu Mobil quer und Mobil hoch. Viewport-Einheiten funktionieren hier gut: eine Höhe in vh hält den Reader proportional zum Bildschirm statt zu einer Zahl, die du an einem großen Monitor gewählt hast. Prüfe jeden Breakpoint in der Vorschau, statt der Arbeitsfläche zu vertrauen, und achte besonders auf den kleinsten, denn dort wird eine Doppelseite unlesbar und der Einzelseitenmodus verdient seinen Platz.

Die Höhe über die Breakpoints hinweg einstellen

Alternativen zur Webflow-Flipbook-Einbettung

Issuu

Issuu

  • Kostenlos & Unbegrenzt
  • Keine Wasserzeichen
  • Einzeiliges Embed
  • Responsiver Reader
  • Für Mobilgeräte geeignet
  • Anklickbare Links
  • Schnelles Laden
  • Passwortschutz
  • Sofortige Aktualisierungen
  • Reader-Analysen
Flipbooks AI

Flipbooks AI

  • Kostenlos & Unbegrenzt
  • Keine Wasserzeichen
  • Einzeiliges Embed
  • Responsiver Reader
  • Für Mobilgeräte geeignet
  • Anklickbare Links
  • Schnelles Laden
  • Passwortschutz
  • Sofortige Aktualisierungen
  • Reader-Analysen
Heyzine

Heyzine

  • Kostenlos & Unbegrenzt
  • Keine Wasserzeichen
  • Einzeiliges Embed
  • Responsiver Reader
  • Für Mobilgeräte geeignet
  • Anklickbare Links
  • Schnelles Laden
  • Passwortschutz
  • Sofortige Aktualisierungen
  • Reader-Analysen
Publuu

Publuu

  • Kostenlos & Unbegrenzt
  • Keine Wasserzeichen
  • Einzeiliges Embed
  • Responsiver Reader
  • Für Mobilgeräte geeignet
  • Anklickbare Links
  • Schnelles Laden
  • Passwortschutz
  • Sofortige Aktualisierungen
  • Reader-Analysen
Warum die Designer-Arbeitsfläche einen Platzhalter zeigt

Warum die Designer-Arbeitsfläche einen Platzhalter zeigt

Webflow führt keinen benutzerdefinierten Code auf der Arbeitsfläche aus, deshalb zeigt ein Embed-Element während des Gestaltens einen Platzhalter statt des Flipbooks. Das ist erwartet und kein Fehler im Codeschnipsel. Nutze die Vorschau, um es dargestellt zu sehen, und veröffentliche auf einer Staging-Domain, wenn du es auf einem echten Telefon testen willst. Das ist die eine Gewohnheit, die sich am meisten vom Einbetten bei Squarespace oder Wix unterscheidet, wo der Block direkt im Editor vorschaut. In Webflow gestaltest du den Wrapper blind und bestätigst ihn in der Vorschau, weshalb das Setzen der Größe auf einer Klasse statt am Element so viel Hin und Her spart.

Funktionen, die zu einer Webflow-Site passen

Der Reader ist responsiv innerhalb jedes Containers, den du ihm gibst, sodass ein Wrapper mit maximaler Breite und einem sinnvollen Seitenverhältnis meistens das einzige CSS ist, das er braucht. Du kannst den Umblätterstil einstellen, ein Logo hinzufügen und die Farben der Bedienelemente an die bereits im Projekt vorhandenen Farbmuster anpassen. Innerhalb der Seiten kannst du anklickbare Links zu einer CMS-gesteuerten Produktseite, einem Buchungsformular oder einer E-Mail-Adresse setzen, einen kurzen Film einbetten und ein Inhaltsverzeichnis für ein langes Dokument hinzufügen. Nichts trägt ein Wasserzeichen und nichts hat eine Obergrenze, sodass ein fünfzehnseitiger Markenleitfaden und ein zweihundertseitiger Katalog sich gleich verhalten.

Funktionen, die zu einer Webflow-Site passen
Funktionen, die zu einer Webflow-Site passen
Funktionen, die zu einer Webflow-Site passen
Funktionen, die zu einer Webflow-Site passen

Benutzerdefinierter Code braucht einen bezahlten Site-Tarif

Das solltest du wissen, bevor du ein Datum versprichst. Webflow veröffentlicht benutzerdefinierten Code, einschließlich allem, was in einem HTML-Embed-Element steckt, nur auf Sites mit einem bezahlten Site-Tarif. Auf der kostenlosen Staging-Domain erscheint das Embed gar nicht, was genau wie ein kaputter Codeschnipsel aussieht, wenn man die Regel nicht kennt. Am Flipbook ändert sich nichts: derselbe Codeschnipsel funktioniert, sobald der Site-Tarif aktiv ist. Wenn eine Kundin sich noch nicht entschieden hat, verlinke in der Zwischenzeit über eine Schaltfläche auf das gehostete Flipbook und tausche sie später gegen das Embed.

Benutzerdefinierter Code braucht einen bezahlten Site-Tarif
Flipbooks über das Webflow-CMS steuern

Flipbooks über das Webflow-CMS steuern

Bei einer Site mit vielen Dokumenten setzt du den Flipbook-Link in ein einfaches Textfeld der Collection, statt für jede Seite einen Codeschnipsel fest einzubauen. Innerhalb eines Embed-Elements auf einer Collection-Seite oder in einer Collection-Liste kannst du dieses Feld in den Code einfügen, sodass jeder Eintrag seinen eigenen Reader zeigt, ohne zusätzliche Gestaltungsarbeit. Ein Magazin bekommt eine Ausgaben-Vorlage, die jede alte Ausgabe abdeckt. Eine Immobiliensite bekommt eine Einheiten-Vorlage, die jede Broschüre abdeckt. Ein Dokument hinzuzufügen wird zu einem CMS-Eintrag, und ab diesem Punkt kann eine Kundin den Bereich wirklich selbst betreiben.

Gut für Studios, Agenturen und Freiberufler
Gut für Studios, Agenturen und Freiberufler
Gut für Studios, Agenturen und Freiberufler
Gut für Studios, Agenturen und Freiberufler

Gut für Studios, Agenturen und Freiberufler

Das richtet sich an Menschen, die von Webflow-Sites leben. Ein Markenstudio bettet das Richtliniendokument ein, statt einen Download-Link zu verschicken. Eine Agentur bettet ein Leistungsangebot auf der Servicesseite ein und meldet, wer es gelesen hat. Eine Immobilienentwicklerin bettet je Einheit eine Broschüre ein. Ein Magazin bettet jede Ausgabe auf einer CMS-Vorlagenseite ein. Eine Recruiting-Site bettet das Handbuch zu den Vorteilen ein. Die Arbeit ist in jedem Fall gleich: ein Codeschnipsel, ein Wrapper, eine Klasse, und ein Dokument, das sich wie Teil des Designsystems verhält, statt wie ein Anhang, der hintangesetzt wurde.

Den Reader an deinen Styleguide anpassen

Ein Embed, das das Designsystem ignoriert, ist das Erste, was einer Designerin auffällt. Setze den Hintergrund hinter den Seiten auf eine Farbe aus deiner Palette, passe die Farben der Bedienelemente an deine Schaltflächen an, füge das Kundenlogo hinzu, und wähle einen Navigationsstil, der zum Rest der Oberfläche passt. Halte es auf einer typografischen Site zurückhaltend und lass die Farbe auf einer kräftigeren Site wirken. Mehrere Sprachen werden unterstützt, sodass eine Marke mit zwei Märkten auf jeder Sprachseite eine lokalisierte Version einbetten und das umgebende Layout identisch halten kann.

Den Reader an deinen Styleguide anpassen

Wer Flipbooks in Webflow einbettet

2456+

Webdesignerinnen

6

Designagenturen

13

Freiberufler

24

Markenstudios

65

Marketingteams

9

Verlage

Interaktive Elemente innerhalb der Seiten

Interaktive Elemente innerhalb der Seiten

Sobald der Reader auf der Seite ist, kann das Dokument Dinge tun, die die gedruckte Version nie konnte. Verlinke ein Produktfoto mit seinem CMS-Eintrag, setze einen Buchungslink auf eine Serviceseite, packe eine E-Mail-Adresse auf die Rückseite oder bette einen kurzen Film in eine Seite ein. Ein Inhaltsverzeichnis lässt jemanden zum gewünschten Abschnitt springen, und die Suche hilft in einem langen Katalog. Das sind die Details, die entscheiden, ob eine Besucherin die letzte Seite erreicht oder bei der dritten geht, und sie kosten nichts extra, sobald die Datei hochgeladen ist.

Responsiv bei jedem Webflow-Breakpoint

Webflow gibt dir einen Basis-Breakpoint plus Tablet, Mobil quer und Mobil hoch, dazu jeden breiteren Breakpoint, den du darüber angelegt hast. Der Reader ist flüssig innerhalb seines Containers, deshalb liegt die Arbeit im Wrapper und nicht im Embed. Setze eine maximale Breite und eine Höhe am Basis-Breakpoint, prüfe dann Tablet und beide mobilen Breiten und passe die Höhe an, wo eine Doppelseite eng wird. Auf schmalen Bildschirmen ist der Wechsel des Flipbooks in den Einzelseitenmodus meist besser als das Schrumpfen einer Doppelseite. Zoomen mit zwei Fingern funktioniert, Wischen funktioniert, und niemand muss etwas installieren.

Responsiv bei jedem Webflow-Breakpoint
Responsiv bei jedem Webflow-Breakpoint
Responsiv bei jedem Webflow-Breakpoint
Responsiv bei jedem Webflow-Breakpoint

Seitengeschwindigkeit und der eingebettete Reader

Webflow-Projekte tragen meist schon Webfonts, Interaktionen und viele Bilder, deshalb bekommt alles Schwere die Schuld an der ganzen Seite. Der Reader ist separat gehostet und lädt in seinem eigenen Rahmen, deshalb fügt er deinen Webflow-Assets keine Megabyte hinzu und bremst den Rest der Seite nicht. Seiten werden sorgfältig komprimiert, die erste Doppelseite erscheint schnell, und der Rest lädt still dahinter nach. Auf einem Telefon mit schwachem Signal ist das der Unterschied zwischen einem gelesenen Dokument und einer Besucherin, die zurück zu den Suchergebnissen geht.

Seitengeschwindigkeit und der eingebettete Reader
SEO rund um ein eingebettetes Dokument

SEO rund um ein eingebettetes Dokument

Sei realistisch, was ein Embed für die Suche bringt: Der Reader ist ein Rahmen, also behandle die Seite drumherum als das, was tatsächlich indexiert wird. Gib der Seite eine ordentliche Überschrift, eine kurze Einleitung, eine Zusammenfassung dessen, was das Dokument abdeckt, und ein oder zwei Absätze echten Text mit den Wörtern, nach denen Menschen tatsächlich suchen. Fülle Seitentitel und Meta-Beschreibung in den Seiteneinstellungen aus, statt die Vorgaben zu lassen. So gemacht, gibt eine eingebettete Broschüre einer dünnen Seite echten Inhalt und einen Grund für eine Besucherin zu bleiben, und genau das können Suchmaschinen sehen.

Ein kostenloses Embed, das du einer Kundin übergeben kannst
Ein kostenloses Embed, das du einer Kundin übergeben kannst
Ein kostenloses Embed, das du einer Kundin übergeben kannst
Ein kostenloses Embed, das du einer Kundin übergeben kannst

Ein kostenloses Embed, das du einer Kundin übergeben kannst

Flipbooks AI ist vollständig kostenlos, und die Dinge, die man sonst in einem Angebot rechtfertigen müsste, sind enthalten: kein Wasserzeichen über den Doppelseiten, keine Seitenobergrenze, keine Begrenzung, wie viele Reader du auf einer Site einbettest, und keine Kosten für Passwortschutz oder Analysen. Das zählt am meisten bei der Übergabe. Eine Kundin, die gerade einen Webflow-Site-Tarif abgeschlossen hat, will kein zweites Abonnement an einer einzigen Seite ihrer Site hängen haben, und du willst nicht diejenige sein, die das Werkzeug ausgewählt hat, das im siebten Monat zu nerven anfängt. Bauen, übergeben, nichts läuft ab.

Passt zu den Werkzeugen in deinem Design-Stack

Nichts Neues kommt in den Arbeitsablauf. Exportiere das PDF aus Figma, Adobe InDesign, Affinity Publisher, Canva oder Google Präsentationen und lade es so hoch, wie es ist. Verlinke aus den Seiten heraus zu einer Webflow-CMS-Seite, einer Calendly-Buchung, einem Typeform, einem Shopify-Produkt oder einer Newsletter-Anmeldung. Setze denselben Codeschnipsel in ein zweites Webflow-Projekt, eine Kunden-Site auf einer anderen Plattform oder eine ganz woanders gebaute Landingpage. Das Flipbook ist eine gehostete Seite mit Link und Codeschnipsel, deshalb fügt es sich in jeden Arbeitsablauf, den das Studio schon nutzt.

Passt zu den Werkzeugen in deinem Design-Stack

Was Designerinnen über die Webflow-Flipbook-Einbettung sagen

Wir bauen Webflow-Sites für Konsummarken, und das Lookbook war immer eine verlinkte Datei, die niemand messen konnte. Ein Embed-Element innerhalb einer Wrapper-Klasse hat das gelöst. Der Reader erbt den Container, die Kundin ändert das PDF selbst, und endlich hat der Monatsbericht eine Zahl im Abschnitt Dokumente.

Marketingteam
Marketingteam

Produktkataloge

Der CMS-Trick hat mich überzeugt. Ich habe den Flipbook-Link in ein Textfeld der Ausgaben-Collection gesetzt und in das Embed auf der Vorlage eingefügt. Zwölf alte Ausgaben werden jetzt von einer Seite aus dargestellt, und die Redakteurin fügt eine neue hinzu, ohne je den Designer zu öffnen oder mich um einen Gefallen zu bitten.

Studiobesitzerin
Studiobesitzerin

Kunden-Lookbooks

Ich habe einmal einen Nachmittag verloren, weil ich mich fragte, warum das Embed auf der Staging-Domain leer war, bevor ich verstand, dass Webflow benutzerdefinierten Code ohne Site-Tarif nicht veröffentlicht. Sobald der Tarif aktiv war, erschien es sofort. Gut zu wissen, bevor man einen Build vorführt, und hat nichts mit dem Codeschnipsel selbst zu tun.

Schulsekretariat
Schulsekretariat

Newsletter und Programme

Als Freiberufler ist ein Gespräch über etwas mit monatlicher Gebühr eines, das ich lieber nicht führe. Das hier hat keinen Tarif und kein Wasserzeichen, deshalb sitzt der Markenleitfaden auf der Studioseite und sieht wie Teil des Designsystems aus, und es gibt nichts, was die Kundin in sechs Monaten erneuern müsste.

Unabhängige Designerin
Unabhängige Designerin

Portfolio-Flipbooks

Private Flipbooks für die Prüfung durch die Kundin

Private Flipbooks für die Prüfung durch die Kundin

Nicht jedes Dokument sollte öffentlich sein, solange noch darüber diskutiert wird. Veröffentliche es mit Passwortschutz, und nur die Personen, denen du das Passwort schickst, können es öffnen, was eine saubere Art ist, eine unveröffentlichte Kollektion, ein Pitch-Dokument oder eine Preisliste für den Fachhandel zu teilen. Du kannst außerdem das Herunterladen abschalten, damit die Seiten im Reader bleiben, statt als Datei zu reisen. Sobald es abgenommen ist, entfernst du das Passwort, und derselbe Link wird zum öffentlichen, ohne erneutes Hochladen und ohne neuen Codeschnipsel.

Dasselbe Flipbook auch außerhalb der Site teilen

Das Embed ist eine Oberfläche, nicht die einzige. Jedes Flipbook hat auch einen einfachen gehosteten Link, sodass dasselbe Dokument in einen Newsletter, ein Angebot, eine Direktnachricht oder eine Instagram-Bio kann, ohne noch einmal etwas zu exportieren. Drucke einen QR-Code für einen Messestand oder ein gedrucktes Faltblatt, und er öffnet dasselbe Buch. Setze den Reader auf eine zweite Seite, auf eine Kampagnen-Landingpage oder auf eine ganz woanders gebaute Site. Weil eine Datei dahintersteckt, korrigiert eine Seite zu ändern alle Zugänge dazu auf einmal, was bei einer laufenden Kampagne Zeit spart.

Dasselbe Flipbook auch außerhalb der Site teilen
Dasselbe Flipbook auch außerhalb der Site teilen
Dasselbe Flipbook auch außerhalb der Site teilen
Dasselbe Flipbook auch außerhalb der Site teilen

Ein Archiv vergangener Ausgaben aufbauen

Jedes veröffentlichte Flipbook bleibt live, sodass eine Site ein echtes Archiv trägt statt eines Ordners voller Downloads. Behalte jede Ausgabe des Magazins, jeden Quartalsbericht, jeden saisonalen Katalog, jeweils mit eigenem Link, und liste sie aus einer CMS-Collection auf, sodass sich die Archivseite von selbst baut. Besucherinnen blättern durch die vergangene Arbeit, und das Studio hat eine Aufzeichnung davon, was wann veröffentlicht wurde. Eine beliebte Ausgabe erneut zu starten bedeutet, ein Flipbook zu duplizieren und ein paar Seiten zu ändern, statt es aus der Ursprungsdatei neu aufzubauen.

Ein Archiv vergangener Ausgaben aufbauen

Wege ein Flipbook zu veröffentlichen im Vergleich

AnwendungBewertungUnbegrenzte CreditsNutzungsbewertungBeschreibung
10/10Ja1

Flipbooks AI gibt dir einen Codeschnipsel, der in ein HTML-Embed-Element passt, einen Reader, der flüssig in deinem Wrapper ist, anklickbare Links zu deinen CMS-Seiten, Passwortschutz und Lesedaten pro Seite, alles kostenlos und unbegrenzt. Gebaut, um einer Kundin ohne angehängtes Abonnement übergeben zu werden.

FlipHTML5

5.2/10Nein2

FlipHTML5 wandelt schon lange PDFs in Flipbooks um, und seine Effektbibliothek ist umfangreich, was zu Leuten passt, die den Reader selbst feinjustieren wollen. Der kostenlose Tarif versieht deine Seiten mit Marke und hält die Statistiken zurück, sodass ein Kundenprojekt meist auf einem bezahlten Tarif landet.

Issuu

7.1/10Nein3

Issuu ist eine Publishing-Plattform mit einem Reader, den die meisten schon kennen, und einem eigenen Publikum, was für ein Magazin ein echter Vorteil ist. Der kostenlose Tarif umgibt dein Dokument mit Issuu-Marke und begrenzt Uploads, sodass ein sauberes Embed innerhalb einer gestalteten Site normalerweise Zahlen bedeutet.

Heyzine

8.3/10Nein4

Heyzine ist schnell und angenehm in der Nutzung und erzeugt aus einem PDF mit fast keiner Konfiguration ein gut aussehendes Buch. Der kostenlose Tarif begrenzt, wie viele Bücher du behältst, und setzt ein eigenes Zeichen, und die Gestaltungskontrolle, die ein Designsystem braucht, steckt in den bezahlten Tarifen.

Publuu

6.4/10Nein5

Publuu ist gut gebaut, mit sauberer Hotspot-Verlinkung und nützlichem Tracking. Die Teile, die bei einem Kundenprojekt zählen, besonders detaillierte Statistiken und längere Dokumente, gehören zu einem bezahlten Tarif, deshalb ist es schwer, sie für einen Build zu spezifizieren, bei dem niemand laufende Kosten will.

Flipsnack

7.8/10Nein6

Flipsnack ist ebenso ein fähiger Editor wie ein Konverter, und Seiten darin zu gestalten kann für ein Team ohne InDesign-Lizenz passen. Kostenlose Nutzung ist begrenzt, und die Marke zu entfernen und die Analysen zu öffnen bedeutet eine monatliche Gebühr, die man rechtfertigen muss.

Webflow Lightbox

6.9/10Nein7

Die native Lightbox ist zuverlässig, leichtgewichtig und schon im Projekt vorhanden, was viel zählt. Sie zeigt Bilder oder Video in einer Überlagerung statt eines Dokuments, deshalb gibt es keine Doppelseite, kein Umblättern, keine anklickbare Seite und nichts, was zurückmeldet, was gelesen wurde.

Selbst gehostetes PDF.js

8.1/10Nein8

Einen eigenen Viewer mit PDF.js zu bauen gibt volle Kontrolle und keine dritte Partei im Stack, was manche Teams brauchen. Es bedeutet auch, die Datei zu hosten, die Viewer-Oberfläche zu schreiben, sie zu pflegen und jede Analyse selbst zu bauen, was ein Projekt ist und kein Nachmittag.

Google Drive Vorschau

6.5/10Nein9

Eine Drive-Vorschau ist kostenlos, sofort verfügbar und braucht keine Kontoarbeit auf deiner Seite. Der Rahmen trägt die Google-Oberfläche um deine Seiten, die Typografie ist nicht deine, und eine Besucherin in ein fremdes Produkt zu setzen macht die Sorgfalt zunichte, mit der der Rest der Seite gebaut wurde.

Direkter PDF-Link

7.6/10Nein10

Die Datei direkt aus Webflow zu verlinken ist die schnellste Option und kostet nichts. Es übergibt die Besucherin auch an einen Browser-Viewer, fügt deinem Projekt Dateigewicht hinzu, sieht auf jedem Gerät anders aus und meldet nichts darüber, ob jemand über das Deckblatt hinausgelesen hat.

Aktualisierungen durch die Kundin ohne Designerin

Aktualisierungen durch die Kundin ohne Designerin

Das beste Ergebnis für beide Seiten ist eine Kundin, die ihr eigenes Dokument korrigieren kann. Sobald das Embed-Element eingerichtet ist, ändert sich der Codeschnipsel nie wieder. Sie lädt ein überarbeitetes PDF hoch, veröffentlicht das Flipbook, und die Seite zeigt die neue Version, ohne dass jemand den Designer öffnet. Ein korrigierter Preis, ein eingestellter Artikel, eine neue Adresse auf der Rückseite: nichts davon wird zu einem Ticket. Für ein Studio mit einem laufenden Vertrag entfällt damit eine Kategorie kleiner Jobs, die nie eine Rechnung wert waren und immer schnell erledigt werden mussten.

Lesedaten, die du in einen Bericht setzen kannst
Lesedaten, die du in einen Bericht setzen kannst
Lesedaten, die du in einen Bericht setzen kannst
Lesedaten, die du in einen Bericht setzen kannst

Lesedaten, die du in einen Bericht setzen kannst

Ein gehostetes PDF sagt dir, dass eine Datei angefragt wurde, und nichts weiter. Flipbooks AI zeigt Öffnungen, verbrachte Zeit pro Seite und die Seite, an der Lesende aufhören umzublättern. Das macht aus einer Designentscheidung ein Argument, das man vorbringen kann: die Fallstudien gehören vor die Teamseite, die Preisliste verliert Leute auf Seite drei, auf der letzten Doppelseite sollte der Anfragelink stehen. Für eine Agentur, die einen Monatsbericht schreibt, war das früher Vermutung. Für eine Freiberuflerin ist es der Beweis, dass die Seite, für die sie berechnet hat, etwas bewirkt.

Ein Embed, das einen Site-Umbau übersteht

Dokumente überleben Layouts. Wenn die Site in zwei Jahren neu gestaltet wird, sind der Flipbook-Link und der Codeschnipsel noch gültig, deshalb wandert der Reader mit Kopieren und Einfügen ins neue Template statt mit einer Migration. Der Reader selbst basiert auf aktuellen Webstandards und wird gepflegt, während sich Browser ändern, deshalb verfällt nichts zur grauen Box, die alte Viewer auf so vielen Sites hinterlassen haben. Alles ist gehostet, deshalb gibt es keine Abhängigkeit im Projekt zu aktualisieren und nichts im Webflow-Build, das still aufhören kann zu funktionieren.

Ein Embed, das einen Site-Umbau übersteht

Häufig gestellte Fragen
Webflow-Flipbook-Einbettung

Was ist eine Webflow-Flipbook-Einbettung?

Es ist ein gehosteter Umblätter-Reader, der über ein HTML-Embed-Element in dein Webflow-Layout gesetzt wird. Flipbooks AI hostet das Dokument kostenlos, sodass Besucherinnen einen Katalog oder eine Broschüre innerhalb deiner eigenen Seite lesen, statt eine Datei aus deinen Assets herunterzuladen.

Warum zeigt sich das Flipbook nicht im Designer?

Webflow führt keinen benutzerdefinierten Code auf der Arbeitsfläche aus, deshalb zeigt ein Embed-Element während des Gestaltens einen Platzhalter. Nutze die Vorschau, um es dargestellt zu sehen, und veröffentliche auf einer Staging-Domain, um es auf einem echten Gerät zu testen. Der Codeschnipsel ist in Ordnung, die Arbeitsfläche führt ihn einfach nicht aus.

Brauche ich einen bezahlten Webflow Site-Tarif, um es zu veröffentlichen?

Ja, für das Embed. Webflow veröffentlicht benutzerdefinierten Code nur auf Sites mit einem bezahlten Site-Tarif, deshalb erscheint der Reader auf einer kostenlosen Staging-Domain nicht. Bis der Tarif aktiv ist, verlinke über eine Schaltfläche auf das gehostete Flipbook und tausche es später aus.

Ist Flipbooks AI für Kundenprojekte wirklich kostenlos?

Ja. Es ist vollständig kostenlos, ohne Wasserzeichen, ohne Seitenlimit und ohne Obergrenze, wie viele Reader du einbettest. Anpassung, Passwortschutz, Freigabe und Analysen sind alle enthalten, sodass bei der Übergabe nichts Neues auf der Kundenrechnung auftaucht.

Kann ich Flipbooks über das Webflow-CMS steuern?

Ja. Speichere den Flipbook-Link in einem einfachen Textfeld der Collection und füge dieses Feld in das Embed-Element auf der Collection-Seite ein. Jeder Eintrag zeigt dann seinen eigenen Reader, sodass eine neue Ausgabe oder Broschüre hinzuzufügen ein CMS-Eintrag ist statt eines Designjobs.

Wie sollte ich die Höhe über die Breakpoints hinweg einstellen?

Setze die Größe auf die Wrapper-Klasse, nicht auf das Element. Setze eine Basishöhe, verringere sie dann bei Tablet und beiden mobilen Breakpoints. Viewport-Einheiten halten den Reader proportional zum Bildschirm, und der Einzelseitenmodus liest sich auf einem Telefon besser als eine geschrumpfte Doppelseite.

Kann die Kundin das PDF ohne Designerin aktualisieren?

Ja. Der Codeschnipsel ändert sich nie. Sie lädt ein überarbeitetes PDF hoch, veröffentlicht das Flipbook, und der eingebettete Reader zeigt sofort die neue Version, ohne dass jemand den Designer öffnet oder die Webflow-Site erneut veröffentlicht.

Welche Lesedaten liefert das Embed zurück?

Du bekommst Öffnungen, verbrachte Zeit auf jeder Seite und die Seite, an der Lesende aufhören umzublättern. Das reicht, um zu sagen, welche Doppelseite Leute verliert und wo eine Handlungsaufforderung hingehört, was mehr ist, als eine verlinkte PDF-Datei je gemeldet hat.

Noch mehr Fragen?

Wenn du noch Fragen hast oder mehr über unsere Funktionen, Grenzen und Nutzung erfahren möchtest, besuche gerne unsere vollständige FAQ-Seite.