Kostenloses Flipbook-Embed für Ihre Website
Auf der Suche nach einer schnellen Möglichkeit, eine PDF-Datei in ein digitales Flipbook zu verwandeln? Mit Elfsight lassen sich interaktive Online-Broschüren ganz einfach in jede Website einbetten. Das Flipbook-Widget von Elfsight ist eine codefreie Möglichkeit, ein kostenloses Flipbook einzubetten:
- Wählen Sie im Editor die passende Vorlage für Ihren Anwendungsfall.
- Laden Sie eine PDF-Datei hoch oder fügen Sie einen Link hinzu, und verwandeln Sie sie in ein Flipbook.
- Holen Sie sich einen Installationscode für Ihre Website und fügen Sie ihn auf der gewünschten Seite ein.
Kein Anmelden nötig, um Ihr Flipbook live zu sehen. Jetzt im Editor testen! ⇩
So binden Sie ein Flipbook in jede Website ein.
Sie können ganz einfach ein Flipbook für Ihre Website erstellen – ganz ohne Programmierung. Beginnen Sie einfach im Editor und schließen Sie Ihr Projekt ab. Sie müssen kein Konto erstellen, bevor Sie mit dem Ergebnis zufrieden sind und das Flipbook-Embed auf Ihrer Website einbetten möchten.
- Fügen Sie das Flipbook Ihrer Website hinzu. Wenn Sie fertig sind, klicken Sie auf ‘Zur Website hinzufügen’, um den HTML-Code Ihres Widgets zu erhalten. Den Code können Sie verwenden, um das Flipbook in jede Website-Plattform einzubetten.
Lassen Sie uns zeigen, wie Sie Ihren Flipbook zu den beliebtesten CMS-Plattformen und Website-Buildern hinzufügen.
PrestaShop-Sprachumschalter-Addon
Das Hinzufügen des Button-Widgets zu einer bestimmten Seite Ihrer HTML-Website ist einfach. Fügen Sie einfach den von Elfsight erstellten Code an der gewünschten Stelle ein.
- Greifen Sie auf das Backend Ihrer Website zu. Stellen Sie sicher, dass Sie den HTML-Code im Admin-Bereich bearbeiten können, um das Widget nahtlos zu integrieren.
- Den Berechnungs-Code einfügen. Wählen Sie den Ort auf Ihrer Website, an dem das Widget erscheinen soll, und fügen Sie den HTML-Code Ihres Buttons hinzu.
- Änderungen speichern. Prüfen Sie, ob alles wie erwartet funktioniert und auf der Seite konsistent aussieht.
Flipbook auf WordPress-Website einbetten
No-Code-Widget schnell in Ihre Website einbetten, indem Sie den bereitgestellten Code in einen Block einfügen. So erscheint Ihre Schaltfläche genau an der Stelle, die Sie benötigen.
- Melden Sie sich bei Ihrem WordPress-Konto an. Sie müssen im Admin-Bereich arbeiten, um Änderungen am HTML-Code vorzunehmen.
- Gehen Sie zu „Seiten“ und wählen Sie die gewünschte Seite aus. Berücksichtigen Sie Ihre Geschäftsziele und Ihre Gründe für das Einbetten des Plugins in einen bestimmten Bereich.
- Fügen Sie einen benutzerdefinierten HTML-Block hinzu. Er muss im vorgesehenen Bereich der Website erscheinen, in den Sie den Button eingebettet haben.
- Fügen Sie den generierten Code in diesen Block ein. Vergessen Sie nicht, die Seite zu „Aktualisieren“ und die Funktionsweise des Widgets zu überprüfen.
Flipbook in WordPress erstellen→
Flipbook auf Ihrer Wix-Website einbetten
Das Hinzufügen des Widget-Codes zusammen mit Ihrem HTML-Button zu einer erforderlichen Wix-Seite ist einfach. Der von Elfsight bereitgestellte benutzerdefinierte Code fügt sich nahtlos in den gewünschten Bereich der Seiten ein.
- Greifen Sie auf den Wix-Editor zu. Loggen Sie sich in Ihr Wix-Konto ein und wählen Sie die Website aus, die Sie bearbeiten möchten. Öffnen Sie das Dashboard Ihrer Website und klicken Sie auf „Site bearbeiten“, um den Editor zu öffnen.
- Einen HTML-Block für das Widget hinzufügen. Klicken Sie auf das Plus-Symbol im linken Menü und navigieren Sie zum Abschnitt Einbetten. Unter dem Tab ‘Benutzerdefinierte Einbettungen’ wählen Sie ‘Ein Widget einbetten’, um Ihrer Seite einen neuen HTML-Block hinzuzufügen.
- Fügen Sie den HTML-Code des Button-Widgets ein. Klicken Sie auf „Code eingeben“ und fügen Sie den Installationscode aus dem Button-Widget-Editor ein. Nachdem Sie den Code eingefügt haben, klicken Sie auf „Aktualisieren“, um das Widget in Ihre Seite einzubetten.
- Passen Sie die Abmessungen und die Platzierung des Widgets an. Passen Sie Größe und Position des Widgets auf der Seite an. Stellen Sie sicher, dass es perfekt passt und optisch überzeugt, indem Sie Größe und Position sorgfältig festlegen.
- Für mobile Geräte optimieren. Wechseln Sie zum mobilen Editor und passen Sie das Widget nach Bedarf an. Stellen Sie sicher, dass das Widget auf Mobilgeräten gut aussieht, und veröffentlichen Sie Ihre Änderungen, sobald das Layout Ihnen gefällt.
Flipbook auf Ihrer Shopify-Website einbetten
Fügen Sie den HTML-Button schnell zu jeder Seite Ihrer Shopify-Website hinzu. Sie müssen lediglich den vorgefertigten Code von Elfsight an einer vorgesehenen Stelle Ihrer Website einfügen.
- Gehen Sie zum Shopify-Admin-Bereich. Sie müssen den Bereich „Online Store“ der Website finden.
- Wählen Sie im Dropdown-Menü ‘Anpassen’. Danach wählen Sie im linken Menü ‘Abschnitt hinzufügen’.
- Unter ‘Benutzerdefinierte Inhalte’ auf ‘Hinzufügen’ klicken. Sie müssen die vorinstallierten Shopify-Elemente entfernen.
- Wählen Sie „Benutzerdefiniertes HTML“. Es ist die Option, die Sie im Menü „Inhalt hinzufügen“ finden.
- Rufen Sie den Abschnitt ‘HTML’ auf. Hier können Sie den Installationscode des Formulars einbetten und alle Änderungen speichern.
Flipbook in Shopify erstellen→
Flipbook auf Squarespace-Website einbetten
Jeder kann den anpassbaren Button schnell auf der gewünschten Seite einer Squarespace-Website einbetten. Gib einfach den von Elfsight generierten Code in einen speziellen Block der Seite ein.
- Melden Sie sich bei Ihrem Squarespace-Konto an. Melden Sie sich bei Ihrem Squarespace-Konto an und wählen Sie die Website für das Widget aus. Navigieren Sie zum Dashboard Ihrer Website und wählen Sie die Website aus, die Sie bearbeiten möchten.
- Gehe zum Abschnitt Website. Wähle die Seite aus, auf der du das Formular-Widget hinzufügen möchtest. Öffne im Hauptmenü den Abschnitt Website und wähle die gewünschte Seite.
- Wählen Sie ‚Bearbeiten‘ und anschließend ‚Abschnitt hinzufügen‘. Klicken Sie auf der ausgewählten Seite auf ‚Bearbeiten‘ und wählen Sie dann ‚Abschnitt hinzufügen‘, wo das Widget funktionieren soll. So erstellen Sie einen neuen Bereich auf Ihrer Seite für das Widget.
- Füge einen Code-Block hinzu. Wähle ‘Einen leeren Abschnitt hinzufügen’, klicke dann auf ‘Block hinzufügen’ und wähle aus der Liste ‘Code’. Hier fügst du den Widget-Code deines Buttons ein.
- Installationscode des Widgets einfügen. Im Bearbeiten-Symbol fügst du den Installationscode des Button-Widgets ein und passt die Breite des Blocks an. Stelle sicher, dass das Widget gut platziert aussieht und optisch ansprechend auf deiner Seite wirkt.
Flipbook in Squarespace erstellen→
Flipbook auf deiner Webflow-Website einbetten
Das Hinzufügen des Widgets zu Webflow-Seiten klappt reibungslos, da Sie lediglich ein Embed-Element hinzufügen müssen, in dem Sie den generierten HTML-Code Ihres Buttons einfügen.
- Starte in Webflow. Melde dich bei deinem Webflow-Konto an und wähle die Website aus, auf der du das Widget einbetten möchtest.
- Widget einbetten. Im Webflow-Editor klicken Sie auf das Plus-Symbol. Ziehen Sie anschließend das Embed-Element aus dem linken Menü an die Stelle, an der der Button angezeigt werden soll.
- Code einfügen. Fügen Sie den Installationscode des Formulars in den erscheinenden HTML-Einbettungscode-Editor ein. Danach klicken Sie auf ‘Speichern & Schließen’.
- Anpassung und Veröffentlichung. Passen Sie die Einstellungen Ihres Buttons an, drücken Sie anschließend „Veröffentlichen“ und wählen Sie die Domains aus, auf denen er aktiviert wird.
Flipbook in Webflow erstellen →
Flipbook auf einer Elementor-Website einbetten
Die Integration des Button-Widgets in Elementor ist einfach und bequem. Sie benötigen lediglich einen leeren Block auf Ihrer Seite, in den Sie den Widget-Code einfügen.
- Starten Sie im WordPress-Backend. Melden Sie sich im Backend Ihrer WordPress-Website an, gehen Sie zu ‘Seiten’ und wählen Sie die Seite aus, auf der Sie das Button-Widget hinzufügen möchten.
- Elementor-Bearbeitung starten. Wählen Sie ‘Mit Elementor bearbeiten’, um Ihre gewählte Seite anzupassen.
- Das HTML-Element implementieren. Verwenden Sie die Drag-and-Drop-Funktion, um das HTML-Element auf Ihrer Seite zu platzieren.
- Fügen Sie den Widget-Code in Ihre Website ein. Fügen Sie den HTML-Code des Buttons von Elfsight in das HTML-Code-Feld ein.
- Aktualisieren und genießen. Klicken Sie auf Aktualisieren, um Ihre Änderungen anzuwenden und Ihre Seite dank des eingebetteten Buttons zu sehen.
Flipbook mit Elementor erstellen →
Vorteile von Flipbooks auf der Website
Warum sollten Sie mit Elfsight ein Flipbook erstellen, statt einfach eine PDF-Datei auf der Website hochzuladen? Hier ist eine kurze Übersicht der Vorteile dieses visuell ansprechenden Ansatzes basierend auf den Funktionen des Elfsight Flipbook-Widgets:
Nr. 1 Präsentieren Sie Ihre Arbeit eindrucksvoller
Aufgrund realistic page-flipping mit Papiergeräuschen und bequemen Steuerelementen zur Navigation verleiht das Widget allem, was Sie präsentieren, eine noch professionellere Note: Produkte, Dienstleistungen, Berichte, Zeitpläne Ihres Unternehmens, Richtlinien usw.
#2 Das Seherlebnis Ihrer Kunden verbessern
Funktionen wie Zoom und Vollbildansicht oder Einzelansicht erleichtern das detaillierte Erkunden des Flipbooks. Jeder Benutzer kann Ihre Datei lesen, da das Widget für alle Geräte und Bildschirme optimiert ist.
#3 Machen Sie es ansprechender und relevanter für Ihre Marke
Sie können Hintergrund und Theme-Farbe anpassen, um ein konsistenteres Erscheinungsbild Ihrer Inhalte zu erzielen. Durch das Hinzufügen Ihres benutzerdefinierten CSS und JS erreichen Sie ein perfektes Ergebnis und machen Ihr Flipbook zu einem nahtlosen Bestandteil Ihrer Website.
Alternative Wege, ein digitales Flipbook zu erstellen
Wenn Drittanbieter-Lösungen wie Widgets und Plugins Ihnen nicht zusagen, Sie aber dennoch eine perfekte Flipbook-Software benötigen, gibt es weitere Möglichkeiten, Ihnen beim Erstellen eines Flipbooks zu helfen, das Sie anschließend auf Ihrer Website hochladen können.
#1 Desktop-Software für digitale Flipbooks
Desktop-Software ist eine großartige Option, um professionelle, polierte Flipbooks mit vielen Anpassungsmöglichkeiten zu erstellen. Tools wie Adobe InDesign ermöglichen es Ihnen, Layouts mit interaktiven Funktionen zu gestalten, während FlippingBook Publisher darauf abzielt, die Flipbook-Erstellung dank integrierter Optionen zum Hinzufügen von Multimedia und Branding zu erleichtern. Beide bieten die Flexibilität, offline zu arbeiten, und liefern hochwertige Ergebnisse, die auf Ihre Bedürfnisse zugeschnitten sind.
Vorteile von Desktop-Lösungen
- Offline-Zugriff. Ohne Internetverbindung arbeiten – ideal für sichere Umgebungen oder Projekte unterwegs.
- Erweiterte Anpassungsmöglichkeiten. Unterstützt Multimedia, interaktive Elemente und detailliertes Branding.
- Hochwertige Ergebnisse. Erstellt professionell gestaltete Flipbooks mit flüssigen Animationen und responsiven Designs.
Nachteile von Desktop-Lösungen
- Kosten. Die meisten Desktop-Softwares arbeiten mit Abonnements oder hohen Einmalkosten.
- Lernkurve. Fortgeschrittene Funktionen benötigen etwas Einarbeitungszeit.
- Geräteabhängigkeit. Beschränkt auf das System, auf dem die Software installiert ist, was die Zusammenarbeit weniger flexibel macht.
#2 HTML5-Flipbook-Erstellung
Wenn Sie mit etwas Code vertraut sind, bietet die HTML5-Flipbook-Erstellung beispiellose Flexibilität. Mit Bibliotheken wie Turn.js oder PDF.js können Sie vollständig anpassbare Flipbooks erstellen, die sich nahtlos in Ihre Website integrieren. Diese Tools ermöglichen es Ihnen, einzigartige Funktionen, Animationen und interaktive Elemente hinzuzufügen und so volle kreative Kontrolle zu gewinnen.
Vorteile von HTML5-Flipbooks
- Umfassende Anpassung. Jedes Detail des Flipbooks lässt sich perfekt auf Ihre Marke und das Design Ihrer Website abstimmen.
- Skalierbarkeit. Ideal für umfangreiche Projekte mit speziellen Funktionsanforderungen, z. B. Analytik oder einzigartige Animationen.
- Moderne Technologie. HTML5 sorgt für responsives Design und reibungslose Leistung über alle Geräte und Browser hinweg.
Nachteile von HTML5-Flipbooks
- Programmierkenntnisse erforderlich. Sie benötigen Entwicklungskenntnisse oder einen erfahrenen Entwickler, um die Lösung zu implementieren und anzupassen.
- Zeitaufwendig. Die Erstellung eines Flipbooks von Grund auf neu oder das Anpassen von Bibliotheken kann deutlich mehr Zeit in Anspruch nehmen als vorgefertigte Tools.
- Begrenzte out-of-the-box-Funktionen. Im Gegensatz zu Software-Tools liefern HTML5-Bibliotheken keine fertigen Oberflächen oder Vorlagen, was mehr Aufwand erfordert, um von Grund auf neu zu starten.
Vorlagen für Flipbook-Widget
Genießen Sie einen einfachen Einstieg mit fertigen Vorlagen für Ihr individuelles Flipbook. Sie können diejenige auswählen, die Ihnen am besten gefällt, und alles an Ihre spezielle Situation anpassen.
40+ Flipbook-Vorlagen entdecken
Fazit
Abschließend ist das Einbetten eines Flipbooks mit dem Flipbook-Widget von Elfsight, das ohne Code auskommt, eine einfache, aber leistungsstarke Methode, Ihre Website zu verbessern. Im Gegensatz zu herkömmlichen PDFs lässt sich dieses Flipbook nahtlos in gängige Website-Builder integrieren und bietet ein optisch ansprechendes, vollständig anpassbares Design, das zum Stil Ihrer Website passt.
Mit intuitiven Navigationssteuerelementen genießen Ihre Leser ein reibungsloseres und ansprechenderes Erlebnis. Verwandeln Sie Ihre Dokumente in interaktive, hochwertige Flipbooks und lassen Sie Ihre Inhalte mühelos hervorstechen!
Als Alternative haben wir weitere Möglichkeiten besprochen, ein Flipbook zu erstellen, um Texte und visuelle Materialien zu präsentieren.
Weitere Infos?
Wir hoffen, dieser Leitfaden war hilfreich! Zögern Sie nicht, uns zu kontaktieren, um mehr über die Erstellung eines maßgeschneiderten Flipbooks für jede Website zu erfahren. Bei Elfsight setzen wir uns dafür ein, nahtlose, ohne-Code Widget-Lösungen bereitzustellen, damit Ihre Erfahrung reibungslos und erfolgreich verläuft.
Schließen Sie sich unserer lebendigen Community an, in der Ideen und Fachwissen geteilt werden. Wir freuen uns immer über Ihre Verbesserungsvorschläge. Fügen Sie sie gerne unserer Wishlist hinzu.
