HTML5 Blätterkatalog im Onlineshop? (Anleitung)

HTML5 Blätterkatalog im Onlineshop? (Anleitung)

Wenn du einen Online-Shop hast, möchtest du deine Produkte in ansprechender Art und Weise präsentieren. Beispielsweise in einem HTML5 Blätterkatalog. Eine einfache, schnelle und kostenlose Methode deine Magazine schnell an neue Leser zu bringen, bietet Yumpu. 

Du bist stolzer Besitzer eines Magazins mit interessanten Inhalten und Top-Angeboten? Aber du weißt nicht wie du es am besten an deine Kunden und Leser bringst?

HTML Blätterkataloge laden schneller am Laptop

Online Blätterkataloge laden schnell und sehen gut aus

PDF-Dateien sind eine Möglichkeit, da sie systemübergreifend lesbar sind. Aber gerade bei einem Katalog mit vielen Produkt-Bildern entstehen schnell übergroße Dateien. Außerdem haben diese lange Ladezeiten und machen vor allem auf mobilen Geräten Probleme.

Zwar können deine Leser die PDF-Dateien auch direkt im Browser anschauen. Jedoch kommt es dabei ganz auf die Plugins und die Browser-Einstellungen an. So kannst du nie wissen, ob deine Besucher die Seiten zuerst herunterladen müssen, um sie anzusehen. Damit bietet ein HTML5 Blätterkatalog die bessere Lösung, da dieser direkt im Browser sichtbar ist.

Warum ein HTML5 Blätterkatalog von Yumpu die beste Wahl ist

  • Lesbar auf allen Geräten und Auflösungen (Computer, Tablet, Smartphone)
  • Eigenes Branding verwendbar.
  • User müssen nichts herunterladen oder installieren.
  • Ein blätterbares PDF HTML5 lädt viel schneller als ein herkömmliches PDF Dokument.
  • Optimiert für alle großen Suchmaschinen.
  • Flash und Javascript Fallback

Wie erstelle ich ein HTML5 Blätterkatalog?

Genug über die Funktionen dieses Pageflip Blätterkatalog Tools geredet. Jetzt geht es an die Praxis. Ich werde dir hier Schritt für Schritt erklären, wie du aus einem PDF einen Online Blätterkatalog erstellen kannst. Anschließend kannst du sogar die Produkte auf deinen Shop verlinken.

Was du für dieses Tutorial benötigen:

  • 10-20 Minuten an Zeit
  • Grundlegende PC Kenntnisse (Office, Internet)
  • Dein Katalog als PDF oder die Idee für die Erstellung eines Neuen Katalogs

So sieht der fertige HTML5 Blätterkatalog dann aus:

Schritt 1 – Einen Online Blätterkatalog erstellen

Um auf Yumpu eine PDF zum blättern zu erstellen, benötigst du ein PDF Dokument. (Solltest du deinen Katalog bereits in PDF Form besitzen, kannst du direkt mit Schritt 2 fortfahren.)

Wie immer führen viele Wege zum Ziel. Du kannst dir unter anderem ein Photoshop oder InDesign Vorlage herunterladen. Anschließend musst du diese dann als PDF Dokument speichern. Derartige Vorlagen kannst du ganz einfach auf Graphicriver.net finden. Ich werde mich hier aber auf eine einfachere Variante konzentrieren. Deshalb habe ich mir eine Powerpoint Vorlage gekauft.

Ich erstelle hier zum Vorzeigen einen 8-seitigen Katalog in Powerpoint. Du kannst allerdings auch jedes andere beliebige Tool wie Word oder Open Office verwenden. Die PDF-Export-Funktion besitzen so gut wie alle modernen Programme.

1) Als erstens öffnen wir das heruntergeladene Powerpoint Dokument. Hier sehen wir nun das Design. Die Platzhalter kannst du ganz einfach durch einen Doppelklick mit Bildern austauschen.

Powerpoint Template

