HTML5 Blätterkatalog im Onlineshop? (Anleitung)

HTML5 Blätterkatalog im Onlineshop? (Anleitung)

Wenn man einen Online-Shop hat, dann möchte man seine Produkte auch in ansprechender Art und Weise präsentieren, zum Beispiel in einem Blätterkatalog, natürlich online! Im Internet hat es viele Angebote nur scheinen die meisten nicht sehr seriös oder viele Seiten sind zu kompliziert. Eine einfache und schnelle Methode Ihre Magazine schnell an neue Leser zu bringen bietet die Internetplatform Yumpu.com – kostenlos. .

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

Deine Leser sind begeistert von deinen Artikeln und du benötigst nun eine richtige Plattform um dein Magazin oder Katalog zu publizieren?

myPDFKatalog

Online Blätterkataloge laden schnell und sind wunderschön

PDF-Dateien sind eine Möglichkeit, da sie systemübergreifend ausgelesen werden können. Aber gerade bei einem Katalog mit vielen Produktbildern entstehen schnell übergroße Dateien, die lange heruntergeladen werden müssen und vor allem auf mobilen Geräten Probleme machen.

Zwar können PDF-Dateien auch direkt im Browser gelesen werden, jedoch kommt es dabei ganz auf die Plugins und die Browsereinstellungen an, so dass man nie weiß, ob der Besucher die Seiten zuerst herunterladen muss, um sie anzusehen. Eine bessere Lösung bietet ein HTML5 Blätterkatalog, der direkt im Browser sichtbar ist.

Warum ein HTML5 Blätterkatalog die beste Wahl ist

  • Lesbar auf allen Geräten und Auflösungen (Computer, Tablet, Smartphone)
  • Eigenes Branding verwendbar
  • Es muss nichts heruntergeladen oder installiert werden
  • Lädt viel schneller als ein herkömmliches PDF Dokument
  • Optimiert für alle großen Suchmaschinen
  • Flash und Javascript Fallback

Anleitung – So erstellen Sie Ihren eigenen HTML5 Blätterkatalog

Genug über die Funktionen dieses Blätterkatalog Tools geredet, jetzt geht es an die Praxis. Ich werde Ihnen hier Schritt für Schritt erklären wie Sie aus einem PDF einen online Blätterkatalog für Ihren online Shop erstellen können und in diesem anschließend die Produkte auf Ihren Shop verlinken.

Was Sie für dieses Tutorial benötigen:

  • 10-20 Minuten an Zeit
  • Grundlegende PC Kenntnisse (Office, Internet)
  • Ihr 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 PDF Katalog erstellen

Um auf Yumpu einen HTML5 Blätterkatalog zu erstellen, benötigen Sie ein PDF Dokument. Sollten Sie Ihren Katalog bereits in PDF Form besitzen, können Sie direkt mit Schritt 2 fortfahren. Andernfalls werden wir jetzt ein PDF Dokument erstellen.

Wie immer führen viele Wege zum Ziel. Sie können sich zum Beispiel eine Photoshop oder InDesign Vorlage herunterladen und diese dann als PDF Dokument speichern. Derartige Vorlagen können Sie ganz einfach auf Graphicriver.net finden (diese kosten meist zwischen 10-15 Euro), wir werden uns hier aber auf eine einfachere Variante konzentrieren. Deshalb habe ich mir auf dieser Plattform eine Powerpoint Vorlage gekauft.

Man kann nämlich auch Microsoft Powerpoint Dokumente als PDF exportieren. Ich erstelle hier zum Vorzeigen einen 8-seitigen Katalog in Powerpoint, Sie können allerdings auch jedes andere beliebige Tool wie zum Beispiel Word, Open Office, etc. verwenden. Die PDF-Exportfunktion besitzen so gut wie alle modernen Programme.

1) Als erstens öffnen wir das heruntergeladene Powerpoint Dokument. Hier sehen wir nun das Design. Die Platzhalter können ganz einfach durch einen Doppelklick mit Bildern ausgetauscht werden.

mypdfPowerpointTemplate

 

2) Nun kann man beginnen zu designen. Ich habe einfach nur ein paar Testbilder eingefügt, Sie können sich ja etwas mehr Mühe geben 🙂

 

mypdfPowerpointEdit

3) Jetzt müssen nur noch die Texte eingesetzt werden. Denken Sie daran: Links die Sie bereits in Powerpoint und somit im PDF eingefügt haben, werden vom Blätterkatalog Service erkannt und direkt in Ihren HTML5 Blätterkatalog eingebaut. So ersparen Sie sich später Arbeit.

