Flipbook in WordPress einbetten

Warum ein Flipbook auf deiner WordPress-Website einbetten?

Statische PDFs hinter Download-Links werden deinem Inhalt nicht gerecht. Besucher klicken, warten, bis eine Datei heruntergeladen wird, öffnen sie in einer separaten App und — meistens — kommen nie zu deiner Website zurück. Das direkte Einbetten eines interaktiven Flipbooks auf deiner WordPress-Seite ändert das Spiel grundlegend.

Mit einem eingebetteten Flipbook erhalten deine Besucher ein reichhaltiges Umblättererlebnis, ohne jemals deine Website zu verlassen. Das bedeutet längere Sitzungszeiten, niedrigere Absprungraten und ein deutlich professionellerer Eindruck. Ob du einen Produktkatalog, eine Unternehmensbroschüre, ein Magazin oder ein Schulungshandbuch präsentierst — ein eingebettetes Flipbook hält Leser genau dort engagiert, wo du sie haben möchtest.

FlipLink macht das mühelos. Sobald du ein Flipbook aus deinem PDF erstellst, erhältst du einen gebrauchsfertigen Einbettungscode, der mit jedem WordPress-Theme, Pagebuilder oder Editor funktioniert. Keine Plugins erforderlich.

Falls du neu im Konvertieren von PDFs in Flipbooks bist, beginne mit unserer Anleitung zum Konvertieren eines PDF in ein Flipbook online und komme dann hierher zurück, um es einzubetten.

Einbettungscode von FlipLink abrufen

Bevor du WordPress berührst, brauchst du deinen Einbettungscode. So rufst du ihn ab:

1. Melde dich in deinem FlipLink-Dashboard unter go.fliplink.me an
2. Öffne das Flipbook, das du einbetten möchtest
3. Klicke auf den Teilen-Button
4. Wähle den Einbetten-Tab
5. Kopiere den bereitgestellten Iframe-Code

Dein Einbettungscode sieht etwa so aus:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Das ist alles, was du brauchst. FlipLink kümmert sich um die Freigabe und Verteilung — du musst diesen Code einfach in WordPress einfügen.

Methode 1: WordPress-Block-Editor (Gutenberg)

Der Block-Editor ist der Standard-WordPress-Editor und die einfachste Methode, um dein Flipbook einzubetten.

Schritt für Schritt

1. Öffne die Seite oder den Beitrag, auf der/dem du das Flipbook haben möchtest
2. Klicke auf den +-Button, um einen neuen Block hinzuzufügen
3. Suche nach Individuelles HTML und wähle es aus
4. Füge deinen FlipLink-Iframe-Einbettungscode in den Block ein
5. Klicke auf Vorschau, um zu prüfen, ob es korrekt aussieht
6. Klicke auf Veröffentlichen oder Aktualisieren

Das war's. Das Flipbook wird direkt auf deiner Seite mit voller Interaktivität gerendert — Seitenumblättern, Zoom, Vollbild und alles Weitere.

Profi-Tipp

Wenn du möchtest, dass das Flipbook zentriert mit etwas Abstand angezeigt wird, umschließe es mit einem Div:

<div style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Methode 2: Elementor

Elementor ist einer der beliebtesten WordPress-Pagebuilder, und das Einbetten eines Flipbooks ist mit wenigen Klicks erledigt.

Schritt für Schritt

1. Öffne die Seite im visuellen Elementor-Editor
2. Suche im Widget-Panel nach HTML
3. Ziehe das HTML-Widget in den gewünschten Abschnitt
4. Füge deinen FlipLink-Iframe-Code in das HTML-Feld ein
5. Passe Abstände und Innenabstände des Widgets im Erweitert-Tab an
6. Klicke auf Aktualisieren, um zu speichern

Elementor rendert den Iframe live im Editor, sodass du genau sehen kannst, wie dein Flipbook aussehen wird, bevor du veröffentlichst. Nutze die responsiven Steuerelemente von Elementor, um die Höhe bei Bedarf für Tablet- und Mobil-Breakpoints anzupassen.

Methode 3: Klassischer Editor

Nutzt du noch den klassischen Editor? Kein Problem. Der Ablauf ist genauso unkompliziert.

Schritt für Schritt

1. Öffne deine Seite oder deinen Beitrag im klassischen Editor
2. Wechsle zum Text-Tab (nicht Visuell) in der Editor-Toolbar
3. Platziere deinen Cursor dort, wo du das Flipbook haben möchtest
4. Füge den Iframe-Einbettungscode ein
5. Wechsle zurück zum Visuell-Tab, um zu bestätigen, dass es erscheint
6. Klicke auf Veröffentlichen oder Aktualisieren

Wichtig: Füge Einbettungscodes immer im Text-Tab ein. Der Visuell-Tab kann dein HTML entfernen oder verändern, was die Einbettung beschädigen kann.

Tipps für responsives Sizing

Dein Flipbook sollte auf jedem Gerät gut aussehen. Hier sind einige praktische Tipps für responsives Einbetten.

Prozentuale Breite verwenden

Setze immer width="100%" in deinem Iframe, damit er den Container ausfüllt. Das stellt sicher, dass sich das Flipbook automatisch an jede Bildschirmgröße anpasst.

