So fügst du ein Flipbook mit dem Element „Embed HTML“ in Wix ein

Du hast einen PDF-Katalog, eine Karte oder eine Broschüre und möchtest, dass Besucher darin direkt auf deiner Wix-Seite blättern können, statt eine schwere Datei herunterzuladen. Die gute Nachricht: Das dauert etwa zehn Minuten. Erstelle das Flipbook mit Flipbooks AI, kopiere den Einbettungscode und füge ihn mit dem Element Embed HTML in Wix ein. Diese Anleitung führt dich durch jeden Klick, dazu kommen die Details zu Größe und Fehlerbehebung, die die meisten Anleitungen auslassen.

Warum ein Flipbook auf Wix nutzen

Wix überzeugt bei Texten, Galerien und Shops. PDFs sind eine Schwachstelle. Ein Besucher, der auf einen PDF-Link klickt, verlässt deine Seite, wartet auf einen Download und kommt oft nicht zurück. Ein Flipbook hält ihn auf der Seite, mit realistischem Umblättern, Zoom und schnellem Laden.

So profitierst du, wenn du einbettest statt verlinkst:

• Besucher bleiben auf deiner Website, und deine Seiten arbeiten weiter für dich.
• Seiten laden schrittweise, sodass sich ein Katalog mit 60 Seiten auch auf dem Smartphone schnell öffnet.
• Du kannst das Flipbook aktualisieren, ohne deine Wix-Seite erneut anzufassen.
• Keine Wasserzeichen, sodass deine Marke im Mittelpunkt bleibt.

Wer am meisten profitiert

💡 Profi-Tipp: Wähle für deinen ersten Versuch eine Seite und ein Flipbook. Sobald der Ablauf vertraut ist, dauert es für weitere Seiten nur zwei Minuten.

Was du vor dem Start brauchst

Besorge dir diese Dinge zuerst, damit du nicht auf halbem Weg stehen bleibst:

1. Eine Wix-Website mit Bearbeitungszugang (jeder Tarif, der benutzerdefinierte Einbettungen erlaubt).
2. Ein fertiges PDF, idealerweise unter 50 MB, mit Seiten in einheitlicher Größe.
3. Ein kostenloses Konto bei Flipbooks AI.
4. Zehn Minuten und ein Browserfenster, in dem beide Tools geöffnet sind.

Bereite dein PDF vor

Eine saubere Quelldatei ergibt ein besseres Flipbook. Prüfe diese Punkte, bevor du hochlädst:

• Exportiere mit einer sinnvollen Auflösung. Für Bildschirme reichen 150 DPI.
• Bette die Schriften ein, damit der Text scharf bleibt.
• Verwende einzelne Seiten statt Doppelseiten, es sei denn, du möchtest ein Buchlayout.
• Komprimiere große Bilder vorab. Eine leichtere Datei wird schneller konvertiert.

Erstelle dein Flipbook

Dieser Teil passiert außerhalb von Wix. Du wandelst das PDF in ein teilbares Flipbook um und holst dir den Einbettungscode.

Hochladen und umwandeln

1. Melde dich bei Flipbooks AI an.
2. Wähle, ein neues Flipbook zu erstellen, und lade dein PDF hoch. Der PDF-zu-Flipbook-Konverter wandelt es in Seiten mit realistischem Umblättereffekt um.
3. Warte auf die Verarbeitung. Kurze Dateien sind in Sekunden fertig, lange Kataloge brauchen etwas länger.
4. Sieh dir das Ergebnis in der Vorschau an und blättere ein paar Seiten durch, um sicherzugehen, dass nichts komisch aussieht.

Passe das Aussehen an

Bevor du einbettest, stelle die Details ein, die das Flipbook wie Teil deiner Marke wirken lassen:

• Branding und Farben, passend zu deinem Wix-Design.
• Seiteneffekte wie die Umblätteranimation und Schatten.
• Multimedia wie Videos und Audio auf bestimmten Seiten.
• Passwortschutz, wenn der Inhalt privat ist.

✅ Bewährte Methode: Passe den Hintergrund des Flipbooks an den Hintergrund deines Wix-Abschnitts an. Die Einbettung fügt sich dann ein, statt wie ein auf die Seite gelegter Kasten zu wirken.

