Verwandle ein statisches PDF in ein Flipbook zum Umblättern und platziere es auf jeder Elementor-Seite in WordPress. Dieses Tutorial zeigt dir die Umwandlung, den Einbettungscode, das HTML-Widget, die responsive Größenanpassung, den Passwortschutz und Lösungen für die häufigsten Anzeigeprobleme.
Du hast in Elementor eine schöne Seite gebaut, aber dein Katalog, deine Broschüre oder dein Lookbook steckt immer noch hinter einem langweiligen Button „PDF herunterladen“. Die meisten Besucher klicken nie darauf. Ein Flipbook löst das, indem es das Dokument direkt auf der Seite zeigt, mit echtem Umblättern, Zoom und Unterstützung für mobile Geräte. Mit Flipbooks AI wandelst du ein PDF um und platzierst es in etwa zehn Minuten in Elementor, ohne ein einziges zusätzliches WordPress-Plugin zu installieren.
Dieses Tutorial zeigt die genauen Schritte: Datei vorbereiten, Flipbook erstellen, Einbettungscode kopieren, in Elementor einfügen und für Desktop-Computer, Tablet und Telefon in der Größe anpassen. Außerdem findest du einen Vergleich der drei Wege, ein Flipbook hinzuzufügen, eine Tabelle zur Fehlerbehebung und echte Beispiele für verschiedene Arten von Unternehmen.
Ein PDF-Link schickt Menschen von deiner Seite weg. Sie warten auf einen Download, öffnen einen separaten Betrachter, zoomen und scrollen auf dem Telefon und gehen oft wieder. Ein Flipbook hält die Leserin oder den Leser auf deiner Website und präsentiert den Inhalt so, wie sich eine gedruckte Publikation anfühlt.
Das ändert sich, wenn du umstellst:
💡 Profi-Tipp: Platziere das Flipbook im sofort sichtbaren Bereich von Seiten, die um ein einzelnes Dokument herum gebaut sind, etwa einer Katalog-Landingpage. Auf längeren Seiten setze es nach einer kurzen Einleitung, damit man weiß, was man gleich öffnet.
| Funktion | PDF-Download-Link | Flipbook-Einbettung |
|---|---|---|
| Öffnet sich auf deiner Seite | Nein | Ja |
| Umblättereffekt | Nein | Ja |
| Mobilfreundlich | Uneinheitlich | Ja, automatisch |
| Passwortschutz | Nicht standardmäßig | Ja |
| Lesestatistiken | Nein | Ja (Professional-Tarif) |
| Individuelles Branding | Nein | Ja |
Du brauchst keine Entwicklerkenntnisse. Stelle zuerst diese Dinge zusammen:
Eine saubere Quelldatei ergibt ein sauberes Flipbook. Prüfe vor dem Hochladen drei Dinge. Erstens: Exportiere in einer sinnvollen Auflösung. 150 DPI reichen für Bildschirme völlig und halten das Laden schnell. Zweitens: Achte darauf, dass alle Seiten dieselbe Größe haben, denn gemischte Größen führen zu seltsamen Abständen. Drittens: Halte die Datei angemessen schlank. Ist dein PDF größer als 50 MB, komprimiere die Bilder, bevor du es umwandelst.
⚠️ Warnung: Vermeide es, ein PDF mit winzigem Fließtext auf großen Seiten hochzuladen. Auf einem Telefon wird kleiner Text auch mit Zoom schwer lesbar. Strebe für den Fließtext eine Schriftgröße von mindestens 10 Punkt an.
Die Umwandlung ist der schnellste Teil. Der PDF-zu-Flipbook-Konverter erledigt sie mit wenigen Klicks.
Nimm dir hier ein paar Minuten Zeit, denn dein Flipbook wird auf der Seite deine Marke repräsentieren.
✅ Bewährte Praxis: Passe den Hintergrund des Flipbooks an den Hintergrund des Elementor-Abschnitts an, der es enthält. Die Einbettung wirkt dann wie ein Teil der Seite statt wie ein Kasten, der obendrauf gesetzt wurde.
Entscheide, bevor du etwas kopierst, wer die Publikation sehen darf. Öffentliche Flipbooks eignen sich ideal für Kataloge und Karten. Bei Preislisten oder Kundenangeboten aktivierst du den Passwortschutz. Direkte Links bleiben ebenfalls verfügbar, sodass du dasselbe Flipbook in E-Mails und Social-Media-Beiträgen teilen kannst.
Sobald das Flipbook richtig aussieht, öffne das Freigabemenü und wähle die Einbettungsoption. Du bekommst einen kurzen HTML-Code-Schnipsel, meist ein iframe. Kopiere ihn vollständig.
Das Tool Flipbook auf Website einbetten erklärt die Optionen genauer, einschließlich der Wahl zwischen fester und flexibler Größe.
| Größenoption | Ideal für | Verhalten |
|---|---|---|
| Feste Breite und Höhe | Schmale Seitenleisten, kleine Bereiche | Bleibt in der gleichen Pixelgröße |
| Flexible Breite, feste Höhe | Bereiche in voller Breite | Dehnt sich auf den Container aus |
| Flexibel mit Seitenverhältnis | Die meisten Seiten | Skaliert mit dem Bildschirm, behält die Form |
Für fast jedes Elementor-Layout wählst du die flexible Option mit festem Seitenverhältnis. Sie passt sich auf jedem Gerät sanft an.
Wechsle jetzt zu WordPress. Hier erwarten viele etwas Kompliziertes, dabei ist es nur ziehen und einfügen.
Das war's. Das Flipbook erscheint in der Editor-Vorschau und auf der veröffentlichten Seite.
💡 Profi-Tipp: Wenn deine Website Elementor Pro nutzt, kannst du dasselbe HTML-Widget auch in ein Popup, eine Vorlage oder ein Theme-Builder-Layout ziehen. So zeigst du das Flipbook in einer Lightbox, sobald jemand auf „Katalog ansehen“ klickt.
Du hast mehrere Möglichkeiten. So schneiden sie im Vergleich ab.
| Methode | Einrichtungszeit | Zusätzliches Plugin | Kontrolle über das Layout | Ideal für |
|---|---|---|---|---|
| HTML-Widget mit Einbettungscode | 5 Minuten | Nein | Hoch | Fast jede Website |
| WordPress-Shortcode-Block | 10 Minuten | Oft | Mittel | Websites mit einem Flipbook-Plugin |
| Direkter Link-Button | 2 Minuten | Nein | Gering | Nur für schnelles Teilen |
Das HTML-Widget gewinnt für die meisten Menschen. Es hält deine Website schlank, vermeidet Plugin-Konflikte und gibt dir volle Kontrolle über die Abstände.
Mehr als die Hälfte der Webaufrufe kommt von Telefonen, also teste, bevor du veröffentlichst. Elementor lässt dich unten im Editor zwischen den Ansichten für Desktop, Tablet und Telefon wechseln.
Wähle den Abschnitt mit dem HTML-Widget aus und stelle diese Werte ein:
Wirkt das Flipbook auf dem Telefon gedrängt, erhöhe die Mindesthöhe des Abschnitts, statt den Einbettungscode zu ändern. So bleibt der Code-Schnipsel sauber und lässt sich später leicht ersetzen.
Für einen kräftigen Effekt stellst du den Abschnitt auf Volle Breite ein und entfernst seinen Innenabstand. Das Flipbook spannt sich dann über den Bildschirm, was besonders gut für Magazine, Lookbooks und Jahresberichte funktioniert. Setze eine Überschrift und einen kurzen Satz darüber, damit die Seite trotzdem Orientierung gibt.
Unterschiedliche Unternehmen nutzen dieselbe Methode für ganz verschiedene Ziele.
Ein Cafébetreiber exportiert die Wochenkarte als PDF, lädt sie hoch und bindet sie auf einer einzigen Seite „Karte“ ein. Ändern sich die Preise, lädt der Betreiber das neue PDF hoch, und die Seite aktualisiert sich ohne Bearbeitung in Elementor. Der Restaurantkarten-Flipbook-Ersteller ist genau dafür gemacht.
Ein Laden veröffentlicht einen saisonalen Katalog mit anklickbaren Produktlinks. Kunden blättern durch, tippen auf einen Artikel und landen auf der Produktseite. Probiere den Produktkatalog-Generator für diesen Aufbau aus.
Kreative zeigen ihr Portfolio als Flipbook auf der Startseite statt in einem Galerie-Raster. Das Tool Fotografie-Portfolio hält große Bilder scharf, während die Seiten trotzdem schnell laden.
Makler binden auf jeder Objektseite eine Immobilienbroschüre ein. Hotels platzieren eine saisonale Broschüre auf der Buchungsseite. Beide können den Immobilienbroschüren-Ersteller oder den Hotel-Broschüren-Designer nutzen.
| Seitentyp | Dokument | Empfohlenes Tool |
|---|---|---|
| Karte | Restaurant- oder Spa-Karte | Restaurantkarten-Flipbook-Ersteller |
| Shop | Produktkatalog | Produktkatalog-Generator |
| Über uns | Jahresbericht | Jahresbericht-Ersteller |
| Portfolio | Foto- oder Designarbeiten | Portfolio-Flipbook-Ersteller |
| Blog | Magazin oder Newsletter | Magazin-Flipbook-Ersteller |
Öffentliche Seiten sind nicht der einzige Anwendungsfall. Viele Websites müssen einschränken, wer ein Dokument liest, und sie wollen wissen, wer es tatsächlich öffnet.
Aktiviere in den Flipbook-Einstellungen ein Passwort, bevor du den Einbettungscode kopierst. Besucher sehen dann im eingebetteten Bereich eine Passwortabfrage. Das ist nützlich für Großhandelspreislisten, Kundenangebote und Mitarbeiterhandbücher. Der Rest deiner Elementor-Seite bleibt öffentlich, sodass du das Angebot trotzdem erklären und den Leuten sagen kannst, wie sie Zugang anfragen.
Im Professional-Tarif siehst du, wie viele Personen dein Flipbook geöffnet haben, welche Seiten sie angesehen haben und wie lange sie geblieben sind. Du kannst auch Kontaktdaten erfassen, bevor eine Leserin oder ein Leser über die ersten Seiten hinauskommt. Vergleiche die Optionen auf der Preisseite, um den passenden Tarif zu wählen.
| Tarif-Funktion | Kostenlose Testversion | Standard | Professional |
|---|---|---|---|
| Keine Wasserzeichen | Ja | Ja | Ja |
| Unbegrenzte Flipbooks | Nein | Ja | Ja |
| Passwortschutz | Eingeschränkt | Ja | Ja |
| Lesestatistiken | Nein | Nein | Ja |
| Kontaktgewinnung | Nein | Nein | Ja |
| Offline-Downloads | Nein | Ja | Ja |
💡 Profi-Tipp: Frage nur bei Dokumenten mit echtem Wert nach einer E-Mail-Adresse, etwa einem Käuferbericht. Bei Karten und Broschüren lässt du das Lesen offen.
Die meisten Probleme haben einfache Ursachen. Nutze zuerst diese Tabelle.
| Problem | Wahrscheinliche Ursache | Lösung |
|---|---|---|
| Flipbook wird als leerer Bereich angezeigt | Code in ein Text-Editor-Widget eingefügt | In das HTML-Widget verschieben |
| Einbettung ist abgeschnitten | Containerbreite ist zu klein | Abschnitt auf Volle Breite stellen oder Inhaltsbreite erhöhen |
| Seite wirkt auf dem Telefon zu kurz | Feste Höhe im Einbettungscode | Auf flexible Größe mit Seitenverhältnis umstellen |
| Alte Version wird noch angezeigt | Browser- oder Website-Cache | WordPress-Cache leeren und neu laden |
| iframe wird beim Speichern entfernt | Sicherheits-Plugin blockiert iframes | Flipbook-Domain in den Plugin-Einstellungen erlauben |
| Seite lädt langsam | Mehrere Flipbooks auf einer Seite | Auf einer Seite nur eines behalten oder ein Popup verwenden |
Hast du das Flipbook geändert und die Seite zeigt noch das alte, liegt die Ursache fast immer am Caching. Leere den Cache in deinem Caching-Plugin, in Elementor unter Werkzeuge > CSS & Daten neu generieren und in deinem Browser. Lade danach neu.
Ein Flipbook ist im Vergleich zu reinem Text ein schweres Element. Setze es weiter unten auf Seiten, die schon viele Bilder enthalten, und vermeide es, mehrere Einbettungen dicht hintereinander zu setzen. Wenn du mehrere Dokumente zeigen willst, erstelle ein einfaches Raster aus Titelbildern und öffne jedes Flipbook auf einer eigenen Seite oder in einem Popup.
Geh diese Liste ein letztes Mal durch:
Ein Flipbook zu Elementor hinzuzufügen braucht einen Upload, einen kopierten Code-Schnipsel und ein HTML-Widget. Danach ist jede Aktualisierung so einfach wie das Ersetzen des PDFs.
Bereit, dein erstes Flipbook zu erstellen? Kostenlos loslegen bei Flipbooks AI. Durchsuche alle verfügbaren Tools und Vorlagen, um das passende Format für dein Dokument zu finden, oder vergleiche die Preistarife, um das Passende für dich zu wählen. Wenn du dich für einen Tarif entschieden hast, kannst du dich anmelden und direkt zu den Preisen gehen.
Wähle deine Sprache