2) Nun kannst du beginnen zu designen. Ich habe einfach ein paar Testbilder eingefügt. Nicht die Texte vergessen anzupassen. Links, die du bereits in PowerPoint einfügst, erkennt die Flipbook Software. Dadurch baut die Software diese direkt in den HTML5 Blätterkatalog ein.

Powerpoint Edit

3) Nachdem du die Arbeiten abgeschlossen hast, klicke oben links auf „Datei“. Dann auf „Exportieren“ und anschließend auf „PDF/XPS-Dokument erstellen“. Anschließend kannst du das Powerpoint Dokument als PDF abspeichern. Und schon ist das Erstellen eines PDF Katalogs abgeschlossen!

Powerpoint Export

Schritt 2 – Den PDF Katalog in einen HMTL5 Blätterkatalog umwandeln

Gehe zu Yumpu und klicke auf das graue Icon im rechten Eck. Hier wählst du „Einloggen bei YumpuPublishing“.

einloggen-bei-yumpupublishing

Anschließend registrierst du dich mit deiner Email Adresse und wartest auf den Bestätigungslink der dir Yumpu in wenigen Sekunden zusendet. Nach dem du deine Registrierung abgeschlossen hast, kannst du mit dem Upload deiner PDF beginnen.

Zieh deine PDF auf die Schaltfläche der Website und warte bis die Datei von der Software registriert wird.

pdf-datei-registrieren

Deine Datei wird dann auf die Server hochgeladen. Nachdem der Upload abgeschlossen ist, scheint sie auch schon direkt auf:

pdf-katalog-hochgeladen

Dein PDF Katalog ist nun erstellt. Jetzt werden wir das hochgeladene Dokument bearbeiten!

Schritt 3 – HTML5 Blätterkatalog konfigurieren

Zwar ist der Katalog nun hochgeladen und umgewandelt. Jedoch fehlt noch der Feinschliff. In den Magazin-Einstellungen kannst du Dinge wie den Titel, die Beschreibung und die Tags bearbeiten. Um zu den Einstellungen zu gelangen, fährst du einfach etwas weiter runter zu den Grundinformationen:

pdf-katalog-grundinformationen

Um den Lesern das beste Lese-Erlebnis zu bieten, ist es wichtig, einen aussagekräftigen Titel und eine ausführliche Beschreibung zu wählen. Auch damit deine Leser dich besser in Suchmaschinen finden können. Die Tags solltest du passend zum Magazin wählen. Mindestens fünf Stück sind zu empfehlen. Sollten dir die automatisch extrahierten Tags nicht gefallen, kannst du diese über einen Klick auf das „x“-Symbol entfernen. Wenn du diese Grund-Einstellungen ausgefüllt hast, indexieren und listen Suchmaschinen dein Magazin besser.

korrekte-tags
Schritt 4 – Media & Links in den Blätterkatalog einfügen

Da der HTML5 Blätterkatalog nun konfiguriert ist, können wir Links, Audio oder Videos von den Produkten auf unseren Online Shop setzen. Dazu verwenden wir den sogenannten Hotspot Editor. Zu diesem gelangen wir, indem wir weiter runter zum Hotspot Editor scrollen.

hotspot-editor-öffnen

Links findest du das Icon für die Verlinkung. Wähle dann den Bereich den du gerne verlinken willst und setze deinen Link, rechts wo „Link:“ steht.

pdf-katalog-verlinkung

Dein Link ist hinzugefügt und im Magazin leicht bläulich hinterlegt. Links öffnen sich immer in einem neuen Tab.

Schritt 5 – HTML5 Blätterkatalog einbetten

Mit einem HTML5 Blätterkatalog hast du auch die Möglichkeit, diesen in die eigene Webseite einzubinden. Dies geht ganz bequem per Embed-Code. Öffne einfach dein Magazin und klicke auf „Einbetten“.

pdf-katalog-einbetten

Als nächstes musst du den Embed Typ wählen. Ich nehme den Advanced Embed, da er mir am meisten Einstellungs-Möglichkeiten erlaubt. Auf der linken Seite kannst du dann die Einstellungen treffen. Diese sind in Tabs unterteilt. Das wichtigste ist die Einstellung unter „Tools“. Hier wählen wir HTML5 als Player aus.