4) Nachdem Sie die Arbeiten abgeschlossen haben, klicken Sie oben links auf “Datei”, dann auf “Exportieren” und anschließend auf “PDF/XPS-Dokument erstellen”. Anschließend kann das Powerpoint Dokument als PDF abgespeichert werden. Und schon ist das Erstellen eines PDF Katalogs abgeschlossen!

mypdfPowerpointExport

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

Rufen Sie jetzt diesen Link auf: Yumpu.com. Anschließend ziehen Sie Ihren PDF Katalog in die Webseite hinein. Diese wird dann auf die Server hochgeladen.

myPDFUpload

Nachdem der Upload abgeschlossen ist, müssen Sie einen neuen Account erstellen. Klicken Sie dazu auf den Link ganz unten in der Upload Box.

Um sich zu registrieren müssen Sie nur Ihre E-Mail Adresse angeben. Sie erhalten dann eine Aktivierungsmail zugesandt. Mit einem Klick auf den Button in dieser Mail, aktivieren Sie Ihren Account.

myPDFMail

 

Sie werden auf die Webseite weitergeleitet und können nun einen Benutzernamen und ein Passwort festlegen.

myPDFUsername

Ihr Account ist nun erstellt, jetzt werden wir das hochgeladene Dokument bearbeiten!

Schritt 3 – BLätterkatalog HTML5 konfigurieren

Der Katalog ist nun zwar hochgeladen und umgewandelt, es fehlt jedoch der Feinschliff. In den Magazin-Einstellungen können wir Dinge wie den Titel, die Beschreibung und die Tags bearbeiten. Um zu den Einstellungen zu gelangen fahren wir als erstes mit der Maus über unseren Benutzernamen und klicken auf “Magazine verwalten”.

myPDFMagazineVerwalten

Sie gelangen in den Dokumenten Manager. Hier sehen Sie stets alle Ihre hochgeladenen Magazine. Klicken Sie beim neuen Magazin auf “Magazin bearbeiten”. mypdfMagazinBearbeiten

Die wichtigsten Einstellungen befinden sich direkt oben auf der Seite. Um den Lesern das beste Leseerlebnis zu bieten und um besser in Suchmaschinen gefunden zu werden, ist es wichtig, einen aussagekräftigen Titel und eine ausführliche Beschreibung zu wählen. Auch die Tags sollten passend zum Magazin gewählt werden. Mindestens 5 Stück sind zu empfehlen. Sollten Ihnen die automatisch extrahierten Tags nicht gefallen, können Sie diese über einen Klick auf das “x”-Symbol entfernen. Wenn diese Grundeinstellungen ordentlich ausgefüllt sind, wird Ihr Magazin in Suchmaschinen sehr viel höher indexiert und generiert somit viele neue Leser.

myPDFMagazinEinstellungen

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.

myPdfSeitenBearbeiten

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

myPDFHotspot

Um einen Link hinzuzufügen,wählen Sie die gewünschte Seite (2) und klicken Sie in der linken Navigationsleiste (1) auf das Ketten-Symbol. Anschließend klicken Sie auf der Seite an die gewünschte Stelle, ziehen den Hotspot auf und klicken erneut. Nun muss der Hotspot nur noch auf der rechten Seite (3) konfiguriert werden. Geben Sie eine URL und einen Namen ein und klicken Sie auf “Speichern”.

Ihr Link ist nun hinzugefügt und wird im Magazin leicht bläulich hinterlegt. Links werden immer in einem neuen Tab geöffnet.

Schritt 5 – HTML5 Blätterkatalog einbetten

Mit einem HTML5 Blätterkatalog haben sie auch die Möglichkeit, diesen in die eigene Webseite einzubinden. Dies geht ganz bequem per Embed-Code. Öffnen Sie einfach Ihr Magazin und klicken Sie auf “Einbetten”.

myPDfEinbetten

Als nächstes müssen Sie den Embed Typ wählen. Ich nehme den Advanced Embed, da er mir am meisten Einstellungsmöglichkeiten erlaubt. Auf der linken Seite können dann die Einstellungen getroffen werden. Diese sind in Tabs unterteilt. Das wichtigste ist die Einstellung unter “Tools”. Hier wählen wir HTML5 als Player aus.

myPDFEinbetten2