Kopiere den Einbettungscode

Öffne die Freigabeoptionen und suche den Einbettungscode. Es ist ein kurzer Ausschnitt, meist ein iframe-Tag. Kopiere alles, von der öffnenden Klammer bis zum schließenden Tag. Das Tool Flipbook auf Website einbetten erklärt die Optionen genauer.

Füge das Element Embed HTML in Wix hinzu

Wechsle jetzt in deinen Wix-Editor. Die Bezeichnungen unterscheiden sich leicht zwischen dem klassischen Wix-Editor und Wix Studio, deshalb sind beide Wege aufgeführt.

Schritte im Wix-Editor

1. Öffne die Seite, auf der das Flipbook erscheinen soll.
2. Klicke links auf Elemente hinzufügen (das Plus-Symbol).
3. Wähle Einbettungscode und dann Embed HTML.
4. Auf deiner Seite erscheint ein Platzhalterfeld. Klicke auf Code eingeben.
5. Wähle im Einstellungsfenster Code (nicht Webadresse).
6. Füge deinen Flipbook-Einbettungscode in das Feld ein.
7. Klicke auf Aktualisieren und warte, bis die Vorschau geladen ist.

Schritte in Wix Studio

1. Öffne die Seite und klicke auf Elemente hinzufügen.
2. Gehe zu Einbetten & Social, dann wähle die Option HTML-Einbettung.
3. Klicke auf das Element, öffne dann seine Einstellungen und wähle Code.
4. Füge den Ausschnitt ein und übernimm ihn.

Code oder Webadresse

Wix bietet dir im Element zwei Modi. Wenn du den richtigen wählst, vermeidest du die meisten Fehler.

Wenn du den Einbettungscode hast, nutze Code. Wenn du nur einen Link hast, funktioniert auch Webadresse, allerdings hast du weniger Kontrolle über den Rahmen.

Passe die Größe des Flipbooks richtig an

Ein Flipbook, das zu klein ist, wirkt eingeengt, und eines, das zu groß ist, schiebt Inhalte aus dem Bildschirm. Wix lässt dich die Anfasser des Elements ziehen, und der Einbettungscode enthält außerdem Breiten- und Höhenwerte.

Empfohlene Abmessungen

Tipps für ein sauberes Layout

• Platziere das Element in einem Streifen und ziehe es auf volle Breite, für die größte Wirkung.
• Lass oberhalb und unterhalb etwas Abstand, damit das Flipbook Luft hat.
• Setze eine kurze Überschrift darüber, zum Beispiel „Blättere durch den Katalog“.
• Vermeide, zwei Einbettungen direkt hintereinander auf demselben Bildschirm zu platzieren.

💡 Profi-Tipp: Nutze den mobilen Editor in Wix, um eine eigene Höhe für Smartphones festzulegen. Ein Flipbook, das am Desktop perfekt aussieht, kann auf einem kleinen Bildschirm zu hoch wirken.

Prüfe es auf jedem Bildschirm

Ein Klick auf Vorschau im Editor ist der erste Test. Hör dort nicht auf. Veröffentliche die Seite und öffne den Live-Link auf einem Smartphone und in einem zweiten Browser.

Geh diese kurze Checkliste durch:

1. Erscheint die erste Seite ohne leeren Rahmen?
2. Funktioniert das Umblättern per Wischgeste auf dem Smartphone?
3. Funktioniert der Zoom und lässt sich sauber zurücksetzen?
4. Reagieren Videos oder Links im Flipbook?
5. Lädt die Seite weiterhin schnell?

Wenn du bei allen fünf Punkten mit Ja antworten kannst, bist du fertig.

Häufige Probleme beheben

Selbst ein sauberer Aufbau kann auf kleine Hürden stoßen. Hier sind die Probleme, die Nutzer am häufigsten melden, mit der jeweiligen Lösung.

Der Rahmen ist leer

Der wahrscheinlichste Grund ist, dass du Webadresse mit einem Code-Ausschnitt verwendet oder nur einen Teil des Codes eingefügt hast. Öffne das Element erneut, wechsle zu Code und füge den vollständigen Ausschnitt noch einmal ein. Prüfe außerdem, ob das Flipbook selbst veröffentlicht und nicht auf privat gestellt ist.