Wenn alle Einstellungen getroffen sind, klicke auf „Speichern“ und kopiere anschließend den generierten Embed Code. Füge diesen in den HTML Code deiner Webseite ein. Fertig!

embed-code
HTML Blätterkataloge weitaus attraktiver und professioneller

Hierbei handelt es sich um eine Weiterentwicklung des PDF-Formats. Dank HTML5 bedarf es keiner zusätzlichen Plugins für den Browser. Zudem ist die Wirkung eines Blätterkatalogs weitaus attraktiver und professioneller als die einer herkömmlichen PDF-Datei. Der Blätterkatalog ist optisch wie ein Prospekt oder Magazin gestaltet. Dank 3D-Animation lassen sich die einzelnen Seiten wie bei einem Print-Medium einzeln umblättern.

HTML5 logo

So gibt es auch keine lange Wartezeit und du kannst die ersten Seiten bereits durchblättern. Und das bevor alle Daten heruntergeladen sind. Kein Besucher muss den Vorgang mehr abbrechen, weil ihm das Herunterladen zu lange dauert. Stattdessen lädt der Blätterkatalog dazu ein, noch weiter zu blättern. Und zu schauen, was die nächsten Seiten zu bieten haben. Dabei wirkt ein Blätterkatalog wie ein Hochglanz-Magazin. So kann auch der kleinste Online-Shop mit einer Präsentation aufwarten, die den größten Versandhäusern entspricht.

Kosten für PDF blättern HTML5? Nada!

Auch über die Kosten brauchst du dir keine Gedanken zu machen. Wer ein Programm zur Erstellung von PDF-Dateien hat, verfährt einfach genauso wie bisher. Aber auch mit herkömmlichen Schreib-Programmen kannst du heutzutage ansprechende Prospekte mit Bildern und Text erstellen. Die moderneren Programme erlauben auch, die erstellten Dateien direkt im PDF-Format abzuspeichern. Wer nicht über diese Möglichkeit verfüg, findet im Freeware- und Shareware-Angebot zahlreiche Konvertierungs-Programme.

Die Blätterkatalog HTML5 Lösung
Wecker Time

Um aus der PDF-Datei eine PDF blättern HTML5 zu erstellen, bietet Yumpu alle wichtigen Funktionen an. Dabei ist die Umwandlung nur eine Sache von wenigen Minuten. Hier ein paar Vorteile zusammengefasst.

Du kannst kostenlos eine unlimitierte Anzahl an Seiten in deinen Katalogen erstellen! Zudem kannst du die Produkte aus deinem Katalog oder Magazin direkt mit deinem Shop oder deiner Website verlinken. Ferner kannst du Video und Audio-Dateien integrieren. Auf Facebook oder Twitter kannst du auch deine Freunde animieren den Link einfach zu teilen. Und so mehr Leser finden. Deine Seiten lassen sich auch ganz leicht mit dem einfach handzuhabenden Katalog-Editor überarbeiten. Technische Vorkenntnisse sind dank der einfachen Handhabung der Freeware nicht notwendig. Die HTML Blätterkataloge lassen sich mobil und plattform-unabhängig darstellen.

responsive-magazine

HTML5 Blätterkataloge sind auf allen Geräten lesbar

Dein Blätterkatalog wird bei Yumpu gespeichert. Dies bringt zusätzlich den Vorteil, dass du keinerlei Speicherplatz auf dem Server verbrauchst. Zudem können auch Besucher der Yumpu-Webseite diesen Katalog dort immer finden. Damit können also auch neue Besucher auf den Shop aufmerksam werden, die ihn bisher gar nicht kannten. Ferner gibt es die Volltextsuche. Mit der High-Speed- Darstellung, blätterst du super schnell durch dein Magazin und zoomst in Bilder und Texte hinein.

