So betten Sie ein Flipbook auf Ihrer Website ein
Schritt-für-Schritt-Anleitung für WordPress, Webflow, Squarespace, Wix und benutzerdefinierte HTML-Websites.
So betten Sie ein Flipbook auf Ihrer Website ein
Eine der effektivsten Möglichkeiten, ein Flipbook zu nutzen, ist es direkt auf Ihrer Website einzubetten. Anstatt Leser zu einem separaten Link zu schicken, können Sie eine interaktive Publikation direkt in Ihre bestehenden Seiten platzieren - auf einer Landing Page, einem Blog-Beitrag, einer Ressourcenbibliothek oder einer Produktseite.
Dieser Leitfaden behandelt, wie Sie Ihren ZenFlip-Einbettungscode erhalten und wie Sie ihn auf den beliebtesten Website-Plattformen verwenden.
Ihren Einbettungscode erhalten
Jede ZenFlip-Publikation hat einen Einbettungscode, den Sie aus Ihrem Dashboard kopieren können:
Gehen Sie zu Ihrem ZenFlip-Dashboard
Klicken Sie auf die Publikation, die Sie einbetten möchten
Klicken Sie auf die Schaltfläche „Teilen"
Wählen Sie den Tab „Einbetten"
Kopieren Sie den iframe-Code
Der Einbettungscode sieht ungefähr so aus:
`html <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe> `
Sie können die Breiten- und Höhenwerte anpassen, um sie an Ihr Seitenlayout anzupassen. Der Flipbook-Viewer ist responsiv und passt sich dem Container an, den Sie ihm geben.
Einbetten auf WordPress
Mit dem Block-Editor (Gutenberg)
Öffnen Sie die Seite oder den Beitrag, in dem das Flipbook erscheinen soll
Klicken Sie auf die „+"-Schaltfläche, um einen neuen Block hinzuzufügen
Suchen Sie nach „Eigenes HTML" und wählen Sie es aus
Fügen Sie Ihren ZenFlip-Einbettungscode in den HTML-Block ein
Klicken Sie auf „Vorschau", um zu sehen, wie es aussieht
Veröffentlichen oder aktualisieren Sie Ihre Seite
Mit dem Classic Editor
Öffnen Sie Ihre Seite oder Ihren Beitrag
Wechseln Sie zum Tab „Text" (nicht „Visuell")
Fügen Sie Ihren Einbettungscode dort ein, wo das Flipbook erscheinen soll
Wechseln Sie zurück zu „Visuell" für eine Vorschau
Veröffentlichen oder aktualisieren
WordPress-Tipps
Wenn Ihr Theme einen schmalen Inhaltsbereich hat, setzen Sie die iframe-Breite auf „100 %", damit er den verfügbaren Platz ausfüllt
Für ein Flipbook in voller Breite erwägen Sie die Verwendung eines Page Builders wie Elementor oder einer Seitenvorlage in voller Breite
Einige Sicherheits-Plugins können iframe-Tags entfernen. Wenn Ihre Einbettung nach dem Speichern verschwindet, überprüfen Sie die Einstellungen Ihres Sicherheits-Plugins
Einbetten auf Webflow
Öffnen Sie Ihr Webflow-Projekt im Designer
Ziehen Sie ein „Embed"-Element aus dem Hinzufügen-Panel auf Ihre Seite
Fügen Sie Ihren ZenFlip-Einbettungscode in das Codefeld ein
Schließen Sie den Embed-Editor
Passen Sie die Größe des Embed-Elements über das Style-Panel an
Veröffentlichen Sie Ihre Website
Webflow gibt Ihnen präzise Kontrolle über die Größenanpassung. Sie können den Embed-Container auf eine bestimmte Pixelhöhe setzen oder Viewport-Height-Einheiten (vh) für ein dynamischeres Layout verwenden.
Einbetten auf Squarespace
Öffnen Sie Ihre Seite im Squarespace-Editor
Klicken Sie auf die „+"-Schaltfläche an der Stelle, an der Sie das Flipbook hinzufügen möchten
Wählen Sie „Code" aus den Inhaltsblöcken
Fügen Sie Ihren ZenFlip-Einbettungscode ein
Klicken Sie auf „Anwenden"
Speichern und veröffentlichen Sie Ihre Seite
Squarespace umschließt Einbettungen mit einem Container. Wenn das Flipbook zu klein erscheint, erhöhen Sie den Höhenwert in Ihrem iframe-Code (versuchen Sie 700 oder 800 Pixel).
Einbetten auf Wix
Öffnen Sie Ihre Website im Wix-Editor
Klicken Sie im linken Menü auf „Hinzufügen"
Wählen Sie „Code einbetten" und dann „HTML einbetten"
Ein Code-Widget erscheint auf Ihrer Seite
Klicken Sie auf „Code eingeben" und fügen Sie Ihren ZenFlip-Einbettungscode ein
Klicken Sie auf „Aktualisieren"
Ziehen Sie das Widget und passen Sie seine Größe an Ihr Layout an
Veröffentlichen Sie Ihre Website
Wix erfordert, dass Sie das Embed-Widget manuell auf der Arbeitsfläche dimensionieren. Stellen Sie sicher, dass es groß genug für komfortables Lesen ist.
Einbetten auf benutzerdefinierten HTML-Websites
Wenn Sie Ihr eigenes HTML verwalten, fügen Sie den Einbettungscode direkt in Ihren Seitenquelltext ein:
`html <div style="max-width: 900px; margin: 0 auto;"> <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
Das umschließende div zentriert das Flipbook und setzt eine maximale Breite. Passen Sie diese Werte an Ihr Design an.
Ihre Einbettung responsiv machen
Für ein Flipbook, das sich reibungslos über Bildschirmgrößen skaliert, verwenden Sie die Responsive-Wrapper-Technik:
`html <div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;"> <iframe src="https://zenflip.io/embed/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
Das padding-bottom: 75% erzeugt ein 4:3-Seitenverhältnis. Für eine Querformat-Publikation versuchen Sie padding-bottom: 56.25% (16:9-Verhältnis). Für eine Hochformat-Publikation versuchen Sie padding-bottom: 125%.
Best Practices für eingebettete Flipbooks
Geben Sie ihm ausreichend Höhe. Ein Flipbook, das zu klein ist, zwingt Leser, die Augen zusammenzukneifen. Auf dem Desktop sind 600 Pixel eine angemessene Mindesthöhe. Auf Landing Pages, auf denen das Flipbook der Hauptinhalt ist, erwägen Sie 700-800 Pixel oder sogar die volle Viewport-Höhe.
Fügen Sie ein title-Attribut hinzu. Das Einfügen von title="Ihr Publikationsname" im iframe-Tag verbessert die Barrierefreiheit. Screenreader verwenden dies, um den eingebetteten Inhalt zu beschreiben.
Beachten Sie die Seitenladezeit. Das Flipbook lädt asynchron, sodass es Ihre Seite nicht verlangsamt. Wenn Sie die Einbettung jedoch unterhalb des sichtbaren Bereichs platzieren (weiter unten auf der Seite), wird sie erst geladen, nachdem Ihr Besucher den anfänglichen Inhalt gesehen hat.
Stellen Sie einen Fallback-Link bereit. Einige Firmennetzwerke blockieren iframes. Unterhalb Ihrer Einbettung erwägen Sie, einen Textlink hinzuzufügen: „Probleme beim Anzeigen? In neuem Tab öffnen."
Testen Sie auf Mobilgeräten. Der ZenFlip-Viewer ist responsiv und unterstützt Touch-Gesten, aber überprüfen Sie, ob Ihr Seitenlayout die Einbettung nicht auf eine unbrauchbar kleine Größe auf Smartphones einschränkt.
Embed-Einstellungen bei bezahlten Plänen
Beim Creator-Plan und höher haben Sie zusätzliche Embed-Optionen:
ZenFlip-Branding entfernen aus dem Viewer
Benutzerdefinierte Domain - einbetten von Ihrer eigenen Domain (z.B. publications.ihreFirma.com)
Passwortschutz - ein Passwort erfordern, bevor das Flipbook geladen wird (Business-Plan)
Fehlerbehebung
Die Einbettung zeigt einen leeren Bereich: Überprüfen Sie, ob Ihre Publikation auf „Öffentlich" als Sichtbarkeit eingestellt ist. Private Publikationen können nicht eingebettet werden.
Der iframe wird entfernt: Einige CMS-Plattformen oder Sicherheits-Plugins entfernen iframe-Tags. Suchen Sie nach einer „HTML"- oder „Code"-Block-Option, anstatt in einen Rich-Text-Editor einzufügen.
Das Flipbook ist auf Mobilgeräten zu klein: Setzen Sie die iframe-Breite auf „100 %" und stellen Sie sicher, dass Ihr Seitencontainer die Breite nicht einschränkt. Die oben beschriebene Responsive-Wrapper-Technik hilft.
Die Einbettung wird von einer Firmen-Firewall blockiert: Stellen Sie einen direkten Link zum Flipbook als Fallback bereit, damit Leser es in einem neuen Tab öffnen können.