Eine sinnvolle Höhe einstellen

Eine feste Pixelhöhe von 500 bis 700 funktioniert für die meisten Flipbooks auf dem Desktop gut. Für einen responsiveren Ansatz nutze den Seitenverhältnis-Trick:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Das hält ein 4:3-Seitenverhältnis unabhängig von der Bildschirmbreite bei. Passe padding-bottom an, um das Verhältnis zu ändern — verwende 56.25% für 16:9 oder 100% für quadratisch.

Auf Mobilgeräten testen

Der FlipLink-Viewer ist vollständig responsiv, aber prüfe deine WordPress-Seite immer in der Vorschau auf einem Smartphone, um sicherzustellen, dass das umgebende Layout keine unschönen Abstände erzeugt. Die meisten Probleme kommen vom CSS der Seite, nicht vom Flipbook selbst.

Klickbare Bildeinbettung als Alternative

Nicht jede Seite braucht eine vollständige interaktive Einbettung. Manchmal möchtest du einen leichteren Ansatz — ein schönes Thumbnail, das beim Klick das vollständige Flipbook öffnet. Genau dafür ist die Funktion Klickbare Bildeinbettung von FlipLink da.

Statt eines Iframes erhältst du ein Bild mit Link. Das ist perfekt für:

• Blog-Seitenleisten, wo ein vollständiges Flipbook zu groß wäre
• Landingpages, auf denen du möchtest, dass Besucher bewusst klicken
• E-Mail-Newsletter, die zurück auf deine WordPress-Seite verlinken
• Ressourcenbibliotheken, die mehrere Publikationen als Thumbnails auflisten

Du kannst den Code für die klickbare Bildeinbettung im selben Teilen-Dialog in deinem FlipLink-Dashboard abrufen. Er lädt schneller als ein Iframe und gibt dir volle Kontrolle über das Erscheinungsbild des Thumbnails durch die Branding- und Designoptionen von FlipLink.

Häufige Probleme beheben

Das Flipbook erscheint nicht

• Stelle sicher, dass du den Code im Text/HTML-Modus eingefügt hast, nicht im visuellen Editor
• Überprüfe, ob dein WordPress-Theme Iframes nicht entfernt (manche Sicherheitsplugins blockieren sie)
• Bestätige, dass das Flipbook veröffentlicht ist und sich nicht im Entwurfsmodus in FlipLink befindet

Das Flipbook ist zu klein oder zu groß

• Passe den height-Wert im Iframe-Code an
• Verwende den oben gezeigten responsiven Wrapper-Div für konsistentes Sizing
• Überprüfe, ob der Inhaltsbereich deines Themes eine Maximalbreite hat, die die Einbettung einschränkt

Flipbook funktioniert auf dem Desktop, aber nicht auf dem Smartphone

• Stelle sicher, dass width="100%" gesetzt ist (nicht eine feste Pixelbreite)
• Überprüfe, ob CSS overflow: hidden auf übergeordneten Containern den Iframe beschneidet
• Der FlipLink-Viewer handhabt mobile Gesten nativ, daher liegt das Problem fast immer im Seitenlayout

WordPress entfernt den Einbettungscode

Manche Sicherheitsplugins (wie Wordfence oder iThemes Security) oder Theme-Einstellungen filtern möglicherweise Iframe-Tags heraus. Wenn dein Einbettungscode nach dem Speichern verschwindet:

• Überprüfe die Einstellungen deines Sicherheitsplugins auf Iframe-Filterregeln
• Füge go.fliplink.me zu deinen erlaubten Iframe-Quellen hinzu
• Versuche, einen dedizierten HTML-Block zu verwenden, statt inline einzufügen

SEO-Überlegungen

Eingebettete Flipbooks verbessern die Nutzer-Engagement-Metriken, was indirekt deinem SEO zugutekommt. Für maximale Sichtbarkeit stelle sicher, dass du die SEO- und Social-Vorschau deines Flipbooks in FlipLink konfiguriert hast, damit Suchmaschinen und Social-Media-Plattformen beim Teilen deiner Seite reichhaltige Metadaten anzeigen.

Einen tieferen Einblick in Einbettungsoptionen jenseits von WordPress findest du in unserer vollständigen Anleitung zum Einbetten eines PDF auf einer Website.

Beginne noch heute mit dem Einbetten von Flipbooks in WordPress

Das Einbetten eines FlipLink-Flipbooks auf deiner WordPress-Website dauert weniger als fünf Minuten. Keine Plugins zu installieren, kein kompliziertes Setup — füge einfach einen Einbettungscode ein und deine Besucher erhalten ein beeindruckendes interaktives Erlebnis.

Bereit loszulegen? Erstelle dein kostenloses FlipLink-Konto und konvertiere dein erstes PDF in ein einbettbares Flipbook. Mit unserem Lifetime-Angebot ab 129 $ für 100 aktive Publikationen erhältst du unbegrenztes Einbetten auf all deinen WordPress-Seiten und darüber hinaus.

Schau dir unsere Preisseite an, um den richtigen Plan für deine Bedürfnisse zu finden.