Wenn alle Einstellungen getroffen sind, klicken Sie auf “Speichern” und kopieren anschließend den generierten Embed Code in den HTML Code Ihrer Webseite. Fertig!

myPDFEmbedCode

Blätterkataloge weitaus attraktiver und professioneller

Hierbei handelt es sich um eine Weiterentwicklung des PDF-Formats. Dank HTML5 bedarf es hier 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 werden die einzelnen Seiten wie bei einem Printmedium einzeln umgeblättert.

myPDFHTML5

So gibt es auch keine lange Wartezeit und man kann die ersten Seiten bereits durchblättern, bevor alle Daten heruntergeladen sind. Anstatt dass der Besucher den Vorgang abbricht, weil ihm das Herunterladen einer großen Datei zu lange dauert, entsteht hier der gegenteilige Effekt, dass der Blätterkatalog dazu einlädt, noch weiter zu blättern und zu schauen, was die nächsten Seiten zu bieten haben. Dabei wirkt ein Blätterkatalog wie ein Hochglanzmagazin und der kleinste Online-Shop kann mit einer Präsentation aufwarten, die den größten Versandhäusern entspricht.

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

Auch über die Kosten braucht man sich keine Gedanken zu machen. Wer ein Programm zur Erstellung von PDF-Dateien hat, verfährt einfach genauso wie bisher. Aber auch mit herkömmlichen Schreibprogrammen kann man 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ügt findet im Freeware- und Shareware-Angebot zahlreiche Konvertierungsprogramme.

 

Die Blätterkatalog HTML5 Lösung

time21Um nun aus der PDF-Datei eine PDF blättern HTML5 zu erstellen, bietet Yumpu.com einen kostenlosen Online-Service an. Die Umwandlung ist eine Sache von wenigen Minuten. Alles was man benötigt ist die fertige PDF-Datei und eine gültige Email-Adresse. Auf der Internetseite lädt man die angefertigte Datei hoch und gibt die Email-Adresse an, über die die Bestätigungsmail versendet werden soll. Sobald man den Vorgang bestätigt hat wird die PDF-Datei hochgeladen und konvertiert. Als letzten Schritt erstellt Yumpu.com einen Code zum Einbetten in die eigene Homepage.

Yumpu.com bietet dir diesen optimalen HTML5 Blätterkatalog Service und du kannst kostenlos eine unlimitierte Anzahl an Seiten und deinen Katalogen erstellen! Du besitzt einen Webshop? Du kannst die Produkte aus deinem Katalog oder Magazin direkt mit ihm verlinken. Du kannst auch Video und Audiodateien integrieren. Auf Facebook oder Twitter kannst du auch deine Freunde animieren den Link einfach zu teilen um so mehr Leser finden. Der Upload von PDF-Dateien ist unbegrenzt. Deine Seiten lassen sich auch ganz leicht mit dem einfach handzuhabenden Katalog-Editor überarbeiten. Technische Vorkenntnisse sind dank der einfachen Handhabung von HTML5 Blätterkatalogen nicht notwendig. Das Blätterkatalog HTML5 Programm lässt sich auch einfach mobil und plattformunabhängig darstellen.

myPDFResponsive

HTML5 Blätterkataloge sind auf allen Geräten lesbar

Du kannst einbetten und über einen leichten Wizard ist die Seite schon in deinem eigenen Webshop eingebunden. So sorgst du für eine schnelle Verbreitung und kannst zu Hause am Notebook oder unterwegs am Tablet oder Smartphone, Likes und Leser dazugewinnen! komfortabel und mobil steigerst du wöchentlich die Anzahl der Besucher auf deinen Magazinen. Yumpu bietet auch eine Community. So kannst du die Magazine noch einfacher finden.

Tatsächlich bleibt der Blätterkatalog bei Yumpu gespeichert. Dies bringt zusätzlich den Vorteil, dass man keinerlei Speicherplatz auf dem Server verbraucht. 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.

Auch für die Erstellung des eigenen Blätterkatalogs ist es praktisch, dass die bisher erstellten Magazine dort einsehbar sind. So kann man sich schnell Ideen und Anregungen für den eigenen Blätterkatalog holen und hat hochkarätige Vorbilder von namhaften Firmen. Alles, was man nun noch braucht ist Kreativität und etwas Talent.

In nur drei einfachen Schritten lässt sich dein Katalog erstellen

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. Erstelle ein Flipbook indem du die PDF blättern HTML5 einfügst und hochlädst. Durch diesen Blätterkatalog HTML5 Service wird die Datei automatisch in ein ePaper umgewandelt.

