Schritt-für-Schritt-Anleitung, wie du ein Flipbook mit Umblättereffekt über einen Code-Block auf jeder Squarespace-Seite platzierst. Mit Tarifvoraussetzungen, Einbettungscode, responsiver Größe, Passwortschutz, Test auf dem Smartphone und Lösungen für die häufigsten Darstellungsprobleme.
Du hast einen Katalog, eine Karte oder ein Portfolio als PDF, und deine Squarespace-Seite zeigt es nur als einfachen Download-Link, den niemand anklickt. Ein Flipbook behebt das. Besucher lesen direkt auf der Seite, blättern mit einer Wischbewegung um und verlassen deine Website nie. Das Werkzeug, das es möglich macht, ist der Squarespace-Code-Block, und mit einem Flipbook von Flipbooks AI dauert der ganze Vorgang etwa zehn Minuten.
Diese Anleitung führt dich durch jeden Schritt: was du brauchst, wo der Code hingehört, wie du die Größe einstellst und wie du die Probleme behebst, über die viele stolpern.
Ein Code-Block ist ein Inhaltsblock, der rohes HTML akzeptiert. Statt Text zu tippen oder ein Bild einzufügen, fügst du einen Schnipsel ein, und Squarespace zeigt ihn genau so an, wie er geschrieben ist. Ein Einbettungscode von einer Flipbook-Plattform ist so ein Schnipsel. Er weist den Browser an, dein Flipbook in einem Rahmen auf deiner Seite zu laden.
Ein verlinktes PDF öffnet sich in einem neuen Tab oder wird auf das Gerät heruntergeladen. Auf dem Smartphone bedeutet das oft, dass man eine winzige Seite mit zwei Fingern vergrößern muss. Ein eingebettetes Flipbook bleibt in deinem Layout, passt sich dem Bildschirm an und hält Besucher länger auf deiner Website.
| Methode | Leseerlebnis | Bleibt auf deiner Website | Mobil geeignet |
|---|---|---|---|
| PDF-Download-Link | Öffnet eine separate Datei | Nein | Schlecht |
| Bildergalerie der Seiten | Manuelles Scrollen | Ja | Durchschnittlich |
| Eingebettetes Flipbook | Ansicht mit Umblättereffekt | Ja | Hervorragend |
Code-Blöcke sind ab dem Business-Tarif verfügbar. Personal-Tarife können keinen eigenen Code ausführen. Prüfe das, bevor du etwas baust, denn das ist der häufigste Grund, warum der Block zu fehlen scheint.
⚠️ Wenn du nur den Markdown-Block und keine Code-Option siehst, enthält dein Tarif wahrscheinlich keinen eigenen Code. Wechsle unter Einstellungen, dann Abrechnung, auf einen höheren Tarif.
Halte zuerst drei Dinge bereit. Das spart dir späteres Zurückspringen.
Exportiere in einer sinnvollen Auflösung. Bei den meisten Katalogen sieht eine Datei zwischen 5 und 25 MB scharf aus und lädt schnell. Halte die Seiten in einheitlicher Größe, denn gemischte Seitengrößen lassen die Umblätteranimation ungleichmäßig wirken.
Entscheide, ob das Flipbook die volle Breite der Seite einnimmt oder neben dem Text steht. Die volle Breite passt zu Katalogen und Magazinen. Eine halbe Breite eignet sich für eine Vorschau neben einem Registrierungsformular.
Der Einbettungscode existiert erst, wenn das Flipbook existiert. Der Vorgang ist kurz.
💡 Stimme die Hintergrundfarbe des Flipbooks auf die Farbe deines Squarespace-Abschnitts ab. Der Rahmen verschwindet dann, und das Flipbook wirkt, als gehöre es zur Seite.
Änderungen, die du nach dem Einbetten vornimmst, werden automatisch übernommen, du kannst also Tippfehler später beheben. Stelle trotzdem jetzt die Grundlagen ein: Logo, Farbe und die Startseite. Wenn dein PDF Links oder Videos enthält, bleiben sie durch die Plattform aktiv, und du kannst außerdem Audio und Video in die Seiten einfügen.
Das ist das Herzstück des Vorgangs. Folge den Schritten in dieser Reihenfolge.
Das Tool Flipbook auf Website einbetten erklärt die Optionen, falls du sie vor der Wahl sehen möchtest.
✅ Bewährte Methode: Lasse Quelle anzeigen ausgeschaltet. Ist sie eingeschaltet, sehen Besucher den rohen Code statt deines Flipbooks.
Hier ist eine kurze Übersicht zur Fehlerbehebung, was jede Einstellung bewirkt.
| Einstellung | Was sie bewirkt | Empfohlener Wert |
|---|---|---|
| Quelle anzeigen | Zeigt Code als Text | Aus |
| Blockbreite | Legt fest, wie breit der Rahmen ist | 100 % |
| Blockhöhe | Legt fest, wie hoch der Rahmen ist | 600 bis 800 px am Desktop |
| Abschnittshintergrund | Färbt den Bereich um den Rahmen | Passend zur Flipbook-Farbe |
Ein Rahmen, der zu kurz ist, schneidet die Seiten ab. Einer, der zu hoch ist, lässt eine Lücke. Beides wirkt nachlässig.
Squarespace passt iframes nicht automatisch an. Lege im Einbettungscode eine feste Höhe fest, etwa height="700". Eine gute Faustregel: Nimm die Breite deines Inhaltsbereichs und multipliziere sie mit 0,65 für die Doppelseitenansicht.
Umschließe das iframe mit einem Container mit prozentualer Breite, damit es auf Smartphones schrumpft. Viele fügen außerdem eine größere Höhe für mobile Geräte hinzu, indem sie einen kurzen Style-Block in Benutzerdefiniertem CSS verwenden.
💡 Öffne deine Seite auf einem echten Smartphone, nicht nur im Vorschaumodus des Browsers. Auf echten Geräten zeigt sich eine Überlappung der Werkzeugleiste, die die Vorschau übersieht.
| Anwendungsfall | Platzierung | Empfohlene Höhe |
|---|---|---|
| Produktkatalog | Abschnitt in voller Breite | 750 px |
| Restaurantkarte | Zentriert, 80 % Breite | 650 px |
| Fotografie-Portfolio | Randabfallender Abschnitt | 800 px |
Echte Anwendungsfälle machen die Entscheidung leichter.
Ein Restaurant kann eine saisonale Karte einbetten, die mit dem Restaurantkarten-Flipbook-Ersteller erstellt wurde. Ändert sich die Karte, bearbeitet das Restaurant das Flipbook einmal, und die Squarespace-Seite aktualisiert sich von selbst, ohne neuen Code.
Eine Immobilienmaklerin kann auf jeder Objektseite eine Exposé-Broschüre aus dem Immobilienbroschüren-Ersteller platzieren. Kaufinteressierte blättern durch Grundrisse und Fotos, ohne etwas herunterzuladen.
Ein Fotograf kann mit dem Tool Fotografie-Portfolio eine Galerie erstellen und sie dann auf eine Portfolio-Seite setzen. Eine Boutique kann mit dem Ersteller für Produktkataloge ein Lookbook für den Großhandel anlegen.
Nicht jedes Flipbook sollte öffentlich sein. Großhandelspreislisten, Kundenangebote und interne Handbücher brauchen Schutz.
Aktiviere in Flipbooks AI in den Freigabeeinstellungen den Passwortschutz. Besucher geben das Passwort ein, bevor die Seiten geladen werden. Kombiniere dies mit einem Squarespace-Mitgliederbereich oder einer versteckten Seite, um die Privatsphäre zusätzlich zu schützen.
Im Professional-Tarif kannst du E-Mail-Adressen sammeln, bevor Leser das Flipbook öffnen, und sehen, welche Seiten die meiste Aufmerksamkeit bekommen. Sieh dir die Preistarife an, um zu vergleichen, was jede Stufe enthält.
| Funktion | Standard | Professional |
|---|---|---|
| Unbegrenzt viele Flipbooks | Ja | Ja |
| Kein Wasserzeichen | Ja | Ja |
| Passwortschutz | Ja | Ja |
| Statistiken | Grundlegend | Detailliert |
| Kontakterfassung | Nein | Ja |
| Offline-Download | Ja | Ja |
Auch ein einfaches Einbetten kann sich eigenartig verhalten. Das sind die üblichen Verdächtigen.
Quelle anzeigen ist eingeschaltet. Öffne den Block, schalte sie aus und speichere.
Prüfe, ob du den gesamten Schnipsel kopiert hast, einschließlich des schließenden Tags. Ein unvollständiges Einfügen erzeugt einen leeren Rahmen. Bestätige außerdem, dass das Flipbook veröffentlicht ist und nicht auf privat ohne Passwort steht.
Erhöhe den Höhenwert oder reduziere die Anzahl der Werkzeugleisten-Schaltflächen in den Flipbook-Einstellungen. Weniger Schaltflächen lassen mehr Platz für die Seite selbst.
Squarespace blendet Einbettungen beim Bearbeiten manchmal aus. Rufe die Vorschau der Seite auf oder öffne die Live-URL. Dort lädt das Flipbook.
Ein eingebetteter Rahmen wird nicht so gelesen wie Seitentext, also umgib ihn mit echten Worten. Füge eine Überschrift über dem Flipbook hinzu, zwei oder drei Sätze, die den Inhalt beschreiben, und einen Textlink zum PDF für Leser, die es lieber so möchten.
💡 Ein Flipbook ohne umgebenden Text gibt Suchmaschinen wenig zum Indexieren. Ein kurzer Einleitungsabsatz löst das in weniger als einer Minute.
Der beste Teil dieses Aufbaus ist die Pflege. Da der Code-Block dein Flipbook über einen Live-Link lädt, musst du Squarespace nie wieder anfassen, wenn sich Inhalte ändern. Ersetze das PDF in Flipbooks AI, und die Seite zeigt die Änderung sofort. Saisonale Karten, vierteljährliche Kataloge und aktualisierte Preislisten bleiben mit einem einzigen Upload aktuell.
Bereit, dein erstes Flipbook auf deine Website zu bringen? Erstelle ein kostenloses Konto bei Flipbooks AI, lade dein PDF hoch und füge den Einbettungscode in einen Squarespace-Code-Block ein. Durchsuche die vollständige Liste der Flipbook-Tools, um die passende Vorlage für deine Inhalte zu finden, und vergleiche die Preistarife, wenn du Statistiken und Kontakterfassung brauchst.
Wähle deine Sprache