Du handelst auch verantwortungsvoll. Mit Yumpu leistest du einen Beitrag zu Umwelt, da du kein Papier benötigst. Es werden weniger Bäume gefällt und somit wird weniger Strom und Wasser für die Herstellung von Papier benötigt. Um einen ePaper zu erstellen benötigst du gerade mal Minuten.

HTML5 Blätterkatalog auf dem ipad

Online Blätterkataloge sind sehr umweltfreundlich

Falls du Fragen oder Probleme hast, steht dir der Yumpu Support zur Seite. Auch zu deiner Publishing- Strategie beraten sie dich gerne. Du kannst dein eigenes Magazin mit der Freeware nicht nur selbst als blätterkatalog html5 erstellen. Sondern dieses auch noch um multimedia Inhalte erweitern. Außerdem kannst du diese auch komfortabel unterwegs updaten. Damit sorgst du dafür, dass deine Leser auf dem neuesten Stand bleiben.

Mehr Features gefällig?

Mit Yumpu AdFree hast du maximalen Schutz vor Fremdwerbung. Leser können deine HTML5 PDF runterladen und und ausdrucken! Außerdem kannst du das Yumpu-Logo ausblenden und statt dessen dein eigenes anzeigen lassen! Falls du wissen willst wie dein Magazin bei deinen Lesern ankommt, integrierst du einfach Google Analytics.

Der WEBKiosk bietet ein eigenes Design. Es lässt dir Freiheit in deiner Kreativität. Somit kannst du dir deinen Online Kiosk eigenhändig designen. Verkaufe auf deinem WEBKiosk, Plätze für Werbung und schaffe dir eine zusätzliche Einnahmequelle.

crowd

Mit Yumpu.com kannst du deine eigene App erstellen. Passend dazu gibt es den Plan APPKiosk. Lege deine eigenen Preise fest und rechne direkt im App-Store ab! Stelle deinen Abonnenten auch die Web-Version zur Verfügung, um immer flexibel zu bleiben. Abrechnungen kannst du einfach und mobil bedienen. Zu jeder Zeit. Auch Abos lassen sich mit Yumpu leichter vermarkten. Es ist die ideale Strategie jedes Publishers. Zudem können deine User auch offline lesen.

Kleiner Tipp von mir

Natürlich sind bei der Gestaltung die Urheberrechte einzuhalten. Am besten erstellst du selbst Fotos von den angebotenen Produkten. Und schreibst ein paar eigene Worte dazu. Damit vermeidest du nicht nur Urheberrechts-Verletzungen. Stattdessen hebst du dich auch noch von anderen ab.

Es mag einfacher sein, die üblichen Produktdaten einfach per Copy und Paste einzufügen. Aber wenn du dich von der Konkurrenz abheben willst, dann ist ein eigener Text am Besten. Besonders ansprechend sind Texte, die dem Käufer mehr als nur die rein technischen Daten vermitteln. Oder auch als ein Beschreibungstext, der so hundertfach im Internet zu finden ist.

Du kannst es kaum erwarten dein eigenes Magazin oder dein Katalog auf Yumpu zu erstellen? Dann lege heute noch los und lade deine PDF-Datei hoch. Und mache sie zu blätterbaren PDF.

Über die Autorin

Kerstin MerberWillkommen auf mypdf.me! Mein Name ist Kerstin und ich bin selbständige Grafikerin und nebenbei Webdesigner. Bei meiner Arbeit stosse ich immer wieder auf Fragen was PDF Dateien angeht und möchte dir die Antworten dazu hier auf dieser Seite zur Verfügung stellen.

5 Kommentare
  1. Vielen Dank, habe ich gleich ausprobiert und funktioniert einwandfrei. Auch die APP für IOS und Android scheint empfehlenswert

    Kommentar absenden
  2. Interessante Bericht und tolle Pics. Ich wusste nicht, dass der HTML 5 Blätterkatalog so viele Vorteile hat. Es ist bequem, weil man keine Software oder App herunterladen muss.

    Vielen Dank fuer die detaillierte Erklaerung!

    Kommentar absenden

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.