mypdfiPadBook

Online Blätterkataloge sind sehr umweltfreundlich

Mit Yumpu AdFree hast du auch maximalen Schutz vor Fremdwerbung. Leser können deine PDF blättern HTML5 selbst runterladen und und ausdrucken! Wenn du nicht das Yumpu-Logo sondern dein eigenes Logo sehen möchtest, blende es aus und verwende deine eigene Farbkreation deines Unternehmens mit blätterkatalog html5! Falls du Zahlen benötigst und wissen möchtest, was bei deinen Lesern ankommt,integrierst du einfach Google Analytics in deine Dokumente und du weißt welche Interessen du bei deinen Lesern wächst. So bist du immer informiert und auf neuestem Stand. Update regelmäßig deine Magazine. Aktualisiere deine Magazine einfach so live.

Dieser Service steht zu seinen Kunden

supportDie Yumpu Experten stehen dir ebenfalls zur Verfügung und beraten dich zu deiner Publishing- Strategie oder Herstellung deiner eigenen App.Durch Yumpu.com kannst du deine eigene App erstellen und schalten. Passend dazu gibt es ein eigenes AppKiosk. Dort findest du deine eigene Sortierung in verschiedenen Rubriken in deiner Farbe mit deinem Logo. Die flexible Speicher-lösung vom APPKiosk macht es dir möglich, Magazine auf dein Gerät zu laden uns sie später sogar im Offline-Modus zu lesen! Dabei unterstützt die Volltextsuche. Durch sie lassen sich Volltexte in Magazinen finden, die noch nicht auf deinem Gerät sind. Mit der High-Speed- Darstellung, blätterst du super schnell durch dein Magazin und zoomst in Bilder und Texte hinein. Das WEBKiosk bietet ein eigenes Design. Es lässt dir lässt dir Freiheit in deiner Kreativität. Somit kannst du dir dein WEBKiosk eigenhändiog designen. Verkaufe auf deinem WEBKiosk, Plätze für Werbung und schaffe dir eine zusätzliche Einnahmequelle.

crowdMit Tag und Benutzergruppen, passt du die Inhalte noch besser deiner Kundschaft an. Lege deine eigenen Preise fest und rechne direkt im App-Store ab! Stelle deinen Abonennten auch die Web-Version zur Verfügung um immer flexibel zu bleiben. Du kannst dein eigenes Magazin auf www.yumpu.com nicht nur selbst mit blätterkatalog html5 erstellen und in deinem eigenen Design gestalten, sondern komfortabel unterwegs updaten und dafür sorgen das deine Leser auf dem neuesten Stand bleiben. Abrechnungen können einfach und mobil bedient werden zu jeder Zeit. Auch Abos lassen sich mit Yumpu leichter vermarkten. Es ist die ideale Strategie jedes Publishers. Ohne technische Vorkenntnisse ist es möglich mit blätterkatalog html5, dir online deine Magazine mit deinen eigenen Homepages und Shops mit einzubinden. Jeder kann deine Magazine einfach googeln. 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 zum PDF blättern HTML5!

Mein persönliches Fazit

Natürlich sind bei der Gestaltung die Urheberrechte einzuhalten. Am besten erstellt man selbst Fotos von den angebotenen Produkten und schreibt ein paar eigene Worte dazu. Damit vermeidet man nicht nur Urheberrechtsverletzungen, sondern hebt sich auch noch von anderen ab. Wer gut zeichnen oder mit Grafikprogrammen umgehen kann, sollte dieses Talent nutzen, um seinen Blätterkatalog ganz individuell zu gestalten.

Es mag einfacher sein, die üblichen Produktdaten einfach per Copy und Paste einzufügen, aber wenn man sich von dem Üblichen abheben will, dann ist ein eigener Text wie eine Kurzbeschreibung ansprechender und vermittelt dem Käufer mehr als nur die rein technischen Daten oder einen Beschreibungstext, der so hundertfach im Internet zu finden ist. Die Texte werden von Yumpu.com zudem für eine Volltextsuche automatisch extrahiert.

Kerstin Merber

Willkommen 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. Tade

    Tolle Anleitung Kerstin 🙂 Danke!

    Kommentar absenden
  3. Kerstin Merber

    Freut mich zu hören Tade 🙂

    Kommentar absenden
  4. 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.