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.com

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.com. Anschließend ziehe deine PDF auf die Schaltfläche der Website. Deine Datei wird dann auf die Server hochgeladen.

Upload PDF auf Yumpu um HTML Blätterkatalog zu erstellen

Nachdem der Upload abgeschlossen ist, musst du nur einen neuen Account erstellen. Klicke dazu auf den Link ganz unten in der Upload Box.

Konto erstellen

Um dich zu registrieren, musst du deine E-Mail Adresse angeben. Du bekommst dann eine Aktivierungs-Mail. Mit einem Klick auf den Button in dieser Mail, aktivierst du deinen Account.

Bestätigungs E-Mail

Du wirst auf die Website weitergeleitet. Nun kannst du einen Benutzernamen und ein Passwort festlegen.

Dein Account ist 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 als erstes mit der Maus über deinen Benutzernamen. Und klickst dann auf „Magazine verwalten“.

HTML5 Blätterkataloge verwalten

So gelangst du in den Dokumenten Manager. Hier siehst du alle deine Online Magazine. Klicke beim neuen Magazin auf „Magazin bearbeiten“. html5 blätterkatalog bearbeiten

Die wichtigsten Einstellungen befinden sich direkt oben auf der Seite. 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.

Einstellungen im HTML5 Blätterkatalog

Schritt 4 – Links in den Blätterkatalog einfügen

Da der HTML5 Blätterkatalog nun konfiguriert ist, können wir Links von den Produkten auf unseren Online Shop setzen. Dazu verwenden wir den sogenannten Hotspot Editor. Zu diesem gelangen wir, indem wir im Dokument Manager beim gewünschten Magazin auf „Seiten bearbeiten“ klicken.

hotspot editor

Hier kurz die Grundfunktionen des Hotspot Editors erklärt. 1) Navigationsleiste mit den verschiedenen Hotspot Elementen (Video, Audio, Link, etc.). 2) Navigationsleiste mit den Seiten des Katalogs. 3) Einstellungen des zurzeit markierten Hotspots. 4) Ein Hotspot Element.

Hotspot Editor

Um einen Link hinzuzufügen, wähle die gewünschte Seite (2) und klicke in der linken Navigationsleiste (1) auf das Ketten-Symbol. Anschließend klicke auf der Seite an die gewünschte Stelle, ziehe den Hotspot auf und klicke erneut. Nun musst du den Hotspot nur noch auf der rechten Seite (3) konfigurieren. Gebe eine URL und einen Namen ein. Klicke nun auf „Speichern“.

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“.

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 in den html code ihrer webseite

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 TimeUm aus der PDF-Datei eine PDF blättern HTML5 zu erstellen, bietet Yumpu.com 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 on Ipad and Iphone

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

supportFalls 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.