Hallo Leute, ich hab ein bischen mit dem Google-Tool "google-web-designer" mich versucht und ich finde das es richtig toll gelungen ist. Was ich aber nicht verstehe ist ich möchte es für meine Shopinterne Bannerwerbung einsetzen und Werbung für mein Forum machen. Bislang habe ich es über den News Contaier gemacht. Jetzt habe ich im GWD ein Werbebanner erstellt, habe den html Code kopiert und z.B. in den Container Zustatzbox 2 unter Quelltext eingefügt. leider kommen diese ganz tollen HTML5 Effekte überhaupt nicht die ich im GWD in der Vorschau gesehen hatte was mach ich falsch? Ich lern schon fleißig html5 und CSS aber für den riesen Code den mir das GWD erstellt hat, reicht es nicht (ich verstehe aber wie und was der html Code anstoesst oder ausführt). Gruß und Dank
post doch mal die anleitung damit man sagen kann was du vielleicht vergessen hast. und wo man das sehen kann.
Hallo Denis, ich habe die dreispalten Version des Shops umgesetzt, ich füge die Zusatzbox 3 auf die rechte Spalte. Dann gehe ich in den ContentManager bearbeite den Content von Zusatzbox 3 in dem ich auf den Quellcode - Button drucke und meinen html (js-Script) einfüge, daß wie folgt aussieht; Code: <!DOCTYPE html> <html> <head data-gwd-animation-mode="proMode"> <link href="gwdpagedeck_style.css" data-version="1" data-exports-type="gwd-pagedeck" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css"> <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script> <meta name="generator" content="Google Web Designer 1.1.2.0814"> <meta name="template" content="Banner 2.0.16"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" id="gwd-lightbox-style"> .gwd-lightbox { overflow: hidden; border: 1px dashed #a0a0a0; } </style> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; } .gwd-page-container { position: relative; width: 100%; height: 100%; } .gwd-page-content { background-color: transparent; -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform-style: preserve-3d; position: absolute; } .gwd-page-wrapper { background-color: rgb(255, 255, 255); position: absolute; -webkit-transform: translateZ(0px); } .gwd-page-size { width: 300px; height: 250px; } .gwd-img-4b6w { position: absolute; width: 300px; left: 0px; opacity: 0; top: 59px; height: 132px; color: rgb(0, 0, 0); } @-webkit-keyframes gwd-gen-7py8gwdanimation_gwd-keyframes { 0% { opacity: 0; top: 59px; height: 132px; color: rgb(0, 0, 0); -webkit-animation-timing-function: linear; } 100% { opacity: 1; top: 0px; height: 120px; color: rgb(0, 0, 0); -webkit-animation-timing-function: linear; } } #page1.gwd-play-animation .gwd-gen-7py8gwdanimation { -webkit-animation: gwd-gen-7py8gwdanimation_gwd-keyframes 1s linear 0s 1 normal forwards; } .gwd-div-hn4u { position: absolute; font-family:'Times New Roman'; text-align: left; left: 70px; opacity: 0; top: 120px; } .gwd-span-uw0b { font-family:'Droid Sans'; font-size: 22px; color: rgb(19, 14, 58); } @-webkit-keyframes gwd-gen-td7vgwdanimation_gwd-keyframes { 0% { opacity: 0; top: 120px; -webkit-animation-timing-function: ease-in-out; } 75.76% { opacity: 1; top: 120px; -webkit-animation-timing-function: linear; } 100% { opacity: 0; top: 120px; -webkit-animation-timing-function: linear; } } #page1.gwd-play-animation .gwd-gen-td7vgwdanimation { -webkit-animation: gwd-gen-td7vgwdanimation_gwd-keyframes 3.3s linear 1s 1 normal forwards; } .gwd-div-yw07 { position: absolute; font-family:'Times New Roman'; text-align: left; color: rgb(0, 0, 0); left: 45px; top: 120px; opacity: 0; } .gwd-span-niz0 { font-family:'Droid Sans'; font-size: 22px; color: rgb(0, 0, 153); } @-webkit-keyframes gwd-gen-0j96gwdanimation_gwd-keyframes { 0% { opacity: 0; -webkit-animation-timing-function: ease-out; } 100% { opacity: 1; -webkit-animation-timing-function: linear; } } #page1.gwd-play-animation .gwd-gen-0j96gwdanimation { -webkit-animation: gwd-gen-0j96gwdanimation_gwd-keyframes 2.2s linear 4.3s 1 normal forwards; } @-webkit-keyframes gwd-empty-animation { 0% { opacity: 0.001; } 100% { opacity: 0; } } .gwd-div-2hb0 { position: absolute; font-family:'Times New Roman'; text-align: left; color: rgb(0, 0, 0); top: 143px; left: 2px; opacity: 0; } .gwd-div-2gfj { text-align: center; } .gwd-span-ehy8 { color: rgb(0, 0, 102); font-family:'Droid Sans'; font-size: 22px; font-weight: bold; background-color: transparent; } .gwd-div-51wi { text-align: center; } .gwd-span-1gjs { font-family:'Droid Sans'; font-size: 22px; color: rgb(0, 0, 102); font-weight: bold; } #page1.gwd-play-animation .event-1-animation { -webkit-animation: gwd-empty-animation 8.2s linear 0s 1 normal forwards; } @-webkit-keyframes gwd-gen-ahbvgwdanimation_gwd-keyframes { 0% { opacity: 0; -webkit-animation-timing-function: ease-in-out; } 100% { opacity: 1; -webkit-animation-timing-function: linear; } } #page1.gwd-play-animation .gwd-gen-ahbvgwdanimation { -webkit-animation: gwd-gen-ahbvgwdanimation_gwd-keyframes 2s linear 6.5s 1 normal forwards; } </style> <script data-source="gwdpage_min.js" data-version="1" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script> <script data-source="gwdpagedeck_min.js" data-version="1" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script> <script data-source="gwddoubleclick_min.js" data-version="1.1" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script> <script data-source="gwdimage_min.js" data-version="1" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script> </head> <body> <gwd-doubleclick id="gwd-ad" polite-load=""> <gwd-metric-configuration></gwd-metric-configuration> <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck"> <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px" style="display: block;"> <div class="gwd-page-content gwd-page-size"> <img class="gwd-img-4b6w gwd-gen-7py8gwdanimation" is="gwd-image" source="assets/banner_logo_MB24.bmp" id="img_banner_mb24"> <div class="gwd-div-hn4u gwd-gen-td7vgwdanimation" id="txt_lust_auf_forum"><span class="gwd-span-uw0b">Lust auf Forum?</span> </div> <div class="gwd-div-yw07 gwd-gen-0j96gwdanimation editable" id="txt_melde_Dich_jetzt_an"><span class="gwd-span-niz0">melde Dich jetzt an...</span> </div> <div class="gwd-div-2hb0 gwd-gen-ahbvgwdanimation" id="txt_in_unserem_modellbauer24_forum"> <div class="gwd-div-2gfj"><span class="gwd-span-ehy8">in unserem Modellbauer24</span> </div> <div class="gwd-div-51wi"><span class="gwd-span-1gjs">Forum</span> </div> </div> <div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="8200"></div> </div> </div> </div> </gwd-doubleclick> <script type="text/javascript" id="gwd-init-code"> (function() { document.body.style.opacity = "0"; var gwdAd = document.getElementById('gwd-ad'); /** * Handles the DOMContentLoaded event. The DOMContentLoaded event is * fired when the document has been completely loaded and parsed. */ function handleDomContentLoaded(event) { // Here are examples of tasks that can be performed in this method: // * Set dynamic values for element attributes. // * Show a progress image to the user before the Ad is shown. } /** * Handles the WebComponentsReady event. This event is fired when all * custom elements have been registered and upgraded. */ function handleWebComponentsReady(event) { document.body.style.opacity = ""; // Start the Ad lifecycle. setTimeout(function() { gwdAd.initAd(); }, 0); } /** * Handles the event that is dispatched after the Ad has been * initialized and before the default page of the Ad is shown. */ function handleAdInitialized(event) { // This marks the end of the polite load phase of the Ad. If a // loading image was shown to the user, this is a good place to // remove it. } window.addEventListener('DOMContentLoaded', handleDomContentLoaded, false); window.addEventListener('WebComponentsReady', handleWebComponentsReady, false); window.addEventListener('adinitialized', handleAdInitialized, false); })(); </script> </body> </html> Anschliessend speichere ich und blende per Template bearbeiten im boxen Bearbeitungsmodus vom Style Edit von AUS auf EIN. Es erscheint dann nur der reine Text, kein fade in fade out Effekt nichts, rein gar nichts. Des woars mit HTML5!
das kann so nciht funktionieren. du kannst nicht noch nen head und body bereich innerhalb einer website haben. du musst da schon bischen mehr machen. alternative quick and dirty methode - pack nen iFrame um den code.
in deinem code ist quasi eine ganze html website incl. allem was man braucht. html gerüst, css codes usw. viel zu viel und so wäre das auch nicht gut für den quellcode des shops da der unnötig aufquellt. das müsstest erst mal alles anpassen um es in eine bestehende seite einzufügen.