Das Flipbook ist abgeschnitten

Erhöhe die Höhe des Elements Embed HTML auf der Arbeitsfläche. Das iframe kann nicht größer sein als sein Container, daher schneidet ein zu kurzes Element den unteren Teil des Buchs ab.

Es funktioniert in der Vorschau, aber nicht live

Veröffentliche die Website, nachdem du deine Änderungen gespeichert hast. Vorschau und Live-Version können sich unterscheiden, bis du veröffentlichst. Leere den Browser-Cache, wenn du noch den alten Stand siehst.

Auf dem Smartphone wirkt es zu klein

Wechsle in den mobilen Editor und passe die Größe des Elements separat an. Wix speichert mobile Layouts getrennt.

⚠️ Warnung: Füge Einbettungscode nicht in ein einfaches Textfeld oder ein Textelement ein. Er wird dann als sichtbarer Code angezeigt statt gerendert. Verwende immer das HTML-Element.

Echte Beispiele zum Nachbauen

Wenn du siehst, wie andere dieselbe Methode nutzen, fällt es leichter, sich deine eigene Seite vorzustellen.

Das Portfolio einer Fotografin

Eine Hochzeitsfotografin exportiert ein Portfolio mit 30 Seiten und gestaltet es mit dem Tool Fotografie-Portfolio. Auf Wix sitzt das Flipbook in einem Streifen in voller Breite auf der Portfolioseite. Besucher sehen die Arbeiten in einem Buchformat, das sich eher wie ein gedrucktes Album anfühlt als wie eine scrollende Galerie.

Eine Café-Karte

Eine Café-Besitzerin lädt die Wochenkarte mit dem Restaurantkarten-Flipbook-Ersteller hoch. Wenn sich Preise ändern, ersetzt sie das PDF im Flipbook-Dashboard, und die Wix-Seite aktualisiert sich von selbst. Die Website muss sie dafür nicht bearbeiten.

Ein Boutique-Katalog

Ein kleiner Shop veröffentlicht ein saisonales Lookbook mit dem Interaktiven Lookbook-Designer und platziert es auf der Landingpage des Shops oberhalb des Produktrasters. Kunden blättern zuerst durch die gestylten Seiten und klicken dann weiter zum Kauf.

Welches Tool zu welcher Seite passt

Zusätzliche Funktionen, die sich lohnen

Sobald die Grundeinbettung funktioniert, bringen einige Optionen echten Mehrwert auf deine Wix-Seite:

• Passwortschutz für Dokumente, die nur für Kunden bestimmt sind, oder für Mitgliederinhalte.
• Offline-Downloads, damit Besucher eine Kopie speichern können.
• Eingebettete Videos und Audio innerhalb der Seiten.
• Analysen und Kontaktgewinnung im Professional-Tarif, damit du siehst, wer was liest, und Kontakte erfasst.
• Unbegrenzte Flipbooks ab dem Standard-Tarif, praktisch, wenn du viele Seiten betreibst.

Auf der Seite Preise siehst du, was jeder Tarif enthält.

Halte deine Wix-Seite schnell

Ein Flipbook soll Wert hinzufügen, nicht Gewicht. Ein paar Gewohnheiten sorgen dafür, dass alles flott bleibt:

1. Halte PDFs schlank, indem du Bilder vor dem Hochladen komprimierst.
2. Platziere das Flipbook unterhalb des sichtbaren Bereichs, wenn die Seite schon große Banner hat.
3. Nutze nach Möglichkeit eine Einbettung pro Seite.
4. Teste die Ladegeschwindigkeit nach der Veröffentlichung, besonders über mobile Datenverbindungen.

Bereit, dein eigenes zu veröffentlichen

Du hast jetzt die komplette Routine: PDF vorbereiten, Flipbook erstellen, Einbettungscode kopieren, das Element Embed HTML in Wix hinzufügen, im Modus Code einfügen, die Größe anpassen und auf dem Smartphone testen. Jedes weitere Flipbook folgt denselben wenigen Klicks.

Bereit, dein erstes live zu schalten? Kostenlos loslegen bei Flipbooks AI, alle verfügbaren Tools und Vorlagen durchstöbern oder Preise vergleichen, um den passenden Tarif für deine Website zu finden.