Wusstest du schon?
Laut der 2025-Studie von Smallpdf verwenden 98 % der Unternehmen PDFs als Standard-Dateityp für die externe Kommunikation, und weltweit kursieren mehr als 2,5 Billionen PDFs.
PDF Viewer Plugin, which displays documents beautifully with full customization and no coding required. Visitors can view, download, or interact with your PDFs right from your page while your design stays completely under your control.”>Professionell präsentierte PDFs halten Besucher länger auf Ihrer Website – egal, ob Sie Produktdaten, Kundenportfolios, Leitfäden oder Zertifikate teilen. Die einfachste Methode, ein PDF in Squarespace einzubetten, ist das PDF Viewer Plugin, das Dokumente schön darstellt, vollständig anpassbar ist und keine Programmierkenntnisse erfordert. Besucher können PDFs direkt von Ihrer Seite ansehen, herunterladen oder interaktiv nutzen – während Ihr Design vollständig in Ihrer Hand bleibt.
- Fügen Sie in wenigen Klicks herunterladbare PDFs zu Squarespace hinzu.
- Wählen Sie das passende Layout und die passenden Anpassungsoptionen für Ihre Dokumente.
- Optimieren Sie Ihren PDF-Viewer für eine bessere Nutzerbindung und mobile Performance.
- Vergleichen Sie native Squarespace-Methoden mit einer Drittanbieter-Lösung.
- Häufige Probleme beim PDF-Einbetten beheben.
Unten findest du zwei Wege: eine schnelle Vier-Schritte-Einrichtung für alle, die sofort starten möchten, und einen detaillierten Leitfaden mit Screenshots für alle, die jede Anpassung erkunden wollen. Fangen wir mit dem schnellsten Weg an.
PDF in Squarespace in 4 einfachen Schritten einbetten
So fügen Sie PDFs sofort zu Squarespace hinzu:
- Öffnen Sie den Elfsight-Editor Editor und wählen Sie eine Vorlage aus.
- PDF-Dateien von Ihrem Computer hochladen oder per URL hinzufügen.
- Passen Sie Ihr PDF-Einbettungs-Plugin an.
- Kopiere deinen Einbettungscode und füge ihn in Squarespace ein.
Erstellen Sie jetzt Ihr eigenes PDF-Plugin direkt im Live-Editor!
Warum dieses PDF-Plugin Wunder bewirkt
Jetzt, da Sie gesehen haben, wie schnell & einfach es ist, ein PDF in Squarespace ohne Codierung einzubetten, schauen wir uns an, was diese Lösung gegenüber nativen Optionen auszeichnet:
| Kernmerkmal | Warum es wichtig ist |
|---|---|
| Drei Layout-Optionen für unterschiedliche Bedürfnisse | Datei-Viewer zeigt PDFs direkt in der Seite mit Zoom und Paginierung an, sodass Besucher nicht die Seite verlassen müssen. Raster- und Listen-Layouts zeigen anklickbare Dateisymbole für saubereres Design. |
| Dokumente direkt auf Ihrer Seite anzeigen | Besucher mit dem Datei-Viewer-Layout fesseln – keine Weiterleitung in einem neuen Tab sorgt für mehr Interaktion und weniger Absprungraten. |
| Vollständig anpassbare Designelemente | Farben, Schriftarten, Symbolstile und Breiten so anpassen, dass Ihr PDF-Widget nahtlos zur Markenidentität passt. |
| Mehrere Möglichkeiten, Dateien hinzuzufügen | Laden Sie Dateien von Ihrem Computer hoch, fügen Sie eine Datei-URL ein oder wählen Sie aus Ihren zuletzt hochgeladenen Dateien – ganz nach Ihrem Workflow. |
| Unterstützung beim Hochladen eigener Icons | Ersetzen Sie das Standard-PDF-Symbol durch Ihr eigenes Bild oder wählen Sie aus sechs vorgefertigten Stilen in jeder gewünschten Farbe. |
| Download-Button enthalten | Besucher können PDFs direkt mit einem Klick herunterladen, und Sie entscheiden, ob der Download-Text angezeigt wird. |
Für eine vollständige Übersicht der verfügbaren Funktionen besuchen Sie bitte die Funktionsseite.
Schritt-für-Schritt: Einbetten und Anpassen Ihres PDF-Plugins
Bereit, tiefer einzusteigen? In diesem Abschnitt erfahren Sie alles, was Sie benötigen, um Ihre PDF-Einbettung auf Squarespace zu konfigurieren, zu gestalten und zu veröffentlichen – von der ersten Einrichtung bis zur finalen Optimierung.
1. Vorlage auswählen
Der erste Schritt besteht darin, den PDF-Editor zu öffnen und eine Vorlage auszuwählen, die zu Ihren Zielen passt. Drei voreingestellte Layout-Optionen stehen zur Verfügung:
- Datei-Viewer zeigt Ihre PDF direkt auf der Seite mit Scrollen, Paginierung und Zoomsteuerung. Ideal für Produktanleitungen, Broschüren oder detaillierte Dokumente, die Besucher lesen möchten, ohne Ihre Website zu verlassen.
- Rasterlayout zeigt PDF-Datei-Symbole in einem Raster. Ideal, um mehrere Dokumente wie Fallstudien, Whitepapers oder Zertifikate sauber und übersichtlich darzustellen.
- Listen-Layout stapelt Datei-Icons vertikal in einer einzigen Spalte. Ideal für Ressourcenbibliotheken, herunterladbare Leitfäden oder Dokumentensammlungen, bei denen Besucher eine klare Liste zum Durchstöbern wünschen.
Sobald Sie Ihre Wahl getroffen haben, klicken Sie auf „Mit dieser Vorlage fortfahren“, um fortzufahren.
2. Füge deine PDF-Dateien hinzu
Gehen Sie zum „Inhalt“-Tab und fügen Sie Ihre Dokumente hinzu. Sie haben drei Optionen:
- Vom Computer hochladen – Klicken Sie auf die Upload-Schaltfläche und wählen Sie eine PDF-Datei von Ihrem Gerät aus.
- Per URL hinzufügen – Fügen Sie einen direkten Link zu einer PDF-Datei ein, die anderswo gehostet wird (Google Drive, Dropbox, eigener Server).
- Wählen Sie aus Ihren zuletzt verwendeten Dateien – Falls Sie zuvor PDFs hinzugefügt haben, wählen Sie aus Ihren kürzlich hochgeladenen Dateien.
Sie können unbegrenzt viele PDFs im selben Widget hinzufügen. Klicken Sie auf die drei Punkte → Papierkorb-Symbol, um Dateien zu entfernen, die Sie nicht mehr benötigen.
3. Layout- und Anzeigeoptionen anpassen
Gehe zur Registerkarte „Layout“, um festzulegen, wie deine PDFs auf Desktop- und Mobilgeräten erscheinen. Hier kannst du einstellen:
- Widget Breite und Höhe im Verhältnis zur Breite
- Anzahl der Spalten und Zeilen
- Abstand zwischen den Elementen
- Icon Sichtbarkeit und Stil
- Herunterladen Beschriftung anzeigen (Sichtbarkeit und Linktext)
4. Farben und Icon-Stile anpassen
In der „Appearance“-Registerkarte personalisieren Sie das Styling des Widgets, damit es zu Ihrer Marke passt. Je nach gewählter Vorlage können Sie:
- Wählen Sie ein helles oder dunkles Theme.
- Icon-Farbe auswählen oder eigenes Bild als Icon hochladen
- Textfarben anpassen (Widget-Titel, Dateiname, Download-Bezeichnung)
- Hintergrund- und Widget-Hintergrundfarben festlegen
- Schriftgrößen für bessere Lesbarkeit anpassen
In der Registerkarte „Aussehen“ finden Sie außerdem Felder für benutzerdefiniertes CSS und benutzerdefiniertes JS, die eine fortgeschrittene Steuerung ermöglichen. Falls Sie kein Technikprofi sind – keine Sorge. Fertige CSS-Beispiele finden Sie in den Threads unseres Community-Forums.
5. Einbettungscode generieren und kopieren
Wenn Sie Ihre Einrichtung abgeschlossen haben, klicken Sie auf die grüne „Kostenlos zur Website hinzufügen“-Schaltfläche. Dadurch wird Ihr einzigartiger Einbettungscode generiert. Kopieren Sie den gesamten angezeigten Code-Snippet – Sie benötigen ihn für den nächsten Schritt.
6. Letzter Schritt: So binden Sie eine PDF in Squarespace ein
Jetzt ist es an der Zeit, Ihre PDFs in das Backend von Squarespace einzufügen. So geht’s:
- Öffnen Sie im Squarespace-Editor die Seite, auf der Sie das PDF hinzufügen möchten.
- Klicke „Block hinzufügen“ oder einen Einfügepunkt auf deiner Seite.
- Wählen Sie Code aus dem Block-Optionen-Menü.
- Stellen Sie sicher, dass der Code-Typ auf HTML gesetzt ist.
- Fügen Sie Ihr Elfsight-Snippet in das Textfeld ein.
- Klicken Sie außerhalb des Blocks oder drücken Sie Speichern, um Ihre Änderungen anzuwenden.
- Den vollständigen Einbettungscode eingefügt haben. Er beginnt in der Regel mit:
<div>oder<script> - Den Code-Block verwendet haben, nicht den Text-Block
- Den Blocktyp auf HTML gesetzt haben
- Den Code nicht versehentlich bearbeitet oder gekürzt
PDF-Einbettungsmethoden: Optionen vergleichen
Es gibt mehr als eine Möglichkeit, PDFs zu Squarespace-Seiten hinzuzufügen – jede Methode hat unterschiedliche Stärken und Schwächen. So schneiden sich die verschiedenen Methoden im Vergleich:
Squarespace Native-Link-Methode
Squarespace bietet eine integrierte Dateiverknüpfungsfunktion, mit der Sie eine PDF direkt hochladen und einen Download-Link auf jedem Text, Button oder Bild erstellen können.
- PDF hochladen. Gehen Sie zum Seiten-Menü, klicken Sie auf das + Symbol, wählen Sie Link und laden Sie Ihre Datei hoch.
- Datei-URL abrufen. Squarespace generiert eine URL (z. B. /s/filename.pdf), die Sie in Buttons oder Textlinks verwenden können.
- Erstellen Sie einen Link oder eine Schaltfläche. Markieren Sie Text oder fügen Sie eine Schaltfläche hinzu, und hängen Sie anschließend den PDF-Link über den Link-Editor an.
- Testen Sie den Link. Stellen Sie sicher, dass sich die PDF-Datei beim Klicken der Besucher öffnet oder ordnungsgemäß heruntergeladen wird.
Google Drive PDF-Einbettung
Laden Sie Ihre PDF-Datei in Google Drive hoch und verwenden Sie die Einbettungsfunktion, um sie auf Ihrer Squarespace-Seite in einem Code-Block anzuzeigen.
- Hochladen zu Google Drive. Speichern Sie Ihre PDF-Datei in einem Google Drive-Ordner oder Dokument.
- Teilen und Embed-Code erhalten. Klicken Sie mit der rechten Maustaste auf die Datei, machen Sie sie öffentlich zugänglich und kopieren Sie den iFrame-Einbettungscode.
- Code-Block zu Squarespace hinzufügen. Fügen Sie auf Ihrer Seite einen Code-Block ein und setzen Sie ihn auf HTML-Modus.
- Einbettungscode einfügen. Fügen Sie den iFrame-Code von Google Drive in den Code-Block ein.
- Vorschau und Veröffentlichen. Überprüfen Sie, ob die PDF korrekt angezeigt wird, speichern Sie danach Ihre Seite.
Weitere Details finden Sie in der Google Drive-Freigabe- und Einbettungsleitfaden.
Lightbox Studio (Drittanbieter-Plugin)
Lightbox Studio ist ein Squarespace-integriertes Tool, das PDFs in einem anpassbaren Popup-Viewer anzeigt, wenn Besucher auf einen Link klicken.
- Lightbox Studio installieren. Fügen Sie das Plugin aus dem Squarespace App Store hinzu und aktivieren Sie es auf Ihrer Website.
- Laden Sie Ihre PDF hoch. Verwenden Sie den Squarespace-Link-Editor, um Ihre PDF-Datei hochzuladen.
- Erstellen Sie einen Text- oder Button-Link. Erstellen Sie einen Link zur hochgeladenen PDF-Datei (stellen Sie sicher, dass „In neuem Tab öffnen“ deaktiviert ist).
- Den Viewer anpassen. Verwenden Sie die Lightbox Studio-Einstellungen, um den Viewer-Stil auszuwählen (Basic, Standard, Express, Fusion).
- Seite veröffentlichen. Wenn Besucher auf den Link klicken, öffnet sich die PDF-Datei in einem stilvollen Lightbox-Overlay.
Wie schneiden diese Methoden im Vergleich ab?
| Methode | Am besten geeignet für | Hauptlimit |
|---|---|---|
| Elfsight PDF-Einbettung | Professionelle Dokumentanzeige mit vollständiger Anpassung und Datei-Viewer-Option, um Besucher auf der Website zu halten. | Für den Dashboard-Zugang ist ein Konto bei einem Drittanbieter erforderlich. |
| Squarespace Native Link | Einfache Downloads und schnelle Dateifreigabe ohne zusätzliche Einrichtung. | Öffnet sich in einem neuen Tab; keine Inline-Vorschau oder Designsteuerung; 20‑MB-Dateigrößenlimit pro Upload. |
| Google Drive-Einbettung | Kostenlose Inline-PDF-Vorschau, wenn Sie bereits Google Drive verwenden. | Abhängig von Googles Verfügbarkeit; kann langsam sein; begrenzte Designoptionen. |
| Lightbox Studio | PDF-Viewer-Popups für Produktseiten und Dokumentengalerien. | Verursacht zusätzlichen Plugin-Overhead; ideal für kleinere PDF-Sammlungen; die Anpassung des Viewers ist eingeschränkt. |
📝 Best Practices: Maximieren Sie Ihre PDF-Viewer-Ergebnisse
Aus der Zusammenarbeit mit Tausenden Squarespace-Nutzern haben wir gelernt, dass wenige gezielte Anpassungen die Leistung Ihrer eingebetteten PDFs messbar verbessern. Hier ist unsere Checkliste, um das Beste aus Ihrem Setup herauszuholen:
- Dateigröße für schnelle Ladezeiten optimieren. Komprimieren Sie Ihre PDFs auf 2–5 MB, bevor Sie sie Ihrem Widget hinzufügen. Kleinere Dateien laden schneller und verbessern das SEO-Ranking sowie das mobile Nutzererlebnis Ihrer Seite.
- Aussagekräftige Dateinamen verwenden. Vergeben Sie klare Bezeichnungen für Ihre PDFs wie “Produkt-Spezifikationen.pdf” oder “Kunden-Fallstudie.pdf” statt generischer Namen. Eine aussagekräftige Benennung hilft sowohl SEO als auch dem Verständnis der Nutzer.
- Wähle den Datei-Viewer für Engagement. Wenn du möchtest, dass Besucher PDFs auf deiner Website tatsächlich lesen, nutze das Dateiviewer-Layout. Inline-Vorschau reduziert Absprungraten und erhöht die Verweildauer.
- Fügen Sie dem Widgettitel eine aussagekräftige Bezeichnung hinzu. Anstatt es leer zu lassen, verwenden Sie einen Titel wie Ressourcenbibliothek oder Unseren Leitfaden herunterladen, um die Erwartungen der Besucher zu lenken.
- Auf Mobilgeräten testen. Prüfen Sie Ihre PDF-Einbettung stets auf Smartphones und Tablets. Stellen Sie sicher, dass der Datei-Viewer lesbar bleibt und das Layout sich gut an kleinere Bildschirme anpasst.
- PDFs strategisch platzieren. Fügen Sie ein PDF in Squarespace dort ein, wo der relevante Inhalt zu finden ist – Produktanleitungen neben Produktbeschreibungen, Fallstudien neben Kundenaussagen, Leitfäden auf den Ressourcen-Seiten.
- Download-Buttons deutlich sichtbar platzieren. Wenn dein Ziel darin besteht, Leads zu generieren oder Interesse zu messen, mache den Download-Button sichtbar und nutze die Akzentfarbe deiner Marke, um Aufmerksamkeit zu erzeug.
- Engagement in Analytics überwachen. Verfolgen Sie, welche PDFs am häufigsten heruntergeladen oder angesehen werden, in Ihrer Squarespace-Analytik, um zu verstehen, welche Inhalte am besten ankommen.
Diese Praktiken funktionieren, weil sie die Besucherpsychologie ansprechen: Schnelleres Laden hält die Aufmerksamkeit, klare Navigation reduziert Verwirrung, und eine strategische Platzierung stellt sicher, dass Ihre PDFs gefunden werden.
FAQ: Plugin-Probleme und Lösungen
Hier finden Sie Antworten auf die häufigsten Fragen von Elfsight-Nutzern zur Einbindung von PDFs in Squarespace:
Warum erscheint mein PDF-Widget nicht, nachdem ich den Einbettungscode eingefügt habe?
Kann ich in Squarespace eine PDF hinzufügen, wenn die Datei größer als 20 MB ist?
Beeinträchtigt das Einbetten einer PDF-Datei die Ladegeschwindigkeit Ihrer Squarespace-Seite?
Können Besucher PDFs herunterladen, die ich mit dem Elfsight-Plugin eingebettet habe?
Wie aktualisiere ich eine PDF, nachdem ich sie bereits auf meiner Seite eingebettet habe?
Ist das Einbetten einer PDF-Datei gut für die SEO auf Ihrer Squarespace-Website?
Kann ich mehrere PDFs auf einer Seite einbetten?
Funktioniert das Datei-Viewer-Layout mobil gut?
Nächste Schritte: PDFs einbetten und Engagement steigern
PDFs auf deiner Squarespace-Website mit einem PDF-Viewer, der ohne Code erstellt wurde, verändern, wie Besucher mit deinen Inhalten interagieren. Ob Produktleitfäden, Fallstudien, Zertifikate oder Ressourcenbibliotheken – eingebettete Dokumente halten dein Publikum bei der Stange und auf deiner Website. So verwandeln sich Gelegenheits-Besucher in informierte Kunden und Leads.
Haben Sie Fragen, Feedback oder möchten Sie teilen, wie Sie PDF-Einbettungen verwenden? Treten Sie unserem aktiven Community-Forum bei oder wenden Sie sich an unser Support-Team – wir helfen Ihnen gerne, das Beste aus Ihren Widgets herauszuholen. Bereit, Ihre Squarespace-Inhalte auf das nächste Level zu heben? Betten Sie heute Ihre erste PDF-Datei ein.
