Animate Banner HTML5

Animate Banner HTML5

Quelloffen
5 Downloads
Responsive

Version:

99,00 €  *
Dieser Hersteller reagiert sehr schnell auf Supportanfragen
    vierp40573738180
  • 1.0.3
  • 10.04.2019
  • de_DE en_GB
  • von Vierpunkt GmbH
  • 5.4.0 – 5.4.6
    5.5.0 – 5.5.8
Mit dem Animate Banner HTML5 Plugin von der VIERPUNKT GmbH können Sie Ihre "Adobe Animate CC",... mehr

Produktinformationen

Mit dem Animate Banner HTML5 Plugin von der VIERPUNKT GmbH können Sie Ihre "Adobe Animate CC", "Google Web Designer" oder andere mit HTML5 erstellten Banner oder Ads in Shopware Einkaufswelten einsetzen.
Gestalten Sie Ihre Einkaufswelten mit animierten Bannern noch abwechslungsreicher und individueller. Dazu bietet das Plugin Ihnen die Möglichkeit sowohl einzelne HTML5 Banner (als Einkaufswelten Element) einzusetzen oder innerhalb des Shopware Bannersliders (hier können Sie zwischen normalen JPG Bannern und animierte HTML5 Bannern abwechseln) als Slide.

HTML5 Animationstools wie "Adobe Animate CC" oder "Google Web Designer" stellen Ihnen alle HTML5 Banner Daten zur Verfügung, die Sie benötigen. Zur Vorbereitung für Shopware verpacken Sie alle HTML5 Daten in eine ZIP Datei. Apps / Programme wie "Adobe Animate CC" bieten die Möglichkeit direkt eine ZIP-Datei zu exportieren. Über das neue Einkaufswelten Element "Animated Banner" oder im Banner-Slider in Shopware können Sie die ZIP-Datei hochladen - fertig. Den Rest erledigt das Plugin. Der Banner ist sofort in der Einkaufswelt sichtbar.
Hinweis: mit dem Plugin "Animate Banner HTML5" können Sie keine Banner direkt animieren. Das Plugin bietet Ihnen die Möglichkeit, bereits fertig erstellte animierte HTML5 Banner in Shopware Einkaufswelten darzustellen.

Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

Installationsanleitung

Die Installation erfolgt wie gewohnt über den Plugin-Manager. Bitte laden Sie das Backend nach der Installation neu.


Bedienung: Zuerst benötigen Sie eine ZIP-Datei mit einem animierten HTML5 Banner. Wichtig dab ist, dass die Datei nur eine HTML-Datei enthält. Alle verwendeten Bilder müssen in der ZIP-Datei ebenfalls enthalten sein – dies ist standardmäßig der Fall, wenn Sie den Banner mit zum Beispiel „Adobe Animate CC“ erstellt haben. Wir empfehlen einen "responsiven Banner" zu erzeugen, ansonsten müssen Sie in der Einkaufswelten dem Element genug Platz geben, da es sonst zu Darstellungsfehlern kommen kann.


Als Nächstes gehen Sie in die Einkaufswelten und wählen entweder das neue Element „Animated Banner“ oder den „Bannerslider aus“ und legen diesen wie gewohnt in der Einkaufswelt an.


Einzelner Banner: Sollten Sie einen Einzelbanner angelegt haben, können Sie nun in das Feld Ihre ZIP-Datei hochladen. Es ist außerdem möglich einen Link zu hinterlegen. Der Link muss inklusive http/https sein. Dieser Link geht aber nur, wenn Sie in Ihrer HTML-Datei einen sogenannten Click-Tag eingebunden haben. Eine Anleitung dazu finden Sie am weiter unten. Genauso wie bei anderen Medien, können Sie auch animierte Banner über die Medienverwaltung ersetzten.


Erweiterung Bannerslider: Sollten Sie einen Bannerslider angelegt haben, sehen Sie keine Veränderung wie bei dem bisherigem Banner. Es haben sich aber dennoch einige Funktionen geändert. So können Sie nun nicht nur .jpgs und .png sondern auch .ZIP Dateien hochladen. Diese erscheint genauso wie andere Bilder in der Liste und kann auch durch drag and drop in der Position verändert werden. Der Alt-Tag und der Titel der ZIP-Datei haben keine Funktion, es ist aber möglich einen Link zu hinterlegen. Der Link muss, genauso wie bei anderen Bildern, inklusive http/https sein. Dieser Link geht aber nur, wenn Sie in Ihrer HTML-Datei einen sogenannten Click-Tag eingebunden haben. Eine Anleitung dazu finden Sie am weiter unten.

Im Frontend wird nun ein animierter Banner an der von Ihnen eingebundenen Stelle angezeigt – bitte beachten Sie, dass die Animationen beginnen, sobald der Banner geladen ist.


ACHTUNG: Sollten Sie das Plugin deinstallieren und einen animierten Bannerslider verwenden, wird dieser danach keine Bilder mehr anzeigen, bis Sie das Plugin wieder installieren oder den Bannerslider komplett neu anlegen.


Click Tag:

Wenn Sie einen Link in Ihrem Banner benutzen möchten, können Sie einen so genannten click Tag hinzufügen. Die Integration ist je nach Animationstool teilweise unterschiedlich. Im Anschluss finden Sie ein Beispiel für „Adobe Animate CC“:

Fügen Sie in dem “head” Bereich der HTML-Datei

hinzu und ersetzen https://www.google.com mit Ihrem Link)

Anschließend suchen Sie nach Ihrem canvas-Objekt und fügen Sie onclick="javascript:window.open(window.bannerURL)" hinzu, so dass es wie folgt aussieht: <canvas id="canvas" width="1920" height="480" onclick="javascript:window.open(window.bannerURL)"></canvas> Sichern Sie im Anschluss die Datei und erzeugen Sie eine neue Zip-Datei mit allen Bildern und der neuen HTML-DATEI.

Änderungen

Version 1.0.3

Änderung in der Ordnerstruktur

Version 1.0.2

Verhalten bei google Web design Bannern leicht verändert

Version 1.0.1

Bugfix Bilddarstellung

Version 1.0.0

Erstveröffentlichung

Infos zum Hersteller

Vierpunkt GmbH Vierpunkt GmbH Shopware Business Partner Shopware Business Partner 3 Zertifizierungen Developer SW5 1 Developer Advanced SW5 1 Template Designer SW5 0 Template Developer SW5 1 Template Developer SW6 Template Designer SW6 18 Erweiterungen
1 0 0
5 Ø-Bewertung

Version:

99,00 €  *

Zuletzt angesehen